Svelte 5 component · machines-ui · Graphs

GraphStack

One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.

Install

GraphStack is a Svelte 5 ASCII stack chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import

import '@fractaldesign/machines-ui/style.css';
import { GraphStack } from '@fractaldesign/machines-ui';

Usage

Example 1

<GraphStack
  title="BUNDLE"
  palette="multi"
  rows={[
    {
      label: 'marketing',
      segments: [
        { label: 'js', value: 48 },
        { label: 'css', value: 22 },
        { label: 'images', value: 30 }
      ]
    },
    {
      label: 'docs',
      segments: [
        { label: 'js', value: 28 },
        { label: 'css', value: 18 },
        { label: 'images', value: 54 }
      ]
    }
  ]}
/>

Example 2

<GraphStack
  title="BUNDLE"
  palette="mono"
  accent="css"
  rows={[
    {
      label: 'marketing',
      segments: [
        { label: 'js', value: 48 },
        { label: 'css', value: 22 },
        { label: 'images', value: 30 }
      ]
    }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`rows`	`StackRow[]` Rows to draw top to bottom, each a label and its segments.	`—`
`accent`	`string` Segment label to treat as the highlighted one. Only acts when `palette` is `mono`: the others dim. In `duo` and `multi` every segment is drawn in colour and `accent` is ignored.	`—`
`ticks`	`number` Length of each track in ticks.	`24`
`glyphs`	`Glyphs` Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest.	`—`
`palette`	`GraphPalette` How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.	`—`
`corner`	`string` Character drawn at each corner of the frame.	`—`
`class`	`string`	`''`

GraphStat A row of two to four large figures with labels, each optionally hinted and accented.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.

Install

Import

Usage

Props

Related components