From e85c1dcbf642ef05d9687ea00f9730d0637f705e Mon Sep 17 00:00:00 2001
From: "Brennan Wilkes (Text Groove)" <brennan@textgroove.com>
Date: Mon, 2 Feb 2026 20:21:15 -0800
Subject: [PATCH] UX Improvements

---
 viz/app/stats_page.js | 61 +++++++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/viz/app/stats_page.js b/viz/app/stats_page.js
index 84ee985..a839329 100644
--- a/viz/app/stats_page.js
+++ b/viz/app/stats_page.js
@@ -309,40 +309,51 @@ export async function renderStats($app) {
   const pref = loadPrefs();
 
   $app.innerHTML = `
-    <div class="headerRow1">
-        <div class="statsHeaderLeft">
-        <button id="back" class="btn">← Back</button>
+    <div class="container">
+        <div class="header">
+        <div class="headerRow1">
+            <div class="statsHeaderLeft">
+            <button id="back" class="btn">← Back</button>
 
-        <div class="statsTitleStack">
-            <h1 class="h1">Store Price Index</h1>
-            <div class="small" id="statsStatus">Loading…</div>
+            <div class="statsTitleStack">
+                <h1 class="h1">Store Price Index</h1>
+                <div class="small" id="statsStatus">Loading…</div>
+            </div>
+            </div>
+
+            <div class="headerRight">
+            <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;">
+                <label class="small" style="display:flex; gap:8px; align-items:center;">
+                Stores
+                <select id="statsGroup" class="selectSmall" aria-label="Store group">
+                    <option value="all">All Stores</option>
+                    <option value="bc">BC Only</option>
+                    <option value="ab">Alberta Only</option>
+                </select>
+                </label>
+
+                <label class="small" style="display:flex; gap:8px; align-items:center;">
+                Index Size
+                <select id="statsSize" class="selectSmall" aria-label="Index size">
+                    <option value="50">50</option>
+                    <option value="250">250</option>
+                    <option value="1000">1000</option>
+                </select>
+                </label>
+            </div>
+            </div>
         </div>
         </div>
 
-        <div class="headerRight">
-        <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;">
-            <label class="small" style="display:flex; gap:8px; align-items:center;">
-            Stores
-            <select id="statsGroup" class="selectSmall" aria-label="Store group">
-                <option value="all">All Stores</option>
-                <option value="bc">BC Only</option>
-                <option value="ab">Alberta Only</option>
-            </select>
-            </label>
-
-            <label class="small" style="display:flex; gap:8px; align-items:center;">
-            Index Size
-            <select id="statsSize" class="selectSmall" aria-label="Index size">
-                <option value="50">50</option>
-                <option value="250">250</option>
-                <option value="1000">1000</option>
-            </select>
-            </label>
+        <div class="card">
+        <div style="height:420px;">
+            <canvas id="statsChart" aria-label="Statistics chart" role="img"></canvas>
         </div>
         </div>
     </div>
     `;
 
+
   
   const $status = document.getElementById("statsStatus");
   const $group = document.getElementById("statsGroup");