dashboard-design

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: dashboard-design
description: "Dashboard architecture and UX: KPI hierarchy, information density decisions, filter patterns, drill-down navigation, real-time update strategies (polling vs. WebSocket vs. SSE), empty and loading states for charts, and responsive dashboard layouts. Use when designing or building any analytics dashboard."
---

# Dashboard Design Skill

## When to Activate

- Designing or building an analytics dashboard from scratch
- Deciding on layout, widget placement, or information hierarchy
- Adding filters, date pickers, or drill-down navigation
- Implementing real-time data updates
- Designing empty, loading, and error states for dashboard widgets
- Adapting a single dashboard layout to serve both executive and analyst audiences
- Serializing filter state to URL parameters so dashboards can be bookmarked and shared

---

## KPI Hierarchy

Structure information by importance, not by data availability.

### Layout tiers

```
┌─────────────────────────────────────────────────────────────────┐
│  PRIMARY KPIs  (large number, trend indicator, sparkline)        │
│  Revenue: $1.2M  ↑12%   Users: 48,320  ↑3%   NPS: 67  →0%    │
├─────────────────────────────────────────────────────────────────┤
│  SECONDARY CHARTS  (medium size, 2-3 per row)                    │
│  ┌───────────┐  ┌───────────┐  ┌───────────┐                   │
│  │ Sales     │  │ Traffic   │  │ Retention │                   │
│  │ by region │  │ sources   │  │ cohort    │                   │
│  └───────────┘  └───────────┘  └───────────┘                   │
├─────────────────────────────────────────────────────────────────┤
│  SUPPORTING TABLES / DETAIL VIEWS  (full width, below the fold) │
│  Recent transactions | Top pages | Conversion funnel           │
└─────────────────────────────────────────────────────────────────┘
```

### Reading pattern

- **F-Pattern** — for data-dense dashboards (analysts); top-left priority
- **Z-Pattern** — for executive dashboards; headline metric top-left, key visual top-right, CTA bottom-right

### Audience-specific density

| Audience | Density | Interaction |
|----------|---------|-------------|
| Executive | Low — 3-5 KPIs, one chart | No filters, no drill-down |
| Manager | Medium — 6-10 KPIs, 3-4 charts | Date range, department filter |
| Analyst | High — full data tables, custom filters | Drill-down, export, comparisons |

---

## Information Density

### Progressive disclosure

Show summary → reveal detail on interaction:

```
Summary card: "Revenue: $1.2M ↑12%"
  → Click → Expand: monthly breakdown chart
  → Click "View details" → Full page with table + filters
```

### Drill-down pattern

```typescript
interface DrillDownState {
  level: 'overview' | 'region' | 'store';
  selection: string | null;
}

function Dashboard() {
  const [drill, setDrill] = useState<DrillDownState>({ level: 'overview', selection: null });

  return (
    <>
      <Breadcrumb drill={drill} onNavigate={setDrill} />
      {drill.level === 'overview' && <OverviewChart onDrillDown={(region) => setDrill({ level: 'region', selection: region })} />}
      {drill.level === 'region' && <RegionChart region={drill.selection!} onDrillDown={(store) => setDrill({ level: 'store', selection: store })} />}
      {drill.level === 'store' && <StoreDetail store={drill.selection!} />}
    </>
  );
}
```

---

## Filter Design

### Global vs. local filters

- **Global filters** (date range, user segment) — apply to all widgets; place in page header
- **Local filters** (sort order, top N) — apply to one widget; place inside the widget card

### Filter state URL serialization

```typescript
// Serialize filters to URL params — enables sharing and browser back/forward
import { useSearchParams } from 'react-router-dom';

function useFilters() {
  const [searchParams, setSearchParams] = useSearchParams();

  const filters = {
    dateRange: searchParams.get('dateRange') ?? '30d',
    region: searchParams.get('region') ?? 'all',
  };

  const se