Svelte 5 component · machines-ui · Graphs

GraphRank

Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the formatted value on the right.

All components Source

Install

GraphRank is a Svelte 5 ASCII rank 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 { GraphRank } from '@fractaldesign/machines-ui';

Usage

Example

<GraphRank
  title="ROUTES"
  items={[
    { label: '/docs', value: 12400 },
    { label: '/install', value: 4100 },
    { label: '/plot', value: 860 },
    { label: '/rank', value: 420 }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.	`—`
`items`	`RankItem[]` The entries to rank, one row each, drawn in list order.	`—`
`max`	`number` The value that fills a whole bar; defaults to the largest item value.	`—`
`ticks`	`number` Bar length in glyph cells. Default 20.	`20`
`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`	`''`

GraphSlo Error-budget burn bar.GraphSlope A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with…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.

Install

Import

Usage

Props

Related components