machines-ui
graphs

Stack

One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.

Install

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

Preview

[ BUNDLE ]
  • marketing
  • docs
  • js
  • css
  • images
<GraphStack
  title="BUNDLE"
  palette="multi"
  rows={[
    {
      label: 'marketing',
      segments: [
        { label: 'js', value: 48 },
        { label: 'css', value: 22 },
        { label: 'images', value: 30 }
      ]
    },
    {
      label: 'docs',
      segments: [
        { label: 'js', value: 28 },
        { label: 'css', value: 18 },
        { label: 'images', value: 54 }
      ]
    }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
rows* StackRow[] —Rows to draw top to bottom, each a label and its segments.
accent string —Segment label to treat as the highlighted one (the others dim in mono palettes).
ticks number 24Length of each track in ticks.
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
StackSegmentinterfaceOne part of a whole.
StackRowinterfaceOne stacked track made of segments.
Pieceinterface

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphStack.svelte

machines-ui