machines-ui
graphs

Spark

Packed 1ch sparkline, centered with a small gap. Never stretched.

Install

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

Preview

[ LATENCY ]

last point is the accent

Sparkline with 12 points. last point is the accent
<GraphSpark
  title="LATENCY"
  data={[2, 3, 4, 3, 6, 5, 8, 7, 9, 6, 10, 8]}
  caption="last point is the accent"
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
data* number[] —Trend values, oldest first; the last point is drawn in the accent colour.
caption string —Muted line drawn under the sparkline.
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/GraphSpark.svelte

machines-ui