HealthScore
RadialProgress + delta indicator + optional breakdown tooltip. The
shape generalizes recurring product surfaces — service health,
deployment confidence, graph health.
Tone is auto-derived from the value (>= 80 → ok, >= 50 → accent,
otherwise warn); pass tone to override. The delta sign drives the
arrow direction and tone (positive → ok, negative → err).
Default#
Three services side-by-side, each with a signed delta vs. last week.
Loading…
With breakdown#
When a breakdown array is supplied the score wraps in a HoverCard
that reveals per-bucket contributions. Each entry can carry its own
tone.
Loading…
Breakdown entry (HealthScoreBreakdownEntry)#
Each entry in breakdown.
label: ReactNode(required) — bucket name shown on the left of the row (e.g. "Errors", "Latency", "Saturation").value: number(required) — the bucket's contribution as a number. Rendered in the row's value column.tone?: 'accent' | 'ok' | 'warn' | 'err'— tone for the value text. Defaults to inheriting the parent score's tone, so anokoverall score getsokrows by default.
Top-level props#
| Prop | Type | Default | Description |
|---|---|---|---|
| value * | number | — | Current value, 0..max. |
| max | number | undefined | 100 | Maximum value. Default 100. |
| delta | number | undefined | — | Signed change vs. the previous period. Positive draws an up-arrow + ok tone, negative draws a down-arrow + err tone. Pass `0` to render a flat indicator. |
| label | ReactNode | — | Label rendered under the score. |
| breakdown | readonly HealthScoreBreakdownEntry[] | undefined | — | Optional per-bucket contributions revealed in a HoverCard. |
| size | number | undefined | 72 | Pixel size for the RadialProgress. Default 72. |
| tone | enum | — | Color tone for the ring. Auto-derived when omitted. |
| aria-label | string | undefined | — | Accessible label for the score. Defaults to `${pct}% health`. |