WordPressでアクセス解析ダッシュボードをChart.jsで作る方法

<section class="analytics-chart">
  <h2>アクセス推移</h2>
  <canvas id="trafficChart" width="800" height="360"></canvas>
</section>

add_action('wp_enqueue_scripts', function () {
    if (!is_page('dashboard')) {
        return;
    }

    wp_enqueue_script(
        'chartjs',
        'https://cdn.jsdelivr.net/npm/chart.js',
        [],
        null,
        true
    );

    wp_enqueue_script(
        'nines-dashboard-chart',
        get_template_directory_uri() . '/js/dashboard-chart.js',
        ['chartjs'],
        '1.0.0',
        true
    );
});

async function drawTrafficChart() {
  const response = await fetch('/wp-json/nines/v1/analytics/daily');
  const rows = await response.json();

  const labels = rows.map((row) => row.date);
  const pageviews = rows.map((row) => row.pageviews);
  const clicks = rows.map((row) => row.clicks);

  new Chart(document.querySelector('#trafficChart'), {
    type: 'line',
    data: {
      labels,
      datasets: [
        {
          label: 'PV',
          data: pageviews,
          borderColor: '#ff2f63',
          backgroundColor: 'rgba(255, 47, 99, .12)',
          tension: .35,
          fill: true,
        },
        {
          label: '検索クリック',
          data: clicks,
          borderColor: '#111111',
          backgroundColor: 'rgba(17, 17, 17, .08)',
          tension: .35,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'bottom',
        },
      },
    },
  });
}

drawTrafficChart();