Svelte 5 component · machines-ui · Animated
GraphStream
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
GraphStream is a Svelte 5 animated ASCII stream component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphStream } from '@fractaldesign/machines-ui';Usage
<GraphStream title="THROUGHPUT" unit="req/s" length={44} intervalMs={750} />Props
| Name | Type | Default |
|---|---|---|
title | string Caption on the frame's top edge. | — |
length | number Points kept in the rolling history. Default 40. | 40 |
intervalMs | number Milliseconds between appends. Default 900. | 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 Caption flavor: 'ago' counts since the last append; 'elapsed' since mount. | 'ago' |
animated | boolean Animate the appends. Default true. Reduced motion freezes the stream. | true |
class | string | '' |
Related components
GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely…GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.GraphWorkflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them,…ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and…