<div id="content" class="content">
  <div class='row'>
    <div class='col-lg-12'>
      <div class='panel panel-primary'>
        <div class='panel-heading'>
          <h3 class='panel-title bold'>Dashboard</h3>
        </div>
        <div class='panel-body'>
          <h2>Trend Harian Kunjungan</h2>
          <canvas id="trendChart" height="100"></canvas>

          <h2 style="margin-top: 30px;">Histogram Asal Kunjungan & Fraksi Tujuan</h2>
          <canvas id="histogramChart" height="100"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  // Data dari PHP ke JS
  const trendLabels = <?= json_encode(array_column($trend, 'tanggal')) ?>;
  const trendData = <?= json_encode(array_column($trend, 'jumlah_kunjungan')) ?>;

  const histogramRaw = <?= json_encode($histogram) ?>;

  const grouped = {};
  histogramRaw.forEach(item => {
    const label = item.tujuan + " > " + item.sub_tujuan;
    if (!grouped[item.dari]) {
      grouped[item.dari] = {
        labels: [],
        data: []
      };
    }
    grouped[item.dari].labels.push(label);
    grouped[item.dari].data.push(parseFloat(item.fraksi));
  });

  // Chart 1 – Trend Harian
  new Chart(document.getElementById("trendChart"), {
    type: 'line',
    data: {
      labels: trendLabels,
      datasets: [{
        label: 'Jumlah Kunjungan',
        data: trendData,
        borderColor: 'blue',
        fill: false
      }]
    }
  });

  // Chart 2 – Histogram Fraksi Tujuan dari Asal
  const datasets = Object.keys(grouped).map((dari, index) => {
    const color = `hsl(${index * 60}, 70%, 50%)`; // warna berbeda tiap asal
    return {
      label: dari,
      data: grouped[dari].data,
      backgroundColor: color
    };
  });

  new Chart(document.getElementById("histogramChart"), {
    type: 'bar',
    data: {
      labels: Object.values(grouped)[0]?.labels ?? [],
      datasets: datasets
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true,
          max: 1
        }
      }
    }
  });
</script>