machines-ui
graphs

Bullet

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

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphBullet } from '@fractaldesign/machines-ui';

Preview

[ LOAD ]
  • CPU 72 / 80
  • RAM 34 / 64
  • SSD 91 / 90
<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

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
items* BulletItem[] —Rows to plot, one bullet each.
ticks number 20Track length in cells. Default 20.
glyphs Glyphs —Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest.
palette GraphPalette
'mono''duo''multi'
—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 ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
BulletIteminterfaceOne bullet row: actual value against an optional target.

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-2
  • --graph-accent-3
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphBullet.svelte

machines-ui