machines-ui
graphs

Diff

A change summary that marks rows as added, removed, or unchanged, with an optional footer row.

Install

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

Preview

[ BUNDLE ]
  • vendor 84 kb
  • app 31 kb
  • sourcemaps 12 kb
shipped 103 kb
1 added, 1 removed, 2 unchanged
<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

PropTypeDefaultDescription
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
'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
DiffSigntype
'add' | 'remove' | 'keep'
DiffRowinterface

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphDiff.svelte

machines-ui