machines-ui
graphs

Plot

A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale on the left and optional end labels on the x axis.

Install

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

Preview

[ P95 ]
9 0
jan dec
area plot, 12 points, min 0, max 9
<GraphPlot
  title="P95"
  data={[2, 3, 3, 5, 4, 7, 6, 8, 5, 9, 7, 6]}
  labels={['jan', 'dec']}
/>
[ ERRORS ]
8 0
mon fri
line plot, 10 points, min 0, max 8
import { GraphPlot } from '@fractaldesign/machines-ui';

<GraphPlot
  title="ERRORS"
  variant="line"
  height={5}
  progress={0.7}
  data={[1, 1, 4, 2, 8, 3, 2, 1, 5, 2]}
  labels={['mon', 'fri']}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
data* number[] —The plotted values, oldest first, one glyph column each.
labels string[] —X-axis end labels: only the first and last entries are shown, under the plot.
height number 7Plot height in glyph rows. Default 7.
variant 'line' | 'area' 'area'`line` draws only the cap glyphs; `area` also fills the rows below them. Default 'area'.
progress number 1Fraction (0–1) of the points revealed so far, for drawing the plot in live. Default 1.
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

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphPlot.svelte

machines-ui