4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2c30,"use client"; import { GridColumns, GridRows } from "@visx/grid"; import { motion } from "motion/react"; import { useId } from "react"; import { chartCssVars, useChartStable, useYScale } from "./chart-context"; import { useGridShimmer } from "./use-grid-shimmer"; import { isLoadingChromePhase, isLoadingGridChromePhase, } from "./y-domain-utils"; const DEFAULT_SHIMMER_LENGTH_PX = 140; const DEFAULT_SHIMMER_SPEED = 1; const DEFAULT_SHIMMER_STROKE = "color-mix(in oklch, var(--foreground) 68%, transparent)"; export interface GridProps { /** Show horizontal grid lines. Default: true */ horizontal?: boolean; /** Show vertical grid lines. Default: false */ vertical?: boolean; /** Number of horizontal grid lines. Default: 5 */ numTicksRows?: number; /** Number of vertical grid lines. Default: 10 */ numTicksColumns?: number; /** Explicit tick values for horizontal grid lines. Overrides numTicksRows. */ rowTickValues?: number[]; /** Grid line stroke color. Default: var(--chart-grid) */ stroke?: string; /** Grid stroke while loading chrome is active. Falls back to `stroke`. */ loadingStroke?: string; /** Grid line stroke opacity. Default: 1 */ strokeOpacity?: number; /** Grid line stroke width. Default: 1 */ strokeWidth?: number; /** Grid line dash array. Default: "4,4" for dashed lines */ strokeDasharray?: string; /** Horizontal row values rendered with alternate styling (e.g. zero baseline). */ highlightRowValues?: number[]; /** Stroke for highlighted rows. Default: var(--chart-foreground-muted) */ highlightRowStroke?: string; /** Stroke opacity for highlighted rows. Default: 1 */ highlightRowStrokeOpacity?: number; /** Stroke width for highlighted rows. Default: 1 */ highlightRowStrokeWidth?: number; /** Dash array for highlighted rows. Default: solid line */ highlightRowStrokeDasharray?: string; /** Enable horizontal fade effect on grid rows (fades at left/right). Default: true */ fadeHorizontal?: boolean; /** Enable vertical fade effect on grid columns (fades at top/bottom). Default: false */ fadeVertical?: boolean; /** Omit the first and last horizontal grid lines. Default: false */ hideHorizontalEdgeLines?: boolean; /** Omit the first and last vertical grid lines. Default: false */ hideVerticalEdgeLines?: boolean; /** Y-scale for horizontal grid lines. Default: primary (`"left"`) axis. */ yAxisId?: string | number; /** Animate a shimmer band across horizontal grid lines. Default: false */ shimmer?: boolean; /** Shimmer band stroke (color and opacity via color-mix or oklch alpha). */ shimmerStroke?: string; /** Shimmer band width in pixels. Default: 140 */ shimmerLength?: number; /** Shimmer speed multiplier (higher = faster). Default: 1 */ shimmerSpeed?: number; /** Match loop timing to the loading line pulse (cycle + inter-loop pause). */ shimmerSync?: boolean; } function hideEdgeTicks(ticks: T[], hideEdgeLines: boolean): T[] { if (!hideEdgeLines || ticks.length <= 2) { return ticks; } return ticks.slice(1, -1); } function resolveRowTickValues(options: { hideHorizontalEdgeLines: boolean; numTicksRows: number; rowTickValues?: number[]; yScale: { ticks?: (count: number) => number[] }; }): number[] | undefined { const { hideHorizontalEdgeLines, numTicksRows, rowTickValues, yScale } = options; const ticks = rowTickValues ?? (yScale.ticks ? yScale.ticks(numTicksRows) : []); const filtered = hideEdgeTicks(ticks, hideHorizontalEdgeLines); if (filtered === ticks && !rowTickValues && !hideHorizontalEdgeLines) { return undefined; } return filtered.length > 0 ? filtered : undefined; } // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: grid fade masks and shimmer share one layer tree export function Grid({ horizontal = true, vertical = false, numTicksRows = 5, numTicksColumns = 10, rowTickValues, stroke = chartCssVars.grid, loadingStroke, strokeOpacity = 1, strokeWidth = 1, strokeDasharray = "4,4", highlightRowValues, highlightRowStroke = chartCssVars.foregroundMuted, highlightRowStrokeOpacity = 1, highlightRowStrokeWidth = 1, highlightRowStrokeDasharray = "0", fadeHorizontal = true, fadeVertical = false, hideHorizontalEdgeLines = false, hideVerticalEdgeLines = false, yAxisId, shimmer = false, shimmerStroke = DEFAULT_SHIMMER_STROKE, shimmerLength = DEFAULT_SHIMMER_LENGTH_PX, shimmerSpeed = DEFAULT_SHIMMER_SPEED, shimmerSync = false, }: GridProps) { const { xScale, innerWidth, innerHeight, orientation, barScale, chartPhase } = useChartStable(); const yScale = useYScale(yAxisId); const shimmerActive = shimmer && isLoadingChromePhase(chartPhase); const gridStroke = isLoadingGridChromePhase(chartPhase) && loadingStroke != null ? loadingStroke : stroke; const { shimmerEnabled, shimmerTransform } = useGridShimmer({ innerWidth, shimmer, shimmerLength, shimmerSpeed, shimmerSync, active: shimmerActive, }); // For bar charts, determine which scale to use for grid lines // Horizontal bar charts: vertical grid should use yScale (value scale) // Vertical bar charts: horizontal grid uses yScale (value scale) const isHorizontalBarChart = orientation === "horizontal" && barScale; // For vertical grid lines in horizontal bar charts, use yScale (the value scale) // For time-based charts, use xScale const columnScale = isHorizontalBarChart ? yScale : xScale; const rowTickValuesResolved = resolveRowTickValues({ hideHorizontalEdgeLines, numTicksRows, rowTickValues, yScale, }); const columnTickValuesResolved = vertical && columnScale && typeof columnScale === "function" && hideVerticalEdgeLines ? (() => { const ticks = columnScale.ticks?.(numTicksColumns) ?? []; const filtered = hideEdgeTicks(ticks, true); return filtered.length > 0 ? filtered : undefined; })() : undefined; const uniqueId = useId(); // Horizontal fade mask (for grid rows - fades left/right) const hMaskId = `grid-rows-fade-${uniqueId}`; const hGradientId = `${hMaskId}-gradient`; const shimmerGradientId = `grid-shimmer-${uniqueId}`; // Vertical fade mask (for grid columns - fades top/bottom) const vMaskId = `grid-cols-fade-${uniqueId}`; const vGradientId = `${vMaskId}-gradient`; const horizontalFadeMask = fadeHorizontal ? `url(#${hMaskId})` : undefined; return ( {/* Gradient mask for horizontal grid lines - fades at left/right */} {horizontal && fadeHorizontal && ( )} {horizontal && shimmerEnabled ? ( ) : null} {/* Gradient mask for vertical grid lines - fades at top/bottom */} {vertical && fadeVertical && ( )} {horizontal && ( {shimmerEnabled ? ( ) : null} )} {horizontal && highlightRowValues && highlightRowValues.length > 0 ? ( {highlightRowValues.map((value) => { const y = yScale(value); if (y == null || !Number.isFinite(y)) { return null; } return ( ); })} ) : null} {vertical && columnScale && typeof columnScale === "function" && ( )} ); } Grid.displayName = "Grid"; export default Grid; 51:Ta8a,"use client"; import { animate, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { useEffect } from "react"; import { LINE_LOADING_LOOP_PAUSE_MS, LINE_LOADING_PULSE_CYCLE_S, LINE_LOADING_PULSE_EASE, } from "./line-loading-timing"; export interface UseGridShimmerOptions { innerWidth: number; shimmer: boolean; shimmerLength: number; shimmerSpeed: number; shimmerSync: boolean; /** When false, shimmer animation is paused (e.g. during exit transition). */ active: boolean; /** Run a single synced sweep (loading → ready handoff). */ oneShot?: boolean; } export function useGridShimmer({ innerWidth, shimmer, shimmerLength, shimmerSpeed, shimmerSync, active, oneShot = false, }: UseGridShimmerOptions) { const progress = useMotionValue(0); const reducedMotion = useReducedMotion(); const shimmerCycleS = LINE_LOADING_PULSE_CYCLE_S / Math.max(shimmerSpeed, 0.1); const shimmerEnabled = active && shimmer && reducedMotion !== true && innerWidth > 0; useEffect(() => { if (!shimmerEnabled) { return; } let cancelled = false; let timeoutId: number | undefined; let controls: ReturnType | undefined; const runSyncedCycle = () => { if (cancelled) { return; } progress.set(0); controls = animate(progress, 1, { duration: shimmerCycleS, ease: [...LINE_LOADING_PULSE_EASE], onComplete: () => { if (cancelled) { return; } timeoutId = window.setTimeout( runSyncedCycle, LINE_LOADING_LOOP_PAUSE_MS ); }, }); }; if (shimmerSync && oneShot) { progress.set(0); controls = animate(progress, 1, { duration: shimmerCycleS / 2, ease: [...LINE_LOADING_PULSE_EASE], }); return () => controls?.stop(); } if (shimmerSync) { runSyncedCycle(); return () => { cancelled = true; controls?.stop(); if (timeoutId !== undefined) { window.clearTimeout(timeoutId); } }; } progress.set(0); controls = animate(progress, 1, { duration: shimmerCycleS, repeat: Number.POSITIVE_INFINITY, ease: [...LINE_LOADING_PULSE_EASE], }); return () => controls?.stop(); }, [oneShot, progress, shimmerCycleS, shimmerEnabled, shimmerSync]); const shimmerX = useTransform( progress, (value) => -shimmerLength + value * (innerWidth + shimmerLength * 2) ); const shimmerTransform = useTransform(shimmerX, (x) => `translate(${x}, 0)`); return { shimmerEnabled, shimmerTransform }; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@visx/grid@4.0.1-alpha.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40visx%2Fgrid","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@visx/grid@4.0.1-alpha.0"}]]}]}]]}],["$","$L4e",null,{"namespace":"@catalogs","registryDependencies":["@bklit/chart-context"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/charts/grid.tsx","content":"$50","type":"registry:component","target":"components/charts/grid.tsx"},{"path":"src/charts/use-grid-shimmer.ts","content":"$51","type":"registry:component","target":"components/charts/use-grid-shimmer.ts"}],"className":"h-[70svh] min-h-80"}]]}]