demo D278
How work flows through the board in ESM
A cumulative-flow diagram of what sits in each column day by day, with cycle time, lead time and throughput read from the board’s own movements, so a slowdown shows before it becomes a surprise
board.flow · cfd() · cycleTime()
This reads the board's own card movements into a cumulative-flow diagram of what sits in each column day by day, with cycle time, lead time and throughput. It shows where work is piling up before it becomes a surprise, from the movements the board already records.
This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">
<div id="board" style="height: 520px"></div>
<div id="cfd" style="height: 300px"></div>
<script type="module">
import { createKanban } from '@toclocoinc/lattice-grid/modules/kanban';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
const board = createKanban(document.getElementById('board'), {
rows, // cards in their current column: id, status, points, epic, assignee, title
rowKey: 'id',
columnProperty: 'status',
columns: [
{ id: 'backlog', title: 'Backlog' },
{ id: 'todo', title: 'To do' },
{ id: 'doing', title: 'In progress' },
{ id: 'review', title: 'In review' },
{ id: 'done', title: 'Done', color: '#2e7d32' },
],
pointsProperty: 'points',
showPoints: true,
card: { title: { field: 'title' }, subtitle: 'assignee', badges: 'epic' },
doneColumns: ['done'],
// Wire the flow analytics with the recorded column-to-column moves and the
// roles that bound cycle time (from a start column) and done.
flow: {
history, // [{ key, from, to, at }, ...] one row per recorded move
doneColumns: ['done'],
startColumns: ['doing'],
},
});
board.flow.seed(); // build the analytics from the history
// Each figure is read from the board's own recorded movements.
const cycle = board.flow.cycleTime(); // { median, p85, ... } in ms
const lead = board.flow.leadTime(); // { median, count, ... }
const perWeek = board.flow.throughput({ bucket: 'week' }); // cards finished per week
// The cumulative-flow diagram, ready as a chart spec over a headless grid.
const cfd = board.flow.chartData('cfd', { bucket: 'day' });
const cfdGrid = createHeadlessGrid({
rowKey: 't',
columns: cfd.columns.map((c) => ({ field: c.field, title: c.title, ...(c.field === 't' ? {} : { type: 'number' }) })),
rows: cfd.rows,
});
createChart({ grid: cfdGrid, container: document.getElementById('cfd'), ...cfd.spec, legend: true });
</script>Flow metrics read from a board’s own movements
A delivery board already knows more than it shows. Every time a card moves from one column to the next it records when, and that history is enough to answer the questions a team actually asks: how long does a card take, where does work sit, and how fast is it clearing. This screen reads those movements into a cumulative-flow diagram beside the board, with cycle time, lead time and throughput on tiles above it, so the shape of the work is visible rather than felt.
The cumulative-flow diagram stacks how many cards sit in each column day by day. A band that widens is work piling up in that stage, and a top that flattens is delivery slowing down, so a bottleneck reads as a shape before it reads as a missed date. The colour key names each column, so a band on the chart maps straight to a column on the board.
The tiles carry the numbers a stand-up leans on. Cycle time is how long a card takes once work actually starts on it, lead time is the whole wait from the moment it arrived, and throughput counts cards finished per week, the rate the board is really clearing work at. Every figure is derived from the moves the board records, so it stays right as cards are dragged between columns rather than needing a separate report kept in step by hand.
How do I read flow metrics from a kanban board?
Give the board a flow configuration naming the columns that count as started and done, along with the card movement history, then call board.flow.seed() to load it. Read board.flow.cycleTime(), board.flow.leadTime() and board.flow.throughput({ bucket: 'week' }) for the tile figures, and board.flow.chartData('cfd', { bucket: 'day' }) for the cumulative-flow series to draw. Each figure comes from the board’s own recorded moves, so it updates as cards change columns.