#218
Live streaming micro charts
Three live sparklines for CPU, Memory and Network that shift in a new value every 600 ms.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Live streaming micro charts" pattern (@codeatlasdev/ui demo #218, charts/sparklines) in my app.
Call get_demo({ ids: ["#218"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Real-time system or traffic monitors showing the current value beside a rolling mini chart.
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:
- `let live = $state({` with `cpu`, `mem` and `net` arrays of 10 values
- `setInterval` in `onMount` every `600` ms replaces each array through `next(`
- `const metrics = $derived([` maps to labels CPU, Memory, Network
- `{m.data[m.data.length - 1].toFixed(0)}%` shows the latest value
- `<Sparkline data={m.data} height="40px" />` in a `<Card>`
- `<Grid columns={{ base: 1, sm: 3 }} gap="4">` holds the 3 cards
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
- `let live = $state({` with `cpu`, `mem` and `net` arrays of 10 values
- `setInterval` in `onMount` every `600` ms replaces each array through `next(`
- `const metrics = $derived([` maps to labels CPU, Memory, Network
- `{m.data[m.data.length - 1].toFixed(0)}%` shows the latest value
- `<Sparkline data={m.data} height="40px" />` in a `<Card>`
- `<Grid columns={{ base: 1, sm: 3 }} gap="4">` holds the 3 cards
Related
Loading source.