4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1faa,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; const SAMPLE = Array.from({ length: 42 }, (_, index) => { const t = index / 41; return ( 38 + t * 34 + Math.sin(t * Math.PI * 2.6) * 8.5 + Math.sin(t * Math.PI * 7.4) * 2.8 + (index > 28 ? (index - 28) * 0.55 : 0) ); }); const sizeClass = { sm: "h-10", md: "h-28", lg: "h-[220px] md:h-[280px]", } as const; const toneClass = { neutral: "text-foreground", up: "text-[color:var(--chart-2)]", down: "text-destructive", } as const; export type SparklineProps = React.ComponentProps<"div"> & { data?: number[]; markerIndex?: number; markerLabel?: string; interactive?: boolean; showValue?: boolean; format?: (value: number) => string; size?: keyof typeof sizeClass; tone?: keyof typeof toneClass; }; function toPoints(data: number[], width: number, height: number) { const min = Math.min(...data); const max = Math.max(...data); const span = Math.max(max - min, 1); const padX = 10; const padTop = height * 0.18; const padBottom = height * 0.22; const usable = height - padTop - padBottom; return data.map((value, index) => { const x = data.length === 1 ? width / 2 : padX + (index / (data.length - 1)) * (width - padX * 2); const y = padTop + (1 - (value - min) / span) * usable; return { x, y, value }; }); } function pixelPath(points: Array<{ x: number; y: number }>) { if (points.length === 0) return ""; return points .map((point, index) => { const x = Math.round(point.x); const y = Math.round(point.y); return `${index === 0 ? "M" : "L"}${x} ${y}`; }) .join(" "); } function Sparkline({ className, data = SAMPLE, markerIndex, markerLabel, interactive = true, showValue = true, format = (value) => value.toLocaleString("en-US", { maximumFractionDigits: 1 }), size = "lg", tone = "neutral", ...props }: SparklineProps) { const uid = React.useId().replace(/:/g, ""); const fallbackIndex = markerIndex ?? Math.max(0, data.length - 1); const [active, setActive] = React.useState(fallbackIndex); const svgRef = React.useRef(null); React.useEffect(() => { setActive(markerIndex ?? Math.max(0, data.length - 1)); }, [data.length, markerIndex]); const width = 960; const height = 280; const baseline = height - 18; const points = toPoints(data, width, height); const line = pixelPath(points); const last = points[points.length - 1]; const area = last ? `${line} L${last.x} ${baseline} L${points[0]?.x ?? 0} ${baseline} Z` : ""; const marker = points[Math.min(Math.max(active, 0), Math.max(points.length - 1, 0))]; const moveTo = (clientX: number) => { if (!interactive || points.length < 2 || !svgRef.current) return; const rect = svgRef.current.getBoundingClientRect(); const x = ((clientX - rect.left) / rect.width) * width; let nearest = 0; let best = Infinity; points.forEach((point, index) => { const distance = Math.abs(point.x - x); if (distance < best) { best = distance; nearest = index; } }); setActive(nearest); }; const reset = () => setActive(markerIndex ?? Math.max(0, data.length - 1)); const onKeyDown = (event: React.KeyboardEvent) => { if (!interactive || points.length < 2) return; if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); const delta = event.key === "ArrowLeft" ? -1 : 1; setActive((current) => Math.min(points.length - 1, Math.max(0, current + delta)) ); } if (event.key === "Home") { event.preventDefault(); setActive(0); } if (event.key === "End") { event.preventDefault(); setActive(points.length - 1); } }; const caption = markerLabel ?? (marker ? format(marker.value) : ""); return (

{marker && (markerLabel || showValue) ? (

{markerLabel ? (

{markerLabel}

) : null} {showValue ? (

{format(marker.value)}

) : null}

); } export { Sparkline, SAMPLE as sparklineSample }; 4b:["$","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,["$","$L4c",null,{"namespace":"@livedocs","registryDependencies":["https://livedocs.xyz/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ui/sparkline.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]