#204
Real-time stream
A live line chart that shifts in a new Live revenue point every 800 ms over a 20-point window.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Real-time stream" pattern (@codeatlasdev/ui demo #204, charts/line) in my app.
Call get_demo({ ids: ["#204"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Real-time monitoring such as live revenue, traffic or latency streams.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- LineChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `let streamData = $state<number[]>` starts with 20 values from `68000` to `115000`
- `setInterval` in `onMount` runs every `800` ms and sets `streamData = [...streamData.slice(1), next]`
- `next` is clamped with `Math.min(125000, Math.max(42000,`
- `series={[{ name: 'Live revenue', data: streamData }]}`
- `categories={streamData.map((_, i) => String(i))}`
- `valueFormatter={fmt}` and `height="300px"`
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 - LineChart
@codeatlasdev/ui/charts
How it is built
- `let streamData = $state<number[]>` starts with 20 values from `68000` to `115000`
- `setInterval` in `onMount` runs every `800` ms and sets `streamData = [...streamData.slice(1), next]`
- `next` is clamped with `Math.min(125000, Math.max(42000,`
- `series={[{ name: 'Live revenue', data: streamData }]}`
- `categories={streamData.map((_, i) => String(i))}`
- `valueFormatter={fmt}` and `height="300px"`
Related
Loading source.