machines-ui
graphs

Funnel

A proportional funnel showing labeled stages, values, and their relative widths.

Install

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

Preview

[ INSTALL ]
  1. docs 12,400
  2. copy 4,100 33%
  3. ship 860 7%
docs 12,400, copy 4,100, ship 860
<GraphFunnel
  title="INSTALL"
  stage="ship"
  steps={[
    { label: 'docs', value: 12400, display: '12,400' },
    { label: 'copy', value: 4100, display: '4,100' },
    { label: 'ship', value: 860, display: '860' }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
steps* FunnelStep[] —Stages in display order, each with a label, numeric amount, and optional formatted value.
ticks number 20Number of character cells used to represent each stage width.
stage string —Label of the stage to emphasize; other stages are dimmed.
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
FunnelStepinterfaceOne stage of the funnel.

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --graph-accent-2
  • --graph-accent-3
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphFunnel.svelte

machines-ui