Line Chart

1"use client";
2 
3import { ParentSize } from "@visx/responsive";
4import type { Transition } from "motion/react";
5import {
6  Children,
7  type CSSProperties,
8  isValidElement,
9  type ReactElement,
10  type ReactNode,
11  useCallback,
12  useMemo,
13  useRef,
14  useState,
15} from "react";
16import { cn } from "@/lib/utils";
17import type { LineConfig, Margin } from "./chart-context";
18import { ChartLoadingLabel } from "./chart-loading-label";
19import {
20  type ChartPhase,
21  type ChartStatus,
22  DEFAULT_CHART_STATUS,
23  DEFAULT_Y_DOMAIN_TWEEN_MS,
24  resolveRestingChartPhase,
25} from "./chart-phase";
26import { Line, type LineProps } from "./line";
27import { TimeSeriesChartInner } from "./time-series-chart-shell";
28 
29export interface LineChartProps {
30  /** Data array - each item should have a date field and numeric values */
31  data: Record<string, unknown>[];
32  /** Key in data for the x-axis (date). Default: "date" */
33  xDataKey?: string;
34  /** Chart margins */
35  margin?: Partial<Margin>;
36  /** Animation duration in milliseconds. Default: 1100 */
37  animationDuration?: number;
38  /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
39  animationEasing?: string;
40  enterTransition?: Transition;
41  revealSignature?: string;
42  /** Aspect ratio as "width / height". Default: "2 / 1". Omit to fill a sized parent. */
43  aspectRatio?: string;
44  /** Additional class name for the container */
45  className?: string;
46  /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
47  status?: ChartStatus;
48  /** Centered shimmer label while loading. */
49  loadingLabel?: string;
50  /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
51  yDomainTweenDuration?: number;
52  /** Animate y-domain when status or target domain changes. Default: true */
53  yDomainTween?: boolean;
54  /** Visible x-domain for brush zoom. */
55  xDomain?: [Date, Date];
56  /** Full dataset length for x-scale padding when `xDomain` is set. */
57  xDomainSlotCount?: number;
58  /** Tween y-domain when brush changes the visible x-range. Default: false */
59  tweenYDomainOnXDomainChange?: boolean;
60  /** Inline container styles (e.g. fixed height for brush strip). */
61  style?: CSSProperties;
62  /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
63  onPhaseChange?: (phase: ChartPhase) => void;
64  /** Child components (Line, Grid, ChartTooltip, etc.) */
65  children: ReactNode;
66}
67 
68const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
69 
70// … truncated