Composed Chart

1"use client";
2 
3import { ParentSize } from "@visx/responsive";
4import type { Transition } from "motion/react";
5import {
6  Children,
7  isValidElement,
8  type ReactElement,
9  type ReactNode,
10  useMemo,
11  useRef,
12} from "react";
13import { cn } from "@/lib/utils";
14import { Area, type AreaProps } from "./area";
15import type { LineConfig, Margin } from "./chart-context";
16import type { ChartPhase } from "./chart-phase";
17import { Line, type LineProps } from "./line";
18import { SeriesBar, type SeriesBarProps } from "./series-bar";
19import { TimeSeriesChartInner } from "./time-series-chart-shell";
20 
21export interface ComposedChartProps {
22  /** Data array — each row typically has a date and multiple numeric series */
23  data: Record<string, unknown>[];
24  /** Key for the x-axis (time). Default: "date" */
25  xDataKey?: string;
26  margin?: Partial<Margin>;
27  animationDuration?: number;
28  animationEasing?: string;
29  enterTransition?: Transition;
30  /** Signature of motion URL state — triggers reveal replay when it changes. */
31  revealSignature?: string;
32  aspectRatio?: string;
33  className?: string;
34  children: ReactNode;
35  /** Target bar width in px (Recharts-style `barSize`). */
36  barSize?: number;
37  /** Maximum bar width in px (`maxBarSize`). */
38  maxBarSize?: number;
39  /** Gap between grouped `SeriesBar` series in px. Default: 4 */
40  barGap?: number;
41  /** Stack `SeriesBar` segments in child order at each x (line/area are not stacked). */
42  stacked?: boolean;
43  /** Gap in px between stacked segments. Default: 0 */
44  stackGap?: number;
45  onPhaseChange?: (phase: ChartPhase) => void;
46}
47 
48const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
49 
50function getChildComponentName(child: ReactElement): string {
51  const childType = child.type as { displayName?: string; name?: string };
52  return typeof child.type === "function"
53    ? childType.displayName || childType.name || ""
54    : "";
55}
56 
57function upsertLineConfig(lines: LineConfig[], config: LineConfig): void {
58  const index = lines.findIndex((line) => line.dataKey === config.dataKey);
59  if (index === -1) {
60    lines.push(config);
61    return;
62  }
63  // Area+Line pairs share a dataKey — keep the later config (Line over Area).
64  lines[index] = config;
65}
66 
67function tryAppendSeriesBar(
68  child: ReactElement,
69  lines: LineConfig[],
70  barDataKeys: string[]
71): boolean {
72  const name = getChildComponentName(child);
73  if (!(child.type === SeriesBar || name === "SeriesBar")) {
74    return false;
75  }
76// … truncated