machines-ui
graphs

Waffle

Share grid of ~100 cells; filled cells carry the accent.

Install

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

Preview

[ COVERAGE ]

73%

73 of 100 tests green

73 percent. 73 of 100 tests green
<GraphWaffle title="COVERAGE" value={0.73} caption="73 of 100 tests green" />

Props

PropTypeDefaultDescription
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 100Total number of cells in the grid.
columns number 10Number of cells per row.
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 ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphWaffle.svelte

machines-ui