machines-ui
graphs

Gantt

A character-based timeline that positions task bars across a shared track and can show progress.

Install

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

Preview

[ LAUNCH ]
  • design
  • build
  • docs
  • ship
q1q2q3q4
4 tasks
<GraphGantt
  title="LAUNCH"
  stage="build"
  progress={0.58}
  ticks={['q1', 'q2', 'q3', 'q4']}
  items={[
    { label: 'design', start: 0, end: 0.35, complete: 1 },
    { label: 'build', start: 0.2, end: 0.75, complete: 0.55 },
    { label: 'docs', start: 0.55, end: 0.9, complete: 0.2 },
    { label: 'ship', start: 0.85, end: 1, complete: 0 }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
items* GanttItem[] —Tasks in display order, with start and end positions normalized from 0 to 1.
ticks string[] —Optional labels placed along the timeline scale.
columns number 24Number of character positions across each task track.
stage string —Task label to emphasize; other tasks are dimmed.
progress number —Optional normalized playhead position from 0 to 1.
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
GanttIteminterfaceTasks on a shared character track: spans positioned via --start/--span.

Theming

CSS custom properties this component reads.

  • --border
  • --cols
  • --graph-accent
  • --graph-accent-2
  • --pos
  • --span
  • --start
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphGantt.svelte

machines-ui