SankeyChart

Shows how amounts flow between stages and where they split.

SourcePackage @weft-js/warp

Preview

tsx

import { SankeyChart } from '@weft-js/warp'export function Builds() {  return (    <SankeyChart title="Where builds end up" description="October" data={BUILD_FLOW.data} nodes={BUILD_FLOW.nodes} />  )}const BUILD_FLOW = {  nodes: [    { name: 'Push to main', column: 0 }, { name: 'Pull request', column: 0 }, { name: 'Scheduled', column: 0 },    { name: 'Tests passed', column: 1 }, { name: 'Tests failed', column: 1 },    { name: 'Live', column: 2 }, { name: 'Preview', column: 2 }, { name: 'Rolled back', column: 2 },  ],  data: [    { from: 0, to: 3, value: 412 }, { from: 0, to: 4, value: 46 }, { from: 1, to: 3, value: 688 }, { from: 1, to: 4, value: 174 }, { from: 2, to: 3, value: 90 }, { from: 2, to: 4, value: 12 },    { from: 3, to: 5, value: 470 }, { from: 3, to: 6, value: 688 }, { from: 3, to: 7, value: 32 },  ],}

Installation

npm install @weft-js/warp

Usage

tsx

import { SankeyChart } from '@weft-js/warp'<SankeyChart title="Where builds end up" description="October" data={BUILD_FLOW.data} nodes={BUILD_FLOW.nodes} />

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`	`{ from: number; to: number; value: number; }[]`	—	The series to draw.
`summary`	`string \| ((c: { data: { from: number; to: number; value: number; }[]; ti…`	—	One sentence for screen readers and the page; generated from the data when absent.
`nodes`	`{ name: string; column: number; }[]`	—	Each stage: `{ name, column }`.
`format`	`Fmt`	—	Turns a value into the text shown.

RelatedFunnel chart