Svelte 5 component · machines-ui · Graphs

GraphBullet

A bullet chart: each row lays an actual value against an optional target along a ticked track, with the value shown at the right.

All components Source

Install

GraphBullet is a Svelte 5 ASCII bullet 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 { GraphBullet } from '@fractaldesign/machines-ui';

Usage

Example

<GraphBullet
  title="LOAD"
  palette="duo"
  items={[
    { label: 'CPU', value: 72, target: 80, max: 100 },
    { label: 'RAM', value: 34, target: 64, max: 100 },
    { label: 'SSD', value: 91, target: 90, max: 100 }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`items`	`BulletItem[]` Rows to plot, one bullet each.	`—`
`ticks`	`number` Track length in cells. Default 20.	`20`
`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`	`''`

GraphCalendar A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.GraphCells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.GraphCompare A grid comparing features against columns, where boolean cells become ✓/– and string cells pass through,…GraphCountdown Time left until a date.GraphDiff A change summary that marks rows as added, removed, or unchanged, with an optional footer row.GraphFlow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes…

Install

Import

Usage

Props

Related components