#196
Simple gauge
A single gauge showing a score of 78 with a Score label.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Simple gauge" pattern (@codeatlasdev/ui demo #196, charts/gauge) in my app.
Call get_demo({ ids: ["#196"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Showing one headline score or health percentage in a compact card.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- GaugeChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<GaugeChart value={78} label="Score" height="280px" />`
- Wrapped in `<Card full>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - GaugeChart
@codeatlasdev/ui/charts
How it is built
- `<GaugeChart value={78} label="Score" height="280px" />`
- Wrapped in `<Card full>`
Related
Loading source.