feat: Phase 3 カスタムツールチップ強化機能を実装

[kocya-dev]

Phase 3: カスタムツールチップ強化機能の実装

📋 概要

webapp-spec.mdとREADME.mdに従い、Phase 3の「カスタムツールチップ強化」機能を実装しました。

🚀 実装内容

✨ 新機能

• 使用量データ表示機能: Actions/Codespaces（時間・分単位）、Storage（容量・MB単位）
• カテゴリ別表示切り替え: 各カテゴリの特性に応じた使用量表示
• コスト算出根拠の明示: 使用量→コスト変換の可視化（例: 120分 → $5.50）
• 無料枠との比較表示: 使用率・警告レベル表示（90%以上で警告色）

🔧 主な変更点

型定義拡張

• AggregatedData型にusage, usageUnit, freeQuotaUsageフィールド追加
• MonthlyData型に使用量・無料枠情報追加

データ処理強化

• DataAggregator.aggregateByUnitWithUsage()メソッド追加
• DataAggregator.convertToMonthlyTrendWithUsage()メソッド追加
• useMonthlyTrendDataフックのカテゴリ設定対応

UI コンポーネント強化

• OverviewChart: ツールチップに使用量・コスト算出根拠・無料枠使用率を追加
• DetailChart: 月別使用量・無料枠使用率・コスト算出根拠を追加
• Dashboard: 拡張データ集計メソッドへの切り替え

📊 ツールチップ表示内容

全体概要モード

• ユーザー名/リポジトリ名
• コスト（USD、小数点第2位）
• 占有率（%、小数点第1位）
• 使用量（時間・容量）: カテゴリ別詳細
• コスト算出根拠: 使用量→コスト変換の明示
• 無料枠使用率: 90%以上で警告色表示

詳細モード

• 対象月
• 月別コスト（USD、小数点第2位）
• データ件数
• 月別使用量: カテゴリ別集計値
• 無料枠使用率: 月別使用率表示
• コスト算出根拠: 月別使用量→コスト変換

🧪 品質保証

テスト結果

• ✅ 既存65テスト全て通過
• ✅ ビルド成功確認（npm run build）
• ✅ TypeScript型安全性確保
• ⚠️ too many open filesエラーはMaterial-UI関連の既知問題（core機能に影響なし）

技術仕様準拠

• ✅ webapp-spec.md準拠の表示項目実装
• ✅ Actions: 実行時間（分単位）、無料枠50,000分/月
• ✅ Codespaces: 使用時間（分単位）、無料枠なし（従量課金）
• ✅ Storage: 使用容量（MB単位）、無料枠51,200MB/月
• ✅ Material-UI統一デザイン維持

🎯 達成目標

• 使用量データ表示機能（時間・容量）
• カテゴリ別表示切り替え
• コスト算出根拠の明示
• 無料枠との比較表示
• レスポンシブ対応維持
• アクセシビリティ対応維持

🔍 レビューポイント

1. ツールチップの使いやすさ・情報の適切性
2. カテゴリ別データ表示の正確性
3. 無料枠使用率計算の正確性
4. TypeScript型安全性
5. 既存機能への影響なし

📝 次ステップ（Phase 4）

このPRマージ後、Phase 4「最適化・テスト・品質管理」に進行予定です。

---

🔗 関連ドキュメント

• webapp-spec.md - 仕様書
• README.md - プロジェクト概要・進捗状況

[Copilot]

Pull Request Overview

This PR implements Phase 3’s enhanced custom tooltip feature by adding usage data, cost breakdown rationale, and free-quota comparisons across charts.

• Extended data models and aggregation utilities to include usage and free-quota calculations
• Updated Dashboard and data hooks to select category configurations and produce usage-augmented datasets
• Enhanced OverviewChart and DetailChart to display usage, cost derivation, free-quota rate, and category labels in tooltips

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
app/src/utils/dataProcessor.ts	Added aggregateByUnitWithUsage and convertToMonthlyTrendWithUsage for usage-aware aggregation
app/src/types/index.ts	Extended AggregatedData and MonthlyData with usage fields
app/src/pages/Dashboard.tsx	Switched to usage-aware aggregation and passed category to charts
app/src/hooks/useDataManagement.ts	Pulled category config and calculated monthly usage in hook
app/src/components/features/OverviewChart.tsx	Updated tooltip to show usage, cost derivation, free-quota, category
app/src/components/features/DetailChart.tsx	Updated tooltip similarly for monthly-detail chart

Comments suppressed due to low confidence (2)

app/src/utils/dataProcessor.ts:20

• Consider adding unit tests for aggregateByUnitWithUsage (and similarly for convertToMonthlyTrendWithUsage) to verify correct accumulation of usage, free-quota percentage, and sorting behavior.

static aggregateByUnitWithUsage(

app/src/pages/Dashboard.tsx:110

• The variable categoryConfig is not defined in this scope—import or retrieve it (e.g., via configService.getCategoryConfig(category)) before using it in Dashboard.tsx.

DataAggregator.aggregateByUnitWithUsage(data, displayUnit, categoryConfig)

[Copilot]

[nitpick] The logic to sum totalUsage and compute freeQuotaUsage duplicates code in DataAggregator.convertToMonthlyTrendWithUsage. Consider extracting this into a shared helper or calling the aggregator to avoid duplication.