fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Graphs

GraphGantt

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

All components Source

Install

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

Usage

Example 
<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

NameTypeDefault
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 Number of character positions across each task track.24
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 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 ''

Related components

GraphHeatmap A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels…GraphInvoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.GraphKpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.GraphLatency Percentile band chart.GraphMeter Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.GraphPlot A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale…