afourmaux-agreg/agreg-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: adapt chart period label according to granularity

Browse source
This commit is contained in:
Alexis Fourmaux 2026-05-12 19:51:50 +02:00
parent 28f49b5209
commit 0cb5706ed7
2 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
server/frontend/public/assets/js/chart.js
View file

@ -1,7 +1,7 @@
function renderChart(points) { function renderChart(points, granularity) {
const canvas = document.getElementById("consumption-chart"); const canvas = document.getElementById("consumption-chart");
const labels = points.map((p) => formatPeriod(p.period)); const labels = points.map((p) => formatPeriod(p.period, granularity));
const data = points.map((p) => p.delta_m3); const data = points.map((p) => p.delta_m3);
const style = getComputedStyle(document.documentElement); const style = getComputedStyle(document.documentElement);
@ -45,7 +45,15 @@ function renderChart(points) {
return chart; return chart;
} }
function formatPeriod(isoString) { 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 date = new Date(isoString);
return date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" }); const opts = PERIOD_FORMATS[granularity] ?? PERIOD_FORMATS.day;
} return date.toLocaleDateString("fr-FR", opts);
}

2
server/frontend/public/assets/js/main.js
View file

@ -27,7 +27,7 @@ async function loadData() {
if (chart) { if (chart) {
chart.destroy(); chart.destroy();
} }
chart = renderChart(points); chart = renderChart(points, granularity);
updateKPIs(points); updateKPIs(points);
} }