Element: #197 Custom zones (charts/gauge)
What it shows: Three gauges (CPU 67, Memory 82, Disk 45) that share colour zones for success, warning and error.
When to use: Resource or SLA dashboards where thresholds change the gauge colour.
Spec:
- `const zones: GaugeZone[]` with 3 entries: `{ until: 0.5, color: 'success' }`, `{ until: 0.8, color: 'warning' }`, `{ until: 1, color: 'error' }`
- `const metrics` with 3 items: CPU `67`, Memory `82`, Disk `45`, fields `label` and `value`
- `{#each metrics as m}` renders ``
- Each gauge sits in its own `` inside ``
Tags: gauge-chart, zones, thresholds, grid, metrics, card
Needs: @codeatlasdev/ui@4.4.0 + echarts
Components: Card, Grid, GaugeChart
Live demo: https://ui.codeatlas.com.br/docs/charts/gauge#custom-zones
{#each metrics as m}
{m.label}
{/each}