Latency chart
Median and 95th-percentile latency per item, in the unit that fits (ms, s, min), against a service objective.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
Why it is here. Orazaka's median and p95 latency per studio (PS-C).
When to use
- The console's supervision: latency per capability against the objective.
- Orazaka's “time to result” per kind of job, where seconds turn into minutes.
- Any duration compared across items: a model, a region, an endpoint.
When not to use
- A duration over time (the latency of the last hours).Use instead: Line chart
- How many jobs ran.Use instead: Job throughput
Installation
Install
npm install @krizaka/chartsImport
import { LatencyChart, formatDuration } from "@krizaka/charts/latency";Examples
By capability
The console: p50 and p95 per capability against a 2 s objective.
Latency by capability
Last 24 hours
9.8 secp95 of Image, the slowest2 over the objective
Bar chart, 2 × 5 (Chat – Translation). Median (p50): from 420 ms to 610 ms, lowest 85 ms (Embeddings), highest 4.2 sec (Image), up 45%. p95: from 1.2 sec to 1.6 sec, lowest 210 ms (Embeddings), highest 9.8 sec (Image), up 39%. Objective at 2 sec.
| Category | Median (p50) | p95 |
|---|---|---|
| Chat | 420 ms | 1.2 sec |
| Embeddings | 85 ms | 210 ms |
| Speech to text | 1.4 sec | 2.9 sec |
| Image | 4.2 sec | 9.8 sec |
| Translation | 610 ms | 1.6 sec |
Time to result
Orazaka: the median time to a result per kind of job, in minutes when it takes minutes.
Time to result
9 minmedian of Video clip, the slowest
Bar chart, 4 (Summary – Video clip). Median: from 8.4 sec to 9 min, lowest 8.4 sec (Summary), highest 9 min (Video clip), up 6,329%.
| Category | Median |
|---|---|
| Summary | 8.4 sec |
| Transcript | 46 sec |
| Dubbing | 5.2 min |
| Video clip | 9 min |
Props
Median and p95 latency per item, durations in the unit that fits, against a service objective.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly T[] | — | The rows, in the order of the x axis. |
titlerequired | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
brand | BrandId | — | The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it
when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css). |
className | string | — | A class on the figure (layout: margins, grid placement). |
dataTable | boolean | — | The "Show data" button (the table is in the page for screen readers either way). Default true. |
description | ReactNode | — | A sentence under the title: the period, the unit, the source. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
exportable | boolean | readonly ExportFormat[] | — | Export buttons: true for PNG, SVG and CSV, or the formats you want. |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
hideSummary | boolean | — | Hide the slowest p95 and the count over the objective. |
hideTitle | boolean | — | Visually hide the title (it stays the chart's accessible name): a card that already has its heading. |
id | string | — | The id of the figure. |
labels | Partial<LatencyLabels> | — | The words, passed translated; English by default. |
legend | boolean | — | Show the legend (from two series). Default true. |
live | boolean | — | Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. |
loading | boolean | — | The data is on its way: a skeleton of the chart, announced once. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
markers | readonly Marker[] | — | Vertical markers at a category: a launch, an incident. |
objective | { readonly value: number; readonly label: string; } | — | The service objective, in milliseconds: a line, and the count of what goes past it (by p95). |
onSelect | ((datum: T, index: number) => void) | — | Called with the row when a point or a bar is clicked (or Enter is pressed on it). |
p50 | string | ((datum: T, index: number) => number | null) | "p50" as Accessor<T, number | null | undefined> | The median, in milliseconds. Default "p50". |
p95 | string | ((datum: T, index: number) => number | null) | null | "p95" as Accessor<T, number | null | undefined> | The 95th percentile, in milliseconds. Default "p95"; null to draw the median alone. |
style | CSSProperties | — | Inline style on the figure (layout only: colours come from the tokens). |
summary | "hidden" | "visible" | — | The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible"). |
summaryText | string | — | Your own summary instead of the generated one (still read first by screen readers). |
vertical | boolean | — | Vertical bars instead of horizontal ones (few, short names). |
x | string | ((datum: T, index: number) => unknown) | "name" as Accessor<T, unknown> | The field (or function) naming what is measured (a capability, a model). Default "name". |
xLabel | string | — | The header of the categories in the data table (Month). |
zero | boolean | — | Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero. |
Accessibility
- The slowest p95 and the number of items past the objective are written above the chart.
- Durations are written with their unit everywhere: axis, tooltip, table and summary.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves the focus to the plot, then to the data and export buttons. |
| Arrow keys | Walk the items: the median and the p95 of each are announced. |
Best practices
- Pass milliseconds: the chart picks the unit for each value.
- Show the p95 beside the median: the median alone hides the slow tail people feel.
- Name the objective in its label (“Objective”: the line writes its value).
Related components
Generated from the code of @krizaka/ui 3.6.0: its meta.ts, its examples and its types.Edit this documentation on GitHub