■ 概要

学習ログをもとに、タグごとの学習時間を集計し、円グラフで可視化する機能を実装した。

■ 実装の流れ

1. 学習ログを取得
2. タスクと紐付けてタグを取得
3. タグごとに時間を集計
4. グラフ用データに変換
5. グラフで表示

■ データ集計（reduce）

// タグごとの学習時間を集計する
const tagSummary = studyLogs.reduce((acc, log) => {

  // logのtaskIdから該当するタスクを取得
  const task = tasks.find((t) => t.id === log.taskId);

  // タスクが存在しない場合はスキップ
  if (!task) return acc;

  const tag = task.tag;

  // 初回は0で初期化
  if (!acc[tag]) {
    acc[tag] = 0;
  }

  // 学習時間を加算
  acc[tag] += log.minutes;

  return acc;

}, {} as Record<string, number>);

■ データ変換（map + sort）

// オブジェクト → 配列に変換し、降順ソート
const sorted = Object.entries(tagSummary)
  .map(([tag, minutes]) => ({
    name: tag,     // グラフ表示用の名前
    value: minutes // 学習時間
  }))
  .sort((a, b) => b.value - a.value); // 学習時間が多い順

■ 上位5件 + Others

// 上位5件を取得
const top5 = sorted.slice(0, 5);

// 6件目以降（Others対象）
const others = sorted.slice(5);

// Othersの合計値を計算
const othersSum = others.reduce((sum, item) => {
  return sum + item.value;
}, 0);

// 最終的なグラフデータ
const chartData = [
  ...top5, // 上位5件
  ...(othersSum > 0
    ? [{ name: "Others", value: othersSum }] // その他まとめ
    : [])
];