HealthDial
components/health/Dial.vue
SVG gauge dial with gradient color stops (cool→warn→warm→hot) and animated pointer needle. Status drives both color and needle position.
Scenarios
Cool
Warn
Warm
Hot
components/health/Dial.vue
Usage
<HealthDial
status = "—"
:lineLength = "600"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | String | — | Health status: 'cool', 'warn', 'warm', 'hot' (required) — drives gradient coloring and needle position |
| lineLength | Number | 600 | SVG stroke-dasharray length for the arc path |