Svelte 5 component · machines-ui · Graphs

GraphSlope

A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with rising rows accented.

All components Source

Install

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

pnpm add @fractaldesign/machines-ui

Import

import

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

Usage

Example

<GraphSlope
  title="TRAFFIC"
  palette="duo"
  fromLabel="2025"
  toLabel="2026"
  items={[
    { label: 'docs', from: 8200, to: 12400 },
    { label: 'copy', from: 5100, to: 4100 },
    { label: 'ship', from: 640, to: 860 }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`fromLabel`	`string` Heading over the from-number column.	`—`
`toLabel`	`string` Heading over the to-number column.	`—`
`items`	`SlopeItem[]` Rows to compare, each with a label and its from/to values.	`—`
`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`	`''`

GraphSpark Packed 1ch sparkline, centered with a small gap. Never stretched.GraphSpec A labeled specification list with optional accent styling on individual values.GraphStack One or more stacked tracks showing how each row's segments add up, with a shared glyph legend.GraphStat A row of two to four large figures with labels, each optionally hinted and accented.GraphTable A framed data table with a rule under the header and an optional footer row for totals.GraphTimeline A vertical timeline of dated events, each marked as done, now or next and linked by a rail.

Install

Import

Usage

Props

Related components