51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
function renderChart(points) {
|
|
const canvas = document.getElementById("consumption-chart");
|
|
|
|
const labels = points.map((p) => formatPeriod(p.period));
|
|
const data = points.map((p) => p.delta_m3);
|
|
|
|
const style = getComputedStyle(document.documentElement);
|
|
const accent = style.getPropertyValue('--color-chart').trim();
|
|
|
|
let chart = new Chart(canvas, {
|
|
type: "bar",
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
label: "Consommation (m³)",
|
|
data,
|
|
backgroundColor: accent + 'cc',
|
|
borderColor: accent,
|
|
borderWidth: '1px'
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: {
|
|
color: style.getPropertyValue("--color-text-muted").trim()
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: style.getPropertyValue("--color-border").trim() },
|
|
ticks: {
|
|
color: style.getPropertyValue("--color-text-muted").trim(),
|
|
callback: (v) => v.toFixed(2)
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
return chart;
|
|
}
|
|
|
|
function formatPeriod(isoString) {
|
|
const date = new Date(isoString);
|
|
return date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" });
|
|
}
|