Phase 16Advanced17 of 19 in Data Visualization

Dashboards in Production

KPI tiles, filters, live updates, loading, empty and error states, performance budgets, export, print and tests: a dashboard that can stay on the wall all day.

A chart that works in your editor is not yet a dashboard. A dashboard runs all day on a wall, updates itself, and is read by people who will not reload it. This phase is about everything that separates the two: what goes on the screen first, how filters work, how live data arrives, and what the page does when something goes wrong.

You learn to lay out KPI tiles, keep every filter in one place, take in live messages that arrive late or twice, give every box a loading, empty, error and stale state, set a performance budget and count leaks, export an SVG, a PNG and a CSV, print, and test the parts that can be tested.

At the end the Lumen Bikes dashboard becomes the live operations dashboard: key numbers with their changes, a live status box, every state handled, export buttons and a test suite.

Phase 16 · the story

Tomás, founder

“The board wants the dashboard on the wall all day, updating by itself, and I can't have a broken chart in front of them.”

Tomás has a board meeting on Thursday. He does not want a slide deck: he wants the Lumen Bikes dashboard on the big screen in the room, open all day, with the station numbers moving as bikes come and go.

Arjun tells him what that means. The page must update without anyone touching it. One failing request must not blank a chart. A tab that stays open for eight hours must not slow down. And if a number is old, the screen must say so, because a calm-looking old number is worse than a warning.

In this phase you give the dashboard those habits: a clear first screen, a live status box, a state for every way a box can fail, exports for the people who want the numbers, and tests that run before anything reaches the wall.

In this phase

You will learn

Lay out KPI tiles, filters and charts so that the first screen answers the main question
Take in live data that arrives late or out of order, and redraw at a steady pace
Give every box a loading, empty, error and stale state, with retries
Export SVG, PNG and CSV, print cleanly, and test scales, data shaping and marks

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/parts/states.js
src/parts/kpi.js
src/data/live.js
src/utils/export.js
src/styles/production.css
tests/scales.test.js
src/App.jsx
src/main.jsx
package.json

0/8 · 0%

8 topics ~7 h 20 code blocks & diagrams

Start with the first topic

16.1

Dashboard Layout and KPI Tiles

A dashboard is read in a glance, not studied. Put the few numbers that matter first, give each one a comparison and a trend, lay the rest out on a grid, and stop adding charts when each question already has one.

41 min 2 code practice

16.2

Filters and Cross-Filtering

Keep every filter in one object that every chart reads, write it into the address so a link recreates the view, let a click on one chart filter the others, and always say what is showing and how to reset it.

30 min 3 code practice

16.3

Real-Time Updates

Live data raises four questions: how it arrives, in what order, how often to draw it, and what to do when nobody is looking or it stops. Apply messages at once, draw on a timer, ignore late ones, and clean up when you leave.

86 min 4 code practice

16.4

Loading, Empty, Partial and Error States

A box can be loading, empty, broken or showing old numbers, and a blank rectangle says none of that. Give every box every state, let each box fail alone, retry with backoff, and mark old data as old.

43 min 2 code practice

16.5

Performance Budgets

A dashboard that runs all day fails slowly: a few listeners, timers and nodes left behind by every redraw. Agree numbers in advance (bytes, long tasks, nodes, listeners), measure them with DevTools and with counters, and ship only the code you use.

33 min 2 code practice

16.6

Exporting and Printing

People want the chart in a slide, the numbers in a spreadsheet and the page on paper. An SVG file needs its styles written into it, a PNG goes through a canvas, a CSV needs careful quoting, and print needs its own CSS.

42 min 2 code practice

16.7

Testing Charts

Most of a chart's logic is plain functions (scales, shaping, rules) that a test can check in milliseconds. Test those first, check the marks in the DOM second, pin time zones, and treat screenshots as a last, small layer.

66 min 4 code practice

16.8

Build: The Live Operations Dashboard

Turn the accessible React dashboard into the live operations dashboard: key numbers with change and trend, a status box that updates itself, a state for every way a box can fail, export and print, and a test suite.

63 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

A change that never says Infinity

The helper changeText(now, before) prints Infinity% or NaN% when there is nothing to compare with.

Beginner

Never a blank box

draw(rows) paints a bar per day. With an empty list it paints nothing and says nothing: a blank box.

Beginner

Keep the newest message

Messages for one station arrive out of order. Each has a seq number. apply(state, message) must keep the message with the highest seq and ignore older or repeated ones.

Intermediate

A CSV cell that survives commas

csvCell(value) must make one safe CSV cell: empty for null, undefined and NaN; wrapped in quotes when it has a comma, a quote or a line break (inner quotes doubled); and prefixed with ' when a text starts with =.