diff --git a/static/calendar.js b/static/calendar.js index 737e9f0..af95f8b 100644 --- a/static/calendar.js +++ b/static/calendar.js @@ -71,9 +71,12 @@ function weatherPass(rec) { const wt = weatherType(rec); return (!wt.feel || checkedFeels.has(wt.feel)) && checkedSkies.has(wt.sky); } -// Custom date range (ISO strings) or null = default last-24-months. Any span is -// allowed; the frontend splits it into ~2-year server requests (see fetchCalendar). -let rangeStart = null, rangeEnd = null; +// Custom date range (ISO strings). Defaults to January six years back → today; the +// frontend splits any span into ~2-year server requests (see fetchCalendar), so a +// 6-year default loads as a few chunks rather than the old server-capped last-24. +const defaultCalStart = () => isoOfDate(new Date(new Date().getFullYear() - 6, 0, 1)); +const defaultCalEnd = () => isoOfDate(new Date()); +let rangeStart = defaultCalStart(), rangeEnd = defaultCalEnd(); // The full requested span (drives the filters + pickers); data.range tracks only // the portion graded so far, which grows as chunks arrive. let reqStart = null, reqEnd = null; @@ -690,7 +693,7 @@ function attachHover(byDate) { const savedFrom = saved && saved.start ? saved.start : null; rangeStart = (savedFrom && toFirst > savedFrom) ? savedFrom // To after From → keep From - : isoOfDate(new Date(y - 2, m, 1)); // To ≤ From (or none) → same month, 2yr back + : isoOfDate(new Date(y - 6, m, 1)); // To ≤ From (or none) → same month, 6yr back saveCalRange(rangeStart, rangeEnd); setCalSync(sel); } else if (saved) { diff --git a/static/compare.html b/static/compare.html index 1534fa9..f212b0d 100644 --- a/static/compare.html +++ b/static/compare.html @@ -105,7 +105,8 @@ - Editing the range arms Refresh — tap it to reload. + Editing the range arms Load — tap it to reload. + diff --git a/static/compare.js b/static/compare.js index 714e491..b1f1333 100644 --- a/static/compare.js +++ b/static/compare.js @@ -22,7 +22,8 @@ import { MONTHS, pad, monthStart, monthEnd, buildChunks, clickOpensPicker, metricBuckets, distStrip, seasonFilterDropdown, seasonSummaryText, syncSeasonChecks, applySeasonMonthChange, initSeasonExpand, - allMonths, monthsToMask, maskToMonths } from "./shared.js"; + allMonths, monthsToMask, maskToMonths, + namePrimary, nameParts } from "./shared.js"; import { fmtTemp, fmtDelta, onUnitChange } from "./units.js"; import { initFilterSheet } from "./filtersheet.js"; @@ -107,8 +108,8 @@ const BASIS_LABEL = { tmax: "daytime high", mean: "daily mean", tmin: "overnight const isYM = (s) => typeof s === "string" && /^\d{4}-\d{2}$/.test(s); 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)}` }; + // January six years back → the present month (a broad seasonal sample by default). + return { start: `${now.getFullYear() - 6}-01`, end: `${now.getFullYear()}-${pad(now.getMonth() + 1)}` }; } function loadRange() { try { const o = JSON.parse(lsGet(CMP.range)); if (o && isYM(o.start) && isYM(o.end)) return o; } catch (e) {} @@ -166,6 +167,10 @@ function readHashState() { // ---- elements ---- const addBtn = document.getElementById("cmp-add"); const refreshBtn = document.getElementById("cmp-refresh"); +// A second Load/Refresh lives inside the params sheet's date-range block, so editing +// the range on mobile (where the panel is a bottom sheet) can reload without closing. +const refreshBtnSheet = document.getElementById("cmp-refresh-sheet"); +const refreshBtns = [refreshBtn, refreshBtnSheet]; const locList = document.getElementById("cmp-loc-list"); const params = document.getElementById("cmp-params"); const placeholder = document.getElementById("cmp-placeholder"); @@ -373,7 +378,9 @@ function renderLocList() { else if (l.error) { label = "Couldn't load"; cls += " error"; } else if (!l.series) { label = l.name || coords; cls += " pending"; lead = ``; } else { label = l.name; } - return `
  • ${lead}${label}` + + // The chip shows just the lead segment (compact, several per row); the full name + // stays in the title + aria-label and on the ranked card below. + return `
  • ${lead}${namePrimary(label)}` + `
    • `; }).join(""); } @@ -393,6 +400,13 @@ const BUCKETS = [ // site's own colors), and directly beneath it a key that names every bucket and its // share — so even a 1% sliver on the bar reads clearly. The whole bar is 100% of the // days, so more blue = runs cold, more red = runs hot. +// The place name as a hierarchy: the lead segment bold, the rest (city · region · +// country) on a muted line beneath — the one spot that shows the full name. +function nameHierarchy(name) { + const { primary, rest } = nameParts(name); + return `${primary}${rest ? `${rest}` : ""}`; +} + function rankCard(loc, s, rank) { const win = rank === 1; const parts = BUCKETS.map(([cls, label, key]) => ({ cls, label, w: s[key] })).filter((p) => p.w > 0); @@ -417,7 +431,7 @@ function rankCard(loc, s, rank) { return `
    ` + `
    ` + `${rank}` + - `
    ${loc.name}${sub}
    ` + + `
    ${nameHierarchy(loc.name)}${sub}
    ` + `
    ${Math.round(s.score)}match / 100
    ` + `
    ` + bar + key + bands + @@ -448,7 +462,7 @@ function renderBaseline(scored) { const rows = scored.map(({ loc, s }) => { const cls = posClass(s.avgTemp), a = posF(s.avgTemp); return `
    ` + - `${loc.name}` + + `${namePrimary(loc.name)}` + `