2.5

Data table compact hours 1h, 2h, 3h or 4h. Calc max/min or average

assets/css/table.css

@@ -658,6 +658,39 @@
   background: #e8d8a8;
 }
 
+/* ── HOUR-INTERVAL SELECTOR ──────────────────────────────────────────────
+   Compact 1h/2h/3h/4h segmented control inside the "Hour" header. Buckets
+   the table into multi-hour rows (clock-aligned from midnight). Lives in the
+   header so it stays put while the body scrolls. */
+.hour-interval {
+  display: flex;
+  justify-content: flex-start;
+  gap: 2px;
+  margin-top: 4px;
+}
+.hour-interval-btn {
+  font-family: Manrope, sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 3px 4px;
+  cursor: pointer;
+  border: 1px solid #c9b08a;
+  background: #f5edd6;
+  color: #6b4228;
+  border-radius: 3px;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+.hour-interval-btn:hover {
+  border-color: #c8922a;
+  background: #fef3dc;
+}
+.hour-interval-btn.on {
+  background: #c8922a;
+  border-color: #c8922a;
+  color: #fff;
+}
+
 /* ── COLUMN DESCRIPTION POPUP ───────────────────────────────────────────
    Fixed-position card that appears below a clicked column header.
    JS sets left/top via inline style (centred on the clicked th). */

assets/js/app.js

@@ -56,6 +56,7 @@ export function UTCIForecast() {
     visibleCols, setVisibleCols, toggleCol,
 	showDecimals, toggleShowDecimals,
 	showUnits, toggleShowUnits,
+	tableInterval, setTableInterval,
     activityOptions, placeOptions, workOptions,
     activityValue, activityLabel, placeValue, placeLabel, workValue, workLabel,
     skinType, setSkinType,
@@ -79,7 +80,7 @@ export function UTCIForecast() {
     closePopup, closeEventTagPopup,
     tableCanScrollLeft, tableCanScrollRight, handleBodyScroll,
     hourlyRows, days, utcOffsetMs,
-    visible, nowLocalISO, currentRow, currentCat,
+    visible, tableRows, nowLocalISO, currentRow, currentCat,
     activeEvents, lensEvent, selectedDayEvents,
     bannerIndex, bannerTransition, bannerPrevIndex,
     bannerVisible, bannerStageRef,
@@ -690,7 +691,17 @@ export function UTCIForecast() {
                     <thead>
                       ${groupLabelRow()}
                       <tr>
-						<th class="col-info-th" scope="col" onClick=${(e) => handleThClick('hour', e)} onMouseEnter=${(e) => handleThEnter('hour', e)} onMouseLeave=${handleThLeave}>Hour</th>
+						<th class="col-info-th" scope="col" onClick=${(e) => handleThClick('hour', e)} onMouseEnter=${(e) => handleThEnter('hour', e)} onMouseLeave=${handleThLeave}>
+							<span>Hour</span>
+							<span class="hour-interval" onClick=${(e) => e.stopPropagation()}>
+								${[1, 2, 3, 4].map(n => html`
+									<button key=${n} type="button"
+										class=${`hour-interval-btn${tableInterval === n ? ' on' : ''}`}
+										title=${n === 1 ? 'Every hour' : `Every ${n} hours`}
+										onClick=${(e) => { e.stopPropagation(); setTableInterval(n); }}
+									>${n}h</button>`)}
+							</span>
+						</th>
 						${visibleCols.utciP   && html`<th class=${`col-info-th ${groupStart('utciP')} ${groupColor('utciP')}`} scope="col" onClick=${(e) => handleThClick('utciP', e)} onMouseEnter=${(e) => handleThEnter('utciP', e)} onMouseLeave=${handleThLeave}>SunSoak <span class="col-unit">°C felt</span>${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ? html`<span class="col-env-badge">${UTCI_ENVIRONMENTS[utciEnv].shortLabel}</span>` : null}</th>`}
 						${visibleCols.vehicleT  && html`<th class=${`col-info-th ${groupStart('vehicleT')} ${groupColor('vehicleT')}`} scope="col" onClick=${(e) => handleThClick('vehicleT', e)} onMouseEnter=${(e) => handleThEnter('vehicleT', e)} onMouseLeave=${handleThLeave}>Vehicle <span class="col-unit">°C peak</span></th>`}
 						${indoorMode === 'on' && !indoorManaged && html`<th class=${`col-info-th ${groupStart('indoorT')} ${groupColor('indoorT')}`} scope="col" onClick=${(e) => handleThClick('indoorT', e)} onMouseEnter=${(e) => handleThEnter('indoorT', e)} onMouseLeave=${handleThLeave}>Indoors <span class="col-unit">°C est.</span></th>`}
@@ -728,12 +739,12 @@ export function UTCIForecast() {
               <div class="utci-tbody-scroll" ref=${bodyScrollRef} onScroll=${handleBodyScroll}>
                 <table class="utci-table utci-table-body" ref=${bodyTableRef}>
                   <tbody>
-                  ${visible.map((r, rowIdx) => {
+                  ${tableRows.map((r, rowIdx) => {
-                    const rPrev = visible[rowIdx - 1];
+                    const rPrev = tableRows[rowIdx - 1];
-                    const rNext = visible[rowIdx + 1];
+                    const rNext = tableRows[rowIdx + 1];
                     const cat = utciCategory(r.utci);
                     const isNight = r.elev < 0;
-                    const isNow = r.iso.slice(0, 13) === nowLocalISO;
+                    const isNow = r.isoHours ? r.isoHours.includes(nowLocalISO) : r.iso.slice(0, 13) === nowLocalISO;
                     const delta = r.utci - r.Ta;
                     const adjCat = utciCategory(r.utciAdj);
                     // Converts a band hex colour to rgba at the given alpha — used to
@@ -932,7 +943,7 @@ export function UTCIForecast() {
 							  </span>
 							</td>`}
 							${visibleCols.aqi && (() => {
-							  const v = r.aqi;
+							  const v = r.aqi == null ? null : Math.round(r.aqi);
 							  const bg = v == null ? 'transparent'
 								: v < 20  ? 'rgba(80,180,100,0.15)'
 								: v < 40  ? 'rgba(140,200,100,0.13)'

assets/js/compute.js

@@ -231,6 +231,80 @@ export function buildHourlyRows({ forecast, airQuality, location, vehicleType, v
   return { hourlyRows, days, utcOffsetMs };
 }
 
+// ------------------------------------------------------------------------
+//  aggregateRows(rows, interval) - Compress a day's hourly rows into
+//  multi-hour buckets for the table view (1h / 2h / 3h / 4h).
+//
+//  Buckets are CLOCK-ALIGNED from midnight, so a 2h view groups 00-01,
+//  02-03, ...; 3h groups 00-02, 03-05, ...; etc. Each output row keeps the
+//  LANDING (first) hour's positional fields - iso, dt, solar elevation,
+//  global radiation, wind direction, sky/cloud category - so the little
+//  scope, clock label and wind vane all show the time the column lands on.
+//
+//  Every other column is aggregated with the rule that fits its meaning:
+//    - SUM  : precipitation totals (1mm/h x 3h = 3mm)
+//    - MAX  : risk/peak columns (rain %, UV, gusts, cabin/surface/indoor)
+//    - MEAN : smooth continuous quantities (air temp, RH, wind, cloud, ...)
+//    - FELT : worst-case felt temp - the warmest hour if it reaches >=20C
+//             (heat is the concern), otherwise the coldest (cold concern)
+//
+//  Derived render values (Delta, Burn) are recomputed downstream from the
+//  aggregated Air / UTCI / UV, so they stay consistent automatically.
+//
+//  interval <= 1 returns the input untouched (zero behaviour change).
+// ------------------------------------------------------------------------
+const AGG_MEAN = [
+  'Ta', 'RH', 'dew', 'va', 'dir', 'dif', 'cc', 'ccLow', 'ccMid', 'ccHigh',
+  'soilT0', 'soilT6', 'soilM', 'Tmrt', 'eh', 'visKm', 'aqi', 'effectiveRad',
+  'grassPollen', 'birchPollen', 'alderPollen', 'mugwortPollen', 'olivePollen', 'ragweedPollen',
+];
+const AGG_MAX = [
+  'precipProb', 'uv', 'uvA', 'uvB', 'gust',
+  'vehicleT', 'concreteT', 'indoorT', 'managedT',
+];
+const AGG_SUM  = ['precip', 'snow'];
+const AGG_FELT = ['utci', 'utciAdj'];
+
+export function aggregateRows(rows, interval) {
+  if (!rows || rows.length === 0 || !interval || interval <= 1) return rows;
+
+  // Numbers for a field across the group, skipping null / NaN.
+  const nums = (group, f) => group.map(r => r[f]).filter(v => v != null && !isNaN(v));
+  const mean = (vals) => vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null;
+  const maxV = (vals) => vals.length ? Math.max(...vals) : null;
+  const felt = (vals) => {
+    if (!vals.length) return null;
+    const hi = Math.max(...vals);
+    return hi >= 20 ? hi : Math.min(...vals);
+  };
+
+  // Split rows into clock-aligned buckets by floor(localHour / interval).
+  const buckets = [];
+  let cur = null, curKey = null;
+  for (const r of rows) {
+    const hour = parseInt(r.iso.slice(11, 13), 10);
+    const key  = Math.floor(hour / interval);
+    if (key !== curKey) { cur = []; buckets.push(cur); curKey = key; }
+    cur.push(r);
+  }
+
+  return buckets.map(group => {
+    // Start from the landing row so positional fields (iso, dt, elev, glob,
+    // wd, compass, cloudCat) carry through unchanged, then overwrite the
+    // aggregatable columns.
+    const out = { ...group[0] };
+    AGG_MEAN.forEach(f => { out[f] = mean(nums(group, f)); });
+    AGG_MAX.forEach(f  => { out[f] = maxV(nums(group, f)); });
+    AGG_SUM.forEach(f  => { out[f] = group.reduce((a, r) => a + (r[f] || 0), 0); });
+    AGG_FELT.forEach(f => { out[f] = felt(nums(group, f)); });
+    // Bucket span markers used by the table for "now" highlighting and for
+    // matching event cell-tags that fall on any hour within the bucket.
+    out.isoHours = group.map(r => r.iso.slice(0, 13));
+    out.isoEnd   = group[group.length - 1].iso;
+    return out;
+  });
+}
+
 // ------------------------------------------------------------------------
 //  computeWhyFeelsLike(row, env) - Break down the felt-temp delta into its
 //  contributing factors for the "Why it feels like this" panel.

assets/js/events.js

@@ -67,9 +67,12 @@ export function getCellTagEvents(events, row) {
     if (ev.type === 'promo') return false;
     if (ev.nightOnly && row.elev >= -5) return false;
     if (ev.id === 'heat-spike' && row.elev < 0) return false;
-    // Sunset/sunrise events: only show icon during the actual twilight window
+    // Sunset/sunrise events: only show icon during the actual twilight window.
+    // For bucketed table rows the span is [row.iso .. row.isoEnd]; show the
+    // icon if the event window overlaps that span at all.
     if (ev.isoRange) {
-      if (row.iso < ev.isoRange[0] || row.iso > ev.isoRange[1]) return false;
+      const hi = row.isoEnd || row.iso;
+      if (hi < ev.isoRange[0] || row.iso > ev.isoRange[1]) return false;
     }
     return true;
   });

assets/js/hooks/useAppState.js

@@ -30,7 +30,7 @@ import {
   UTCI_ENVIRONMENTS, VARIANT_DEFAULT_ENV,
 } from '../config.js';
 import { utciCategory } from '../utils.js';
-import { buildHourlyRows } from '../compute.js';
+import { buildHourlyRows, aggregateRows } from '../compute.js';
 import { useForecast } from './useForecast.js';
 import { useColumnPopup } from './useColumnPopup.js';
 import { useTableScroll } from './useTableScroll.js';
@@ -293,6 +293,16 @@ export function useAppState() {
     return next;
   });
 
+  // Table row interval: 1 = every hour (default), 2/3/4 = clock-aligned buckets.
+  const [tableInterval, setTableIntervalState] = useState(() => {
+    try { const n = parseInt(localStorage.getItem('sunscope_table_interval'), 10); return [1, 2, 3, 4].includes(n) ? n : 3; } catch (e) { return 3; }
+  });
+  const setTableInterval = (n) => setTableIntervalState(() => {
+    const next = [1, 2, 3, 4].includes(n) ? n : 1;
+    try { localStorage.setItem('sunscope_table_interval', String(next)); } catch (e) { /* ignore */ }
+    return next;
+  });
+
   const searchTimeout = useRef(null);
 
   // Derived selectors used by profile controls
@@ -404,6 +414,10 @@ export function useAppState() {
   });
 
   const visible = days[selectedDay]?.rows || [];
+  // Rows actually rendered in the table - bucketed by the interval selector.
+  // `visible` stays full-resolution so the dial, glance and event detection
+  // keep seeing every hour.
+  const tableRows = aggregateRows(visible, tableInterval);
 
   const nowLocalISO = new Date(now.getTime() + utcOffsetMs).toISOString().slice(0, 13);
   const currentRow  = hourlyRows.length > 0
@@ -601,6 +615,7 @@ export function useAppState() {
     utciEnv, setUtciEnv: setUtciEnvAndSave,
 	showDecimals, toggleShowDecimals,
     showUnits, toggleShowUnits,
+    tableInterval, setTableInterval,
     // table refs
     headStickyRef, headTrackRef, headTableRef,
     bodyScrollRef, bodyTableRef, tableWrapRef,
@@ -617,7 +632,7 @@ export function useAppState() {
     tableCanScrollLeft, tableCanScrollRight, handleBodyScroll,
     // computation
     hourlyRows, days, utcOffsetMs,
-    visible, nowLocalISO, currentRow, currentCat,
+    visible, tableRows, nowLocalISO, currentRow, currentCat,
     // banner + events
     activeEvents, lensEvent, selectedDayEvents,
     bannerIndex, bannerTransition, bannerPrevIndex,