From 359d69c3e9beeac935a4c7d2677f70b2b97538e6 Mon Sep 17 00:00:00 2001
From: ngxstat-bot <bot@ngxstat.local>
Date: Tue, 19 Aug 2025 00:48:32 -0500
Subject: [PATCH] Recent: place Cache Status and HTTP Statuses side-by-side in
 a single row\n\n- Add a Bulma columns row in Recent section\n- Route the two
 key distribution charts into two half-width columns\n- Leave other global
 reports stacked below as before

---
 templates/index.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index 41307d7..a5de3db 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -91,6 +91,8 @@
         <p>Last generated: <span id="stat-generated">-</span></p>
         <p>Generation time: <span id="stat-elapsed">-</span> seconds</p>
       </div>
+      <!-- Two key distributions side-by-side on Recent -->
+      <div id="recent-row" class="columns"></div>
       <div id="overview-reports"></div>
     </div>
 
@@ -157,6 +159,7 @@
       trends: document.getElementById('reports-trends'),
       breakdown: document.getElementById('reports-breakdown')
     };
+    const recentRow = document.getElementById('recent-row');
     const analysisElems = {
       missing: document.getElementById('analysis-missing'),
       cache: document.getElementById('analysis-cache'),
@@ -453,6 +456,11 @@
         path = currentDomain ? ('domains/' + encodeURIComponent(currentDomain) + '/' + currentInterval) : currentInterval;
       }
 
+      // Clear the top row on each load of Recent
+      if (currentTab === 'recent' && recentRow) {
+        recentRow.innerHTML = '';
+      }
+
       const token = newLoad(container);
 
       fetch(path + '/reports.json', { signal: token.controller.signal })
@@ -480,7 +488,15 @@
               .then(r => r.text())
               .then(html => {
                 if (token !== currentLoad) return;
-                container.insertAdjacentHTML('beforeend', html);
+                // On Recent tab, render Cache Status and HTTP Statuses side-by-side
+                const inTopRow = currentTab === 'recent' &&
+                  (rep.name === 'cache_status_breakdown' || rep.name === 'status_distribution');
+                if (inTopRow && recentRow) {
+                  const wrapped = `<div class="column is-half">${html}</div>`;
+                  recentRow.insertAdjacentHTML('beforeend', wrapped);
+                } else {
+                  container.insertAdjacentHTML('beforeend', html);
+                }
                 initReport(token, rep, path);
               });
           });