Element: #218 Live streaming micro charts (charts/sparklines) What it shows: Three live sparklines for CPU, Memory and Network that shift in a new value every 600 ms. When to use: Real-time system or traffic monitors showing the current value beside a rolling mini chart. Spec: - `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 - `` in a `` - `` holds the 3 cards Tags: sparkline, live, realtime, monitoring, onmount, grid Needs: @codeatlasdev/ui@4.4.0 + echarts Components: Card, Grid, Stack, Flex, Sparkline Live demo: https://ui.codeatlas.com.br/docs/charts/sparklines#live-streaming-micro-charts {#each metrics as m} {m.label} {m.data[m.data.length - 1].toFixed(0)}% {/each}