From f6e6efe7477f3db3f377b85d6662b19bbed7b7bc Mon Sep 17 00:00:00 2001
From: fraxle <fraxle@yahoo.co.uk>
Date: Fri, 12 Jun 2026 18:06:20 +0100
Subject: [PATCH] 2.9.9.1

Percentage bars on panel
---
 assets/css/ui.css  | 18 +++++++++++++++++
 assets/js/app.js   | 48 ++++++++++++++++++++++++++++------------------
 data/tracking.json |  2 +-
 3 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/assets/css/ui.css b/assets/css/ui.css
index ff3902e..1501fee 100644
--- a/assets/css/ui.css
+++ b/assets/css/ui.css
@@ -1569,8 +1569,26 @@
   flex: 1;
   color: #4a3420;
   font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
+.insight-bar-track {
+  height: 4px;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.insight-bar {
+  display: block;
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.35s ease;
+}
+.bar-pos { background: #c8522a; }
+.bar-neg { background: #3a78a8; }
+
 /* Delta values for "Why it feels like this" */
 .insight-delta {
   font-family: JetBrains Mono, monospace;
diff --git a/assets/js/app.js b/assets/js/app.js
index e6a42e4..2b8e6e3 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -587,25 +587,35 @@ export function UTCIForecast() {
                   Why It Feels
                   ${currentCat && html`<span class="insight-thermal-cat" style=${{ background: currentCat.bg, color: currentCat.fg }}>${currentCat.label}</span>`}
                 </div>
-                ${[
-                  { label: 'Sun and sky',    icon: '☀',  value: whyFeelsLike.sunAndSky },
-                  { label: 'Wind',           icon: '🌬',  value: whyFeelsLike.wind },
-                  { label: 'Humidity',       icon: '💧',  value: whyFeelsLike.humidity },
-                  ...(whyFeelsLike.environment !== 0 ? [
-                    { label: UTCI_ENVIRONMENTS[utciEnv]?.label ?? 'Environment', icon: '🌍', value: whyFeelsLike.environment }
-                  ] : []),
-                  ...(whyFeelsLike.precipitation !== 0 ? [
-                    { label: 'Precipitation', icon: '🌧', value: whyFeelsLike.precipitation }
-                  ] : []),
-                ].map(({ label, icon, value }) => html`
-                  <div class="insight-row" key=${label}>
-                    <span class="insight-icon">${icon}</span>
-                    <span class="insight-label">${label}</span>
-                    <span class=${`insight-delta ${value >= 0 ? 'delta-pos' : 'delta-neg'}`}>
-                      ${value >= 0 ? '+' : ''}${value.toFixed(1)}°
-                    </span>
-                  </div>
-                `)}
+                ${(() => {
+                  const _wflItems = [
+                    { label: 'Sun and sky',    icon: '☀',  value: whyFeelsLike.sunAndSky },
+                    { label: 'Wind',           icon: '🌬',  value: whyFeelsLike.wind },
+                    { label: 'Humidity',       icon: '💧',  value: whyFeelsLike.humidity },
+                    ...(whyFeelsLike.environment !== 0 ? [
+                      { label: UTCI_ENVIRONMENTS[utciEnv]?.label ?? 'Environment', icon: '🌍', value: whyFeelsLike.environment }
+                    ] : []),
+                    ...(whyFeelsLike.precipitation !== 0 ? [
+                      { label: 'Precipitation', icon: '🌧', value: whyFeelsLike.precipitation }
+                    ] : []),
+                  ];
+                  const _wflMax = Math.max(..._wflItems.map(i => Math.abs(i.value)), 0.1);
+                  return _wflItems.map(({ label, icon, value }) => html`
+                    <div class="insight-row" key=${label}>
+                      <span class="insight-icon">${icon}</span>
+                      <span class="insight-label">
+                        ${label}
+                        <span class="insight-bar-track">
+                          <span class=${'insight-bar ' + (value >= 0 ? 'bar-pos' : 'bar-neg')}
+                                style=${{ width: `${Math.round(Math.abs(value) / _wflMax * 100)}%` }}></span>
+                        </span>
+                      </span>
+                      <span class=${`insight-delta ${value >= 0 ? 'delta-pos' : 'delta-neg'}`}>
+                        ${value >= 0 ? '+' : ''}${value.toFixed(1)}°
+                      </span>
+                    </div>
+                  `);
+                })()}
               </div>`}
           </div>
 		</div>
diff --git a/data/tracking.json b/data/tracking.json
index f3e0154..61ecea5 100644
--- a/data/tracking.json
+++ b/data/tracking.json
@@ -30,7 +30,7 @@
         }
     },
     "2026-06-12": {
-        "visits": 23,
+        "visits": 27,
         "profiles": {
             "showall": 3,
             "basic": 2,