#216
Bar sparklines
Three labelled bar sparklines with up, down and neutral trends in a wrapping row.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Bar sparklines" pattern (@codeatlasdev/ui demo #216, charts/sparklines) in my app.
Call get_demo({ ids: ["#216"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Showing compact weekly metrics inline where a full chart would be too heavy.
Keep these library parts, with the props and tokens the demo uses:
- Flex, Stack from "@codeatlasdev/ui"
- Sparkline from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `items` has 3 entries: Weekly sessions, Bounce rate, Avg pages, each with 7 `data` values
- `<Sparkline data={s.data} variant="bar" trend={s.trend} height="40px" />`
- `trend` values are `'up' as const`, `'down' as const` and `'neutral' as const`
- `<Flex gap="6" wrap align="center">` lays out the items, each in a `<Stack gap="1.5">` with a label
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
- Flex
@codeatlasdev/ui - Stack
@codeatlasdev/ui - Sparkline
@codeatlasdev/ui/charts
How it is built
- `items` has 3 entries: Weekly sessions, Bounce rate, Avg pages, each with 7 `data` values
- `<Sparkline data={s.data} variant="bar" trend={s.trend} height="40px" />`
- `trend` values are `'up' as const`, `'down' as const` and `'neutral' as const`
- `<Flex gap="6" wrap align="center">` lays out the items, each in a `<Stack gap="1.5">` with a label
Related
Loading source.