<?= $this->extend('layout'); ?>
<?= $this->section('menu'); ?>
    <?= $this->include('sidebar') ?>
<?= $this->endSection(); ?>
<?= $this->section('css'); ?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<?= $this->endSection(); ?>
<?= $this->section('content'); ?>
<div class="page-content col-xxl-4 col-12">
    <div class="row" id="chart">        
        <canvas id="myAreaChart"></canvas>
    </div>
</div>
<?= $this->endSection(); ?>
<?= $this->section('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.5/dist/chart.umd.min.js"></script>
<script src="https://smarthome.mawim.at/assets/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.3.0/chartjs-adapter-luxon.umd.js" integrity="sha512-IUw+YyQA3lci8gHiGIbkEA5pHnSy9LJeujqIDBHQMhxTk019nRXvDrKi2WcEr5nf5+RNffKMqSagdI0tzXvBiA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
const data = {
  labels: <?=$labels?>,
  datasets: [
    {
      label: '€',
      data: <?=$data?>,
      id:<?=$ids?>,
      hoverOffset: 8
    }
  ]
};
const configDonut = {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'left',
      },
      title: {
        display: true,
        text: '<?=$title?>',
        font: { size: 20 }
      }
    },
    onClick: (e) => {
        let ele = document.getElementById("myChartModal");
            const canvasPosition = Chart.helpers.getRelativePosition(e, window.myLineChart);
            // Substitute the appropriate scale IDs
            const data = window.myLineChart.getActiveElements(e);
            document.getElementById("modalChartBody").innerHTML = `<a href="/viewChart/${window.myLineChart.data.datasets[0].id[data[0].index]}">Zeige Details von ${window.myLineChart.data.labels[data[0].index]}</a>`;
            bootstrap.Modal.getOrCreateInstance(ele).show();
            const name = window.myLineChart.data.labels[data[0].index];
//const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
        //    alert(`http://mqtt.mawim.at/viewChart/${window.myLineChart.data.datasets[0].id[data[0].index]}`);
        }
  },
};

(async function () {
    Chart.defaults.font.size = 16;
    window.myLineChart = new Chart(document.getElementById('myAreaChart'), configDonut);
})();
</script>

<?= $this->endSection(); ?>