StreamChart

A live rolling window of a number, with a pause that shows the held data.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { interval } from '@weft-js/core/browser'import { StreamChart } from '@weft-js/warp'export function Live() {  const data = state(seed)  let t = 60  interval(1000, () => {    t++    data.value = [...data.value.slice(1), Math.round(52 + Math.sin(t / 5) * 14 + (t % 4))]  })  return <StreamChart title="Requests per second" description="storefront, updates every second" data={data.value} domain={[20, 90]} ticks={STREAM_TICKS} reference={SPIKE} unit="requests per second" span="−60 s" />}const seed = Array.from({ length: 60 }, (_, i) => Math.round(52 + Math.sin(i / 5) * 14 + (i % 4)))const SPIKE = { y: 75, label: 'Limit 75' }const STREAM_TICKS = [20, 40, 60, 80]

Installation

npm install @weft-js/warp

Usage

tsx

import { StreamChart } from '@weft-js/warp'

Accessibility

Every chart has a text alternative and a table view of its numbers, so nothing depends on seeing the marks. See Chart for its keyboard support.

API Reference

Prop	Type	Default	Description
`title`	`string`	—	The heading.
`level`	`2 \| 3 \| 4 \| 6 \| 5`	—	The title's heading level: one below the heading the chart sits under. Default 3, a chart in a page section.
`description`	`unknown`	—	One supporting line under the title.
`toolbar`	`unknown`	—	Beside the view toggle: a layout switch, a range picker.
`state`	`"error" \| "loading" \| "empty"`	—	Replaces the plot, in the same frame. With no data the frame shows `empty` on its own.
`loading`	`string`	—	Shows that work is under way.
`empty`	`{ title: string; detail?: unknown; }`	—	The title and detail shown in place of the plot when there is no data.
`error`	`{ title: string; detail?: unknown; }`	—	A message that marks the field invalid and says why.
`action`	`unknown`	—	The next step under an empty or error state: a Retry button.
`data`	`number[]`	—	The series to draw.
`summary`	`string \| ((c: { data: number[]; title: string; }) => string)`	—	One sentence for screen readers and the page; generated from the data when absent.
`domain`	`[number, number]`	—	The fixed y range, so the axis never jumps.
`ticks`	`number[]`	—	The y labels.
`reference`	`Reference`	—	A level to watch: `{ y, label }`.
`unit`	`string`	—	What the number counts.
`format`	`Fmt`	—	Turns a value into the text shown.
`span`	`string`	—	The label on the left edge of the window.

RelatedLine chart Sparkline