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[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"] 52:T8c6,.cr-line-chart__plot { border-radius: var(--cr-radius-sm); cursor: crosshair; touch-action: pan-y; } .cr-line-chart__plot:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-line-chart__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; } .cr-line-chart__line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .cr-line-chart__line[data-style='dashed'] { stroke-width: 1.6; stroke-dasharray: 5 5; } .cr-line-chart__rule { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 1px dashed var(--cr-chart-2); pointer-events: none; } .cr-line-chart__marker { position: absolute; width: 7px; height: 7px; border-radius: var(--cr-radius-full); background: currentColor; transform: translate(-50%, -50%); pointer-events: none; } .cr-line-chart__marker[data-main] { box-sizing: border-box; width: 11px; height: 11px; border: 2px solid currentColor; background: var(--cr-color-bg-raised); } .cr-line-chart__tip { position: absolute; bottom: var(--cr-space-2); z-index: 2; display: flex; flex-direction: column; gap: 6px; min-width: 132px; margin-inline: var(--cr-space-3); padding: var(--cr-space-2) var(--cr-space-3); border-radius: 14px; font-size: var(--cr-font-size-xs); white-space: nowrap; pointer-events: none; } /* Past the middle, the tooltip sits to the left of the rule so it stays inside the plot. */ .cr-line-chart__tip[data-side='left'] { transform: translateX(calc(-100% - 2 * var(--cr-space-3))); } .cr-line-chart__tip-title { font-weight: var(--cr-font-weight-semibold); } .cr-line-chart__tip .cr-chart-legend { flex-direction: column; gap: var(--cr-space-1); font-size: var(--cr-font-size-xs); } .cr-line-chart__label { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; } /* The ends are pulled in so they do not hang outside the plot. */ .cr-line-chart__label[data-edge='start'] { transform: none; } .cr-line-chart__label[data-edge='end'] { transform: translateX(-100%); } 53:T192e,'use client'; import { useId, useState, type KeyboardEvent, type PointerEvent } from 'react'; import { ChartLegend, ChartTable, formatter, niceScale, seriesColor, type ValueFormat } from '@/lib/creance/chart'; import { cx } from '@/lib/creance/cx'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import './LineChart.css'; export interface LineSeries { name: string; /** One value per label. */ values: number[]; /** `dashed` marks a comparison, so it differs from the main line in more than shade. */ style?: 'solid' | 'dashed'; } export interface LineChartProps extends ValueFormat { /** The points along the bottom, in order: dates, hours. */ labels: string[]; /** The first series is the main one: solid ink with a soft fill. Two or three read well. */ series: LineSeries[]; /** What the chart shows, for screen readers and as the table's caption: "Tokens per day". */ label: string; /** What the labels are, as the heading of the table's first column. Default "Point". */ axisLabel?: string; /** Height of the plot in pixels. Default 240. */ height?: number; /** Names the series. Default true when there is more than one. */ legend?: boolean; className?: string; } /** * A trend over time. Pointing at the plot, or focusing it and pressing the arrow keys, reads out one point * at a time. The whole chart is also a table for screen readers. */ export function LineChart({ labels, series, label, axisLabel = 'Point', height = 240, legend = series.length > 1, className, ...format }: LineChartProps) { const fmt = formatter(format); const id = useId(); const [active, setActive] = useState(null); const [spoken, setSpoken] = useState(''); const count = labels.length; const scale = niceScale(Math.max(...series.flatMap((s) => s.values), 0)); const x = (i: number) => (count > 1 ? (i / (count - 1)) * 100 : 50); const y = (v: number) => 100 - (v / scale.max) * 100; const path = (values: number[]) => values.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(2)} ${y(v).toFixed(2)}`).join(' '); const colors = series.map((_, i) => seriesColor(i === 0 ? 0 : i)); // At most seven labels along the bottom, evenly spread. const every = Math.max(1, Math.ceil(count / 7)); const describe = (i: number) => `${labels[i]}: ${series.map((s) => `${s.name} ${fmt(s.values[i] ?? 0)}`).join(', ')}`; function onPointerMove(e: PointerEvent) { const box = e.currentTarget.getBoundingClientRect(); if (!box.width || count === 0) return; setActive(Math.min(count - 1, Math.max(0, Math.round(((e.clientX - box.left) / box.width) * (count - 1))))); } function onKeyDown(e: KeyboardEvent) { const move: Record = { ArrowRight: (active ?? -1) + 1, ArrowLeft: (active ?? count) - 1, Home: 0, End: count - 1 }; if (e.key === 'Escape') return setActive(null); if (!(e.key in move) || count === 0) return; e.preventDefault(); const next = Math.min(count - 1, Math.max(0, move[e.key]!)); setActive(next); setSpoken(describe(next)); } return (

{legend && ({ name: s.name, color: colors[i]!, dashed: s.style === 'dashed' }))} />} {/* Focusable so the points can be read with the arrow keys; the drawing inside is decoration. */} {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}

setActive(null)} onKeyDown={onKeyDown} onBlur={() => setActive(null)} > {scale.ticks.map((t) => ( {fmt(t)} ))} {/* Stretched to the plot; strokes keep their width because they do not scale. */} {active !== null && ( <> {series.map((s, i) => ( ))}

60 ? 'left' : 'right'} style={{ left: `${x(active)}%` }}> {labels[active]} ({ name: s.name, color: colors[i]!, dashed: s.style === 'dashed', value: fmt(s.values[active] ?? 0) }))} />

)}

s.name)]} rows={labels.map((name, i) => [name, ...series.map((s) => fmt(s.values[i] ?? 0))])} /> ); } 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":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/creance-chart.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"line-chart/LineChart.css","content":"$52","type":"registry:file","target":"@components/creance/line-chart/LineChart.css"},{"path":"line-chart/LineChart.tsx","content":"$53","type":"registry:ui","target":"@components/creance/line-chart/LineChart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]