ドーナツグラフ（Doughnut Chart）— 中央テキスト・複数並べ

body {
  font-family: sans-serif;
  padding: 24px;
  background: #F8FAFC;
  color: #1E293B;
}

.chart-section {
  margin-bottom: 48px;
}

.chart-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
}

/* Pattern 1: 単体ドーナツ */
.chart-wrap--single {
  max-width: 360px;
  height: 360px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

/* Pattern 2: グリッド */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.chart-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px 12px 12px;
  box-sizing: border-box;
}

.chart-grid-canvas-wrap {
  width: 100%;
  height: 140px;
}

.chart-grid-label {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 480px) {
  .chart-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

// 中央テキストを描画するローカルプラグイン
// chart.options.plugins.centerText = { line1, line2 } で渡す
var centerTextPlugin = {
  id: 'centerText',
  afterDraw: function (chart) {
    var opts = chart.options.plugins.centerText;
    if (!opts) return;
    var ctx = chart.ctx;
    var area = chart.chartArea;
    var cx = area.left + area.width / 2;
    var cy = area.top + area.height / 2;
    ctx.save();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    // 上段: ラベル
    ctx.font = 'bold 12px sans-serif';
    ctx.fillStyle = '#64748B';
    ctx.fillText(opts.line1, cx, cy - 12);
    // 下段: 数値
    ctx.font = 'bold 22px sans-serif';
    ctx.fillStyle = '#1E293B';
    ctx.fillText(opts.line2, cx, cy + 12);
    ctx.restore();
  }
};

document.addEventListener('DOMContentLoaded', function () {
  fetch('./data/data.json')
    .then(function (r) { return r.json(); })
    .then(function (data) {
      renderTaskCompletion(data.taskCompletion);
      renderDepartmentGoals(data.departmentGoals);
    })
    .catch(function (err) {
      console.error('データの取得に失敗しました:', err);
    });
});

// Pattern 1: タスク完了率（中央テキスト付き）
function renderTaskCompletion(data) {
  var values = data.datasets[0].data;
  var total = values.reduce(function (a, b) { return a + b; }, 0);
  var pct = Math.round(values[0] / total * 100);
  var ctx = document.getElementById('doughnut-task');
  new Chart(ctx, {
    type: 'doughnut',
    plugins: [centerTextPlugin],
    data: {
      labels: data.labels,
      datasets: [{
        data: values,
        backgroundColor: [
          'rgba(43, 127, 232, 0.85)',
          'rgba(251, 191, 36, 0.85)',
          'rgba(203, 213, 225, 0.85)'
        ],
        borderColor: '#fff',
        borderWidth: 2,
        hoverOffset: 6
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '65%',
      plugins: {
        centerText: { line1: '完了率', line2: pct + '%' },
        title: {
          display: true,
          text: data.label,
          font: { size: 13 },
          padding: { bottom: 12 }
        },
        legend: {
          position: 'bottom',
          labels: { padding: 14, font: { size: 12 } }
        }
      }
    }
  });
}

// Pattern 2: 部門別達成率（複数ドーナツ横並べ）
function renderDepartmentGoals(data) {
  var grid = document.getElementById('doughnut-grid');
  data.departments.forEach(function (dept) {
    var item = document.createElement('div');
    item.className = 'chart-grid-item';

    var canvasWrap = document.createElement('div');
    canvasWrap.className = 'chart-grid-canvas-wrap';

    var canvas = document.createElement('canvas');
    canvas.setAttribute('aria-label', dept.name + ' 達成率のドーナツグラフ');
    canvas.setAttribute('role', 'img');
    canvasWrap.appendChild(canvas);

    var label = document.createElement('p');
    label.className = 'chart-grid-label';
    label.textContent = dept.name;

    item.appendChild(canvasWrap);
    item.appendChild(label);
    grid.appendChild(item);

    // canvas を DOM に追加してから Chart を初期化する
    new Chart(canvas, {
      type: 'doughnut',
      plugins: [centerTextPlugin],
      data: {
        labels: ['達成', '未達'],
        datasets: [{
          data: [dept.achieved, dept.unachieved],
          backgroundColor: [
            'rgba(43, 127, 232, 0.85)',
            'rgba(203, 213, 225, 0.6)'
          ],
          borderColor: '#fff',
          borderWidth: 2,
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '68%',
        plugins: {
          centerText: { line1: '達成率', line2: dept.achieved + '%' },
          legend: { display: false },
          title: { display: false }
        }
      }
    });
  });
}

{
  "taskCompletion": {
    "label": "プロジェクトA タスク進捗",
    "labels": ["完了", "進行中", "未着手"],
    "datasets": [
      {
        "data": [28, 12, 10]
      }
    ]
  },
  "departmentGoals": {
    "label": "部門別 目標達成率（Q2）",
    "departments": [
      { "name": "営業部", "achieved": 78, "unachieved": 22 },
      { "name": "開発部", "achieved": 92, "unachieved": 8 },
      { "name": "マーケ部", "achieved": 65, "unachieved": 35 }
    ]
  }
}