Svelte 5 component · machines-ui · Graphs
GraphTimeline
A vertical timeline of dated events, each marked as done, now or next and linked by a rail.
Install
GraphTimeline is a Svelte 5 ASCII timeline chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphTimeline } from '@fractaldesign/machines-ui';Usage
<GraphTimeline
title="SHIPPED"
events={[
{ date: 'Mar 12', label: 'npm publish' },
{ date: 'Mar 18', label: 'docs, live previews', state: 'now' },
{ date: 'Apr 02', label: '1.0', state: 'next' }
]}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
events | TimelineEvent[] Events in display order, oldest first. | — |
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
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.GraphWaffle Share grid of ~100 cells; filled cells carry the accent.GraphWaterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.GraphActivity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.