feat: add parameter choice for chart data

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) {

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);
-}
+  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);
+}