# Chart (Notchset): prompt.md (v2.1.0) - id: `chart` · version 2.1.0 · component · free - category: Charts - build: one set of files for every shadcn style - install: `npx shadcn@latest add https://notchset.dev/r/chart.json` - npm dependencies: none - registry dependencies: utils, https://notchset.dev/r/notchset-foundation.json, @notchset/rolling-number - docs: https://notchset.dev/components/chart - The install command carries everything this item needs (files, CSS, tokens, npm and registry dependencies). Prefer it to copying source by hand. The parts every chart is drawn with, so all read as one family: a smooth line in the series hue over a fading area, a halo and a dark pill that follow the pointer or arrow keys, the period raised on the axis, a faint mono grid, one hero figure, and a table for screen readers.. ## Build it - Stack: React 18.3 or 19, TypeScript, Tailwind CSS v4 utility classes on the foundation's roles, a components.json (imports use its aliases). - Packages: none beyond React. - Files: `components/ui/notchset/chart.tsx`; shared code: `lib/notchset/curve.ts`, `lib/notchset/portal.ts`. - Registry dependencies, installed with it automatically: shadcn `utils` (cn), `notchset-foundation`, `rolling-number`. - Builds: one set of files, the same for every shadcn style. - Exports to keep: `Chart`, `ChartLink`, `ChartTableToggle`, `ViewDetail`, `useChartActive`, `useMorph`, `useEntrance`, `gapShapes`, `GapShape`, `GapKey`, `ChartDelta`, `deltaOf`, `nsEase`, `MORPH_MS`, `ChartAxis`, `ChartBars`, `ChartFinish`, `FocusValue`, `barPath`, `ChartEmpty`, `ChartFact`, `ChartGrid`, `ChartGuide`, `ChartHalo`, `ChartHero`, `ChartKey`, `ChartPill`, `ChartSurface`, `ChartTable`, `ChartYLabels`, `InkArea`, `InkLine`, `SERIES_STEPS`, `SeriesSwatch`, `areaPath`, `niceTicks`, `smoothPath`, `stepPath`, `useChartWidth`, `useInkDraw`, and every exported type. - CSS: the install adds the notchset foundation (its roles, keyframes and motion switch, reading your shadcn tokens for colour) to your global stylesheet once. Nothing to import by hand. - Re-running `add` (or `--overwrite`) re-applies those rules: put overrides in your own CSS, never in the installed rules. - Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component. - This item reads `--ns-bad`, `--ns-bad-ink`, `--ns-bezel`, `--ns-canvas`, `--ns-ease`, `--ns-font-display`, `--ns-font-mono`, `--ns-glow`, `--ns-hover`, `--ns-ink`, `--ns-ink-2`, `--ns-ink-3`, `--ns-line`, `--ns-line-soft`, `--ns-ok`, `--ns-ok-ink`, `--ns-panel`, `--ns-radius`, `--ns-raised`, `--ns-selected`, `--ns-series`, `--ns-series-lilac`, `--ns-series-tint`, `--ns-signal`, `--ns-text-hero`, `--ns-text-meta`, `--ns-text-small`, `--ns-text-strong`, `--ns-time-color`, `--ns-weight-medium`, `--ns-weight-strong`, `--ns-well`. - Retune it (on any ancestor) with the foundation's roles and hooks: `--ns-bad`, `--ns-bad-ink`, `--ns-band`, `--ns-band-edge`, `--ns-band-grade`, `--ns-band-optimal`, `--ns-beat`, `--ns-bezel`, `--ns-canvas`, `--ns-cat-1`, `--ns-cat-2`, `--ns-cat-3`, `--ns-cat-4`, `--ns-cat-5`, `--ns-cat-6`, `--ns-check`, `--ns-chip`, `--ns-control`, `--ns-control-pad`, `--ns-control-sm`, `--ns-deep`, `--ns-deep-ink`, `--ns-deep-ink-2`, `--ns-deep-line`, `--ns-dialog`, `--ns-dialog-lg`, `--ns-dialog-sm`, `--ns-ease`, `--ns-ease-in`, `--ns-ease-panel`, `--ns-ease-pop`, `--ns-field`, `--ns-flood-arc`, `--ns-flood-aurora`, `--ns-flood-behind-1`, `--ns-flood-behind-2`, `--ns-flood-bloom`, `--ns-flood-deep`, `--ns-flood-dial-bloom`, `--ns-flood-glass`, `--ns-flood-grain`, `--ns-flood-image`, `--ns-flood-ink`, `--ns-flood-ink-low`, `--ns-flood-light`, `--ns-flood-mid`, `--ns-flood-pale`, `--ns-flood-pane`, `--ns-flood-pane-edge`, `--ns-flood-pill-ink`, `--ns-flood-ribbon`, `--ns-flood-ribbon-core`, `--ns-flood-shadow`, `--ns-flood-sheen`, `--ns-flood-wash`, `--ns-font-body`, `--ns-font-display`, `--ns-font-mono`, `--ns-font-script`, `--ns-glass`, `--ns-glass-blur`, `--ns-glass-shadow`, `--ns-glow`, `--ns-grain`, `--ns-gutter`, `--ns-header`, `--ns-heat`, `--ns-hover`, `--ns-ink`, `--ns-ink-2`, `--ns-ink-3`, `--ns-ink-4`, `--ns-leading`, `--ns-lift`, `--ns-light-1`, `--ns-light-2`, `--ns-light-3`, `--ns-light-spread`, `--ns-light-strength`, `--ns-line`, `--ns-line-soft`, `--ns-lit-edge`, `--ns-menu-dy`, `--ns-menu-row`, `--ns-mesh`, `--ns-mesh-frost`, `--ns-ok`, `--ns-ok-ink`, `--ns-orb-body`, `--ns-orb-cool`, `--ns-orb-core`, `--ns-orb-dawn`, `--ns-orb-deep`, `--ns-orb-edge`, `--ns-orb-grain`, `--ns-orb-ground`, `--ns-orb-halo`, `--ns-orb-inner`, `--ns-orb-key`, `--ns-orb-lift`, `--ns-orb-limb`, `--ns-orb-limb-from`, `--ns-orb-rim`, `--ns-orb-skin-hi`, `--ns-orb-skin-lo`, `--ns-orb-skin-mid`, `--ns-orb-warm`, `--ns-panel`, `--ns-panel-w`, `--ns-prism-edge`, `--ns-prism-glint`, `--ns-prism-sheen`, `--ns-prism-tint`, `--ns-pulse`, `--ns-radius`, `--ns-radius-card`, `--ns-radius-full`, `--ns-radius-lg`, `--ns-radius-sm`, `--ns-radius-xl`, `--ns-raised`, `--ns-range`, `--ns-row`, `--ns-row-compact`, `--ns-segment`, `--ns-selected`, `--ns-series`, `--ns-series-core`, `--ns-series-lilac`, `--ns-series-tint`, `--ns-shadow-dialog`, `--ns-shadow-float`, `--ns-shadow-panel`, `--ns-sheet`, `--ns-sheet-bottom`, `--ns-side`, `--ns-signal`, `--ns-sleep-awake`, `--ns-sleep-deep`, `--ns-sleep-light`, `--ns-sleep-rem`, `--ns-space-1`, `--ns-space-2`, `--ns-space-3`, `--ns-space-4`, `--ns-space-5`, `--ns-space-6`, `--ns-space-8`, `--ns-space-section`, `--ns-stack-on`, `--ns-standing-critical`, `--ns-standing-in`, `--ns-standing-out`, `--ns-state-doing`, `--ns-state-done`, `--ns-state-review`, `--ns-state-todo`, `--ns-switch-h`, `--ns-switch-w`, `--ns-text-body`, `--ns-text-control`, `--ns-text-display`, `--ns-text-figure`, `--ns-text-headline`, `--ns-text-hero`, `--ns-text-lede`, `--ns-text-meta`, `--ns-text-page`, `--ns-text-record`, `--ns-text-small`, `--ns-text-strong`, `--ns-text-sub`, `--ns-text-title`, `--ns-tile-shadow`, `--ns-time-born`, `--ns-time-color`, `--ns-time-dialog`, `--ns-time-menu`, `--ns-time-page`, `--ns-time-panel`, `--ns-time-toast`, `--ns-tint`, `--ns-tint-ink`, `--ns-toast-bottom`, `--ns-toast-left`, `--ns-touch`, `--ns-tracking-display`, `--ns-tracking-headline`, `--ns-warn`, `--ns-warn-ink`, `--ns-wash-clay`, `--ns-wash-dusk`, `--ns-wash-graphite`, `--ns-wash-ink`, `--ns-wash-sage`, `--ns-wash-sand`, `--ns-weight-light`, `--ns-weight-medium`, `--ns-weight-regular`, `--ns-weight-strong`, `--ns-well`. - Never add Tailwind colour classes inside the component. ```tsx import { ChartAxis, ChartGrid, ChartGuide, ChartHalo, ChartHero, ChartPill, ChartSurface, ChartTable, ChartYLabels, InkArea, InkLine, areaPath, niceTicks, smoothPath, useChartWidth, useInkDraw } from "@/components/ui/notchset/chart"; ``` ## Parts - A single export that takes props. ## Match the original - Read `components/ui/notchset/chart.tsx` as the reference implementation before changing or recreating anything, and match it: sizes, colours per theme, motion timings, copy and behaviour. - If you deviate (a prop you can't honour, a style you changed, a dependency you swapped), say so in your reply, part by part. - Keep the accessibility contract, the keyboard map and the motion levels listed below. ## Use it when ### Not when ## Built from - rolling-number (`rolling-number`), installed with it: reuse it, don't rebuild it - Curve (shared helper, ships with it) - Portal (shared helper, ships with it) ## Mistakes - Recreating the component instead of installing it ## Usage ```tsx "use client"; import * as React from "react"; import { ChartAxis, ChartGrid, ChartGuide, ChartHalo, ChartHero, ChartPill, ChartSurface, ChartTable, ChartYLabels, InkArea, InkLine, areaPath, niceTicks, smoothPath, useChartWidth, useInkDraw } from "@/components/ui/notchset/chart"; import { SegmentedControl } from "@/components/ui/notchset/segmented-control"; /* A fictional shop's orders per day: the chart family's parts assembled into one line chart. */ const DAYS = Array.from({ length: 90 }, (_, i) => ({ label: `Day ${i + 1}`, value: Math.round(120 + i * 1.6 + Math.sin(i / 4) * 14 + (i > 60 ? 18 : 0)) })); export default function ChartDemo() { const [box, W] = useChartWidth(560); const [range, setRange] = React.useState("90"); const [at, setAt] = React.useState(null); const drawn = useInkDraw(range); const shown = DAYS.slice(DAYS.length - Number(range)); const H = 200, PT = 24; const lo = Math.min(...shown.map((d) => d.value)) * 0.9, hi = Math.max(...shown.map((d) => d.value)) * 1.05; const X = (i: number) => (i / (shown.length - 1)) * (W - 12) + 6; const Y = (v: number) => PT + (1 - (v - lo) / (hi - lo)) * (H - PT - 4); const pts = shown.map((d, i) => [X(i), Y(d.value)] as [number, number]); const line = smoothPath(pts); const i = at ?? shown.length - 1; const d = shown[i]!; const grid = niceTicks(lo, hi, 3); return (
({ y: Y(v), label: String(Math.round(v)) }))} /> (k % 15 === 0 ? [{ x: X(k), label: s.label }] : []))} />
[s.label, s.value])} />
); } ``` This example also uses `segmented-control` (https://notchset.dev/components/segmented-control). Installing this item doesn't bring them; to paste the example as it is: `npx shadcn@latest add https://notchset.dev/r/chart.json https://notchset.dev/r/segmented-control.json`. ## Customising - Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component. - Dark mode follows the `.dark` class or `data-theme="dark"` on an ancestor (the shadcn and next-themes conventions). - Update later: Commit or stash local changes first (or copy the files), so the update can be undone. Read https://notchset.dev/r/changelog.json for the new versions: a major version, an entry marked breaking or a merge says what to change. Then re-run the install with `--overwrite`, on a branch. It replaces the component's files, the shared helper files they import, and the item's CSS rules in the global stylesheet, so review the whole diff (components, shared files, CSS), re-apply your own edits, and run the app's typecheck, tests and build. ## Accessibility contract (preserve when editing) ## Install ```bash npx shadcn@latest add https://notchset.dev/r/chart.json ``` Or add the `@notchset` registry to components.json and run `npx shadcn@latest add @notchset/chart`. Every components.json style gets the same files. ## Continue the workflow - [Activity heatmap](https://notchset.dev/components/activity-heatmap) - [Inline bar](https://notchset.dev/components/inline-bar) - [Meter](https://notchset.dev/components/meter) ## Source ### components/ui/notchset/chart.tsx ```tsx // Notchset chart 2.1.0 · https://notchset.dev/changelog "use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { usePortalContainer } from "@/lib/notchset/portal"; import { RollingNumber } from "@/components/ui/notchset/rolling-number"; import { type Pt, areaPath, niceTicks, smoothPath, stepPath } from "@/lib/notchset/curve"; /* * Chart: the parts every chart in the system is drawn with, so a burn-up, a week of bars, a cumulative flow and a * revenue line read as one family (the violet glow: one focus element per chart). * * - One hue. The measured series is drawn in --ns-series (a calm violet), a smooth 2px line (monotone, so a running * total never dips between two points) with a soft glow under it and the area under it fading from that hue down to * the surface; bars are its soft tints with one focus bar. A band ladders the same hue in steps (SERIES_STEPS, * validated light and dark). References (scope, pace, target, markers, grid) and every value stay ink. * - A halo on the point you're on (at rest: the latest), a thin guide and a dark pill with the value that follow the * pointer or the arrow keys, and the period you're in raised as a chip on the axis. * - A grid that is barely there, its labels in the mono face; one hero figure above, its label small beside it. * - Still on arrival. It moves only for the reader: the halo and pill follow a scrub, and a range you pick redraws * the line in ink (useInkDraw). Reduced motion lands every state at once. * - Every chart writes its numbers: the surface is a slider whose value text says the point you're on, and * ChartTable carries every point for a screen reader. * * The parts are plain: a block measures its width (useChartWidth), draws its marks in an SVG at that pixel size and * lays the HTML parts (halo, pill, axis) over it with ChartSurface. */ /** The steps of the one series hue for an ordered band (lightest first), as opacities over the surface. */ const SERIES_STEPS = [0.45, 0.63, 0.82, 1] as const; const f1 = (n: number) => (Math.round(n * 10) / 10).toString(); /* measured before paint in the browser; an ordinary effect on the server, where layout effects warn */ const useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; /** * The width a chart is given, kept current; it draws at that size so its text stays its real size on a phone. * The ref is a callback, so the measuring follows the element itself: a chart that first renders empty and then * gets points starts measuring the box it now draws, and a replaced or removed box is let go. */ function useChartWidth(fallback = 640): [React.RefCallback, number, T | null] { const [el, setEl] = React.useState(null); const [w, setW] = React.useState(fallback); React.useEffect(() => { if (!el) return; const read = () => setW(Math.max(200, Math.round(el.clientWidth || fallback))); read(); if (typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(read); ro.observe(el); return () => ro.disconnect(); }, [el, fallback]); return [setEl, w, el]; } /** * The ink draw: a token that changes when `key` changes after the chart is on screen (a range picked), never on * arrival. Key a line with it and pass `drawn` to InkLine so the line draws itself once. */ function useInkDraw(key: unknown): number { const [n, setN] = React.useState(0); const first = React.useRef(true); const prev = React.useRef(key); React.useEffect(() => { if (first.current) { first.current = false; return; } if (prev.current !== key) { prev.current = key; setN((x) => x + 1); } }, [key]); return n; } /** Reduced motion, from the page's own setting (data-motion) or the device's, which always wins. */ const reducedMotion = () => { if (typeof document === "undefined") return true; return document.documentElement.dataset.motion === "reduced" || (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches); }; /** The foundation's ease (--ns-ease, cubic-bezier(0.22, 1, 0.36, 1)) for motion drawn frame by frame. */ function nsEase(t: number) { if (t <= 0) return 0; if (t >= 1) return 1; const [x1, y1, x2, y2] = [0.22, 1, 0.36, 1]; const bez = (u: number, a: number, b: number) => 3 * a * u * (1 - u) * (1 - u) + 3 * b * u * u * (1 - u) + u * u * u; let lo = 0, hi = 1, u = t; for (let i = 0; i < 18; i++) { u = (lo + hi) / 2; if (bez(u, x1, x2) < t) lo = u; else hi = u; } return bez(u, y1, y2); } /** How long a chart takes to travel from one state of its data to the next (an edit, a filter, a range). */ const MORPH_MS = 520; /* * The entrance: the first time a page's charts arrive in a session they enter once (bars rise, a line draws, an area * fades in), the way figures count up once; back on that page in the same session they are simply there. Reduced * motion never enters. Kept per page and kind in session storage (a private window without it enters once per load). */ const seenHere = new Set(); const SEEN_KEY = "ns-charts-seen"; function chartSeen(key: string) { if (seenHere.has(key)) return true; try { return (JSON.parse(sessionStorage.getItem(SEEN_KEY) ?? "[]") as string[]).includes(key); } catch { return false; } } function rememberChart(key: string) { seenHere.add(key); try { const all = new Set(JSON.parse(sessionStorage.getItem(SEEN_KEY) ?? "[]") as string[]); all.add(key); sessionStorage.setItem(SEEN_KEY, JSON.stringify([...all].slice(-200))); } catch {} } /** True while this chart should play its entrance: its first arrival on this page this session, motion allowed. */ function useEntrance(kind: string): boolean { const [key] = React.useState(() => (typeof window === "undefined" ? kind : `${window.location.pathname}${window.location.hash.split("?")[0]}|${kind}`)); const [first] = React.useState(() => typeof window !== "undefined" && !reducedMotion() && !chartSeen(key)); React.useEffect(() => rememberChart(key), [key]); /* hydrating a server-rendered page, it reads as the server did (no entrance), so the HTML matches and the chart is simply there; a chart rendered in the browser enters as before */ return React.useSyncExternalStore(NO_STORE, () => first, () => false); } const NO_STORE = () => () => {}; /** Resample a run of points to n, along its own index, so two runs of any lengths can blend point for point. */ function resample(pts: Pt[], n: number): Pt[] { if (!pts.length) return Array.from({ length: n }, () => [0, 0] as Pt); if (pts.length === n) return pts; return Array.from({ length: n }, (_, i) => { const f = n === 1 ? 0 : (i / (n - 1)) * (pts.length - 1); const a = pts[Math.floor(f)]!, b = pts[Math.min(pts.length - 1, Math.ceil(f))]!, t = f - Math.floor(f); return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t] as Pt; }); } /** * The morph: a set of point runs that travel, whenever the data changes (an edit, a task done, a filter, a range, a * workspace), from the geometry on screen to the new one in one eased move of MORPH_MS on the foundation's ease, * never redrawn from nothing; interrupted mid-move, the next move starts from wherever the points are. `enter` is * where the runs start on an entrance (bars at their baseline), with each point `stagger` ms after the one before; * without it they arrive in place. Reduced motion lands every state at once. */ function useMorph(target: Pt[][], ms = MORPH_MS, enter?: Pt[][] | null, stagger = 0, width?: number): Pt[][] { const [shown, setShown] = React.useState(() => enter ?? target); const cur = React.useRef(enter ?? target); const raf = React.useRef(0); const moving = React.useRef(false); const lastW = React.useRef(width); const key = JSON.stringify(target.map((r) => r.map(([x, y]) => [Math.round(x * 10), Math.round(y * 10)]))); const first = React.useRef(true); React.useEffect(() => { cancelAnimationFrame(raf.current); const entering = first.current && !!enter; /* the chart measuring itself or the window resizing is not a change of data: it lands at once (unless an entrance is under way, which carries on to the new size) */ const resized = width !== lastW.current; lastW.current = width; if ((first.current && !enter) || reducedMotion() || (resized && !moving.current)) { first.current = false; cur.current = target; moving.current = false; setShown(target); return; } first.current = false; moving.current = true; const from = target.map((r, k) => resample(cur.current[k] ?? r, r.length)); const longest = Math.max(1, ...target.map((r) => r.length)); /* a stagger never stretches the whole move by more than a quarter of a second */ const lag = entering && longest > 1 ? Math.min(stagger, 240 / (longest - 1)) : 0; const t0 = performance.now(); const tick = (now: number) => { let done = true; const next = target.map((r, k) => r.map(([x, y], i) => { const t = Math.min(1, Math.max(0, (now - t0 - i * lag) / ms)); if (t < 1) done = false; const e = nsEase(t), f = from[k]![i]!; return [f[0] + (x - f[0]) * e, f[1] + (y - f[1]) * e] as Pt; }), ); cur.current = next; setShown(next); if (!done) raf.current = requestAnimationFrame(tick); else moving.current = false; }; raf.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf.current); // eslint-disable-next-line react-hooks/exhaustive-deps }, [key]); return shown.length === target.length && shown.every((r, k) => r.length === target[k]!.length) ? shown : target; } /** The height of a run of points at x, along its straight segments (its ends held beyond them). */ function pointAt(run: Pt[], x: number): number { if (x <= run[0]![0]) return run[0]![1]; for (let i = 1; i < run.length; i++) if (x <= run[i]![0]) { const [x0, y0] = run[i - 1]!, [x1, y1] = run[i]!; return y0 + (y1 - y0) * ((x - x0) / (x1 - x0 || 1)); } return run.at(-1)![1]; } /** * The gap between what happened (a) and the comparison (c), in pixels, over the span they share: one closed shape * per stretch where a stays above c (ahead) or below it (behind), split where they cross. */ function gapShapes(a: Pt[], c: Pt[]): { d: string; ahead: boolean }[] { if (a.length < 2 || c.length < 2) return []; const x0 = Math.max(a[0]![0], c[0]![0]), x1 = Math.min(a.at(-1)![0], c.at(-1)![0]); if (x1 - x0 < 1) return []; const xs = [...new Set([...a, ...c].map((p) => p[0]).filter((x) => x >= x0 && x <= x1).concat([x0, x1]))].sort((p, q) => p - q); const pts = xs.map((x) => [x, pointAt(a, x), pointAt(c, x)] as const); /* on screen, smaller y is higher: a above c is ahead, so the signed gap is yc − ya; a tie is within a hair */ const gap = (p: readonly [number, number, number]) => (Math.abs(p[2] - p[1]) < 1e-6 ? 0 : Math.sign(p[2] - p[1])); /* 1. a crossing strictly between two samples becomes a sample of its own, where the lines meet */ const all: (readonly [number, number, number])[] = []; pts.forEach((p, i) => { const q = pts[i - 1]; if (q && gap(q) * gap(p) < 0) { const t = (q[2] - q[1]) / (q[2] - q[1] - (p[2] - p[1])); const x = q[0] + (p[0] - q[0]) * t, y = q[1] + (p[1] - q[1]) * t; all.push([x, y, y]); } all.push(p); }); /* 2. now no interval changes side inside it: each is ahead, behind or a tie. Runs join intervals on one side (through a touching tie too); a change of side at a tie, or a stretch of ties, ends the run, and ties draw nothing. */ const out: { d: string; ahead: boolean }[] = []; let run: (readonly [number, number, number])[] = []; let side = 0; const close = () => { if (run.length > 1 && side) { const top = run.map(([x, ya], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${ya.toFixed(1)}`).join(""); const back = [...run].reverse().map(([x, , yc]) => `L${x.toFixed(1)} ${yc.toFixed(1)}`).join(""); out.push({ d: `${top}${back}Z`, ahead: side > 0 }); } run = []; side = 0; }; for (let i = 1; i < all.length; i++) { const q = all[i - 1]!, p = all[i]!; const s = gap(q) || gap(p); if (!s) { close(); continue; } if (s !== side) { close(); side = s; run = [q]; } run.push(p); } close(); return out; } /* ahead in a soft tint of the ok colour, behind in a calm tint of the error colour: fills carry the meaning, lines stay ink */ /* the strengths are validated as a pair, light and dark, for normal and colour-blind separation (LANGUAGE.md §9) */ const GAP_TINT = { ahead: "color-mix(in srgb, var(--ns-ok) 60%, var(--ns-panel))", behind: "color-mix(in srgb, var(--ns-bad) 30%, var(--ns-panel))" } as const; /** One stretch of the gap between two lines, shaded for ahead or behind; it fades in after the line on an entrance. */ function GapShape({ d, ahead, entering }: { d: string; ahead: boolean; entering?: boolean | undefined }) { return ; } /** The key for the shaded gap, naming only what is on screen. */ function GapKey({ gaps, ahead = "Ahead", behind = "Behind" }: { gaps: { ahead: boolean }[]; ahead?: string | undefined; behind?: string | undefined }) { if (!gaps.length) return null; return ( {gaps.some((g) => g.ahead) && ( {ahead} )} {gaps.some((g) => !g.ahead) && ( {behind} )} ); } /** * A change, read by what it means: every figure says which way is better ("up" for done, "down" for cycle time, * overdue, scope added, stuck and late). Better is ok, worse is bad, no change is grey; a change from zero reads * "+4 (new)"; with nothing to compare against it is a grey dash. `pct` writes it as a percentage of what it was. */ function deltaOf(now: number | null | undefined, then: number | null | undefined, better: "up" | "down", opts: { pct?: boolean; unit?: (n: number) => string } = {}): { value: string; tone: "ok" | "bad" | "neutral" } { if (now == null || then == null || Number.isNaN(now) || Number.isNaN(then)) return { value: "—", tone: "neutral" }; const d = now - then; if (d === 0) return { value: opts.pct ? "±0%" : "±0", tone: "neutral" }; const sign = d > 0 ? "+" : "−"; const fmt = opts.unit ?? ((n: number) => String(n)); const value = then === 0 ? `${sign}${fmt(Math.abs(d))} (new)` : opts.pct ? `${sign}${Math.abs(Math.round((d / Math.abs(then)) * 100))}%` : `${sign}${fmt(Math.abs(d))}`; return { value, tone: (d > 0) === (better === "up") ? "ok" : "bad" }; } /** * The delta beside a hero figure: a small chip with its sign ("+31%", "2 days early"), tinted ok or bad by what it * means (never by its sign alone), and what it is measured against after it ("vs last 4 weeks"). */ function ChartDelta({ value, tone, against, className }: { value: string; tone: "ok" | "bad" | "neutral"; against?: React.ReactNode; className?: string | undefined }) { return ( {value} {against != null && {against}} ); } /* * Linked charts: inside a ChartLink, every chart that takes part reads the same day. Scrub one and the others light * the same day (a project's burn-up, its flow and its weeks). Days are numbers relative to today. */ const ChartLinkContext = React.createContext<{ day: number | null; set: (d: number | null) => void } | null>(null); function ChartLink({ children }: { children: React.ReactNode }) { const [day, set] = React.useState(null); const v = React.useMemo(() => ({ day, set }), [day]); return {children}; } /** * The point a chart is on, its own or the link's: `dayOf(i)` says which day stop i stands for (a week's bar, its * first day; `span` days long). Without a link it is the chart's own state. */ function useChartActive(n: number, dayOf?: ((i: number) => number) | undefined, span = 1): [number | null, (i: number | null) => void] { const link = React.useContext(ChartLinkContext); const [own, setOwn] = React.useState(null); if (!link || !dayOf) return [own, setOwn]; let at: number | null = null; if (link.day != null) for (let i = 0; i < n; i++) if (dayOf(i) <= link.day && link.day < dayOf(i) + span) at = i; return [at, (i) => link.set(i == null ? null : dayOf(i))]; } /** * A series line in the one hue, 2px and smooth; `drawn` (useEntrance, or useInkDraw after a range change) draws it once * along its length. The main series line glows softly under itself (the violet glow: one blurred copy, its filter * defined here once, faded in after the draw and never animated itself); a dashed, ink or quiet line never glows. */ function InkLine({ d, drawn = 0, tone = "series", dashed, width = 2, glow = tone === "series" && !dashed, core, className }: { d: string; drawn?: number | undefined; tone?: "series" | "ink" | "quiet" | undefined; dashed?: boolean | undefined; width?: number | undefined; glow?: boolean | undefined; /** the line's own colour when it is light itself (a luminous line: a near-white core over the Signature's glow) */ core?: string | undefined; className?: string | undefined }) { const stroke = tone === "series" ? "var(--ns-series)" : tone === "ink" ? "var(--ns-ink)" : "var(--ns-ink-3)"; const id = `gl${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`; return ( <> {glow && d && ( )} ); } /** The area under a series, fading from its hue at the top (18%) to nothing at the surface. */ function InkArea({ d, top, bottom, drawn = 0, strength = 1 }: { d: string; top: number; bottom: number; drawn?: number | undefined; strength?: number | undefined }) { const id = React.useId().replace(/[^a-zA-Z0-9]/g, ""); if (!d) return null; return ( <> ); } /** The grid: a few hairlines that are barely there. */ function ChartGrid({ ys, x1 = 0, x2 }: { ys: number[]; x1?: number | undefined; x2: number }) { return ( {ys.map((y) => ( ))} ); } /** Values on the grid, in the mono face, sitting just above their line at the left edge. */ function ChartYLabels({ ticks }: { ticks: { y: number; label: string }[] }) { return (
{ticks.map((t) => ( {t.label} ))}
); } /** The halo on the point you're on: the series dot, cut from the surface, with a soft ring of its hue and a faint glow (its strength the theme's glow). */ function ChartHalo({ x, y, hidden }: { x: number; y: number; hidden?: boolean | undefined }) { return (