From 435e1bda42e626a0e88582f5491a870a9148bf6c Mon Sep 17 00:00:00 2001
From: Carsten Rehfeld <carsten.rehfeld@innoit.de>
Date: Sun, 17 May 2026 01:20:15 +0200
Subject: [PATCH] =?UTF-8?q?fix(admin):=20smooth=20live=20rate=20label=20?=
 =?UTF-8?q?=E2=80=94=20window-accumulated=20rate,=20not=20instantaneous?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With 1 s polls and batch traffic, delta * 60 flickers between 0 and 300.
Fix: live label shows accDelta / elapsed_in_window * 60000 — the rate
builds up continuously within each 5 s bucket. First 200 ms after flush
carries the previous window rate to avoid a zero jump.

Co-Authored-By: Mira Rehfeld <noreply@anthropic.com>
---
 .../main/resources/META-INF/resources/admin.js   | 16 +++++++++++++---
 .../templates/DashboardResource/global.html      |  2 +-
 .../templates/DashboardResource/sandbox.html     |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apix-admin/src/main/resources/META-INF/resources/admin.js b/apix-admin/src/main/resources/META-INF/resources/admin.js
index 3ba56ec..4f98f0c 100644
--- a/apix-admin/src/main/resources/META-INF/resources/admin.js
+++ b/apix-admin/src/main/resources/META-INF/resources/admin.js
@@ -150,6 +150,8 @@
   var accDelta     = 0;          // accumulated since last chart flush
   var lastActivity = Date.now(); // time of last non-zero delta
   var currentInterval = FAST_INTERVAL;
+  var lastFlushTime = Date.now();
+  var lastWindowRpm = 0;         // rate from previous flush window
 
   var ML = 36, MB = 18;
   var W  = el.parentElement.clientWidth || 900;
@@ -207,7 +209,11 @@
   // Chart bucket: flush accumulated delta every 5 s regardless of poll rate
   // Cap at rateLimit so the area never visually exceeds 100% (live label shows true value)
   setInterval(function () {
-    var rpm = Math.min(Math.round(accDelta * (60000 / CHART_TICK)), rateLimit);
+    var now = Date.now();
+    var elapsed = now - lastFlushTime;
+    var rpm = Math.min(Math.round(accDelta * (60000 / (elapsed || CHART_TICK))), rateLimit);
+    lastWindowRpm = rpm;
+    lastFlushTime = now;
     buf.push(rpm); buf.shift();
     path.attr('d', areaFn(buf));
     accDelta = 0;
@@ -223,8 +229,12 @@
         var delta = Math.max(0, total - lastTotal);
         accDelta += delta;
         if (delta > 0) lastActivity = Date.now();
-        var rpm = elapsed > 0 ? Math.round(delta * (60000 / elapsed)) : 0;
-        updateLabel(rpm);
+        // Use accumulated rate over current window — smooth, not instantaneous per-poll delta
+        var windowMs = Date.now() - lastFlushTime;
+        var liveRpm = windowMs > 200
+          ? Math.round(accDelta * (60000 / windowMs))
+          : lastWindowRpm; // too early in window — carry previous
+        updateLabel(liveRpm);
       }
       lastTotal = total;
       currentInterval = (Date.now() - lastActivity > IDLE_AFTER_MS) ? IDLE_INTERVAL : FAST_INTERVAL;
diff --git a/apix-admin/src/main/resources/templates/DashboardResource/global.html b/apix-admin/src/main/resources/templates/DashboardResource/global.html
index 85e9c7c..a475bfe 100644
--- a/apix-admin/src/main/resources/templates/DashboardResource/global.html
+++ b/apix-admin/src/main/resources/templates/DashboardResource/global.html
@@ -106,6 +106,6 @@ nav {
 <script>var __D = {statsJson.raw};</script>
 <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
-<script src="/admin.js?v=7"></script>
+<script src="/admin.js?v=8"></script>
 </body>
 </html>
diff --git a/apix-admin/src/main/resources/templates/DashboardResource/sandbox.html b/apix-admin/src/main/resources/templates/DashboardResource/sandbox.html
index 2030b16..312db76 100644
--- a/apix-admin/src/main/resources/templates/DashboardResource/sandbox.html
+++ b/apix-admin/src/main/resources/templates/DashboardResource/sandbox.html
@@ -151,6 +151,6 @@ button.promote:hover { background: #2ea043; }
 <script>var __D = {dataJson.raw};</script>
 <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
-<script src="/admin.js?v=7"></script>
+<script src="/admin.js?v=8"></script>
 </body>
 </html>