Interactive dashboards

Builds dashboards with visible filter scope, reliable asynchronous updates and a clear path from overview to detail.

interactive-dashboard-development

See how it helps

When is it useful?

Use when users need to explore data without losing the current context.

What does it help you do?

Organizes overview, zoom, filtering and detail in a coherent flow.
Makes filters visible, reversible and shareable where appropriate.
Rejects stale responses and preserves readable responsive layouts.

Try asking this

Build a sales dashboard where rapid filter changes cannot display an older result under newer labels.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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

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

Included files 1

SKILL.md