"use strict"; // Compare view: line up several places over one date range and see which best // matches a comfort temperature. For each location we pull the same daily record // the Calendar uses (api/v2/calendar) and, per day, take a chosen temperature // (daytime high / daily mean / overnight low / feels-like) and measure it against // the comfort target. A day "hits comfort" when it lands within a tolerance band; // otherwise it's colder or warmer, and we track by how much. // // The location set and the date range are the only things that require a data // load. Comfort temperature, band width and the judged temperature are all pure // re-computations over data already in hand, so moving those re-ranks instantly. const CMP = { comfort: "thermograph:cmpComfort", tol: "thermograph:cmpTol", basis: "thermograph:cmpBasis", range: "thermograph:cmpRange", locs: "thermograph:cmpLocs", }; const lsGet = (k) => { try { return localStorage.getItem(k); } catch (e) { return null; } }; const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} }; const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v)); let comfort = clamp(+lsGet(CMP.comfort) || 68, 30, 100); let tol = clamp(lsGet(CMP.tol) == null ? 5 : +lsGet(CMP.tol), 0, 15); let basis = ["tmax", "tmin", "mean", "feels"].includes(lsGet(CMP.basis)) ? lsGet(CMP.basis) : "tmax"; // Locations being compared: {lat, lon, name, series|null, loading, error}. // `series` is a compact per-day array of {hi, lo, feels} (°F, any may be null). let locations = []; // Bumped on every (re)load so a superseded in-flight fetch drops its result. let loadToken = 0; const BASIS_LABEL = { tmax: "daytime high", mean: "daily mean", tmin: "overnight low", feels: "feels-like" }; // ---- date range (month granularity) ---- const pad = (n) => String(n).padStart(2, "0"); function defaultRange() { const now = new Date(); const s = new Date(now.getFullYear(), now.getMonth() - 11, 1); // last 12 whole months return { start: `${s.getFullYear()}-${pad(s.getMonth() + 1)}`, end: `${now.getFullYear()}-${pad(now.getMonth() + 1)}` }; } function loadRange() { try { const o = JSON.parse(lsGet(CMP.range)); if (o && o.start && o.end) return o; } catch (e) {} return defaultRange(); } let range = loadRange(); // {start, end} as "YYYY-MM" const monthStart = (ym) => `${ym}-01`; const isoOfDate = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; const monthEnd = (ym) => isoOfDate(new Date(+ym.slice(0, 4), +ym.slice(5, 7), 0)); // Pretty "Jul 2025 – Jun 2026" for a YYYY-MM range. const MON = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const monthLabel = (ym) => `${MON[+ym.slice(5, 7) - 1]} ${ym.slice(0, 4)}`; // Split a [startIso, endIso] span into consecutive ≤2-year windows so each stays // within the calendar endpoint's per-request cap (mirrors the Calendar view). const CHUNK_MONTHS = 24; function buildChunks(startIso, endIso) { const out = []; let s = startIso, guard = 0; while (s <= endIso && guard++ < 200) { const sd = new Date(s + "T00:00:00"); const ed = new Date(sd.getFullYear(), sd.getMonth() + CHUNK_MONTHS, sd.getDate()); ed.setDate(ed.getDate() - 1); let e = isoOfDate(ed); if (e > endIso) e = endIso; out.push({ start: s, end: e }); const ns = new Date(e + "T00:00:00"); ns.setDate(ns.getDate() + 1); s = isoOfDate(ns); } return out; } // ---- elements ---- const addBtn = document.getElementById("cmp-add"); const locList = document.getElementById("cmp-loc-list"); const params = document.getElementById("cmp-params"); const placeholder = document.getElementById("cmp-placeholder"); const head = document.getElementById("cmp-head"); const results = document.getElementById("cmp-results"); const comfortInput = document.getElementById("cmp-comfort"); const comfortVal = document.getElementById("cmp-comfort-val"); const tolInput = document.getElementById("cmp-tol"); const tolVal = document.getElementById("cmp-tol-val"); const basisToggle = document.getElementById("cmp-basis"); const startInput = document.getElementById("cmp-start"); const endInput = document.getElementById("cmp-end"); const refreshBtn = document.getElementById("cmp-refresh"); addBtn.innerHTML = `${window.LocationPicker.PIN_ICON} Add location`; // ---- data ---- // Fetch one location's range (chunked) and reduce it to the compact per-day series. async function fetchSeries(loc, token) { const chunks = buildChunks(monthStart(range.start), monthEnd(range.end)); const days = []; let place = null; for (const ch of chunks) { const url = `api/v2/calendar?lat=${loc.lat}&lon=${loc.lon}&start=${ch.start}&end=${ch.end}`; const d = await window.Thermograph.getJSON(url, window.Thermograph.TTL.calendar, true); if (token !== loadToken) return null; // superseded place = place || d.place || `${d.cell.center_lat.toFixed(2)}, ${d.cell.center_lon.toFixed(2)}`; for (const r of d.days) days.push(r); } return { name: place, series: days.map((r) => ({ hi: r.tmax ? r.tmax.v : null, lo: r.tmin ? r.tmin.v : null, feels: r.feels ? r.feels.v : null, })), }; } function persistLocations() { lsSet(CMP.locs, JSON.stringify(locations.map((l) => ({ lat: l.lat, lon: l.lon, name: l.name })))); } async function loadLocation(loc, token) { loc.loading = true; loc.error = null; renderAll(); try { const res = await fetchSeries(loc, token); if (!res || token !== loadToken) return; loc.name = res.name; loc.series = res.series; loc.loading = false; } catch (e) { loc.loading = false; loc.error = e.message || "couldn't load"; } persistLocations(); renderAll(); } function addLocation(lat, lon) { // Ignore a spot already on the list (same grid neighborhood). if (locations.some((l) => Math.abs(l.lat - lat) < 0.05 && Math.abs(l.lon - lon) < 0.05)) return; const loc = { lat, lon, name: null, series: null, loading: true, error: null }; locations.push(loc); window.Thermograph.saveLastLocation(lat, lon); loadLocation(loc, loadToken); } function removeLocation(i) { locations.splice(i, 1); persistLocations(); renderAll(); } // Refetch every location's series (used when the date range changes). function reloadAll() { const token = ++loadToken; for (const loc of locations) { loc.series = null; loadLocation(loc, token); } } // ---- stats ---- function basisTemp(pt) { if (basis === "tmax") return pt.hi; if (basis === "tmin") return pt.lo; if (basis === "feels") return pt.feels; return pt.hi != null && pt.lo != null ? (pt.hi + pt.lo) / 2 : null; // mean } function computeStats(series) { let n = 0, below = 0, above = 0, comf = 0, sumBelow = 0, sumAbove = 0, sumAbs = 0; for (const pt of series) { const t = basisTemp(pt); if (t == null || isNaN(t)) continue; n++; const d = t - comfort; sumAbs += Math.abs(d); if (d < -tol) { below++; sumBelow += -d; } else if (d > tol) { above++; sumAbove += d; } else comf++; } if (!n) return null; return { n, comf, below, above, comfortPct: 100 * comf / n, belowPct: 100 * below / n, abovePct: 100 * above / n, avgBelow: below ? sumBelow / below : 0, avgAbove: above ? sumAbove / above : 0, mad: sumAbs / n, }; } // ---- render ---- const pct = (v) => `${v < 10 ? v.toFixed(1) : Math.round(v)}%`; const deg = (v) => `${Math.round(v)}°`; function renderLocList() { locList.innerHTML = locations.map((l, i) => { const label = l.loading ? "Locating…" : l.error ? "Couldn't load" : (l.name || `${l.lat.toFixed(2)}, ${l.lon.toFixed(2)}`); const cls = "cmp-chip" + (l.loading ? " loading" : "") + (l.error ? " error" : ""); return `
  • ${label}` + `
    • `; }).join(""); } function rankCard(loc, s, rank) { const bar = ``; const stats = `
    ` + `
    Colder${pct(s.belowPct)}${s.below ? `avg ${deg(s.avgBelow)} below` : "—"}
    ` + `
    In comfort${pct(s.comfortPct)}±${tol}° of ${comfort}°
    ` + `
    Warmer${pct(s.abovePct)}${s.above ? `avg ${deg(s.avgAbove)} above` : "—"}
    ` + `
    `; return `
    ` + `
    ` + `#${rank}` + `
    ${loc.name}${s.n} days
    ` + `
    ${pct(s.comfortPct)}in comfort
    ` + `
    ` + bar + stats + `
    Typical day misses comfort by ${deg(s.mad)}
    ` + `
    `; } function renderResults() { const loading = locations.filter((l) => l.loading).length; const scored = locations .map((l) => ({ loc: l, s: l.series ? computeStats(l.series) : null })) .filter((x) => x.s); // Best comfort share first; break ties by the smaller typical miss. scored.sort((a, b) => (b.s.comfortPct - a.s.comfortPct) || (a.s.mad - b.s.mad)); if (!scored.length) { head.hidden = true; results.innerHTML = loading ? `` : ""; return; } // Headline: the winner + the parameters it was judged under. const win = scored[0]; const span = `${monthLabel(range.start)} – ${monthLabel(range.end)}`; const lead = scored.length > 1 ? `${win.loc.name} best matches ${comfort}° — ${pct(win.s.comfortPct)} of days within ±${tol}°` : `${win.loc.name}: ${pct(win.s.comfortPct)} of days within ±${tol}° of ${comfort}°`; head.hidden = false; head.innerHTML = `

    ${lead}

    ` + `

    By ${BASIS_LABEL[basis]} · ${span}${loading ? ` · loading ${loading} more…` : ""}

    `; results.innerHTML = scored.map((x, i) => rankCard(x.loc, x.s, i + 1)).join(""); } function renderAll() { const has = locations.length > 0; params.hidden = !has; placeholder.hidden = has; addBtn.querySelector("span").textContent = has ? "Add another location" : "Add location"; renderLocList(); renderResults(); } // ---- events ---- addBtn.addEventListener("click", () => { const cur = locations.length ? locations[locations.length - 1] : window.Thermograph.loadLastLocation(); window.LocationPicker.open(cur, (lat, lon) => addLocation(lat, lon)); }); locList.addEventListener("click", (e) => { const x = e.target.closest(".cmp-chip-x"); if (x) removeLocation(+x.dataset.i); }); // Comfort / band / basis: instant re-rank, no refetch. comfortInput.addEventListener("input", () => { comfort = +comfortInput.value; comfortVal.textContent = `${comfort}°`; lsSet(CMP.comfort, String(comfort)); renderResults(); }); tolInput.addEventListener("input", () => { tol = +tolInput.value; tolVal.textContent = `±${tol}°`; lsSet(CMP.tol, String(tol)); renderResults(); }); basisToggle.addEventListener("click", (e) => { const btn = e.target.closest("button[data-basis]"); if (!btn) return; basis = btn.dataset.basis; lsSet(CMP.basis, basis); basisToggle.querySelectorAll("button").forEach((b) => b.classList.toggle("active", b === btn)); renderResults(); }); // Date range: editing reveals the reload button; confirming refetches everything. startInput.max = endInput.max = `${new Date().getFullYear()}-12`; function markDirty() { refreshBtn.hidden = locations.length === 0; } startInput.addEventListener("change", markDirty); endInput.addEventListener("change", markDirty); refreshBtn.addEventListener("click", () => { let s = startInput.value || range.start, e = endInput.value || range.end; if (s > e) { const t = s; s = e; e = t; } range = { start: s, end: e }; startInput.value = s; endInput.value = e; lsSet(CMP.range, JSON.stringify(range)); refreshBtn.hidden = true; reloadAll(); }); // ---- init ---- (function restore() { comfortInput.value = comfort; comfortVal.textContent = `${comfort}°`; tolInput.value = tol; tolVal.textContent = `±${tol}°`; basisToggle.querySelectorAll("button").forEach((b) => b.classList.toggle("active", b.dataset.basis === basis)); startInput.value = range.start; endInput.value = range.end; let saved = null; try { saved = JSON.parse(lsGet(CMP.locs)); } catch (e) {} if (Array.isArray(saved) && saved.length) { locations = saved .filter((l) => l && typeof l.lat === "number" && typeof l.lon === "number") .map((l) => ({ lat: l.lat, lon: l.lon, name: l.name || null, series: null, loading: true, error: null })); for (const loc of locations) loadLocation(loc, loadToken); } else { // Seed from the spot the other views last looked at, so Compare isn't empty. const last = window.Thermograph.loadLastLocation(); if (last) addLocation(last.lat, last.lon); } renderAll(); })();