102 lines
3.2 KiB
JavaScript
102 lines
3.2 KiB
JavaScript
require("flatpickr");
|
|
|
|
import '@fortawesome/fontawesome-free/css/all.min.css';
|
|
import Chart from 'chart.js/auto';
|
|
import $ from 'jquery';
|
|
|
|
window.$ = $;
|
|
window.jQuery = $;
|
|
|
|
const chartColours = [
|
|
'rgb(8, 145, 178)',
|
|
'rgb(37, 99, 235)',
|
|
'rgb(79, 70, 229)',
|
|
'rgb(14, 116, 144)',
|
|
];
|
|
|
|
function parseJsonAttribute(element, attribute, fallback = []) {
|
|
try {
|
|
return JSON.parse(element.getAttribute(attribute) || JSON.stringify(fallback));
|
|
} catch (error) {
|
|
return fallback;
|
|
}
|
|
}
|
|
|
|
function renderWmsCharts() {
|
|
document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
|
|
if (canvas.dataset.rendered === 'true') {
|
|
return;
|
|
}
|
|
|
|
const type = canvas.getAttribute('data-wms-chart');
|
|
const labels = parseJsonAttribute(canvas, 'data-labels');
|
|
const series = parseJsonAttribute(canvas, 'data-series');
|
|
const values = parseJsonAttribute(canvas, 'data-values');
|
|
|
|
const datasets = series.length
|
|
? series.map((item, index) => ({
|
|
label: item.label,
|
|
data: item.data,
|
|
backgroundColor: chartColours[index % chartColours.length],
|
|
borderColor: chartColours[index % chartColours.length],
|
|
borderWidth: 2,
|
|
borderRadius: 8,
|
|
}))
|
|
: [{
|
|
label: 'Total',
|
|
data: values,
|
|
backgroundColor: chartColours,
|
|
borderColor: 'rgb(255, 255, 255)',
|
|
borderWidth: 2,
|
|
}];
|
|
|
|
new Chart(canvas, {
|
|
type,
|
|
data: {
|
|
labels,
|
|
datasets,
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: document.documentElement.classList.contains('dark') ? '#e4e4e7' : '#3f3f46',
|
|
boxWidth: 12,
|
|
boxHeight: 12,
|
|
},
|
|
},
|
|
},
|
|
scales: type === 'doughnut'
|
|
? {}
|
|
: {
|
|
x: {
|
|
ticks: {
|
|
color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
|
|
},
|
|
grid: {
|
|
color: 'rgba(113, 113, 122, 0.18)',
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
precision: 0,
|
|
color: document.documentElement.classList.contains('dark') ? '#d4d4d8' : '#52525b',
|
|
},
|
|
grid: {
|
|
color: 'rgba(113, 113, 122, 0.18)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
canvas.dataset.rendered = 'true';
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', renderWmsCharts);
|
|
document.addEventListener('livewire:navigated', renderWmsCharts);
|