KQ-951 · LATENCY/HIST

Latency Histogram

A distribution of response times whose bars scale up from their baselines on glide in a cascade sweep, so a new window re-shapes the same bars rather than mounting a new chart. The p50, p95 and p99 marks stand on the same axis and slide to their places on snap; pressing a percentile chip pins it, washing the plot to the mark and dropping every bar past it to the hairline. The bars are a roving-tabindex list of buttons where Left and Right step, Home and End jump, and Enter or Space latches a bucket's reading.

KQ-951 · LATENCY/HIST

ledger-api · last 15 min4,180 req

p95 0 ms · 15 min · 4,180 requests

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/latency-hist

Props

buckets: LatencyBucket[]; default —; Ordered buckets of { from, to, count }; the last may leave `to` off to run open-ended.
pinned / defaultPinned: "p50" | "p95" | "p99" | null; default null; Controlled or initial pinned percentile.
onPinnedChange: (pinned: Percentile | null) => void; default —; Fires from the press or key that pinned or released a percentile.
onPercentilesChange: (marks: PercentileMarks) => void; default —; The computed p50, p95 and p99 — a reading, so it also fires on the first commit.
onBucketChange: (bucket: BucketReading | null) => void; default —; The bucket under pointer or focus; also fires on the first commit.
unit: string; default "ms"; Printed after every latency figure.
unitLong: string; default "milliseconds"; The same unit spoken in full, so every accessible name is a sentence.
windowLabel: string; default —; The window these buckets cover, printed in the header.
label: string; default "Latency"; Names the chart and its bar list.
height: number; default 96; Plot height in px; the width is fluid.

Prop	Type	Default	Description
buckets	LatencyBucket[]	—	Ordered buckets of { from, to, count }; the last may leave `to` off to run open-ended.
pinned / defaultPinned	"p50" \| "p95" \| "p99" \| null	null	Controlled or initial pinned percentile.
onPinnedChange	(pinned: Percentile \| null) => void	—	Fires from the press or key that pinned or released a percentile.
onPercentilesChange	(marks: PercentileMarks) => void	—	The computed p50, p95 and p99 — a reading, so it also fires on the first commit.
onBucketChange	(bucket: BucketReading \| null) => void	—	The bucket under pointer or focus; also fires on the first commit.
unit	string	"ms"	Printed after every latency figure.
unitLong	string	"milliseconds"	The same unit spoken in full, so every accessible name is a sentence.
windowLabel	string	—	The window these buckets cover, printed in the header.
label	string	"Latency"	Names the chart and its bar list.
height	number	96	Plot height in px; the width is fluid.