The Phase 16 part of the dashboard, with the modules inlined
The preview cannot import your local files, so this example pastes states.js, kpi.js, live.js and export.js, and the Phase 16 parts of App.jsx (useLoad, Message, Box, the tiles, LiveStatus, ExportBar), into one file. Its own small App has a plain line instead of the full rides line, one wrong file on purpose and one empty box. tableTwin is a short stand-in for table-twin.js. StrictMode runs every effect twice, and the live box still has one chart and one table.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a fifth tile, Rainy days (30 days), with higherIsGood: false, using rain_mm from the daily rows. Where does it go, and what does the change line say if the earlier 30 days are missing?
Make the status box show a stale badge when the feed has been quiet for 15 seconds. Which option and which function in live.js already do this?
Explain it without notes
Which files changed in this build and which stayed the same, and why could the charts stay the same?
How does LiveStatus stop the feed, and why does React's StrictMode need that?
How do the new states keep one failed box from blanking the page?
Preview
Console
Nothing logged yet.Expected console output
Error: Could not load stations-2026.csv (the server answered 404).
key numbers: Days of data 365 | Rides in the year 933,651 | Last 7 days 9,224 | Busiest day 18 Jul 2025 (4,380) | Quietest day 14 Aug 2025 (439) | Rows cleaned 0
change line: ▼ down 6.7% vs the 7 days before
tiles with a trend line: 2
live status: charts 1 | table twins 1 | rows drawn 5 | feeds running 1
stations box: state error | Could not load stations-2026.csv (the server answered 404).
late returns box: state empty | No late returns to show.
Error: Could not load stations-2026.csv (the server answered 404).
after Try again: error boxes 1
download: lumen-rides-2025.svg
download: lumen-rides-2025.png
download: lumen-rides-2025.csv
print dialog requested
export message: Saved lumen-rides-2025.csv (365 days)