machines-ui
graphs

Cells

One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.

Install

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

Preview

[ TWO WAYS TO LEARN ]

fragments

a system

21 of 30 cells filled
<GraphCells
  title="TWO WAYS TO LEARN"
  items={[
    {
      label: 'fragments',
      cells: [
        [1, 0, 1, 0, 0],
        [0, 1, 0, 1, 0],
        [1, 0, 0, 0, 1]
      ]
    },
    {
      label: 'a system',
      cells: [
        [1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1]
      ]
    }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
items* CellGrid[] —The labeled grids to draw, in order; each label sits under its grid.
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
CellGridinterfaceOne labeled grid of cells; a value of `1` is filled, anything else is empty.

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphCells.svelte

machines-ui