Chart Grid

1"use client";
2 
3import { GridColumns, GridRows } from "@visx/grid";
4import { motion } from "motion/react";
5import { useId } from "react";
6import { chartCssVars, useChartStable, useYScale } from "./chart-context";
7import { useGridShimmer } from "./use-grid-shimmer";
8import {
9  isLoadingChromePhase,
10  isLoadingGridChromePhase,
11} from "./y-domain-utils";
12 
13const DEFAULT_SHIMMER_LENGTH_PX = 140;
14const DEFAULT_SHIMMER_SPEED = 1;
15const DEFAULT_SHIMMER_STROKE =
16  "color-mix(in oklch, var(--foreground) 68%, transparent)";
17 
18export interface GridProps {
19  /** Show horizontal grid lines. Default: true */
20  horizontal?: boolean;
21  /** Show vertical grid lines. Default: false */
22  vertical?: boolean;
23  /** Number of horizontal grid lines. Default: 5 */
24  numTicksRows?: number;
25  /** Number of vertical grid lines. Default: 10 */
26  numTicksColumns?: number;
27  /** Explicit tick values for horizontal grid lines. Overrides numTicksRows. */
28  rowTickValues?: number[];
29  /** Grid line stroke color. Default: var(--chart-grid) */
30  stroke?: string;
31  /** Grid stroke while loading chrome is active. Falls back to `stroke`. */
32  loadingStroke?: string;
33  /** Grid line stroke opacity. Default: 1 */
34  strokeOpacity?: number;
35  /** Grid line stroke width. Default: 1 */
36  strokeWidth?: number;
37  /** Grid line dash array. Default: "4,4" for dashed lines */
38  strokeDasharray?: string;
39  /** Horizontal row values rendered with alternate styling (e.g. zero baseline). */
40  highlightRowValues?: number[];
41  /** Stroke for highlighted rows. Default: var(--chart-foreground-muted) */
42  highlightRowStroke?: string;
43  /** Stroke opacity for highlighted rows. Default: 1 */
44  highlightRowStrokeOpacity?: number;
45  /** Stroke width for highlighted rows. Default: 1 */
46  highlightRowStrokeWidth?: number;
47  /** Dash array for highlighted rows. Default: solid line */
48  highlightRowStrokeDasharray?: string;
49  /** Enable horizontal fade effect on grid rows (fades at left/right). Default: true */
50  fadeHorizontal?: boolean;
51  /** Enable vertical fade effect on grid columns (fades at top/bottom). Default: false */
52  fadeVertical?: boolean;
53  /** Omit the first and last horizontal grid lines. Default: false */
54  hideHorizontalEdgeLines?: boolean;
55  /** Omit the first and last vertical grid lines. Default: false */
56  hideVerticalEdgeLines?: boolean;
57  /** Y-scale for horizontal grid lines. Default: primary (`"left"`) axis. */
58  yAxisId?: string | number;
59// … truncated