Svelte 5 component · machines-ui · Graphs
GraphSlo
Error-budget burn bar. One fill for spent, a dim trail for the remaining budget, plus window, burn rate, time-to-empty, target, and actual. Pairs with GraphLatency, GraphUptime, and GraphPulse.
Install
GraphSlo is a Svelte 5 ASCII slo 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 { GraphSlo } from '@fractaldesign/machines-ui';Usage
<GraphSlo
title="CHECKOUT 99.9%"
budget={0.62}
window={30}
unit="d"
elapsed={18}
target={0.001}
actual={0.0014}
daily={Array.from({ length: 18 }, () => Math.random() * 0.08 + 0.02)}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
budget | number Fraction of the error budget consumed, 0–1. | — |
window | number Window length in the chosen unit. Default 30. | 30 |
unit | 'h' | 'd' | 'w' | 'mo' Window unit. Default 'd'. | 'd' |
target | number Allowed error rate as a fraction, e.g. 0.001 for 99.9%. | — |
actual | number Actual error rate as a fraction. | — |
burnRate | number Burn rate multiplier (1 = on pace). If set, takes precedence over elapsed. | — |
elapsed | number Days (or hours, weeks) elapsed so far. Used to compute time-to-empty. | — |
daily | number[] Optional sparkline of daily burn samples, 0..1 each. | — |
caption | string Optional caption below the panel. | — |
corner | string Character drawn at each corner of the frame. | — |
class | string | '' |
Related components
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.GraphTable A framed data table with a rule under the header and an optional footer row for totals.