Svelte 5 component · machines-ui · Graphs

GraphKpi

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

Install

GraphKpi is a Svelte 5 ASCII kpi chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

import

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

Example

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

Name	Type	Default
`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` 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`	`''`