diff --git a/server/frontend/public/assets/js/chart.js b/server/frontend/public/assets/js/chart.js index 80aa9d0..8c5ada5 100644 --- a/server/frontend/public/assets/js/chart.js +++ b/server/frontend/public/assets/js/chart.js @@ -4,7 +4,7 @@ function renderChart(points) { const labels = points.map(p => formatPeriod(p.period)); const data = points.map(p => p.delta_m3); - new Chart(canvas, { + let chart = new Chart(canvas, { type: "bar", data: { labels, @@ -24,6 +24,8 @@ function renderChart(points) { }, }, }); + + return chart; } function formatPeriod(isoString) { diff --git a/server/frontend/public/assets/js/main.js b/server/frontend/public/assets/js/main.js index 65a0475..92247f6 100644 --- a/server/frontend/public/assets/js/main.js +++ b/server/frontend/public/assets/js/main.js @@ -1,10 +1,31 @@ -window.onload = loadData +let chart = null; +window.onload = init; + +async function init() { + let start = new Date(); + start.setDate(start.getDate() - 7); + const end = new Date(); + + document.getElementById("date-start").valueAsDate = start; + document.getElementById("date-end").valueAsDate = end; + document.getElementById("btn-refresh").addEventListener("click", loadData); + + loadData(); +} async function loadData() { - const points = await fetchConsumption({ - start: '2026-05-04T00:00:00', - end: '2026-05-09T00:00:00', - granularity: 'day', - }); - renderChart(points); -} \ No newline at end of file + const start = document.getElementById("date-start").value; + const end = document.getElementById("date-end").value; + const granularity = document.getElementById("granularity").value; + + const points = await fetchConsumption({ + start: start, + end: end, + granularity: granularity, + }); + + if (chart) { + chart.destroy(); + } + chart = renderChart(points); +} diff --git a/server/frontend/public/index.html b/server/frontend/public/index.html index 482124a..35f3f3a 100644 --- a/server/frontend/public/index.html +++ b/server/frontend/public/index.html @@ -9,6 +9,29 @@
+
+
+ Période +
+ + +
+
+ + +
+
+ + +
+
+ +