KQ-957 · APDEX/RING

Apdex Ring

A satisfaction score drawn as one ring cut into three. The component cuts the latency distribution it is handed by its threshold and draws satisfied, tolerating and frustrated as three stacked arcs of the same circle whose lengths ease on glide, while the score rolls on snap in the middle. The threshold's own radiogroup lives inside the ring: Left and Right step and select without wrapping past the ends, Home and End jump, and the selected pill travels behind the words on snap.

KQ-957 · APDEX/RING

good

Satisfied: 7,36089.3%
Tolerating: 7609.2%
Frustrated: 1201.5%

Traffic fast · T 500 ms · 0.000

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/apdex-ring

Props

samples: LatencySample[]; default —; The seeded distribution the ring cuts: a response time and how many requests landed there.
thresholdMs / defaultThresholdMs: number; default the first preset; Controlled or initial T; satisfied is at or under it, tolerating up to four times it.
onThresholdChange: (ms: number) => void; default —; Fires from the press or arrow key that chose a preset, never from an effect.
presets: number[]; default [250, 500, 1000]; The thresholds the radiogroup offers.
onScoreChange: (score: number) => void; default —; Reports the score from the first commit as well as every re-cut, because a score is a state.
label: string; default "Apdex"; Names the ring for assistive technology and opens its spoken sentence.
formatMs: (ms: number) => string; default ms under a second, seconds above; Renders every threshold, so a host changes units in one place.

Prop	Type	Default	Description
samples	LatencySample[]	—	The seeded distribution the ring cuts: a response time and how many requests landed there.
thresholdMs / defaultThresholdMs	number	the first preset	Controlled or initial T; satisfied is at or under it, tolerating up to four times it.
onThresholdChange	(ms: number) => void	—	Fires from the press or arrow key that chose a preset, never from an effect.
presets	number[]	[250, 500, 1000]	The thresholds the radiogroup offers.
onScoreChange	(score: number) => void	—	Reports the score from the first commit as well as every re-cut, because a score is a state.
label	string	"Apdex"	Names the ring for assistive technology and opens its spoken sentence.
formatMs	(ms: number) => string	ms under a second, seconds above	Renders every threshold, so a host changes units in one place.