From 56619b524d0a8f8ec15781a578fec701c3078f83 Mon Sep 17 00:00:00 2001
From: Alexis Fourmaux <fourmaux.alexis.perso@ungol.fr>
Date: Tue, 12 May 2026 17:15:42 +0200
Subject: [PATCH] feat: add key values on front

---
 server/frontend/public/assets/js/main.js | 21 ++++++++++++++++++++
 server/frontend/public/index.html        | 25 ++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/server/frontend/public/assets/js/main.js b/server/frontend/public/assets/js/main.js
index 92247f6..24e9537 100644
--- a/server/frontend/public/assets/js/main.js
+++ b/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;
 }
diff --git a/server/frontend/public/index.html b/server/frontend/public/index.html
index 35f3f3a..e8fb122 100644
--- a/server/frontend/public/index.html
+++ b/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>