"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; const VIEWBOX_W = 640; const VIEWBOX_H = 220; const PAD_X = 0; const PAD_Y_TOP = 24; const PAD_Y_BOTTOM = 12; const LINE_WIDTH = 2; const CORNER_RADIUS = 2.5; const TRANSITION = "200ms cubic-bezier(0.16, 1, 0.3, 1)"; const TOOLTIP_SHADOW = [ "0 0 0 1px rgba(0, 0, 0, 0.04)", "0 1px 2px rgba(0, 0, 0, 0.04)", "0 4px 16px -4px rgba(0, 0, 0, 0.12)", "0 12px 32px -8px rgba(0, 0, 0, 0.08)", ].join(", "); const DOT_SHADOW = "0 0 0 2px #FFF, 0 0 8px 2px rgba(0, 0, 0, 0.12)"; function buildRoundedPath( pts: Array<{ x: number; y: number }>, radius: number, ): string { if (pts.length === 0) return ""; const f = (n: number) => n.toFixed(3); if (pts.length === 1) return `M${f(pts[0].x)} ${f(pts[0].y)}`; let d = `M${f(pts[0].x)} ${f(pts[0].y)}`; for (let i = 1; i < pts.length - 1; i++) { const prev = pts[i - 1]; const curr = pts[i]; const next = pts[i + 1]; const inDx = curr.x - prev.x; const inDy = curr.y - prev.y; const inLen = Math.hypot(inDx, inDy) || 1; const outDx = next.x - curr.x; const outDy = next.y - curr.y; const outLen = Math.hypot(outDx, outDy) || 1; const r = Math.min(radius, inLen / 2, outLen / 2); const bx = curr.x - (inDx / inLen) * r; const by = curr.y - (inDy / inLen) * r; const ax = curr.x + (outDx / outLen) * r; const ay = curr.y + (outDy / outLen) * r; d += ` L${f(bx)} ${f(by)} Q${f(curr.x)} ${f(curr.y)} ${f(ax)} ${f(ay)}`; } const last = pts[pts.length - 1]; d += ` L${f(last.x)} ${f(last.y)}`; return d; } export interface ChartProps { /** Numeric values to plot — one segment per pair of consecutive points. */ data: number[]; /** Optional label for each data point — shown at the top of the tooltip card. */ labels?: string[]; /** Series name shown next to the indicator dot in the tooltip. */ name?: string; /** Line + dot color as a hex string (e.g. `"#0090FD"`). Default `"#0090FD"`. */ color?: string; /** Maximum chart width in px. The chart preserves a 640:220 aspect ratio. Default `640`. */ width?: number; /** Format the tooltip value. Receives the value and its index. */ formatValue?: (value: number, index: number) => React.ReactNode; /** Index of the active point on initial render. Defaults to the last point. */ defaultIndex?: number; /** Show X-axis tick labels at the bottom. Requires `labels`. Default `true`. */ showXAxis?: boolean; /** Reveal the line + fill in color from left to the cursor (gray before, color after). Default `false`. */ reveal?: boolean; /** Show the gray gradient fill under the line. Default `true`. */ showFill?: boolean; /** Show the colored dot at the active data point. Default `true`. */ showDot?: boolean; /** Smoothly animate the cursor, dot, and tooltip when the active point changes. Default `true`. */ animated?: boolean; /** Target number of X-axis ticks. Default `6`. */ tickCount?: number; /** Additional class names on the root container. */ className?: string; } export function Chart({ data, labels, name, color = "#0090FD", width = 640, formatValue = (v) => v.toLocaleString(), defaultIndex, showXAxis = true, tickCount = 6, reveal = false, showFill = true, showDot = true, animated = true, className, }: ChartProps) { const transition = animated ? TRANSITION : "0ms"; const reactId = React.useId(); const grayFillId = `${reactId}-gf`; const clipId = `${reactId}-clip`; const root = React.useRef(null); const [activeIndex, setActiveIndex] = React.useState( defaultIndex ?? Math.max(0, data.length - 1), ); const [containerWidth, setContainerWidth] = React.useState(width); React.useEffect(() => { if (!root.current) return; const ro = new ResizeObserver((entries) => { const w = entries[0]?.contentRect.width; if (w) setContainerWidth(w); }); ro.observe(root.current); return () => ro.disconnect(); }, []); const points = React.useMemo(() => { const n = data.length; if (n === 0) return []; const minV = Math.min(...data); const maxV = Math.max(...data); const range = maxV - minV || 1; const innerW = VIEWBOX_W - 2 * PAD_X; const innerH = VIEWBOX_H - PAD_Y_TOP - PAD_Y_BOTTOM; return data.map((value, i) => ({ value, index: i, x: PAD_X + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW), y: PAD_Y_TOP + (1 - (value - minV) / range) * innerH, })); }, [data]); const { strokePath, fillPath } = React.useMemo(() => { if (points.length === 0) return { strokePath: "", fillPath: "" }; const stroke = buildRoundedPath(points, CORNER_RADIUS); const last = points[points.length - 1]; const first = points[0]; const baseY = VIEWBOX_H - PAD_Y_BOTTOM; const fill = `${stroke} L${last.x.toFixed(3)} ${baseY} L${first.x.toFixed(3)} ${baseY} Z`; return { strokePath: stroke, fillPath: fill }; }, [points]); const active = points[Math.min(activeIndex, points.length - 1)] ?? points[0]; const activeXPct = active ? active.x / VIEWBOX_W : 0; const activeYPct = active ? active.y / VIEWBOX_H : 0; function onMove(e: React.MouseEvent) { if (!root.current || points.length === 0) return; const rect = root.current.getBoundingClientRect(); const rel = (e.clientX - rect.left) / rect.width; const innerLeft = PAD_X / VIEWBOX_W; const innerRight = (VIEWBOX_W - PAD_X) / VIEWBOX_W; const t = (rel - innerLeft) / (innerRight - innerLeft); const idx = Math.round(t * (points.length - 1)); setActiveIndex(Math.max(0, Math.min(points.length - 1, idx))); } const axisVisible = showXAxis && !!labels && labels.length > 0; const tickIndices = React.useMemo(() => { if (!axisVisible) return []; const n = points.length; // Estimate label width ~80px and require min gap so labels don't overlap. const maxFit = Math.max(2, Math.floor(containerWidth / 80)); const count = Math.min(tickCount, maxFit, n); if (count <= 1) return [0]; return Array.from({ length: count }, (_, i) => Math.round((i * (n - 1)) / (count - 1)), ); }, [axisVisible, points.length, tickCount, containerWidth]); if (points.length === 0 || !active) return null; return (

{(() => { const cursorPx = activeXPct * containerWidth; const containerHeight = (containerWidth * VIEWBOX_H) / VIEWBOX_W; const cursorYpx = activeYPct * containerHeight; const tooltipOnLeft = activeXPct > 0.5; return ( <>

{showDot && (

)}

{labels?.[active.index] && (

{labels[active.index]}

)}

{name && ( {name} )} {formatValue(active.value, active.index)}

); })()}

{axisVisible && (

{tickIndices.map((i) => { const pt = points[i]; const xPct = pt.x / VIEWBOX_W; return (

{labels![i]}

); })}

)}

); }