From f895bcf0cfc984d078772fa1abc024a918c43443 Mon Sep 17 00:00:00 2001
From: Carsten Rehfeld <carsten.rehfeld@innoit.de>
Date: Sun, 17 May 2026 01:45:08 +0200
Subject: [PATCH] feat(admin): 1 s chart buckets + smooth D3 transition
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bucket size: 1 s (was 5 s) → chart scrolls every second, feels live
- Window: 72 s visible, x-axis labels -72s / -36s / now
- D3 transition(900ms, easeLinear) on path redraw → continuous motion
- Sliding-window rate calculation unchanged (still 5 s window for rpm)

Co-Authored-By: Mira Rehfeld <noreply@anthropic.com>
---
 .../main/resources/META-INF/resources/admin.js    | 15 ++++++++-------
 .../templates/DashboardResource/global.html       |  2 +-
 .../templates/DashboardResource/sandbox.html      |  2 +-
 3 files changed, 10 insertions(+), 9 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 1cb0f27..0234481 100644
--- a/apix-admin/src/main/resources/META-INF/resources/admin.js
+++ b/apix-admin/src/main/resources/META-INF/resources/admin.js
@@ -139,8 +139,8 @@
   var FAST_INTERVAL = 1000;
   var IDLE_INTERVAL = 5000;
   var IDLE_AFTER_MS = 15000; // 15 s inactivity → idle
-  var CHART_TICK    = 5000;  // chart bucket always 5 s so x-axis labels stay correct
-  var BUCKETS       = 72;    // 6 min at 5 s/bucket
+  var CHART_TICK    = 5000;  // sliding-window size for rate calculation
+  var BUCKETS       = 72;    // 72 s visible (1 s/bucket)
 
   var rateLimit = __D.ratePerMinute || 1;
   var sid       = __D.sandboxId;
@@ -177,7 +177,7 @@
 
   svg.append('line').attr('x1', ML).attr('x2', W).attr('y1', CH).attr('y2', CH).attr('class', 'axis-line');
 
-  [{bucket: 0, label: '-6m', anchor: 'start'}, {bucket: BUCKETS / 2, label: '-3m', anchor: 'middle'}, {bucket: BUCKETS - 1, label: 'now', anchor: 'end'}]
+  [{bucket: 0, label: '-72s', anchor: 'start'}, {bucket: BUCKETS / 2, label: '-36s', anchor: 'middle'}, {bucket: BUCKETS - 1, label: 'now', anchor: 'end'}]
     .forEach(function (t) {
       svg.append('text').attr('x', xS(t.bucket)).attr('y', H - 4).attr('text-anchor', t.anchor).attr('class', 'axis-label').text(t.label);
     });
@@ -214,16 +214,17 @@
     return Math.min(Math.round(sum * (60000 / CHART_TICK)), rateLimit);
   }
 
-  // Redraw: historical buf + live bucket at the right edge
+  // Redraw: historical buf + live bucket at right edge, with smooth transition
   function redraw() {
     var view = buf.slice(1).concat([liveRpm()]);
-    path.attr('d', areaFn(view));
+    path.transition().duration(900).ease(d3.easeLinear).attr('d', areaFn(view));
   }
 
-  // Every 5 s: snapshot the current sliding-window rate into the history buffer
+  // Every 1 s: snapshot the sliding-window rate into the history buffer
+  // Smaller buckets (1 s each, 72 s total) so the chart scrolls visibly every second
   setInterval(function () {
     buf.push(liveRpm()); buf.shift();
-  }, CHART_TICK);
+  }, 1000);
 
   async function poll() {
     try {
diff --git a/apix-admin/src/main/resources/templates/DashboardResource/global.html b/apix-admin/src/main/resources/templates/DashboardResource/global.html
index ce8e6d7..1d66d87 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=10"></script>
+<script src="/admin.js?v=11"></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 b025445..2b3e271 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=10"></script>
+<script src="/admin.js?v=11"></script>
 </body>
 </html>