Svelte 5 component · machines-ui · Graphs
GraphHeatmap
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
GraphHeatmap is a Svelte 5 ASCII heatmap chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphHeatmap } from '@fractaldesign/machines-ui';Usage
<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
| Name | Type | Default |
|---|---|---|
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 Show the less/more glyph scale under the grid. Default true. | 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 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 | '' |
Related components
GraphInvoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.GraphKpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.GraphLatency Percentile band chart.GraphMeter Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.GraphPlot A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale…GraphQuota Quota usage bar: used against a hard limit, with reset date and an end- of-window projection.