FSD Frontend System Design

Part VI — The Blueprint · Lesson 11.1

HLD – Analytics Dashboard (Google Analytics)

In one lineAggregate on the server, render only what fits on screen, and never ship a million rows to a browser.

Where you've seen itChanging the date range on a dashboard and watching each card refresh on its own instead of the page going blank.

  • Time19 min
  • DiagramQuery pipeline + widget grid with independent loading
  • Chapter11 · High Level Design

Diagram

diagram
1–2 · SCOPE AND SCALE

  in scope   widget grid · filters · date range · drill-down · export
  out        data ingestion · ML insights · alerting config
  scale      billions of raw events · 10–20 widgets per dashboard
             queries take 200ms–10s depending on range
diagram
3 · THE PIPELINE — aggregation belongs on the server

  raw events (billions)
        │  pre-aggregated by the warehouse
        ▼
  ┌────────────────┐   GET /metrics?metric=sessions
  │  Query service │   &from=…&to=…&granularity=day&dims=country
  └───────┬────────┘
          │  returns ~365 points, not 40M rows
          ▼
  ┌────────────────────────────────────────────┐
  │  Dashboard                                 │
  │  ┌────────┐┌────────┐┌──────────────────┐ │
  │  │ KPI    ││ KPI    ││ time series      │ │  each widget owns
  │  │ 200ms  ││ 200ms  ││ 1.2s             │ │  its own query,
  │  ├────────┤├────────┤├──────────────────┤ │  loading state,
  │  │ table  ││ map    ││ funnel  8s ⏳    │ │  and error state
  │  └────────┘└────────┘└──────────────────┘ │
  └────────────────────────────────────────────┘

  One slow widget must never block the other eleven.
diagram
6a · DEEP DIVE — KEEPING THE UI RESPONSIVE

  problem                        fix
  ─────────────────────────────────────────────────────────────
  40M rows to plot               downsample server-side (LTTB) to
                                 ~1–2k points — visually identical
  huge table                     server pagination + virtualization
  filter change re-runs 12       debounce (10.15) + AbortController
    queries per keystroke        cancels superseded requests
  heavy client-side math         Web Worker, off the main thread (5.1)
  slow query blocks the page     per-widget suspense boundaries
  same query from 3 widgets      dedupe by cache key (6.9)
diagram
6b · DEEP DIVE — FILTER STATE AND SHAREABILITY

  URL is the source of truth (6.10)

  /dashboard?from=2026-01-01&to=2026-03-31&country=IN&metric=sessions
       │
       ├─► every widget derives its query key from these params
       ├─► a shared link reproduces the EXACT view
       └─► back button steps through filter history

  Cache by the full key so switching back to a previous range
  is instant and costs no query.

How it works

  1. Server aggregates; the client receives chart-ready series, never raw events.
  2. Each widget is independent — own query, own cache key, own loading and error state.
  3. Downsample before plotting; beyond a couple of thousand points, more data adds no visible information.
  4. Filters live in the URL, making every dashboard state shareable and back-button friendly.
  5. Virtualize tables and move any heavy computation into a Web Worker.

Trade-offs

ChoiceCost
Server aggregationLess client flexibility; far less data transferred
Client aggregationInteractive slicing; only viable for small sets
Per-widget loadingMore requests; no blank-page stalls
Long cache TTLInstant re-renders; risk of stale numbers

Interview angle

"A widget needs to chart 40 million rows. How?"

  • It doesn't — the server aggregates to the granularity the chart can actually show, typically a few hundred points.
  • Downsample with an algorithm that preserves visual shape (LTTB) rather than naive sampling, which hides spikes.
  • Keep the widget independently loaded and cached by its query key so other cards render while it works.

Recap

  • Aggregate server-side; the browser gets chart-ready series.
  • Independent widgets: one slow query must not blank the dashboard.
  • Filters in the URL, cached by key — shareable and instant on return.