Interaktive Dashboards

Interactive Dashboard Development

Use this skill when building interactive charts and multi-widget dashboards with filtering, time-range pickers, zooming, brushing, and asynchronous data fetching.

Shneiderman's Mantra & Filter State Clarity

1. Overview First, Zoom and Filter, Then Details on Demand:
   • Present the high-level context and primary comparisons immediately, allow users to narrow the scope via filters/brushes, and expose granular record-level inspection on demand.
2. Visible, Reversible Filter & Scope Context:
   • Always display active filters, selected time range, timezone, and comparison baseline as visible chips or summary headers—never let a chart show a filtered subset while looking like the full population.
   • Provide one-click "Reset filters" / "Clear selection" controls and synchronize shareable filter state with URL search parameters or explicit dashboard state stores.
   • When drilling down or zooming into a sub-range, preserve breadcrumbs or an overview context bar so the user knows where the slice sits within the whole dataset.

Async Data Fetching & Out-of-Order Race Protection

• Prevent Stale Responses from Overwriting Newer Filter Selections:
  • Rapidly toggling date ranges, granularity buckets, or category filters fires overlapping requests.
  • Cancel superseded requests via AbortController or guard state updates with a monotonically increasing requestId / query key so a slow response for "Last 12 Months" never overwrites a newer selection for "Last 7 Days".
• Distinct Loading, Empty, Partial, and Error States:
  • Loading: Keep axes/layout stable with skeleton placeholders or subtle overlays during filter updates to prevent layout shifts (CLS).
  • Empty vs. Zero: Distinguish "No records match the current filters" (with a reset-filters action) from "Metric value is 0 for this period".
  • Partial Failure: Isolate widget-level errors so one failed query shows an actionable retry state without crashing the whole dashboard.

Responsive Layout & Label Legibility

• Measure container bounds (ResizeObserver) cleanly and adapt tick density, label truncation/wrapping (prefer horizontal bars when category labels are long), and legend placement across desktop and narrow viewports without overlapping text.

Checklist

• Are active filters, date ranges, timezones, and comparison baselines visibly displayed and easy to reset?
• Do async chart queries use AbortController or request sequencing so stale responses never overwrite newer filter states?
• Are loading, empty-filter, zero-value, partial-period, and widget-error states clearly differentiated?
• Do axes, long category labels, and legends remain legible and non-overlapping across container resizes?