KPI tiles from the real data
The tile code is the real src/parts/kpi.js of the Lumen project, pasted in because the preview cannot import local files.
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.
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.
Write tileText(label, now, before) that returns "label: now (up X% vs before)", using describeChange. What does it print for ("Rides", 100, 0)?
A tile shows the busiest station. Which comparison would you give it, and what would you show when the busiest station changed since last week?
Explain it without notes
Why does a KPI tile show a comparison and not only a number?
Why does the change helper return null instead of a number in some cases?
Why must a change line use words and arrows as well as colour?
How do you decide whether a chart belongs on the first screen?
Preview
Console
Nothing logged yet.Expected console output
Rides in 2025: 933,651 | no change line
Last 7 days: 9,224 | ▼ down 6.7% vs the 7 days before
Rainy days (30 days): 13 | ▲ up 30.0% vs the 30 days before
Sparklines drawn: 3