From ea78581eea94caaca03e62cdf7e3500f8031c0ff Mon Sep 17 00:00:00 2001
From: Kpa-clawbot <kpaclawbot@outlook.com>
Date: Tue, 21 Apr 2026 09:53:01 -0700
Subject: [PATCH] =?UTF-8?q?fix(#858):=20packets/hour=20chart=20=E2=80=94?=
 =?UTF-8?q?=20bars=20rendering=20+=20x-axis=20label=20decimation=20(#865)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs in the Overview tab Packets/Hour chart:

1. **Bars not rendering**: `barW` went negative when `data.length` was
large (e.g. 720 hours for 30-day range), producing zero-width invisible
bars. Fix: `Math.max(1, ...)` floor on bar width.

2. **X-axis labels overlapping**: Every single hour label was emitted
(`02h03h04h...`). Fix: decimate labels based on time range — every 6h
for ≤24h, every 12h for ≤72h, every 24h beyond. Shows `MM-DD` on
midnight boundaries for multi-day ranges.

**Scope**: Only touches the Overview tab `Packets / Hour` section and
the shared `barChart` floor (one-line change). No modifications to
Topology, Channels, Distance, or other tabs.

Fixes #858

Co-authored-by: you <you@example.com>
---
 public/analytics.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/analytics.js b/public/analytics.js
index e0bac65..36fe90c 100644
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -28,7 +28,7 @@
 
   function barChart(data, labels, colors, w = 800, h = 220, pad = 40) {
     const max = Math.max(...data, 1);
-    const barW = Math.min((w - pad * 2) / data.length - 2, 30);
+    const barW = Math.max(1, Math.min((w - pad * 2) / data.length - 2, 30));
     let svg = `<svg viewBox="0 0 ${w} ${h}" style="width:100%;max-height:${h}px" role="img" aria-label="Bar chart showing data distribution"><title>Bar chart showing data distribution</title>`;
     // Grid
     for (let i = 0; i <= 4; i++) {
@@ -263,7 +263,25 @@
       <div class="analytics-row">
         <div class="analytics-card flex-1">
           <h3>📈 Packets / Hour</h3>
-          ${barChart(rf.packetsPerHour.map(h=>h.count), rf.packetsPerHour.map(h=>h.hour.slice(11)+'h'), 'var(--accent)')}
+          ${(() => {
+            const pph = rf.packetsPerHour;
+            const counts = pph.map(h => h.count);
+            // Decimate x-axis labels to avoid overlap
+            const totalHours = pph.length;
+            // Pick label interval: <=24h show every 6h, <=72h every 12h, else every 24h
+            const labelInterval = totalHours <= 24 ? 6 : totalHours <= 72 ? 12 : 24;
+            const labels = pph.map((h, i) => {
+              const hh = h.hour.slice(11, 13); // "HH"
+              const hourNum = parseInt(hh, 10);
+              if (hourNum % labelInterval === 0) {
+                // For multi-day ranges, show date on 00h boundaries
+                if (totalHours > 48 && hourNum === 0) return h.hour.slice(5, 10);
+                return hh + 'h';
+              }
+              return ''; // skip label
+            });
+            return barChart(counts, labels, 'var(--accent)');
+          })()}
         </div>
       </div>