KQ-955 · RATE/DIAL

Rate Dial

Requests per second, read as a position. The needle swings to the rate on snap around a 240° arc whose every coordinate is rounded before it reaches an attribute, and the figure under the hub rolls its digits on the same spring, keyed from the right so the units column keeps its identity. A peak marker holds the highest reading seen, moving only outward and flaring once on a three-keyframe tween when it is beaten; the dial is a focusable role="meter" whose value text is a sentence, and Reset peak drops the mark back to the current rate.

KQ-955 · RATE/DIAL

gate-relaypeak 120 rps

Calm

120 rps · peak 0 rps · calm

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/rate-dial

Props

value: number; default —; The current rate; the host owns it, so the dial never reads a clock.
max: number; default 600; Full scale of the arc.
warnAt: number; default 0.75 × max; Value at or above which the dial reads busy and the warn band bites.
defaultPeak: number; default 0; Peak the dial mounts with, so a host with history shows its high at once.
onPeakChange: (peak: number) => void; default —; The held high — a reading, so it also fires on the first commit.
onZoneChange: (zone: RateZone) => void; default —; Calm, busy or over scale; a reading, so it also fires on the first commit.
unit: string; default "rps"; Printed under the rolling figure.
unitLong: string; default "requests per second"; The same unit spoken in full, so the value text is a sentence.
format: (value: number) => string; default rounded integer; Renders the figure and every spoken number.
label: string; default "Rate"; Names the dial.

Prop	Type	Default	Description
value	number	—	The current rate; the host owns it, so the dial never reads a clock.
max	number	600	Full scale of the arc.
warnAt	number	0.75 × max	Value at or above which the dial reads busy and the warn band bites.
defaultPeak	number	0	Peak the dial mounts with, so a host with history shows its high at once.
onPeakChange	(peak: number) => void	—	The held high — a reading, so it also fires on the first commit.
onZoneChange	(zone: RateZone) => void	—	Calm, busy or over scale; a reading, so it also fires on the first commit.
unit	string	"rps"	Printed under the rolling figure.
unitLong	string	"requests per second"	The same unit spoken in full, so the value text is a sentence.
format	(value: number) => string	rounded integer	Renders the figure and every spoken number.
label	string	"Rate"	Names the dial.