2.9.9.1

Percentage bars on panel

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;

assets/js/app.js

@@ -587,7 +587,8 @@ export function UTCIForecast() {
                   Why It Feels
                   ${currentCat && html`<span class="insight-thermal-cat" style=${{ background: currentCat.bg, color: currentCat.fg }}>${currentCat.label}</span>`}
                 </div>
-                ${[
+                ${(() => {
+                  const _wflItems = [
                     { label: 'Sun and sky',    icon: '☀',  value: whyFeelsLike.sunAndSky },
                     { label: 'Wind',           icon: '🌬',  value: whyFeelsLike.wind },
                     { label: 'Humidity',       icon: '💧',  value: whyFeelsLike.humidity },
@@ -597,15 +598,24 @@ export function UTCIForecast() {
                     ...(whyFeelsLike.precipitation !== 0 ? [
                       { label: 'Precipitation', icon: '🌧', value: whyFeelsLike.precipitation }
                     ] : []),
-                ].map(({ label, icon, value }) => html`
+                  ];
+                  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>
+                      <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>

data/tracking.json

@@ -30,7 +30,7 @@
         }
     },
     "2026-06-12": {
-        "visits": 23,
+        "visits": 27,
         "profiles": {
             "showall": 3,
             "basic": 2,