8f28ed82da
* charts auf lokal umgestellt * Rechnungen mit Anhang * neues Interface Sync automatische
68 lines
2.7 KiB
PHP
68 lines
2.7 KiB
PHP
<?= $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(); ?>
|