#217
KPI cards with trend lines
Four KPI cards, each with a value, a change percentage and a trend-coloured sparkline.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "KPI cards with trend lines" pattern (@codeatlasdev/ui demo #217, charts/sparklines) in my app.
Call get_demo({ ids: ["#217"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Dashboard summary tiles where each headline number needs a small history line.
Keep these library parts, with the props and tokens the demo uses:
- Card, Grid, Stack, Flex from "@codeatlasdev/ui"
- Sparkline from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `kpis` has 4 items: Monthly Revenue `$112k`, Active Users `24.8k`, Churn Rate `2.3%`, Avg Session `4m 12s`
- Each item has `label`, `value`, `change`, `trend` and 9 `data` values
- `<Sparkline data={k.data} trend={k.trend} height="32px" />`
- `<Grid columns={{ base: 1, sm: 2, lg: 4 }} gap="4">` with each KPI in `<Card>`
- `class:up={k.trend === 'up'}` and `class:down={k.trend === 'down'}` colour the change text
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 - Grid
@codeatlasdev/ui - Stack
@codeatlasdev/ui - Flex
@codeatlasdev/ui - Sparkline
@codeatlasdev/ui/charts
How it is built
- `kpis` has 4 items: Monthly Revenue `$112k`, Active Users `24.8k`, Churn Rate `2.3%`, Avg Session `4m 12s`
- Each item has `label`, `value`, `change`, `trend` and 9 `data` values
- `<Sparkline data={k.data} trend={k.trend} height="32px" />`
- `<Grid columns={{ base: 1, sm: 2, lg: 4 }} gap="4">` with each KPI in `<Card>`
- `class:up={k.trend === 'up'}` and `class:down={k.trend === 'down'}` colour the change text
Related
Loading source.