KQ-954 · PERCENTILE/LINES

Percentile Lines

Three percentiles over one window, drawn together: each line arrives by pathLength on glide, offset by cascade so they read as three strokes rather than one. The gap between neighbouring lines is the point — hovering a band shades it and thickens its two boundary lines on flick, and the spread row below names the same gap in words as roving-tabindex buttons where Left and Right step, Home and End jump, and a press latches the shading. Every path's d is set and never animated, because a hidden series re-pairs the bands.

KQ-954 · PERCENTILE/LINES

ledger-api

p50, p95 and p99 across 12 samples from 09:00 to 09:55, peaking at 388 milliseconds.
Sample	p50	p95	p99
09:00	46 milliseconds	128 milliseconds	206 milliseconds
09:05	44 milliseconds	124 milliseconds	198 milliseconds
09:10	47 milliseconds	132 milliseconds	214 milliseconds
09:15	52 milliseconds	156 milliseconds	268 milliseconds
09:20	58 milliseconds	184 milliseconds	322 milliseconds
09:25	61 milliseconds	212 milliseconds	388 milliseconds
09:30	57 milliseconds	196 milliseconds	356 milliseconds
09:35	54 milliseconds	168 milliseconds	296 milliseconds
09:40	49 milliseconds	148 milliseconds	252 milliseconds
09:45	47 milliseconds	138 milliseconds	232 milliseconds
09:50	45 milliseconds	132 milliseconds	218 milliseconds
09:55	44 milliseconds	126 milliseconds	210 milliseconds

p95 max 212 ms · 3 of 3 shown

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/percentile-lines

Props

series: PercentileSeries[]; default —; Ordered low to high: id, label and one value per sample.
samples: string[]; default —; The x labels, one per value — the chart never reads a clock.
hidden / defaultHidden: string[]; default []; Controlled or initial ids of the hidden series.
onHiddenChange: (ids: string[]) => void; default —; Fires from the press or key that hid or showed a series.
onBandChange: (band: BandReading | null) => void; default —; The band under pointer or focus, with its widest spread; also fires on the first commit.
unit: string; default "ms"; Printed after every figure.
unitLong: string; default "milliseconds"; The same unit spoken in full, so every name and table cell is a sentence.
format: (value: number) => string; default rounded integer; Renders every value in the chart and its hidden table.
height: number; default 128; Plot height in px; the width is fluid.
label: string; default "Percentiles"; Names the chart and its hidden table.

Prop	Type	Default	Description
series	PercentileSeries[]	—	Ordered low to high: id, label and one value per sample.
samples	string[]	—	The x labels, one per value — the chart never reads a clock.
hidden / defaultHidden	string[]	[]	Controlled or initial ids of the hidden series.
onHiddenChange	(ids: string[]) => void	—	Fires from the press or key that hid or showed a series.
onBandChange	(band: BandReading \| null) => void	—	The band under pointer or focus, with its widest spread; also fires on the first commit.
unit	string	"ms"	Printed after every figure.
unitLong	string	"milliseconds"	The same unit spoken in full, so every name and table cell is a sentence.
format	(value: number) => string	rounded integer	Renders every value in the chart and its hidden table.
height	number	128	Plot height in px; the width is fluid.
label	string	"Percentiles"	Names the chart and its hidden table.