136 lines
4.1 KiB
JavaScript
Executable File
136 lines
4.1 KiB
JavaScript
Executable File
(function () {
|
|
'use strict';
|
|
|
|
function cssVar(name, fallback) {
|
|
let value = getComputedStyle(document.documentElement).getPropertyValue(name);
|
|
return value && value.trim() !== '' ? value.trim() : fallback;
|
|
}
|
|
|
|
function palette() {
|
|
return [
|
|
cssVar('--wms-chart-primary', '#0f766e'),
|
|
cssVar('--wms-chart-secondary', '#2563eb'),
|
|
cssVar('--wms-chart-accent', '#f59e0b'),
|
|
cssVar('--wms-chart-danger', '#dc2626'),
|
|
cssVar('--wms-chart-muted', '#64748b'),
|
|
cssVar('--wms-chart-purple', '#7c3aed')
|
|
];
|
|
}
|
|
|
|
function enrichDataset(dataset, index, type) {
|
|
let colours = palette();
|
|
let colour = colours[index % colours.length];
|
|
|
|
if (type === 'doughnut' || type === 'pie') {
|
|
dataset.backgroundColor = colours;
|
|
dataset.borderColor = '#ffffff';
|
|
dataset.borderWidth = dataset.borderWidth || 2;
|
|
return dataset;
|
|
}
|
|
|
|
dataset.borderColor = colour;
|
|
dataset.backgroundColor = type === 'line' ? 'rgba(15, 118, 110, 0.14)' : colour;
|
|
dataset.pointBackgroundColor = colour;
|
|
dataset.pointBorderColor = '#ffffff';
|
|
dataset.pointHoverRadius = 6;
|
|
dataset.borderWidth = 2;
|
|
|
|
return dataset;
|
|
}
|
|
|
|
function optionsFor(type) {
|
|
let textColour = cssVar('--wms-chart-text', '#334155');
|
|
let gridColour = cssVar('--wms-chart-grid', 'rgba(148, 163, 184, 0.25)');
|
|
|
|
let options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
position: type === 'doughnut' || type === 'pie' ? 'bottom' : 'top',
|
|
labels: {
|
|
color: textColour,
|
|
boxWidth: 12,
|
|
usePointStyle: true,
|
|
padding: 18
|
|
}
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(15, 23, 42, 0.94)',
|
|
padding: 12,
|
|
titleColor: '#ffffff',
|
|
bodyColor: '#ffffff',
|
|
cornerRadius: 10
|
|
}
|
|
}
|
|
};
|
|
|
|
if (type !== 'doughnut' && type !== 'pie') {
|
|
options.scales = {
|
|
x: {
|
|
ticks: {
|
|
color: textColour
|
|
},
|
|
grid: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
color: textColour,
|
|
precision: 0
|
|
},
|
|
grid: {
|
|
color: gridColour
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
if (type === 'doughnut') {
|
|
options.cutout = '68%';
|
|
}
|
|
|
|
return options;
|
|
}
|
|
|
|
function normaliseConfig(rawConfig, type) {
|
|
let config = rawConfig || {};
|
|
config.labels = config.labels || [];
|
|
config.datasets = (config.datasets || []).map(function (dataset, index) {
|
|
return enrichDataset(dataset, index, type);
|
|
});
|
|
|
|
return config;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
if (typeof Chart === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
document.querySelectorAll('[data-wms-chart]').forEach(function (canvas) {
|
|
let type = canvas.dataset.chartType || 'line';
|
|
let raw = canvas.dataset.chartConfig || '{}';
|
|
let config = {};
|
|
|
|
try {
|
|
config = JSON.parse(raw);
|
|
} catch (error) {
|
|
config = { labels: [], datasets: [] };
|
|
}
|
|
|
|
canvas.wmsChart = new Chart(canvas, {
|
|
type: type,
|
|
data: normaliseConfig(config, type),
|
|
options: optionsFor(type)
|
|
});
|
|
});
|
|
});
|
|
}());
|