Chart Context

1"use client";
2 
3import type { scaleBand, scaleLinear, scaleTime } from "@visx/scale";
4 
5type ScaleLinear<Output, _Input = number> = ReturnType<
6  typeof scaleLinear<Output>
7>;
8type ScaleTime<Output, _Input = Date | number> = ReturnType<
9  typeof scaleTime<Output>
10>;
11type ScaleBand<Domain extends { toString(): string }> = ReturnType<
12  typeof scaleBand<Domain>
13>;
14 
15import type { Transition } from "motion/react";
16import {
17  createContext,
18  type Dispatch,
19  type ReactNode,
20  type RefObject,
21  type SetStateAction,
22  useContext,
23  useMemo,
24} from "react";
25import type { ChartPhase, ChartStatus } from "./chart-phase";
26import type { ReferenceAreaConfig } from "./reference-area-config";
27import type { ChartSelection } from "./use-chart-interaction";
28import { DEFAULT_Y_AXIS_ID } from "./y-axis-scales";
29import type { YDomain } from "./y-domain-utils";
30 
31// CSS variable references for theming
32export const chartCssVars = {
33  background: "var(--chart-background)",
34  foreground: "var(--chart-foreground)",
35  foregroundMuted: "var(--chart-foreground-muted)",
36  label: "var(--chart-label)",
37  linePrimary: "var(--chart-line-primary)",
38  lineSecondary: "var(--chart-line-secondary)",
39  crosshair: "var(--chart-crosshair)",
40  grid: "var(--chart-grid)",
41  indicatorColor: "var(--chart-indicator-color)",
42  indicatorSecondaryColor: "var(--chart-indicator-secondary-color)",
43  markerBackground: "var(--chart-marker-background)",
44  markerBorder: "var(--chart-marker-border)",
45  markerForeground: "var(--chart-marker-foreground)",
46  badgeBackground: "var(--chart-marker-badge-background)",
47  badgeForeground: "var(--chart-marker-badge-foreground)",
48  segmentBackground: "var(--chart-segment-background)",
49  segmentLine: "var(--chart-segment-line)",
50  brushBorder: "var(--chart-brush-border)",
51  tooltipBackground: "var(--chart-tooltip-background)",
52};
53 
54/** Default scatter series colors from the chart palette (`--chart-1` … `--chart-5`). */
55export const defaultScatterColors = [
56  "var(--chart-1)",
57  "var(--chart-2)",
58  "var(--chart-3)",
59  "var(--chart-4)",
60  "var(--chart-5)",
61] as const;
62 
63export interface Margin {
64  top: number;
65  right: number;
66  bottom: number;
67  left: number;
68}
69 
70export interface TooltipData {
71  /** The data point being hovered */
72  point: Record<string, unknown>;
73  /** Index in the data array */
74  index: number;
75  /** X position in pixels (relative to chart area) */
76  x: number;
77  /** Y positions for each line, keyed by dataKey */
78  yPositions: Record<string, number>;
79// … truncated