machines-ui
graphs

Slo

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

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

Preview

[ CHECKOUT 99.9% ]

62%

window
30d
burn rate
1.03×
time-to-empty
11d
target
0.10%
actual
0.14%

↗ will exhaust the budget before the window closes

Error budget 62 percent spent of a 30d window , burn rate 1.03× , time to empty 11d.
<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

PropTypeDefaultDescription
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 30Window length in the chosen unit. Default 30.
unit 'h' | 'd' | 'w' | 'mo' 'd'Window unit. Default '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 ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/graphs/GraphSlo.svelte

machines-ui