Svelte 5 component · machines-ui · Graphs
GraphFunnel
A proportional funnel showing labeled stages, values, and their relative widths.
Install
GraphFunnel is a Svelte 5 ASCII funnel chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphFunnel } from '@fractaldesign/machines-ui';Usage
<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
| Name | Type | Default |
|---|---|---|
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 Number of character cells used to represent each stage width. | 20 |
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 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 | '' |
Related components
GraphGantt A character-based timeline that positions task bars across a shared track and can show progress.GraphHeatmap A glyph intensity grid: each cell's glyph weight follows its value against a max, with column and row labels…GraphInvoice A compact invoice with billing parties, metadata, line items, totals, and an optional note.GraphKpi One headline number with a label, an optional hint, and a glyph sparkline of the recent trend.GraphLatency Percentile band chart.GraphMeter Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.