fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Graphs

GraphLatency

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`.

All components Source

Install

GraphLatency is a Svelte 5 ASCII latency chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

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

Usage

Example 
<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

NameTypeDefault
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 Unit suffix for the summary figures.'ms'
height number Plot height in rows, clamped to 3–15.8
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 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

GraphMeter Horizontal progress bar that spans the frame: [ = = = - - - ] 42%.GraphPlot A line or area plot drawn from glyph columns: each value becomes a cap glyph at its height, with a y-scale…GraphQuota Quota usage bar: used against a hard limit, with reset date and an end- of-window projection.GraphRank Ranked rows: each item gets a label, a glyph bar whose length follows its value against the max, and the…GraphSlo Error-budget burn bar.GraphSlope A before-and-after slope chart: each row shows a from number, a direction arrow, and a to number, with…