Charts: downsample 10,080 points to what the pixels can show
A 300 px chart can't show 10,080 points. Min/max buckets cut 7 days down to 300 points and still keep every spike; averaging would flatten them. In production the server does this by returning a coarser bucket.
A dashboard is a grid of independent widgets that each load, refresh, fail and render on their own; the design is about a shared query cache, polling or streaming at sensible rates, charts that draw thousands of points cheaply, virtualised tables, filters and time ranges in the URL, and permissions enforced on the server.
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.
Make the polling example pause while the tab is hidden.
Add a "View as table" toggle to the chart example that shows the last 5 raw values of the selected range.
Explain it without notes
Walk me through the architecture of a dashboard with 20 widgets.
Polling or streaming: how do you choose, and how do you make polling efficient?
How do you render a chart with 100,000 points?
How would you design filters and time ranges for a dashboard?
How are permissions handled in a dashboard?
Preview
Console
Nothing logged yet.Expected console output
1h: 60 -> 60 points, spike kept: true
24h: 1440 -> 300 points, spike kept: true
7d: 10080 -> 300 points, spike kept: true