Refactor ChartsView.tsx into smaller modules

[hender14]

背景

ChartsView.tsxが2000行を超える大きなファイルになっており、保守性が低下している。

提案

以下のようにモジュール分割を行う:

提案される構造

frontend/src/
├── components/
│   ├── ChartsView.tsx          (~200行) - メインコンポーネント
│   ├── ChartPanel.tsx          (~300行) - パネルコンポーネント
│   ├── SeriesPicker.tsx        (~200行) - シリーズ選択UI
│   ├── TimeRangeControls.tsx   (~150行) - 時間範囲コントロール
│   └── SessionControls.tsx     (~150行) - セッション管理UI
├── hooks/
│   ├── useSeriesData.ts        (~100行) - データフェッチロジック
│   ├── usePanelState.ts        (~100行) - パネル状態管理
│   └── useChartPlot.ts         (~200行) - uPlotロジック
├── utils/
│   ├── chartHelpers.ts         (~150行) - チャート関連ヘルパー
│   └── schemaParser.ts         (~100行) - スキーマパース
└── types/
    └── charts.ts               (~50行) - 型定義

分割の優先順位

1. Phase 1: 型定義の分離 (types/charts.ts)
2. Phase 2: ChartPanelの分離
3. Phase 3: SeriesPickerの分離
4. Phase 4: カスタムフックの抽出
5. Phase 5: ユーティリティ関数の分離

期待される効果

• コードの可読性向上
• テスタビリティ向上
• 並行開発が容易に
• 新機能追加時の変更範囲を局所化

注意点

• 既存の動作を維持すること
• 段階的に実施し、各フェーズでテストを実施
• localStorage互換性を保つ