Job throughput
Jobs per period stacked by status, with the total and the success rate of the finished jobs written above.
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 jobs per period by status (PS-C).
When to use
- Orazaka's insights and the console's supervision: jobs per day by status.
- The mobile Jobs screen: the total and the success rate first, the week's bars under them.
- Any queue whose items end in success or failure: uploads, payouts, transcodes.
When not to use
- Money per period.Use instead: Earnings chart
- How long the jobs take.Use instead: Latency chart
- The share of each kind of job, without time.Use instead: Pie and donut chart
Installation
Install
npm install @krizaka/chartsImport
import { JobThroughput } from "@krizaka/charts/throughput";Examples
A week of jobs
Seven days of Orazaka jobs by status, the success rate above.
Jobs this week
10,519jobs over 7 days97.5% succeeded
Bar chart, 4 × 7 (Oct 5 – Oct 11). Completed: from 1,240 to 986, lowest 986 (Oct 11), highest 1,934 (Oct 9), down 20%. Failed: from 38 to 12, lowest 12 (Oct 11), highest 95 (Oct 7), down 68%. Running: from 0 to 24, lowest 0 (Oct 5), highest 24 (Oct 11). Queued: from 0 to 63, lowest 0 (Oct 5), highest 63 (Oct 11).
| Category | Completed | Failed | Running | Queued |
|---|---|---|---|---|
| Oct 5 | 1,240 | 38 | 0 | 0 |
| Oct 6 | 1,612 | 41 | 0 | 0 |
| Oct 7 | 1,505 | 95 | 0 | 0 |
| Oct 8 | 1,788 | 27 | 0 | 0 |
| Oct 9 | 1,934 | 33 | 0 | 0 |
| Oct 10 | 1,102 | 19 | 0 | 0 |
| Oct 11 | 986 | 12 | 24 | 63 |
Live, per hour
The last hours, live, with the console's own statuses.
Requests per hour
1,362requests over 5 hours96.7% succeeded
Bar chart, 3 × 5 (9:00 AM – 1:00 PM). Done: from 212 to 190, lowest 190 (1:00 PM), highest 301 (11:00 AM), down 10%. Rejected: from 4 to 3, lowest 3 (1:00 PM), highest 22 (11:00 AM), down 25%. Waiting: from 9 to 40, lowest 9 (9:00 AM), highest 40 (1:00 PM), up 344%.
| Category | Done | Rejected | Waiting |
|---|---|---|---|
| 9:00 AM | 212 | 4 | 9 |
| 10:00 AM | 268 | 7 | 14 |
| 11:00 AM | 301 | 22 | 31 |
| 12:00 PM | 244 | 5 | 12 |
| 1:00 PM | 190 | 3 | 40 |
Props
Jobs per period, stacked by status, with the total and the success rate.
| 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 total and the success rate above the bars. |
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<ThroughputLabels> | — | 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. |
onSelect | ((datum: T, index: number) => void) | — | Called with the row when a point or a bar is clicked (or Enter is pressed on it). |
period | CategoryFormat | day | How the periods are written. Default "day" (Oct 11); "time" for hours. |
statuses | readonly JobStatus[] | [
{ key: "completed", label: "Completed", tone: "success", outcome: "succeeded" },
{ key: "failed", label: "Failed", tone: "danger", outcome: "failed" },
{ key: "running", label: "Running", tone: "info" },
{ key: "queued", label: "Queued", tone: "neutral" },
] | The statuses, in stacking order, with their field, name and tone. Default: completed, failed, running, queued. |
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). |
thresholds | readonly Threshold[] | — | Horizontal lines at a value: a goal, a payout threshold. |
x | string | ((datum: T, index: number) => unknown) | "day" as Accessor<T, unknown> | The field (or function) of the period. Default "day". |
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 statuses wear the status tones and are named in the legend: the colour is never alone.
- The total and the success rate are written above the chart, in words.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves the focus to the plot, then to the data and export buttons. |
| Arrow keys | Walk the periods: each one's counts by status are announced. |
Best practices
- Pass the statuses translated, in the order they should stack: the finished ones at the bottom.
- Mark the statuses that end a job with
outcome: only they count in the success rate. - Set
livewhen the counts stream in: no entrance on every update.
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