Gauge
An SVG arc dial for a single score. Hand-drawn as one path rather than pulled from a chart engine, so it stays sharp, needs no canvas, and renders on the server. The value is announced through meter semantics and always shown as text.
86Health score
62Coverage
28Capacity
<Gauge value={86} caption="Health score" tone="success" /><Gauge value={62} caption="Coverage" tone="warning" /><Gauge value={28} caption="Capacity" tone="danger" />Custom display
4.6Avg rating
<Gauge value={4.6} min={0} max={5} display="4.6" caption="Avg rating" size={120} />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | — | Current value within [min, max]. |
min | number | 0 | Range floor. |
max | number | 100 | Range ceiling. |
display | ReactNode | — | Centred figure; defaults to the rounded value. |
caption | ReactNode | — | Small caption under the figure. |
tone | BadgeTone | 'success' | Arc colour. |
size | number | 140 | Diameter in px. |