Scatter Chart

1"use client";
2 
3import type { Transition } from "motion/react";
4import {
5  Children,
6  isValidElement,
7  type ReactNode,
8  useMemo,
9  useRef,
10} from "react";
11import useMeasure from "react-use-measure";
12import { cn } from "@/lib/utils";
13import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation";
14import {
15  defaultScatterColors,
16  type LineConfig,
17  type Margin,
18} from "./chart-context";
19import type { ChartPhase } from "./chart-phase";
20import { Scatter, type ScatterProps } from "./scatter";
21import { ScatterChartInner } from "./scatter-chart-shell";
22 
23export interface ScatterChartProps {
24  /** Data array — each item should have a date field and numeric values */
25  data: Record<string, unknown>[];
26  /** Key in data for the x-axis (date). Default: "date" */
27  xDataKey?: string;
28  /** Chart margins */
29  margin?: Partial<Margin>;
30  /** Animation duration in milliseconds. Default: 1100 */
31  animationDuration?: number;
32  /** CSS easing for clip-reveal. Default: cubic-bezier(0.85, 0, 0.15, 1) */
33  animationEasing?: string;
34  enterTransition?: Transition;
35  revealSignature?: string;
36  /** Aspect ratio as "width / height". Default: "2 / 1" */
37  aspectRatio?: string;
38  /** Additional class name for the container */
39  className?: string;
40  /** Child components (Scatter, Grid, ChartTooltip, XAxis, etc.) */
41  children: ReactNode;
42  onPhaseChange?: (phase: ChartPhase) => void;
43}
44 
45const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
46 
47function extractScatterConfigs(children: ReactNode): LineConfig[] {
48  const configs: LineConfig[] = [];
49  let seriesIndex = 0;
50 
51  Children.forEach(children, (child) => {
52    if (!isValidElement(child)) {
53      return;
54    }
55 
56    const childType = child.type as {
57      displayName?: string;
58      name?: string;
59    };
60    const componentName =
61      typeof child.type === "function"
62        ? childType.displayName || childType.name || ""
63        : "";
64 
65    const props = child.props as ScatterProps | undefined;
66    const isScatterComponent =
67      componentName === "Scatter" ||
68      child.type === Scatter ||
69      (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
70 
71    if (isScatterComponent && props?.dataKey) {
72      const seriesColor =
73        defaultScatterColors[seriesIndex % defaultScatterColors.length] ??
74        defaultScatterColors[0];
75      configs.push({
76        dataKey: props.dataKey,
77        stroke: props.fill || props.stroke || seriesColor,
78        strokeWidth: props.radius ?? 5,
79// … truncated