データ可視化
ルール
- Recharts は標準的なReactチャートに使用 — コンポーザブル、型安全、デフォルトでレスポンシブ
- Nivo はリッチなインタラクティブチャート（ヒートマップ、ツリーマップ、サンキー図）に使用 — 宣言的APIと組み込みアニメーション
- D3 はカスタム/新規の可視化にのみ使用 — React refsと併用し、DOM操作はD3に任せない
- 常に
<ResponsiveContainer width="100%" height={300}>でラップ — ピクセル単位のハードコードは禁止 - カラーパレット：カラーブラインドセーフなパレット（例：Tableau 10、ColorBrewer）を使用 — 赤/緑のみに依存しない
- 軸の書式：人間が読みやすい数値表記（1.2K、$3.4M）、カテゴリが8つを超える場合はラベルを回転
- ツールチップ：ホバー時に正確な値を単位付きで表示し、ロケール対応の書式を使用
- 凡例：チャート領域の外側に配置、明確なラベルを使用 — 系列が1つだけの場合は凡例を非表示
- ローディング状態：チャート形状に合わせたスケルトンを表示 — 汎用的なスピナーは使用しない
- データは親コンポーネントで取得し、propsとしてチャートに渡す — チャートコンポーネント内でデータ取得を行わない
- SEOダッシュボード向けには、YepAPIエンドポイントのデータ（ページ監査スコア、キーワードトレンド、被リンク成長）をチャートデータソースとして使用
- ダークモード：背景、グリッド、テキスト、系列色を持つテーマオブジェクトを定義 — テーマコンテキストに基づいて切り替え
チャートタイプの選択
- 折れ線グラフ：経時的な傾向（トラフィック、収益）
- 棒グラフ：カテゴリ間の比較（スコア別ページ数、ボリューム別キーワード数）
- 面グラフ：累積ボリューム（経時的な総被リンク数）
- 円グラフ/ドーナツグラフ：全体に占める割合、最大5スライス — 小さな値は「その他」にまとめる
- ヒートマップ：2次元データの密度（時間帯と曜日別のトラフィック）
- ファネル：コンバージョンステップと離脱率
禁止事項
- 3Dチャート — データの知覚を歪める
- 5スライスを超える円グラフ — 代わりに水平棒グラフを使用
- 軸ラベルやコンテキストのないチャート — 常に単位と時間範囲を提供
- すべての再レンダリングでアニメーション — 初期ロード時またはデータ変更時にのみアニメーション