machines-ui
graphs

Latency

Percentile band chart. Each column is stacked: the p50 fill (█) at the bottom, then p50→p95 (▓), then p95→p99 (▒). Spike markers appear above columns whose point sets `spike: true`.

Install

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

Preview

[ CHECKOUT ]
1209 0
09:00 09:30
p50
85ms
p95
508ms
p99
847ms
peak p99
1.2sms
spikes
2
Latency band chart. 30 points. Last p50 85 ms, p95 508 ms, p99 847 ms. 2 spikes.
<GraphLatency
  title="CHECKOUT"
  unit="ms"
  labels={['09:00', '09:30']}
  data={Array.from({ length: 30 }, (_, i) => ({
    p50: 100 + Math.round(Math.sin(i / 3) * 20),
    p95: 280 + Math.round(Math.cos(i / 4) * 50) + i * 4,
    p99: 480 + Math.round(Math.sin(i / 2) * 100) + i * 6,
    spike: i === 12 || i === 22
  }))}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
data* LatencyPoint[] —Percentile points in chronological order, oldest first.
unit string 'ms'Unit suffix for the summary figures.
height number 8Plot height in rows, clamped to 3–15.
labels [string, string] —Start and end x-axis labels, as a two-item tuple.
max number —Value mapped to the top of the plot; defaults to the highest p99.
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
LatencyPointinterfaceOne percentile-banded data point: p50, p95, p99 in the same unit.

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --graph-accent-2
  • --graph-accent-3
  • --plot-h
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphLatency.svelte

machines-ui