machines-ui
graphs

Bars

Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.

Install

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

Preview

[ DRAFT TO SHIPPED ]

draft

edit

shipped

draft to shipped via edit
<script lang="ts">
	import { GraphBars, type BarSeries } from '@fractaldesign/machines-ui';

	const from: BarSeries = { label: 'draft', values: [1, 2, 2, 3, 1] };
	const to: BarSeries = { label: 'shipped', size: 'lg', values: [3, 5, 4, 6, 5] };
</script>

<GraphBars title="DRAFT TO SHIPPED" processor="edit" {from} {to} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
from* BarSeries —The starting series, drawn in muted bars.
to* BarSeries —The resulting series, drawn in accent bars.
processor string —Label on the arrow between the series, e.g. the step applied.
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
BarSeriesinterface

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphBars.svelte

machines-ui