KQ-958 · SPARKLINE/GRID

Sparkline Grid

Many metrics, each one tile. Every line draws itself left to right on glide, staggered across the grid by cascade, and draws again whenever a new window replaces its readings; pressing a tile expands it in place, growing its line and gliding open a ResizeObserver-measured body of low, high, mean and sample count. It is a real grid: Left and Right step within a row, Up and Down keep the column, Home and End reach the row's ends, Control with them reaches the first or last tile, and Enter or Space opens.

KQ-958 · SPARKLINE/GRID

Window 1 of 2 · none open · 0 anomalies

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/sparkline-grid

Props

metrics: SparkMetric[]; default —; The tiles: id, name, unit, seeded series, an optional anomaly flag and note.
columns: number; default 2; Tiles per row; the arrow-key geometry follows it exactly.
expandedId / defaultExpandedId: string | null; default null; Controlled or initial expanded tile.
onExpandedChange: (id: string | null) => void; default —; Fires from the press or key that expanded or folded a tile, never from an effect.
onActiveChange: (id: string | null) => void; default —; Fires as hover or focus moves between tiles, and with null when both leave.
format: (value: number, unit: string) => string; default one decimal, then the unit; Renders every reading in the grid, so a host changes units in one place.
label: string; default "Metrics"; Names the grid for assistive technology.

Prop	Type	Default	Description
metrics	SparkMetric[]	—	The tiles: id, name, unit, seeded series, an optional anomaly flag and note.
columns	number	2	Tiles per row; the arrow-key geometry follows it exactly.
expandedId / defaultExpandedId	string \| null	null	Controlled or initial expanded tile.
onExpandedChange	(id: string \| null) => void	—	Fires from the press or key that expanded or folded a tile, never from an effect.
onActiveChange	(id: string \| null) => void	—	Fires as hover or focus moves between tiles, and with null when both leave.
format	(value: number, unit: string) => string	one decimal, then the unit	Renders every reading in the grid, so a host changes units in one place.
label	string	"Metrics"	Names the grid for assistive technology.