machines-ui
graphs

Rank

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.

Install

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

Preview

[ ROUTES ]
  1. /docs 12,400
  2. /install 4,100
  3. /plot 860
  4. /rank 420
<GraphRank
  title="ROUTES"
  items={[
    { label: '/docs', value: 12400 },
    { label: '/install', value: 4100 },
    { label: '/plot', value: 860 },
    { label: '/rank', value: 420 }
  ]}
/>

Props

PropTypeDefaultDescription
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 20Bar length in glyph cells. Default 20.
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

Types

NameKindDescription
RankIteminterfaceOne ranked row: label, a full-width glyph bar, and the value.

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphRank.svelte

machines-ui