\n \n {children}\n \n {summary}\n
\n \n );\n}\n",
"type": "registry:component",
"target": "components/chart/_parts/chart-card.tsx"
},
{
"path": "registry/ndeko/components/chart/_parts/data-table.tsx",
"content": "export type DataRow = {\n id: string;\n /** The heading of the row: a day, a category, a step. */\n label: string;\n cells: readonly string[];\n};\n\ntype DataTableProps = {\n caption: string;\n /** The heading of the label column first, then one per cell. */\n columns: readonly string[];\n rows: readonly DataRow[];\n};\n\n/**\n * The numbers a chart draws, as a table for screen readers. It is taken out of the flow, so the\n * piece it sits in has to be positioned: a hidden box inside an area that scrolls sideways widens\n * the page otherwise.\n */\nexport function DataTable({ caption, columns, rows }: DataTableProps) {\n return (\n \n {caption}\n \n \n {columns.map((column) => (\n | \n {column}\n | \n ))}\n
\n \n \n {rows.map((row) => (\n \n | {row.label} | \n {row.cells.map((cell, index) => (\n {cell} | \n ))}\n
\n ))}\n \n
\n );\n}\n",
"type": "registry:component",
"target": "components/chart/_parts/data-table.tsx"
},
{
"path": "registry/ndeko/components/chart/_parts/demo.ts",
"content": "import type { AutoplayStep } from '@/registry/ndeko/hooks/use-autoplay';\nimport { keyDelayOf } from '@/registry/ndeko/lib/demonstration';\n\ntype WalkOptions = {\n /** Milliseconds before the first position. */\n startAfter?: number;\n /** Milliseconds between two positions. */\n stepMs?: number;\n};\n\n/** One step per position, so a reading crosses a plot the way a pointer does. */\nexport function walkSteps(\n positions: readonly Position[],\n moveTo: (position: Position) => void,\n { startAfter = 700, stepMs = 240 }: WalkOptions = {}\n): AutoplayStep[] {\n return positions.map((position, index) => {\n const after = keyDelayOf(index, startAfter, stepMs);\n return { after, run: () => moveTo(position) };\n });\n}\n\n/** What a demonstration points at lets go the moment a person takes over. */\nexport function whileDemonstrating(\n isDemonstrating: boolean,\n value: Value | null\n) {\n if (isDemonstrating) {\n return value;\n }\n return null;\n}\n",
"type": "registry:component",
"target": "components/chart/_parts/demo.ts"
},
{
"path": "registry/ndeko/components/chart/_parts/scale.ts",
"content": "export type Domain = {\n min: number;\n max: number;\n};\n\nexport type Scale = Domain & {\n step: number;\n ticks: number[];\n};\n\nconst NICE_FACTORS = [1, 2, 5, 10];\n\nconst EMPTY_DOMAIN: Domain = { min: 0, max: 0 };\n\nexport function clamp(value: number, min: number, max: number) {\n const atLeastMin = Math.max(value, min);\n return Math.min(atLeastMin, max);\n}\n\nexport function lerp(from: number, to: number, amount: number) {\n const span = to - from;\n return from + span * amount;\n}\n\nexport function sumOf(values: readonly number[]) {\n let total = 0;\n for (const value of values) {\n total += value;\n }\n return total;\n}\n\nexport function extentOf(values: readonly number[]): Domain {\n if (values.length === 0) {\n return EMPTY_DOMAIN;\n }\n let min = values[0];\n let max = values[0];\n for (const value of values) {\n min = Math.min(min, value);\n max = Math.max(max, value);\n }\n return { min, max };\n}\n\n/** Bars and areas are read from zero, so their domain always holds it. */\nexport function withZero(domain: Domain): Domain {\n const min = Math.min(domain.min, 0);\n const max = Math.max(domain.max, 0);\n return { min, max };\n}\n\n/** Where a value sits in a domain, from 0 at its lowest to 1 at its highest. */\nexport function ratioOf(value: number, domain: Domain) {\n const span = domain.max - domain.min;\n if (span === 0) {\n return 0;\n }\n const offset = value - domain.min;\n return offset / span;\n}\n\n/** A flat series still needs room above and below it to be drawn. */\nfunction spanOf(domain: Domain) {\n const span = domain.max - domain.min;\n if (span > 0) {\n return span;\n }\n const size = Math.abs(domain.max);\n return Math.max(size, 1);\n}\n\nfunction niceStepOf(roughStep: number) {\n const logarithm = Math.log10(roughStep);\n const exponent = Math.floor(logarithm);\n const magnitude = 10 ** exponent;\n const factor = NICE_FACTORS.find((candidate) => {\n const candidateStep = candidate * magnitude;\n return candidateStep >= roughStep;\n });\n const safeFactor = factor ?? 10;\n return safeFactor * magnitude;\n}\n\nfunction decimalsOf(step: number) {\n const logarithm = Math.log10(step);\n const exponent = Math.floor(logarithm);\n return Math.max(0, -exponent);\n}\n\n/** Adding zero turns a negative zero into zero, which a number format would write as -0. */\nfunction roundedTo(value: number, decimals: number) {\n const factor = 10 ** decimals;\n const scaled = Math.round(value * factor);\n const rounded = scaled / factor;\n return rounded + 0;\n}\n\n/** A scale with round ticks that holds the whole domain, in at most `maxLines` steps. */\nexport function niceScaleOf(domain: Domain, maxLines: number): Scale {\n const span = spanOf(domain);\n const roughStep = span / maxLines;\n const step = niceStepOf(roughStep);\n const decimals = decimalsOf(step);\n const stepsBelow = Math.floor(domain.min / step);\n const lowest = stepsBelow * step;\n const highestWanted = Math.max(domain.max, lowest + step);\n const stepsAbove = Math.ceil(highestWanted / step);\n const lineCount = stepsAbove - stepsBelow;\n const tickCount = lineCount + 1;\n const ticks = Array.from({ length: tickCount }, (_, index) => {\n const tick = lowest + index * step;\n return roundedTo(tick, decimals);\n });\n const lastIndex = ticks.length - 1;\n return { min: ticks[0], max: ticks[lastIndex], step, ticks };\n}\n\n/** Columns share the plot equally and a mark sits in the middle of its column. */\nexport function columnCenterOf(index: number, count: number) {\n const center = index + 0.5;\n return center / count;\n}\n\nexport function columnIndexAt(ratio: number, count: number) {\n const rawIndex = Math.floor(ratio * count);\n const lastIndex = Math.max(count - 1, 0);\n return clamp(rawIndex, 0, lastIndex);\n}\n\nexport function percentOf(share: number) {\n const percent = share * 100;\n return `${percent}%`;\n}\n\n/** The whole numbers that lead from one position to another: the start is left out, the end is kept. */\nexport function positionsTo(from: number, to: number) {\n const gap = to - from;\n const distance = Math.abs(gap);\n const direction = Math.sign(gap);\n return Array.from({ length: distance }, (_, index) => {\n const travelled = index + 1;\n const offset = travelled * direction;\n return from + offset;\n });\n}\n",
"type": "registry:component",
"target": "components/chart/_parts/scale.ts"
},
{
"path": "registry/ndeko/components/chart/_parts/use-chart-demo.ts",
"content": "'use client';\n\nimport {\n useAutoplay,\n type AutoplayOptions,\n type AutoplayStep,\n} from '@/registry/ndeko/hooks/use-autoplay';\nimport { useKeptHeight } from '@/registry/ndeko/hooks/use-kept-height';\n\n/**\n * What every chart demo shares: the demonstration, the box that keeps its tallest height so a round\n * never moves the page, and a stop when the keyboard brings focus in. A person who tabs to a plot\n * reads it with the arrow keys from there, and has pressed no key inside the piece yet.\n */\nexport function useChartDemo(\n steps: readonly AutoplayStep[],\n options?: AutoplayOptions\n) {\n const demo = useAutoplay(steps, options);\n const { ref, takeOver } = demo;\n\n useKeptHeight(ref);\n\n function stopOnKeyboardFocus(event: React.FocusEvent) {\n const isKeyboardFocus = event.target.matches(':focus-visible');\n if (isKeyboardFocus) {\n takeOver();\n }\n }\n\n return { ...demo, stopOnKeyboardFocus };\n}\n",
"type": "registry:component",
"target": "components/chart/_parts/use-chart-demo.ts"
},
{
"path": "registry/ndeko/components/chart/_parts/use-step-drag.ts",
"content": "'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useTimeouts } from '@/registry/ndeko/hooks/use-timeouts';\n\nimport { clamp, lerp, positionsTo } from './scale';\n\n/** `columns` share the track equally and the handle sits in the middle of one; `edges` are the lines between columns, both ends included. */\ntype Placement = 'columns' | 'edges';\n\ntype StepDragOptions = {\n /** How many positions the handle can rest on. */\n count: number;\n index: number;\n onIndexChange: (index: number) => void;\n placement?: Placement;\n};\n\ntype Sample = {\n time: number;\n position: number;\n};\n\n/** After the hand lets go, the handle travels as far as its speed would carry it in this time. */\nconst MOMENTUM_MS = 140;\n\n/** A hand that stopped this long before letting go carries nothing. */\nconst STILL_AFTER_MS = 90;\n\nconst FIRST_COAST_MS = 36;\n\n/** Each position of a coast takes this much longer than the one before, so the handle slows to a stop. */\nconst COAST_SLOWDOWN = 1.28;\n\nconst PAGE_STEP = 3;\n\n/** How much of the newest reading of the speed is kept: one sample alone is too jumpy. */\nconst SPEED_SMOOTHING = 0.6;\n\nfunction positionFrom(\n event: React.PointerEvent,\n count: number,\n placement: Placement\n) {\n const box = event.currentTarget.getBoundingClientRect();\n const offset = event.clientX - box.left;\n const ratio = offset / box.width;\n if (placement === 'edges') {\n const lastEdge = count - 1;\n return ratio * lastEdge;\n }\n const column = ratio * count;\n return column - 0.5;\n}\n\nfunction keyTargetOf(key: string, index: number, lastIndex: number) {\n const isForward = key === 'ArrowRight' || key === 'ArrowUp';\n const isBackward = key === 'ArrowLeft' || key === 'ArrowDown';\n if (isForward) {\n return index + 1;\n }\n if (isBackward) {\n return index - 1;\n }\n if (key === 'PageUp') {\n return index + PAGE_STEP;\n }\n if (key === 'PageDown') {\n return index - PAGE_STEP;\n }\n if (key === 'Home') {\n return 0;\n }\n if (key === 'End') {\n return lastIndex;\n }\n return null;\n}\n\n/**\n * A handle that moves from one position to the next under a hand: it catches on each position, it\n * keeps going for a moment when it is flicked, and the arrow keys move it one position at a time.\n * Spread `sliderProps` on the track, which is the one tab stop.\n */\nexport function useStepDrag({\n count,\n index,\n onIndexChange,\n placement = 'columns',\n}: StepDragOptions) {\n const { schedule, clearAll } = useTimeouts();\n const [isDragging, setIsDragging] = useState(false);\n const lastSample = useRef(null);\n const speed = useRef(0);\n const lastIndex = Math.max(count - 1, 0);\n\n function indexAt(position: number) {\n const nearest = Math.round(position);\n return clamp(nearest, 0, lastIndex);\n }\n\n function moveTo(next: number) {\n if (next !== index) {\n onIndexChange(next);\n }\n }\n\n /** Goes to a position through every one on the way, each a little later than the last. */\n function coastTo(target: number) {\n clearAll();\n const end = clamp(target, 0, lastIndex);\n const stops = positionsTo(index, end);\n let delay = 0;\n let pace = FIRST_COAST_MS;\n for (const stop of stops) {\n delay += pace;\n pace *= COAST_SLOWDOWN;\n schedule(() => onIndexChange(stop), delay);\n }\n }\n\n function startDrag(event: React.PointerEvent) {\n if (event.button !== 0) {\n return;\n }\n clearAll();\n event.currentTarget.setPointerCapture(event.pointerId);\n const position = positionFrom(event, count, placement);\n lastSample.current = { time: event.timeStamp, position };\n speed.current = 0;\n setIsDragging(true);\n const next = indexAt(position);\n moveTo(next);\n }\n\n function drag(event: React.PointerEvent) {\n const previous = lastSample.current;\n if (!previous) {\n return;\n }\n const position = positionFrom(event, count, placement);\n const elapsed = event.timeStamp - previous.time;\n if (elapsed > 0) {\n const moved = position - previous.position;\n const latest = moved / elapsed;\n speed.current = lerp(speed.current, latest, SPEED_SMOOTHING);\n }\n lastSample.current = { time: event.timeStamp, position };\n const next = indexAt(position);\n moveTo(next);\n }\n\n function endDrag(event: React.PointerEvent) {\n const previous = lastSample.current;\n if (!previous) {\n return;\n }\n lastSample.current = null;\n setIsDragging(false);\n const stillFor = event.timeStamp - previous.time;\n if (stillFor > STILL_AFTER_MS) {\n return;\n }\n const carried = Math.round(speed.current * MOMENTUM_MS);\n if (carried !== 0) {\n coastTo(index + carried);\n }\n }\n\n function cancelDrag() {\n lastSample.current = null;\n setIsDragging(false);\n }\n\n function pressKey(event: React.KeyboardEvent) {\n const target = keyTargetOf(event.key, index, lastIndex);\n if (target === null) {\n return;\n }\n event.preventDefault();\n clearAll();\n const next = clamp(target, 0, lastIndex);\n moveTo(next);\n }\n\n const sliderProps = {\n onPointerDown: startDrag,\n onPointerMove: drag,\n onPointerUp: endDrag,\n onPointerCancel: cancelDrag,\n onKeyDown: pressKey,\n };\n\n return { isDragging, flickTo: coastTo, sliderProps };\n}\n",
"type": "registry:component",
"target": "components/chart/_parts/use-step-drag.ts"
}
],
"categories": [
"components",
"chart"
],
"type": "registry:component"
}