# 発展課題 2：複数 CSV 比較ビュー

## ゴール

2 つの CSV を同時にアップロードして、グラフを重ねて比較できるようにする。

## 完成イメージ

- ドロップゾーンを 2 つ並べる（CSV A / CSV B）
- 両方アップロードされたら、棒グラフを横並び（または折れ線を重ねて）表示
- 統計量テーブルにも A / B 両方の値が並ぶ

## Codex への指示例

```
2 つの CSV を比較できる UI に拡張してください。
- ドロップゾーンを 2 つ（CSV A / CSV B のラベル付き）
- 棒グラフは A と B を同じカテゴリで横に並べる
- 折れ線グラフは A と B を別の線として重ねる
- 円グラフは A のみ（2 つの円を並べると比較しづらいので除外）
- 統計量テーブルは A の値 / B の値 / 差分 の 3 列構成
- 片方しかアップロードされていない場合は、A だけの動作に戻す
```

## 補足：比較ビューは「差分思考」の表現

ビジネスの意思決定は「現状 vs 目標」「先月 vs 今月」「自社 vs 競合」のような差分で行われます。比較ビューが作れると、ダッシュボードが「現状の表示」から「判断の支援」に変わります。

Chart.js は `datasets` を配列で渡せば自動的に複数系列を重ねて描画してくれます。データ構造の設計次第で、3 系列・4 系列の比較にも自然に拡張できます。

## つまずきポイント

- カラム名が A と B で違うと比較不能 → 「ラベル列・データ列は A の選択を B にも適用」する設計に
- 統計量の差分が NaN になる → 数値型かを判定してから計算
- グラフの色が同じになる → datasets の `backgroundColor` を A と B で別の値に
- 凡例が出ない → 比較ビューでは凡例を `display: true` にしないと、どちらが A／B か分からない

## Tips（実務で効かせるコツ）

- 差分を「絶対値」と「%」の両方で出すと、解釈しやすい（売上 100 万円増、+15%）
- グラフ色は **A をブランドカラー、B を薄いグレー** にすると「現状 vs 比較対象」の構図が伝わる
- ラベルが多い時は、グラフが横スクロール可能になる設定（Chart.js の `responsive: true` + 親要素の overflow）を入れる

## 注意

- 行数が大きく違う CSV を比較しようとすると、X 軸が崩れる。同じカテゴリで揃っている前提のチェックを入れる
- A だけ・B だけのアップロードでも壊れないように、初期化処理は両方を分離する

## 推奨サンプルの組み合わせ

- `samples/sales-by-region.csv` を A、Excel で前月分を加工したものを B として比較するイメージ

## 参考リンク

- [Chart.js — Bar Chart datasets（複数系列の指定）](https://www.chartjs.org/docs/latest/charts/bar.html)
- [Chart.js — Line Chart datasets](https://www.chartjs.org/docs/latest/charts/line.html)