"use client"; import { motion } from "motion/react"; import * as React from "react"; import type { TooltipValueType } from "recharts"; import * as RechartsPrimitive from "recharts"; import { cn } from "@/lib/utils"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; export type ChartConfig = Record< string, { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) >; function getPayloadConfigFromPayload( config: ChartConfig, payload: unknown, key: string ) { if (typeof payload !== "object" || payload === null) { return undefined; } const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined; let configLabelKey: string = key; if ( key in payload && typeof payload[key as keyof typeof payload] === "string" ) { configLabelKey = payload[key as keyof typeof payload] as string; } else if ( payloadPayload && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === "string" ) { configLabelKey = payloadPayload[ key as keyof typeof payloadPayload ] as string; } return configLabelKey in config ? config[configLabelKey] : config[key]; } function getChartConfigKey(config: ChartConfig, payload: unknown, key: string) { if (typeof payload !== "object" || payload === null) { return key; } const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined; let configLabelKey: string = key; if ( key in payload && typeof payload[key as keyof typeof payload] === "string" ) { configLabelKey = payload[key as keyof typeof payload] as string; } else if ( payloadPayload && key in payloadPayload && typeof payloadPayload[key as keyof typeof payloadPayload] === "string" ) { configLabelKey = payloadPayload[ key as keyof typeof payloadPayload ] as string; } if (configLabelKey in config) { return configLabelKey; } return key in config ? key : key; } function normalizeChartField( value: string | number | ((obj: unknown) => unknown) | undefined ) { return typeof value === "function" ? undefined : value; } function getChartSeriesKey(item: unknown, nameKey?: string) { if (typeof item !== "object" || item === null) { return nameKey ?? "value"; } const record = item as { dataKey?: string | number | ((obj: unknown) => unknown); name?: string | number; value?: unknown; payload?: object; }; if (nameKey) { const payloadRecord = record.payload && typeof record.payload === "object" ? (record.payload as Record) : (record as Record); if ( nameKey in payloadRecord && payloadRecord[nameKey] != null && payloadRecord[nameKey] !== "" ) { return String(payloadRecord[nameKey]); } } const dataKey = normalizeChartField(record.dataKey); const value = typeof record.value === "string" || typeof record.value === "number" ? record.value : undefined; return String(dataKey ?? record.name ?? value ?? "value"); } function getChartLegendLabel( item: unknown, itemConfig: ChartConfig[string] | undefined ) { if (typeof item !== "object" || item === null) { return null; } const record = item as { dataKey?: string | number | ((obj: unknown) => unknown); name?: string | number; value?: unknown; }; if (itemConfig?.label != null) { return itemConfig.label; } if (record.name != null) { return String(record.name); } if (typeof record.value === "string") { return record.value; } if (record.dataKey != null && typeof record.dataKey !== "function") { return String(record.dataKey); } return null; } function getChartLegendSwatchColor( configKey: string, itemConfig: ChartConfig[string] | undefined, fallbackColor?: string ) { if (itemConfig) { return `var(--color-${configKey})`; } return fallbackColor; } const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:#1d4ed8] [--ic-chart-2:#7dd3fc] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] [--chart-1:var(--ic-chart-1)] [--chart-2:var(--ic-chart-2)] [--chart-3:var(--ic-chart-3)] [--chart-4:var(--ic-chart-4)] [--chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:#60a5fa] dark:[--ic-chart-2:#bfdbfe] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; /** Calm easing — no spring overshoot on data surfaces. */ const chartEase = [0.22, 1, 0.36, 1] as const; const chartSurfaceFade = { duration: 0.22, ease: chartEase, }; const chartTooltipFade = { duration: 0.14, ease: chartEase, }; const CHART_SERIES_ANIMATION_DURATION = 480; const CHART_SERIES_ANIMATION_EASING = "ease-out" as const; const CHART_SERIES_STAGGER_MS = 32; function getChartAnimationTimeoutMs(seriesCount: number) { const safeSeriesCount = Math.max(1, seriesCount); return ( CHART_SERIES_ANIMATION_DURATION + CHART_SERIES_STAGGER_MS * Math.max(0, safeSeriesCount - 1) ); } const MotionDiv = motion.div; type MotionSafeDivProps = Omit< React.HTMLAttributes, | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" >; type TooltipNameType = number | string; const CHART_RESIZE_DEBOUNCE_MS = 150; type ChartContextProps = { config: ChartConfig; chartAnimationActive: boolean; }; const ChartContext = React.createContext(null); function useChart() { const context = React.useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } function ChartStyle({ id, config }: { id: string; config: ChartConfig }) { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme ?? config.color ); if (!colorConfig.length) { return null; } return (