91 lines
1.8 KiB
JavaScript
91 lines
1.8 KiB
JavaScript
import Chart from 'chart.js/auto';
|
|
import { initializeDropdown } from '@utilities/dropdownUtils';
|
|
|
|
initializeDropdown({
|
|
triggerElementId: 'timeperiods-trigger',
|
|
dropdownContentId: 'timeperiods-dropdown',
|
|
});
|
|
|
|
// Color sets depending on graph trend
|
|
const positiveTrend = {
|
|
backgroundColor: '#ECFDF5',
|
|
borderColor: '#10B981',
|
|
};
|
|
const negativeTrend = {
|
|
backgroundColor: '#FEF2F2',
|
|
borderColor: '#DC2626',
|
|
};
|
|
|
|
const charts = document.getElementsByClassName('js-chart');
|
|
|
|
for (const chart of charts) {
|
|
const labels = chart.dataset.days.split(',');
|
|
const data = chart.dataset.values.split(',');
|
|
|
|
const trend =
|
|
parseInt(data[data.length - 1], 10) >= parseInt(data[0], 10)
|
|
? positiveTrend
|
|
: negativeTrend;
|
|
|
|
new Chart(chart, {
|
|
type: 'line',
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
data,
|
|
fill: true,
|
|
tension: 0.5,
|
|
borderWidth: 2,
|
|
...trend,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
elements: {
|
|
point: {
|
|
radius: 3,
|
|
hitRadius: 20,
|
|
hoverBorderWidth: 4,
|
|
},
|
|
},
|
|
layout: {
|
|
padding: 0,
|
|
},
|
|
plugins: {
|
|
legend: false,
|
|
tooltip: {
|
|
mode: 'nearest',
|
|
intersect: true,
|
|
position: 'nearest',
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
},
|
|
},
|
|
y: {
|
|
ticks: {
|
|
display: false,
|
|
},
|
|
beginAtZero: true,
|
|
grid: {
|
|
display: false,
|
|
drawBorder: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|