4b: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"] 4c: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"] 4d:T1ea0,"use client" import * as React from "react" import { scaleLinear } from "d3-scale" import { line, curveMonotoneX, curveLinear, curveStep } from "d3-shape" import { max, min } from "d3-array" import { useChartReducedMotion } from "../shared/use-chart-reduced-motion" import { ChartEmptyState, ChartErrorState } from "../shared/chart-state" import { cn } from "@/lib/utils" export interface D3LineDatum { x: number | string y: number } export interface D3AnimatedLineProps { data: D3LineDatum[] width?: number height?: number color?: string curve?: "linear" | "monotone" | "step" grid?: "off" | "horizontal" className?: string /** * Optional motion configuration or toggle. * Section 10.5, 10.6. */ motion?: boolean | { duration?: number } } /** * D3 Animated Line Chart * D3 computes continuous scale projections and monotone curves; React renders the SVG elements. * Features semantic initial draw animation and honors reduced-motion preferences. * Section 10.19, 10.20, 10.58. */ export function D3AnimatedLine({ data, width = 600, height = 300, color = "var(--chart-1)", className, curve = "monotone", grid = "horizontal", motion = true, }: D3AnimatedLineProps) { const margin = { top: 20, right: 20, bottom: 30, left: 40 } const innerWidth = width - margin.left - margin.right const innerHeight = height - margin.top - margin.bottom const pathRef = React.useRef(null) const [mounted, setMounted] = React.useState(false) const [pathLength, setPathLength] = React.useState(0) const reducedMotion = useChartReducedMotion() React.useEffect(() => { if (pathRef.current) { setPathLength(pathRef.current.getTotalLength()) } // Defer mount trigger to next frame for transition to run const timer = setTimeout(() => setMounted(true), 16) return () => clearTimeout(timer) }, [data, width, height, curve]) const yValues = data.map((d) => d.y) const minY = min(yValues) ?? 0 const maxY = max(yValues) ?? 100 const xScale = React.useMemo(() => { return scaleLinear() .domain([0, Math.max(data.length - 1, 1)]) .range([0, innerWidth]) }, [data.length, innerWidth]) const yScale = React.useMemo(() => { return scaleLinear() .domain([Math.min(0, minY), maxY * 1.1]) .range([innerHeight, 0]) }, [minY, maxY, innerHeight]) const linePath = React.useMemo(() => { const generator = line() .x((_, i) => xScale(i)) .y((d) => yScale(d.y)) .curve({linear:curveLinear,monotone:curveMonotoneX,step:curveStep}[curve]) return generator(data) || "" }, [data, xScale, yScale, curve]) const [hoveredIndex, setHoveredIndex] = React.useState(null) const svgRef = React.useRef(null) if (!data.length) return if (data.some((datum) => !Number.isFinite(datum.y))) { return } const isAnimated = motion !== false && !reducedMotion const duration = typeof motion === "object" && motion?.duration !== undefined ? motion.duration : 0.35 const pathStyle: React.CSSProperties = isAnimated && pathLength > 0 ? { strokeDasharray: pathLength, strokeDashoffset: mounted ? 0 : pathLength, transition: `stroke-dashoffset ${duration}s cubic-bezier(0.16, 1, 0.3, 1)`, } : {} return (

{/* Floating Theme Tooltip */} {hoveredIndex !== null && data[hoveredIndex] && (

{String(data[hoveredIndex].x)}

Value {data[hoveredIndex].y.toLocaleString()}

)}

) } 4a:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","d3-scale",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-scale","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-scale"}]]}]}],["$","li","d3-shape",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-shape","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-shape"}]]}]}],["$","li","d3-array",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/d3-array","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"d3-array"}]]}]}]]}],["$","$L4b",null,{"namespace":"@plotcn","registryDependencies":["https://plotcn.vercel.app/r/chart-motion.json","https://plotcn.vercel.app/r/chart-state.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"components/charts/d3/d3-animated-line.tsx","content":"$4d","type":"registry:component","target":"components/charts/d3/d3-animated-line.tsx"}],"className":"h-[70svh] min-h-80"}]]}]