machines-ui
graphs

Kpi

One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.

Install

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

Preview

[ READS ]

12,400

this week

+18%

12,400 this week. +18%
<GraphKpi
  title="READS"
  value="12,400"
  label="this week"
  hint="+18%"
  data={[4, 5, 5, 6, 8, 7, 9, 8, 11, 10, 12, 14]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
value* string —The headline figure, already formatted (e.g. "12,400").
label* string —Muted line under the figure, e.g. "this week".
hint string —Second muted line under the figure, e.g. "+18%".
data* number[] —Trend values for the glyph sparkline, oldest first.
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

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --graph-accent-2
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphKpi.svelte

machines-ui