Area 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 ReactNode,
10  useCallback,
11  useMemo,
12  useRef,
13  useState,
14} from "react";
15import { cn } from "@/lib/utils";
16import { Area, type AreaProps } from "./area";
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 { PatternArea } from "./pattern-area";
27import { TimeSeriesChartInner } from "./time-series-chart-shell";
28 
29export interface AreaChartProps {
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  /** Motion enter transition (spring or cubic-bezier tween). */
41  enterTransition?: Transition;
42  /** Signature of motion URL state — triggers reveal replay when it changes. */
43  revealSignature?: string;
44  /** Aspect ratio as "width / height". Default: "2 / 1" */
45  aspectRatio?: string;
46  /** Additional class name for the container */
47  className?: string;
48  /** Loading vs ready — drives chart phase and loading chrome. Default: `"ready"`. */
49  status?: ChartStatus;
50  /** Centered shimmer label while loading. */
51  loadingLabel?: string;
52  /** Animate y-domain over this duration (ms) on status transitions. Default: 500. */
53  yDomainTweenDuration?: number;
54  /** Animate y-domain when status or target domain changes. Default: true */
55  yDomainTween?: boolean;
56  /** Visible x-domain for brush zoom. */
57  xDomain?: [Date, Date];
58  /** Full dataset length for x-scale padding when `xDomain` is set. */
59  xDomainSlotCount?: number;
60  /** Tween y-domain when brush changes the visible x-range. Default: false */
61  tweenYDomainOnXDomainChange?: boolean;
62  /** Inline container styles (e.g. fixed height for brush strip). */
63  style?: CSSProperties;
64  /** Fires when the internal chart phase changes (e.g. OG capture readiness). */
65  onPhaseChange?: (phase: ChartPhase) => void;
66// … truncated