Svelte 5 component · machines-ui · Graphs
GraphWaffle
Share grid of ~100 cells; filled cells carry the accent.
Install
GraphWaffle is a Svelte 5 ASCII waffle 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 { GraphWaffle } from '@fractaldesign/machines-ui';Usage
<GraphWaffle title="COVERAGE" value={0.73} caption="73 of 100 tests green" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
value | number Filled share of the grid, from 0 to 1. | — |
cells | number Total number of cells in the grid. | 100 |
columns | number Number of cells per row. | 10 |
caption | string Optional explanatory text displayed below the percentage. | — |
glyphs | Glyphs Characters that draw the graph: a preset name (`shade`, `ascii`, `hash`, `bar`) or your own array, lightest to heaviest. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
GraphWaterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.GraphActivity A GitHub-style contribution grid: one cell per day, weeks across the frame, on a shared intensity scale.GraphBars Two mini bar charts joined by an arrow, comparing a series before a processor with the series it produces.GraphBullet A bullet chart: each row lays an actual value against an optional target along a ticked track, with the…GraphCalendar A one-month calendar grid with a weekday header, accent-marked days, and an optional boxed today.GraphCells One or more labeled cell grids drawn side by side, each 1/0 matrix rendered with the filled or empty glyph.