Stream
A live sparkline with the current value in large type, appending a new reading on an interval and counting time since the last one.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphStream } from '@fractaldesign/machines-ui';Preview
56.0req/s
updated 0s ago
<GraphStream title="THROUGHPUT" unit="req/s" length={44} intervalMs={750} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption on the frame's top edge. |
| length | number | 40 | Points kept in the rolling history. Default 40. |
| intervalMs | number | 900 | Milliseconds between appends. Default 900. |
| values | number[] | — | Initial history. Default a seeded, SSR-safe random walk from 50. |
| generate | (tick: number, previous: number) => number | — | Next-value generator. Default a gentle random walk clamped to 0..100. |
| unit | string | '' | Suffix after the value, e.g. 'ms' or '%'. Default ''. |
| kind | StreamKind 'elapsed''ago' | 'ago' | Caption flavor: 'ago' counts since the last append; 'elapsed' since mount. |
| animated | boolean | true | Animate the appends. Default true. Reduced motion freezes the stream. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- motion reveals on scroll into view
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| StreamKind | type | Live appending sparkline with a big current value, like a terminal KPI. 'elapsed' | 'ago' |
Theming
CSS custom properties this component reads.
- --graph-accent
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphStream.svelte