How do you keep dashboard widgets up to date without overloading the backend?

Cache each widget's query result in Redis with a TTL equal to the widget's refresh_interval_seconds. The client polls /dashboards/:id/data on that interval. For lower latency, use WebSocket push to notify clients when a metric updates so they can refetch only affected widgets.

How does a global time range selector work across all dashboard widgets?

The time range is passed as a query parameter on each data fetch request. The dashboard service injects the selected range into every widget query before execution, overriding any default time filter defined on the widget's query config.

How do you implement drill-down in a dashboard?

When a user clicks a chart segment, the client captures the segment's dimension value and adds it as an active filter. The dashboard re-fetches only the widgets whose queries include that dimension, leaving unrelated widgets unchanged.

How do you export a dashboard as an image?

Use headless Chrome (e.g., Puppeteer) to navigate to the fully-rendered dashboard page, wait for all widgets to load, and take a full-page screenshot. Return the PNG to the user or store it in S3 for sharing.

Low Level Design: Dashboard Service

Data Model

Dashboard Table

Dashboard (
  id,
  name,
  owner_id,
  layout JSONB,  -- grid positions
  created_at
)

Widget (
  id,
  dashboard_id,
  type: line_chart | bar_chart | number | table | heatmap,
  query_id,
  title,
  position JSONB,
  refresh_interval_seconds
)

Query Table

Query (
  id,
  metric,
  dimensions,
  filters,
  aggregation,
  time_granularity
)

Dashboard Render

Load dashboard config (widgets, layout). This is one read that joins the Dashboard and Widget rows, returning the grid positions and each widget’s query reference — but no metric data yet. Keep config separate from data so the frontend can paint the empty grid immediately, and run the permission check here before any query executes.
Parallel fetch all widget data. Fan out one concurrent request per widget instead of fetching serially, so a dashboard with twenty widgets renders in the time of its slowest query rather than the sum of all of them. Give each fetch its own timeout and return partial results — one slow or failing widget should never block the rest of the board.
Return combined response to client. Shape the payload as a map of widget_id -> result so the frontend can drop each result into its grid slot without reordering. Include a per-widget status field so a widget that timed out or errored renders an error state while its neighbors render normally.

Data Fetch & Caching

Each widget query hits Redis cache first. On miss, executes against metrics store (TimescaleDB or ClickHouse). Result cached with TTL equal to refresh_interval_seconds.

Real-Time Refresh

Client polls /dashboards/:id/data every N seconds, or WebSocket push is used on metric update for lower latency.

Time Range Selector

Global time range selector applies to all widgets on the dashboard simultaneously.

Drill-Down

Clicking a chart segment applies a filter and reloads only the affected widgets.

DashboardShare Table

DashboardShare (
  dashboard_id,
  user_id or team_id,
  permission: view | edit
)

Snapshot Export

Dashboard can be exported as PNG via headless Chrome screenshot.

Template Library

Pre-built dashboard templates per use-case (e.g., SaaS metrics, infrastructure monitoring, sales pipeline).