Low Level Design: Dashboard Service – Tech Interview Dot Org

Data Model

Dashboard Table

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

Widget Table

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).
Parallel fetch all widget data.
Return combined response to client.

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.

Sharing

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).

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “How do you keep dashboard widgets up to date without overloading the backend?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “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.”
}
},
{
“@type”: “Question”,
“name”: “How does a global time range selector work across all dashboard widgets?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “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.”
}
},
{
“@type”: “Question”,
“name”: “How do you implement drill-down in a dashboard?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “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.”
}
},
{
“@type”: “Question”,
“name”: “How do you export a dashboard as an image?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “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.”
}
}
]
}