Svelte 5 component · machines-ui · Graphs
GraphDiff
A change summary that marks rows as added, removed, or unchanged, with an optional footer row.
Install
GraphDiff is a Svelte 5 ASCII diff 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 { GraphDiff } from '@fractaldesign/machines-ui';Usage
<GraphDiff
title="BUNDLE"
palette="duo"
rows={[
{ label: 'vendor', value: '84 kb' },
{ label: 'app', value: '31 kb', sign: 'add' },
{ label: 'sourcemaps', value: '12 kb', sign: 'remove' }
]}
footer={{ label: 'shipped', value: '103 kb' }}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
rows | DiffRow[] Rows to compare; each contains a label, displayed value, and optional change sign. | — |
footer | DiffRow Optional summary row rendered below a divider. | — |
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
GraphFlow One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes…GraphFunnel A proportional funnel showing labeled stages, values, and their relative widths.GraphGantt A character-based timeline that positions task bars across a shared track and can show progress.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.