{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"line-chart","type":"registry:ui","title":"Line chart","description":"One or more series over time, with hover readout and an optional band.","dependencies":["clsx","d3-shape","tailwind-merge"],"devDependencies":["@types/d3-shape@^3.2.0"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/chart-parts.tsx","type":"registry:ui","target":"components/ui/chart-parts.tsx","content":"\"use client\";\nimport { useEffect, useRef, type ReactNode, type KeyboardEvent } from \"react\";\nimport { line, curveMonotoneX } from \"d3-shape\";\nimport \"./shared/chip-option.css\";\nimport \"./chart-parts.css\";\nexport type ChartSeries = { id: string; label: string; color?: string };\nexport type ChartDatum = {\n id: string;\n label: string;\n values: Record;\n x?: number;\n event?: string;\n};\nexport type ChartPart = {\n id: string;\n label: string;\n value: number;\n color?: string;\n};\nexport const chartColor = (index: number) => `var(--chart-${(index % 6) + 1})`;\nexport const numberText = (value: number) =>\n new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 2 }).format(value);\nexport function useChartReveal() {\n const root = useRef(null);\n useEffect(() => {\n const element = root.current;\n if (!element) return;\n const observer = new IntersectionObserver(\n (entries) => {\n if (entries[0].isIntersecting) {\n element.dataset.visible = \"true\";\n observer.disconnect();\n }\n },\n { threshold: 0.3 },\n );\n observer.observe(element);\n return () => observer.disconnect();\n }, []);\n return root;\n}\nexport function ChartTable({\n label,\n headers,\n rows,\n}: {\n label: string;\n headers: string[];\n rows: (string | number)[][];\n}) {\n return (\n
\n \n \n \n {headers.map((header) => (\n \n ))}\n \n \n \n {rows.map((row, index) => (\n \n {row.map((cell, column) =>\n column === 0 ? (\n \n ) : (\n \n ),\n )}\n \n ))}\n \n
{label}
\n {header}\n
\n {cell}\n {cell}
\n );\n}\nexport function ChartMessage({\n loading,\n error,\n empty,\n}: {\n loading?: boolean;\n error?: string;\n empty?: boolean;\n}) {\n return error || empty ? (\n \n {error ?? (loading ? \"Loading chart…\" : \"No data for this range.\")}\n

\n ) : loading ? (\n

\n Updating chart…\n

\n ) : null;\n}\nexport function ChartLegend({\n series,\n hidden,\n onToggle,\n active,\n onActive,\n}: {\n series: readonly ChartSeries[];\n hidden: readonly string[];\n onToggle: (id: string) => void;\n active?: string | null;\n onActive?: (id: string | null) => void;\n}) {\n return (\n legendKeys(event)}\n >\n {series.map((item, index) => (\n onToggle(item.id)}\n onPointerEnter={() => onActive?.(item.id)}\n onPointerLeave={() => onActive?.(null)}\n onFocus={() => onActive?.(item.id)}\n onBlur={() => onActive?.(null)}\n data-active={active === item.id}\n >\n \n {item.label}\n \n ))}\n \n );\n}\nexport function legendKeys(event: KeyboardEvent) {\n const nodes = [\n ...event.currentTarget.querySelectorAll(\"button\"),\n ];\n const index = nodes.indexOf(document.activeElement as HTMLButtonElement);\n const target =\n event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? nodes.length - 1\n : [\"ArrowRight\", \"ArrowDown\"].includes(event.key)\n ? (index + 1) % nodes.length\n : [\"ArrowLeft\", \"ArrowUp\"].includes(event.key)\n ? (index - 1 + nodes.length) % nodes.length\n : -1;\n if (target >= 0) {\n event.preventDefault();\n nodes[target]?.focus();\n }\n}\nexport function pointKey(\n event: KeyboardEvent,\n active: number | null,\n length: number,\n) {\n const index = active ?? length - 1;\n const step = Math.max(1, Math.floor(length / 6));\n const next =\n event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? length - 1\n : event.key === \"PageUp\"\n ? index + step\n : event.key === \"PageDown\"\n ? index - step\n : [\"ArrowRight\", \"ArrowUp\"].includes(event.key)\n ? index + 1\n : [\"ArrowLeft\", \"ArrowDown\"].includes(event.key)\n ? index - 1\n : event.key === \"Escape\"\n ? null\n : undefined;\n if (next !== undefined) event.preventDefault();\n return next == null ? next : Math.max(0, Math.min(length - 1, next));\n}\nexport function pathFor(\n data: readonly ChartDatum[],\n id: string,\n minimum: number,\n maximum: number,\n hidden = false,\n) {\n if (!data.length) return \"\";\n const first = data[0].x ?? 0,\n last = data[data.length - 1].x ?? data.length - 1;\n const points = data.map((item, index) => ({\n x: (600 * ((item.x ?? index) - first)) / (last - first || 1),\n y: item.values[id],\n }));\n // Monotone cubic tangents (Fritsch-Carlson): the line is smooth through every point and never overshoots it.\n const ok = (value: number | undefined): value is number => value !== undefined && Number.isFinite(value);\n const slope = (k: number) => {\n const p = points[k], q = points[k + 1];\n return p && q && ok(p.y) && ok(q.y) ? (q.y - p.y) / (q.x - p.x || 1) : Number.NaN;\n };\n const tangents = points.map((_, k) => {\n const before = slope(k - 1), after = slope(k);\n if (!Number.isFinite(before)) return Number.isFinite(after) ? after : 0;\n if (!Number.isFinite(after)) return before;\n return before * after <= 0 ? 0 : (2 * before * after) / (before + after);\n });\n const samples = Array.from({ length: 97 }, (_, index) => {\n const x = (index / 96) * 600;\n let right = points.findIndex((point) => point.x >= x);\n if (right < 0) right = points.length - 1;\n const left = Math.max(0, right - 1);\n const a = points[left],\n b = points[right];\n const valid = ok(a.y) && ok(b.y);\n const h = b.x - a.x || 1;\n const t = Math.min(1, Math.max(0, (x - a.x) / h));\n const value = valid\n ? (2 * t ** 3 - 3 * t ** 2 + 1) * a.y! + (t ** 3 - 2 * t ** 2 + t) * h * tangents[left]! + (-2 * t ** 3 + 3 * t ** 2) * b.y! + (t ** 3 - t ** 2) * h * tangents[right]!\n : Number.NaN;\n return [\n x,\n hidden ? 210 : 210 - ((value - minimum) / (maximum - minimum || 1)) * 200,\n ] as [number, number];\n });\n return (\n line<[number, number]>()\n .defined((point) => Number.isFinite(point[1]))\n .x((point) => point[0])\n .y((point) => point[1])\n .curve(curveMonotoneX)(samples) ?? \"\"\n );\n}\nexport function ChartReadout({ children }: { children: ReactNode }) {\n return (\n \n {children}\n \n );\n}\n"},{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"},{"path":"ui/line-chart.tsx","type":"registry:ui","target":"components/ui/line-chart.tsx","content":"\"use client\";\nimport { area, curveMonotoneX } from \"d3-shape\";\nimport { useId, useState, type CSSProperties } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport {\n ChartTable,\n ChartMessage,\n ChartLegend,\n ChartReadout,\n chartColor,\n numberText,\n pathFor,\n pointKey,\n useChartReveal,\n type ChartDatum,\n type ChartSeries,\n} from \"./chart-parts\";\nimport \"./shared/chart-crosshair.css\";\nimport \"./line-chart.css\";\nexport type LineChartProps = {\n label: string;\n data: readonly ChartDatum[];\n series: readonly ChartSeries[];\n unit?: string;\n loading?: boolean;\n error?: string;\n className?: string;\n band?: { lower: string; upper: string };\n};\nexport function LineChart({\n label,\n data,\n series,\n unit = \"\",\n loading,\n error,\n className,\n band,\n}: LineChartProps) {\n const root = useChartReveal();\n const washId = useId();\n const [hidden, setHidden] = useState([]),\n [reading, setReading] = useState(null);\n const visible = series.filter((item) => !hidden.includes(item.id));\n const values = data.flatMap((item) =>\n visible\n .map((s) => item.values[s.id])\n .filter(\n (value): value is number =>\n value !== undefined && Number.isFinite(value),\n ),\n );\n const extremes = band\n ? data.flatMap((item) => [\n item.values[band.lower] ?? 0,\n item.values[band.upper] ?? 0,\n ])\n : values;\n const peak = Math.max(1, ...extremes);\n // Round the top up to a whole step of its magnitude, so the axis reads 0 · 50 · 100, not 0 · 41 · 82.\n const step = 10 ** Math.floor(Math.log10(peak));\n const min = Math.min(0, ...extremes),\n max = Math.ceil(peak / step) * step;\n // Up to five labels along the bottom, spread evenly from first to last.\n const tickCount = Math.min(data.length, 5);\n const xTicks = [...new Set(Array.from({ length: tickCount }, (_, k) => Math.round((k * (data.length - 1)) / Math.max(1, tickCount - 1))))];\n const index = reading === null ? null : Math.min(reading, data.length - 1);\n const datum = index === null ? null : data[index];\n function scrub(clientX: number, rect: DOMRect) {\n if (!data.length) return;\n const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n const first = data[0].x ?? 0,\n last = data.at(-1)?.x ?? data.length - 1;\n let nearest = 0;\n data.forEach((item, i) => {\n if (\n Math.abs((item.x ?? i) - (first + ratio * (last - first))) <\n Math.abs(\n (data[nearest].x ?? nearest) - (first + ratio * (last - first)),\n )\n )\n nearest = i;\n });\n setReading(nearest);\n }\n const text = datum\n ? `${datum.label}. ${visible.map((item) => `${item.label}: ${datum.values[item.id] === undefined ? \"No reading\" : numberText(datum.values[item.id]!)} ${unit}`).join(\". \")}${datum.event ? `. ${datum.event}` : \"\"}`\n : label;\n return (\n \n
{label}
\n