51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T372c,"use client"; import { useEffect, useId, useMemo, useRef, useState, type ComponentProps, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode, } from "react"; import { cn } from "@/registry/default/lib/utils"; // The drawing is laid out in a fixed box and scaled to its container. const WIDTH = 600; const HEIGHT = 200; const TOP = 22; const BOTTOM = 10; const EASE = "cubic-bezier(0.22, 0.9, 0.3, 1)"; interface Point { x: number; y: number; } const n = (value: number) => Math.round(value * 100) / 100; /** Straight segments; the stroke's round joins soften the corners. */ function linearPath(points: Point[]) { return points.map((point, index) => `${index ? "L" : "M"}${n(point.x)} ${n(point.y)}`).join(" "); } /** * A smooth curve through every point that never overshoots them * (monotone cubic interpolation), so peaks in the drawing are peaks in the data. */ function smoothPath(points: Point[]) { if (points.length < 3) return linearPath(points); const slopes = points .slice(1) .map((point, index) => (point.y - points[index]!.y) / (point.x - points[index]!.x || 1)); const tangents = points.map((_, index) => { if (index === 0) return slopes[0]!; if (index === points.length - 1) return slopes[slopes.length - 1]!; const before = slopes[index - 1]!; const after = slopes[index]!; return before * after <= 0 ? 0 : (before + after) / 2; }); slopes.forEach((slope, index) => { if (slope === 0) { tangents[index] = 0; tangents[index + 1] = 0; return; } const a = tangents[index]! / slope; const b = tangents[index + 1]! / slope; const size = a * a + b * b; if (size > 9) { const scale = 3 / Math.sqrt(size); tangents[index] = scale * a * slope; tangents[index + 1] = scale * b * slope; } }); let d = `M${n(points[0]!.x)} ${n(points[0]!.y)}`; for (let index = 0; index < points.length - 1; index++) { const from = points[index]!; const to = points[index + 1]!; const third = (to.x - from.x) / 3; d += ` C${n(from.x + third)} ${n(from.y + tangents[index]! * third)} ${n(to.x - third)} ${n(to.y - tangents[index + 1]! * third)} ${n(to.x)} ${n(to.y)}`; } return d; } interface LineChartProps extends Omit, "children"> { /** The values to plot, in order. The Y axis fits their range. */ data: number[]; /** A label per value, shown in the tooltip and along the X axis. */ labels?: string[]; /** Name of the series, shown in the tooltip and used as the accessible name. */ name?: string; /** Line and dot colour; any CSS colour. Defaults to the primary colour. */ color?: string; /** How the line runs between points. */ curve?: "smooth" | "linear"; /** * Locale and options for the numbers, as in `Intl.NumberFormat`. Both can * be passed from a server component; a fixed default keeps the server and * the browser in agreement. */ locale?: string; numberFormat?: Intl.NumberFormatOptions; /** Formats the value in the tooltip; overrides `locale` and `numberFormat`. */ formatValue?: (value: number, index: number) => ReactNode; /** What screen readers hear for a point. Defaults to its label and value. */ formatValueText?: (value: number, index: number) => string; /** The point selected at first. Defaults to the last one. */ defaultIndex?: number; /** Called when the selected point changes, by pointer or keyboard. */ onIndexChange?: (index: number) => void; /** Show labels along the X axis. Needs `labels`. */ showXAxis?: boolean; /** * The most X axis labels to show, evenly spaced and ending on the latest * point; narrow charts show fewer. */ tickCount?: number; /** Colour the line only up to the selected point, grey after it. */ reveal?: boolean; /** Shade the area under the line. */ showFill?: boolean; /** Mark the selected point with a dot. */ showDot?: boolean; /** Glide the cursor, dot and tooltip between points. */ animated?: boolean; } /** * A line chart for one series, with a cursor that snaps to the nearest * point and a tooltip beside it. It is a slider over the points for * keyboards and screen readers: arrow keys, Home and End move the cursor * and each point is announced with its label and value. On touch it follows * a horizontal drag and leaves vertical scrolling to the page. No chart * library: one SVG, scaled to its container. * * @example * */ function LineChart({ data, labels, name, color = "var(--primary)", curve = "smooth", locale = "en-US", numberFormat, formatValue, formatValueText, defaultIndex, onIndexChange, showXAxis = true, tickCount = 6, reveal = false, showFill = true, showDot = true, animated = true, className, style, "aria-label": ariaLabel, ...props }: LineChartProps) { const id = useId().replace(/[^\w-]/g, ""); const plot = useRef(null); const [width, setWidth] = useState(WIDTH); const [active, setActive] = useState(() => defaultIndex ?? Math.max(0, data.length - 1)); useEffect(() => { const node = plot.current; if (!node || typeof ResizeObserver === "undefined") return; const observer = new ResizeObserver(([entry]) => { if (entry?.contentRect.width) setWidth(entry.contentRect.width); }); observer.observe(node); return () => observer.disconnect(); }, []); const points = useMemo(() => { if (data.length === 0) return []; const min = Math.min(...data); const range = Math.max(...data) - min || 1; return data.map((value, index) => ({ value, x: data.length === 1 ? WIDTH / 2 : (index / (data.length - 1)) * WIDTH, y: TOP + (1 - (value - min) / range) * (HEIGHT - TOP - BOTTOM), })); }, [data]); const numbers = useMemo( () => new Intl.NumberFormat(locale, numberFormat), [locale, numberFormat] ); const { line, area } = useMemo(() => { if (points.length === 0) return { line: "", area: "" }; const d = curve === "smooth" ? smoothPath(points) : linearPath(points); const floor = HEIGHT - BOTTOM; const last = points[points.length - 1]!; return { line: d, area: `${d} L${n(last.x)} ${floor} L${n(points[0]!.x)} ${floor} Z` }; }, [points, curve]); const ticks = useMemo(() => { if (!showXAxis || !labels?.length || points.length === 0) return []; // At most one label per 80px, so they never run into each other. const most = Math.min(tickCount, Math.max(2, Math.floor(width / 80)), points.length); if (most < 1) return []; // Every step-th point, counted back from the latest so it always has a // label, and the smallest step that keeps within `most` labels. const last = points.length - 1; const step = Math.floor(last / most) + 1; return Array.from( { length: Math.floor(last / step) + 1 }, (_, tick) => (last % step) + tick * step ); }, [showXAxis, labels, points.length, tickCount, width]); if (points.length === 0) return null; const index = Math.min(Math.max(active, 0), points.length - 1); const point = points[index]!; const select = (next: number) => { const clamped = Math.min(Math.max(next, 0), points.length - 1); if (clamped === index) return; setActive(clamped); onIndexChange?.(clamped); }; const onPointer = (event: PointerEvent) => { const box = event.currentTarget.getBoundingClientRect(); if (box.width === 0) return; const at = (event.clientX - box.left) / box.width; select(Math.round(at * (points.length - 1))); }; const onKeyDown = (event: KeyboardEvent) => { const page = Math.max(1, Math.round(points.length / 10)); const moves: Record = { ArrowLeft: index - 1, ArrowDown: index - 1, ArrowRight: index + 1, ArrowUp: index + 1, PageDown: index - page, PageUp: index + page, Home: 0, End: points.length - 1, }; const next = moves[event.key]; if (next === undefined) return; event.preventDefault(); select(next); }; const label = labels?.[index]; const formatted = numbers.format(point.value); const valueText = formatValueText?.(point.value, index) ?? `${label ? `${label}: ` : ""}${formatted}`; // Positions in px, for transforms: they move on the compositor. const scale = width / WIDTH; const cursorX = point.x * scale; const cursorY = point.y * scale; const flip = point.x > WIDTH / 2; const transition = animated ? `transform 220ms ${EASE}` : undefined; return (

{showDot ? ( {ticks.length > 0 ? ( ) : null}

); } export { LineChart, type LineChartProps }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/line-chart.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]