creating-dashboards

ダッシュボードの作成

目的

このスキルを使うと、KPI カード、チャート、テーブル、フィルターなどの連携するウィジェットを通じてデータを集約・表示する、高度なダッシュボードインターフェースを作成できます。ダッシュボードはデータに基づく意思決定のための一元的なコマンドセンターとして機能します。ほかのスキル（data-viz、tables、design-tokens）の複数のコンポーネントタイプを統合し、リアルタイム更新、レスポンシブレイアウト、インタラクティブなフィルタリングを備えた統一的な分析体験を実現します。

使用するタイミング

次のような場合に、このスキルを有効にしてください。

• ビジネスインテリジェンスや分析のダッシュボードを構築するとき
• 経営層向けのレポートインターフェースを作成するとき
• リアルタイム監視システムを実装するとき
• 指標や傾向を表示する KPI を設計するとき
• カスタマイズ可能なウィジェットベースのレイアウトを開発するとき
• 複数のデータ表示にまたがるフィルターを連携させるとき
• データ量の多いレスポンシブインターフェースを構築するとき
• ドラッグ＆ドロップ式のダッシュボードエディターを実装するとき
• テンプレートベースの分析システムを作成するとき
• マルチテナントの SaaS ダッシュボードを設計するとき

ダッシュボードの主要要素

KPI カードの構成

┌────────────────────────────┐
│ Revenue (This Month)       │ ← Label with time period
│                            │
│  $1,245,832               │ ← Big number (primary metric)
│  ↑ 15.3% vs last month    │ ← Trend indicator with comparison
│  ▂▃▅▆▇█ (sparkline)       │ ← Mini visualization
└────────────────────────────┘

ウィジェットコンテナーの構造

• ウィジェット名とアクションを含むタイトルバー
• 読み込み状態（スケルトンまたはスピナー）
• 再試行オプション付きのエラーバウンダリー
• レイアウトを調整するためのリサイズハンドル
• 設定メニュー（エクスポート、設定、更新）

ダッシュボードのレイアウトタイプ

固定レイアウト：デザイナーが配置を定義し、ユーザー間で統一されます カスタマイズ可能なグリッド：ユーザーがドラッグ＆ドロップでウィジェットをリサイズし、レイアウトを保存できます テンプレートベース：あらかじめ用意されたパターンと、業界に応じた開始用レイアウトを提供します

ダッシュボードのグローバルコントロール

• 日付範囲ピッカー（すべてのウィジェットに適用）
• フィルターパネル（ウィジェット間で連携）
• 更新コントロール（手動／自動更新）
• エクスポート操作（PDF、画像、データ）
• テーマ切り替え（ライト／ダーク／カスタム）

実装方法

1. ダッシュボードのアーキテクチャを選択する

手早く分析ダッシュボードを作成する場合 → Tremor を使用 最小限のコードで、あらかじめ用意された KPI カード、チャート、テーブルを利用できます。

npm install @tremor/react

カスタマイズ可能なダッシュボードを作成する場合 → react-grid-layout を使用 ドラッグ＆ドロップ、ウィジェットのリサイズ、ユーザー定義のレイアウトに対応しています。

npm install react-grid-layout

2. グローバルな状態管理を設定する

ウィジェット間の連携にフィルターコンテキストを実装します。

// Dashboard context for shared filters
const DashboardContext = createContext({
  filters: { dateRange: null, categories: [] },
  setFilters: () => {},
  refreshInterval: 30000
});

// Wrap dashboard with provider
<DashboardContext.Provider value={dashboardState}>
  <FilterPanel />
  <WidgetGrid />
</DashboardContext.Provider>

3. データ取得方法を実装する

並列読み込み：すべてのウィジェットのデータを同時に取得します 遅延読み込み：まず表示中のウィジェットを読み込み、ほかのウィジェットはスクロールに応じて読み込みます キャッシュ済みデータによる更新：最新データの取得中は、キャッシュからデータを提供します

4. リアルタイム更新を設定する

Server-Sent Events（ダッシュボードに推奨）：

const eventSource = new EventSource('/api/dashboard/stream');
eventSource.onmessage = (event) => {
  const update = JSON.parse(event.data);
  updateWidget(update.widgetId, update.data);
};

5. レスポンシブデザインを適用する

画面サイズごとにブレークポイントを定義します。

• デスクトップ（>1200px）：複数列のグリッド
• タブレット（768-1200px）：2 列レイアウト
• モバイル（<768px）：1 列の縦積みレイアウト

Tremor でクイックスタート

基本的な KPI ダッシュボード

import { Card, Grid, Metric, Text, BadgeDelta, AreaChart } from '@tremor/react';

function QuickDashboard({ data }) {
  return (
    <Grid numItems={1} numItemsSm={2} numItemsLg={4} className="gap-4">
      {/* KPI Cards */}
      <Card>
        <Text>Total Revenue</Text>
        <Metric>$45,231.89</Metric>
        <BadgeDelta deltaType="increase">+12.5%</BadgeDelta>
      </Card>

      <Card>
        <Text>Active Users</Text>
        <Metric>1,234</Metric>
        <BadgeDelta deltaType="decrease">-2.3%</BadgeDelta>
      </Card>

      {/* Chart Widget */}
      <Card className="lg:col-span-2">
        <Text>Revenue Trend</Text>
        <AreaChart
          data={data.revenue}
          index="date"
          categories={["revenue"]}
          valueFormatter={(value) => `$${value.toLocaleString()}`}
        />
      </Card>
    </Grid>
  );
}

完全な実装については、examples/tremor-dashboard.tsxを参照してください。

カスタマイズ可能なダッシュボードの実装

ドラッグ＆ドロップ式のグリッドレイアウト

import { Responsive, WidthProvider } from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';

const ResponsiveGridLayout = WidthProvider(Responsive);

function CustomizableDashboard() {
  const [layouts, setLayouts] = useState(getStoredLayouts());

  return (
    <ResponsiveGridLayout
      layouts={layouts}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      rowHeight={60}
      onLayoutChange={(layout, layouts) => {
        setLayouts(layouts);
        localStorage.setItem('dashboardLayout', JSON.stringify(layouts));
      }}
      draggableHandle=".widget-header"
    >
      <div key="kpi1">
        <KPIWidget data={kpiData} />
      </div>
      <div key="chart1">
        <ChartWidget data={chartData} />
      </div>
      <div key="table1">
        <TableWidget data={tableData} />
      </div>
    </ResponsiveGridLayout>
  );
}

ウィジェットカタログを含む完全な例については、examples/customizable-dashboard.tsxを参照してください。

リアルタイムデータのパターン

Server-Sent Events（推奨）

サーバーからダッシュボードへの一方向更新に最適です。

function useSSEUpdates(endpoint) {
  useEffect(() => {
    const eventSource = new EventSource(endpoint);

    eventSource.onmessage = (event) => {
      const update = JSON.parse(event.data);
      // Update specific widget or all widgets
      dispatch({ type: 'UPDATE_WIDGET', payload: update });
    };

    return () => eventSource.close();
  }, [endpoint]);
}

WebSocket（双方向通信向け）

ダッシュボードからサーバーにコマンドを送信する必要がある場合に使用します。

const ws = new WebSocket('ws://localhost:3000/dashboard');
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateDashboard(data);
};
// Send filter changes to server
ws.send(JSON.stringify({ type: 'FILTER_CHANGE', filters }));

スマートポーリングへのフォールバック

WebSocket／SSE に対応していない環境で使用します。

function useSmartPolling(fetchData, interval = 30000) {
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    if (isPaused || document.hidden) return;

    const timer = setInterval(fetchData, interval);
    return () => clearInterval(timer);
  }, [isPaused, interval]);

  // Pause when tab inactive
  useEffect(() => {
    const handleVisibilityChange = () => {
      setIsPaused(document.hidden);
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, []);
}

エラー処理と再接続を含む詳細なパターンについては、references/real-time-updates.mdを参照してください。

パフォーマンスの最適化

遅延読み込みの方法

function DashboardGrid({ widgets }) {
  const [visibleWidgets, setVisibleWidgets] = useState(new Set());

  return widgets.map(widget => (
    <LazyLoad
      key={widget.id}
      height={widget.height}
      offset={100}
      once
      placeholder={<WidgetSkeleton />}
    >
      <Widget {...widget} />
    </LazyLoad>
  ));
}

並列データ取得

// Fetch all widget data simultaneously
const loadDashboard = async () => {
  const [kpis, charts, tables] = await Promise.all([
    fetchKPIs(),
    fetchChartData(),
    fetchTableData()
  ]);

  return { kpis, charts, tables };
};

ウィジェット単位のキャッシュ

function CachedWidget({ id, fetcher, ttl = 60000 }) {
  const cache = useRef({ data: null, timestamp: 0 });

  const getData = async () => {
    const now = Date.now();
    if (cache.current.data && now - cache.current.timestamp < ttl) {
      return cache.current.data;
    }

    const fresh = await fetcher();
    cache.current = { data: fresh, timestamp: now };
    return fresh;
  };

  // Use cached data while fetching fresh
  return <Widget data={cache.current.data} onRefresh={getData} />;
}

ダッシュボードのパフォーマンスを分析・最適化するには、次を実行します。

python scripts/optimize-dashboard-performance.py --analyze dashboard-config.json

スキル間の連携

データ可視化コンポーネントの使用

チャートウィジェットについては、data-vizスキルを参照してください。

// Use charts from data-viz skill
import { createChart } from '../data-viz/chart-factory';

const revenueChart = createChart('area', {
  data: revenueData,
  xAxis: 'date',
  yAxis: 'revenue',
  theme: dashboardTheme
});

データテーブルの統合

データグリッドについては、tablesスキルを参照してください。

// Use advanced tables from tables skill
import { DataGrid } from '../tables/data-grid';

<DataGrid
  data={transactions}
  columns={columnDefs}
  pagination={true}
  sorting={true}
  filtering={true}
/>

デザイントークンの適用

一貫したテーマ設定には、design-tokensスキルを使用します。

// Dashboard-specific tokens from design-tokens skill
const dashboardTokens = {
  '--dashboard-bg': 'var(--color-bg-secondary)',
  '--widget-bg': 'var(--color-white)',
  '--widget-shadow': 'var(--shadow-lg)',
  '--kpi-value-size': 'var(--font-size-4xl)',
  '--kpi-trend-positive': 'var(--color-success)',
  '--kpi-trend-negative': 'var(--color-error)'
};

フィルター入力コンポーネント

フィルターコントロールには、必要に応じて forms スキルを使用してください。

// Advanced filter inputs from forms skill
import { DateRangePicker, MultiSelect } from '../forms/inputs';

<FilterPanel>
  <DateRangePicker onChange={handleDateChange} />
  <MultiSelect options={categories} onChange={handleCategoryFilter} />
</FilterPanel>

ライブラリ選択ガイド

Tremor を選ぶ場合：

• ダッシュボードをすばやく構築する必要がある
• あらかじめスタイルが設定された、プロフェッショナルなコンポーネントを使いたい
• プロジェクトで Tailwind CSS を使用している
• 標準的な分析インターフェースを構築する
• カスタマイズの要件が限られている

react-grid-layout を選ぶ場合：

• ユーザーがレイアウトをカスタマイズする必要がある
• ドラッグ＆ドロップが必要である
• ユーザーごとに異なるビューが必要である
• ダッシュボードビルダーツールを構築する
• 最大限の柔軟性を優先する

両方を組み合わせる場合：

• ウィジェットの内容（KPI、チャート）には Tremor を使用する
• レイアウト管理には react-grid-layout を使用する
• 両方の利点を活用できる

同梱リソース

スクリプト（トークンを消費しない実行）

• scripts/generate-dashboard-layout.py - レスポンシブなグリッド設定を生成する
• scripts/calculate-kpi-metrics.py - トレンド、比較、スパークラインを計算する
• scripts/validate-widget-config.py - ウィジェットとフィルターの設定を検証する
• scripts/optimize-dashboard-performance.py - パフォーマンスを分析して最適化する
• scripts/export-dashboard.py - ダッシュボードをさまざまな形式にエクスポートする

スクリプトはコンテキストに読み込まずに直接実行できます。

python scripts/calculate-kpi-metrics.py --data metrics.json --period monthly

リファレンス（詳細なパターン）

• references/kpi-card-patterns.md - KPI カードのデザインパターンとバリエーション
• references/layout-strategies.md - グリッドシステムとレスポンシブなアプローチ
• references/real-time-updates.md - WebSocket、SSE、ポーリングの実装
• references/filter-coordination.md - ウィジェット間でのフィルター同期
• references/performance-optimization.md - 高度な最適化手法
• references/library-guide.md - Tremor と react-grid-layout の詳細ガイド

サンプル（実装例一式）

• examples/sales-dashboard.tsx - 売上分析ダッシュボード一式
• examples/monitoring-dashboard.tsx - アラート機能付きリアルタイム監視
• examples/executive-dashboard.tsx - 洗練された経営報告
• examples/customizable-dashboard.tsx - 永続化機能付きのドラッグ＆ドロップ
• examples/tremor-dashboard.tsx - Tremor を使った簡単な実装
• examples/filter-context.tsx - グローバルフィルターの連携

アセット（テンプレートと設定）

• assets/dashboard-templates.json - 構築済みのダッシュボードレイアウト
• assets/widget-library.json - ウィジェットのカタログと設定
• assets/grid-layouts.json - レスポンシブなグリッド設定
• assets/kpi-formats.json - 数値の書式設定ルール
• assets/theme-tokens.json - ダッシュボード固有のデザイントークン

ダッシュボード作成ワークフロー

1. 要件を定義する：固定型かカスタマイズ可能か？リアルタイムか静的か？
2. ライブラリを選択する：手早く構築するなら Tremor、柔軟性を求めるなら react-grid-layout
3. 構成を整える：グローバル状態、フィルターコンテキスト、レイアウトシステム
4. ウィジェットを構築する：KPI カード、チャート（data-viz）、テーブル（tables スキル）
5. データフローを実装する：取得方法、キャッシュ、更新
6. インタラクティブ機能を追加する：フィルター、ドリルダウン、エクスポート
7. パフォーマンスを最適化する：遅延読み込み、並列取得、キャッシュ
8. テーマを適用する：一貫したスタイルには design-tokens を使用する
9. レスポンシブ動作をテストする：デスクトップ、タブレット、モバイルのブレークポイント
10. デプロイして監視する：パフォーマンスとユーザーエンゲージメントを追跡する

具体的なパターンや詳細な実装については、上記の同梱リソースをご覧ください。