59 lines
No EOL
1.6 KiB
JavaScript
59 lines
No EOL
1.6 KiB
JavaScript
function renderChart(points, granularity) {
|
|
const canvas = document.getElementById("consumption-chart");
|
|
|
|
const labels = points.map((p) => formatPeriod(p.period, granularity));
|
|
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;
|
|
}
|
|
|
|
const PERIOD_FORMATS = {
|
|
hour: { hour: "2-digit", minute: "2-digit", day: "2-digit", month: "short" },
|
|
day: { day: "2-digit", month: "short" },
|
|
week: { day: "2-digit", month: "short" },
|
|
month: { month: "short", year: "numeric" },
|
|
};
|
|
|
|
function formatPeriod(isoString, granularity) {
|
|
const date = new Date(isoString);
|
|
const opts = PERIOD_FORMATS[granularity] ?? PERIOD_FORMATS.day;
|
|
return date.toLocaleDateString("fr-FR", opts);
|
|
} |