feat: add key values on front

server/frontend/public/assets/js/main.js

@@ -28,4 +28,25 @@ async function loadData() {
     chart.destroy();
   }
   chart = renderChart(points);
+  updateKPIs(points);
+}
+
+function updateKPIs(points) {
+  const totalDisplay = document.getElementById("kpi-total");
+  const avgDisplay = document.getElementById("kpi-avg");
+  const countDisplay = document.getElementById("kpi-count");
+
+  if (!points || points.length === 0) {
+    total.textContent = "-";
+    avg.textContent = "-";
+    count.textContent = "-";
+    return;
+  }
+
+  const totalValue = points.reduce((acc, p) => acc + p.delta_m3, 0);
+  const avgValue = totalValue / points.length;
+
+  totalDisplay.textContent = totalValue.toFixed(3);
+  avgDisplay.textContent = avgValue.toFixed(3);
+  countDisplay.textContent = points.length;
 }

server/frontend/public/index.html

@@ -32,6 +32,31 @@
         </fieldset>
         <button class="btn-primary" id="btn-refresh">Actualiser</button>
       </section>
+
+      <section class="kpis">
+        <dl>
+          <dt>Consommation totale</dt>
+          <dd>
+            <span id="kpi-total">-</span>
+            <span>m³</span>
+          </dd>
+        </dl>
+        <dl>
+          <dt>Moyenne par période</dt>
+          <dd>
+            <span id="kpi-avg">-</span>
+            <span>m³</span>
+          </dd>
+        </dl>
+        <dl>
+          <dt>Relevés</dt>
+          <dd>
+            <span id="kpi-count">-</span>
+            <span>points</span>
+          </dd>
+        </dl>
+      </section>
+
       <section class="chart-section">
         <div>
           <canvas id="consumption-chart"></canvas>