machines-ui
graphs

Heatmap

A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels and an optional less/more legend.

Install

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

Preview

[ DEPLOYS ]
048121620
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri

Less More

5 rows across 6 columns
<GraphHeatmap
  title="DEPLOYS"
  palette="duo"
  columns={['0', '4', '8', '12', '16', '20']}
  rows={[
    { label: 'Mon', values: [0, 1, 4, 8, 6, 1] },
    { label: 'Tue', values: [0, 0, 5, 9, 4, 2] },
    { label: 'Wed', values: [1, 0, 6, 12, 5, 1] },
    { label: 'Thu', values: [0, 2, 4, 7, 8, 3] },
    { label: 'Fri', values: [0, 1, 3, 5, 2, 0] }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
columns* string[] —Column labels along the top, one per value in each row.
rows* HeatRow[] —The labeled series, each with one value per column, left to right.
max number —The value that maps to the heaviest glyph; defaults to the largest value.
legend boolean trueShow the less/more glyph scale under the grid. Default true.
caption string —Muted caption under the grid, at the left of the legend.
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
HeatRowinterfaceLabeled 2d intensity matrix with an optional less/more legend.

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/GraphHeatmap.svelte

machines-ui