50: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"] 51:I[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:Tfcd,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { ChartFrame, type ChartGeometry, type ChartShared } from "@/components/ui/chart" type Curve = "linear" | "smooth" | "step" type Point = [number, number] type LineChartProps = ChartShared & { /** linear: straight between points. smooth: one sweep through them, never past them. step: level across each point's column. */ variant?: Curve } // The path through the points, without its opening M, so an area can run back along another. function through(p: Point[], curve: Curve): string { if (p.length < 2) return "" if (curve === "step") return p.slice(1).map(([x, y], i) => { const mid = (p[i][0] + x) / 2; return `H${mid}V${y}H${x}` }).join("") if (curve === "linear") return p.slice(1).map(([x, y]) => `L${x},${y}`).join("") // Monotone cubic (Fritsch and Carlson, as d3's curveMonotoneX): smooth, and it never overshoots a point. const n = p.length const d = p.slice(1).map(([x, y], i) => (y - p[i][1]) / (x - p[i][0])) const m = p.map((_, i) => { if (i === 0) return d[0] if (i === n - 1) return d[n - 2] const [a, b] = [d[i - 1], d[i]] return (Math.sign(a) + Math.sign(b)) * Math.min(Math.abs(a), Math.abs(b), Math.abs(a + b) / 4) }) return p.slice(1).map(([x, y], i) => { const [x0, y0] = p[i] const h = (x - x0) / 3 return `C${x0 + h},${y0 + h * m[i]} ${x - h},${y - h * m[i + 1]} ${x},${y}` }).join("") } /** * The drawing under the points, in pixels so a hairline stays a hairline: one line per series * and, for an area, the drops under it at barcode rhythm. Laid out once the plot has a size. */ function Draw({ spans, series, curve, area }: ChartGeometry & { curve: Curve; area?: boolean }) { const ref = React.useRef(null) const [[w, h], setSize] = React.useState([0, 0]) const id = React.useId() React.useEffect(() => { const el = ref.current if (!el) return const ro = new ResizeObserver(([e]) => setSize([e.contentRect.width, e.contentRect.height])) ro.observe(el) return () => ro.disconnect() }, []) const x = (i: number) => ((i + 0.5) / spans.length) * w const y = (v: number) => (1 - v) * h return ( ) } /** The line and area charts' shared body: chart's frame with a drawing laid under its points. */ function ChartLines({ variant = "linear", area, className, ...props }: LineChartProps & { area?: boolean }) { return ( } /> ) } /** * One hairline through the points, a ring on each, against one very large number. Point at the * line, or focus it, and the ring swells, a drop runs down to the baseline and the number rolls. */ function LineChart(props: LineChartProps) { return } export { LineChart, ChartLines, type LineChartProps } 55:T7f7,@layer components { /* ── ot-line-chart ── one hairline through the points, a ring on each, against one very large number. The line is drawn in pixels under the points (the chart's own buttons), so it stays a hairline at any width; pointing drops the bar chart's stem from the ring to the baseline and rolls the number. */ :is(.ot-line-chart, .ot-area-chart) > .ot-chart-plot { position: relative; } .ot-line-chart-draw { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; } .ot-line-chart-draw:is([dir="rtl"] *) { scale: -1 1; } .ot-line-chart-line { fill: none; stroke: var(--ot-ink); stroke-width: var(--ot-hairline); stroke-linejoin: round; } .ot-line-chart-draw > [data-series="1"] > .ot-line-chart-line { stroke: var(--ot-graphite); stroke-dasharray: 1 3; } .ot-line-chart-draw > [data-series="2"] > .ot-line-chart-line { stroke: var(--ot-pencil); stroke-dasharray: 4 3; } /* The drop: hidden at rest, it runs down from the ring when you point (moderato, exhale). */ :is(.ot-line-chart, .ot-area-chart) .ot-chart-mark { left: 50%; } :is(.ot-line-chart, .ot-area-chart) :is(.ot-chart-bar, .ot-chart-mark)::before { background: var(--ot-ink); scale: 1 0; transform-origin: top; transition: scale var(--ot-moderato) var(--ot-exhale), width var(--ot-allegro); } :is(.ot-line-chart, .ot-area-chart) .ot-chart-bar:is(:hover, :focus-visible)::before, :is(.ot-line-chart, .ot-area-chart) .ot-chart-bar:is(:hover, :focus-visible) > .ot-chart-mark::before, :is(.ot-line-chart, .ot-area-chart)[data-force~="hover"] > .ot-chart-plot > .ot-chart-bar[data-shown]::before, :is(.ot-line-chart, .ot-area-chart)[data-force~="hover"] > .ot-chart-plot > .ot-chart-bar[data-shown] > .ot-chart-mark::before { scale: 1 1; } :is(.ot-line-chart, .ot-area-chart) .ot-chart-mark:is([data-series="1"], [data-series="2"])::before { background: var(--c); } @media (forced-colors: active) { .ot-line-chart-line { stroke: CanvasText; } } } 4f:["$","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,["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json","https://thedirectors.agency/ui/r/chart.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/line-chart.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/line-chart.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/line-chart.css","content":"$55","type":"registry:file","target":"styles/0nlytype/line-chart.css"}],"className":"h-[70svh] min-h-80"}]]}]