Svelte 5 component · machines-ui · Graphs
GraphStat
A row of two to four large figures with labels, each optionally hinted and accented.
Install
GraphStat is a Svelte 5 ASCII stat chart 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 { GraphStat } from '@fractaldesign/machines-ui';Usage
<GraphStat
title="THIS WEEK"
items={[
{ value: '12,400', label: 'docs' },
{ value: '4,100', label: 'copies' },
{ value: '860', label: 'shipped', accent: true }
]}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
items | StatItem[] Figures to show left to right; only the first four are laid out. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphTable A framed data table with a rule under the header and an optional footer row for totals.GraphTimeline A vertical timeline of dated events, each marked as done, now or next and linked by a rail.GraphTimer A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.GraphTree An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and…GraphUptime A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.GraphWaffle Share grid of ~100 cells; filled cells carry the accent.