KQ-960 · ANOMALY/BAND

Anomaly Band

A metric line with normal drawn behind it: the band is the mean plus and minus sigma standard deviations of the readings handed in, and it glides to new bounds whenever the window or the width changes, while the line draws itself left to right on glide. Readings outside the band pop on snap and ring out on a tween staggered by cascade, and a selected outlier draws its whisker from the band's edge to the point. Every reading is also a row in a scroller with a roving tabindex where the arrows step, Home and End jump, Enter or Space selects and Escape clears.

KQ-960 · ANOMALY/BAND

±2σ

Window 1 of 2 · ±2σ · 0 outside · none selected

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/anomaly-band

Props

series: BandPoint[]; default —; The window, oldest first: an id, the printed clock and the value.
sigma: number; default 2; Half-width of the normal band, in standard deviations.
unit: string; default "ms"; Printed after every value.
selectedId / defaultSelectedId: string | null; default null; Controlled or initial selected reading, shared by the chart and the list.
onSelectedChange: (id: string | null) => void; default —; Fires from the press or key that selected or cleared a reading, never from an effect.
onOutliersChange: (count: number) => void; default —; Reports the count from the first commit as well as every window, because a count is a state.
format: (value: number) => string; default one decimal, trailing zero trimmed; Renders every value in the chart and the list.
label: string; default "Readings"; Names the chart and the list for assistive technology.

Prop	Type	Default	Description
series	BandPoint[]	—	The window, oldest first: an id, the printed clock and the value.
sigma	number	2	Half-width of the normal band, in standard deviations.
unit	string	"ms"	Printed after every value.
selectedId / defaultSelectedId	string \| null	null	Controlled or initial selected reading, shared by the chart and the list.
onSelectedChange	(id: string \| null) => void	—	Fires from the press or key that selected or cleared a reading, never from an effect.
onOutliersChange	(count: number) => void	—	Reports the count from the first commit as well as every window, because a count is a state.
format	(value: number) => string	one decimal, trailing zero trimmed	Renders every value in the chart and the list.
label	string	"Readings"	Names the chart and the list for assistive technology.