#985
Sparkline
Two KPI cards with an icon and a sparkline under the number: a line for active users and bars for churn, with a hint line.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Sparkline" pattern (@codeatlasdev/ui demo #985, layout/kpi-card) in my app.
Call get_demo({ ids: ["#985"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: A metric tile that shows its recent history. The chart is a snippet, so the charts subpath stays out of the core entry.
Keep these library parts, with the props and tokens the demo uses:
- KpiCard, KpiGrid from "@codeatlasdev/ui"
- Sparkline from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<KpiGrid>` with 2 `KpiCard` items
- `<KpiCard title="Active users" value="24.8k" trend={12.1} icon={Users}>` with `{#snippet chart()}<Sparkline data={[18, 19, 21, 20, 23, 25]} trend="up" />{/snippet}`
- `hint="Down from 2.4% in January"` on the churn card, whose chart is `<Sparkline data={[2.4, 2.3, 2.1, 2.2, 1.9, 1.7]} trend="up" variant="bar" />`: `trend="up"` is green because a falling churn is good
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
How it is built
- `<KpiGrid>` with 2 `KpiCard` items
- `<KpiCard title="Active users" value="24.8k" trend={12.1} icon={Users}>` with `{#snippet chart()}<Sparkline data={[18, 19, 21, 20, 23, 25]} trend="up" />{/snippet}`
- `hint="Down from 2.4% in January"` on the churn card, whose chart is `<Sparkline data={[2.4, 2.3, 2.1, 2.2, 1.9, 1.7]} trend="up" variant="bar" />`: `trend="up"` is green because a falling churn is good
Related
Loading source.