083d3bd0f8
All checks were successful
PR build (required check) / changes (pull_request) Successful in 6s
secrets-guard / encrypted (pull_request) Successful in 5s
PR build (required check) / validate-observability (pull_request) Has been skipped
PR build (required check) / build-frontend (pull_request) Successful in 1m8s
PR build (required check) / build-backend (pull_request) Successful in 1m36s
PR build (required check) / gate (pull_request) Successful in 2s
A visitor who declines browser geolocation currently has no location at all — the copy sends them to the map picker. This adds an opt-in fallback that suggests a coarse city from the request's own IP, presented as a guess with a one-tap correction, so the dead end has a way out. backend/data/geoip.py does the lookup against a local MMDB file (DB-IP IP to City Lite or GeoLite2 City — same format, either works, attribution derived from the file's metadata). Off unless THERMOGRAPH_GEOIP is truthy AND the database exists AND maxminddb imports; every degraded case — private/reserved/ CGNAT/IPv6-ULA addresses, unparseable input, no record, a country-centroid record with no city, a record wider than the accuracy limit, a corrupt file — returns None, which the route answers as 204 and the client treats exactly as today. The IP is read in memory and dropped. GET /api/v2/geoip runs no RunAudit, records no metric dimension, and is excluded from the access log (its own "geoip" traffic category) so no stored, joinable (IP, location) pair is ever written. The response is no-store/Vary:* and takes no parameters. Client-side rather than server-rendered on purpose: the homepage's HTML and weak ETag must stay byte-identical for every visitor, or any cache added in front of it can serve one visitor's city to another. The suggestion is fetched only after a declined/unavailable prompt, and only when nothing is remembered. A guess is never persisted — no localStorage write, no URL hash — and the hero and results headings say "roughly near"/"near … approximate" rather than letting the reverse-geocoded cell name a neighbourhood the lookup never knew. The /privacy page's "never looks up your location from your IP address" paragraph now follows the same flag out of the same env file, so the published statement and the behaviour flip together. Database lifecycle is a host-side systemd timer (infra/deploy/geoip-refresh.*) that verifies a download opens and answers before swapping it in atomically, bind-mounted read-only; geoip.py re-opens on mtime change, so a refresh needs no restart. GEOIP-APPROX-LOCATION.md carries the database comparison, the SSR-vs-client argument, the privacy analysis, and the open decisions.
677 lines
32 KiB
JavaScript
677 lines
32 KiB
JavaScript
// Weekly (map) page. Imports replace the old script-tag ordering contract.
|
||
import { loadLastLocation, saveLastLocation, locHash } from "./nav.js";
|
||
import { fmtTemp, onUnitChange, toWind, windUnit, precipUnit } from "./units.js";
|
||
import { uv } from "./account.js"; // header sign-in entry + notification bell, and the API-version resolver
|
||
import { loadView, TTL, prefetchViews } from "./cache.js";
|
||
import { initFindButton, setFindLabel } from "./mappicker.js";
|
||
import { W, PW, H, PL, PR, plotTop, plotBot, xLabY, setChartWidth, chartPalette,
|
||
tempChart, precipChart, dryChart, attachChartHover } from "./chart.js";
|
||
import { track } from "./digest.js";
|
||
import { fetchApprox, renderApprox, clearApprox } from "./geoip.js";
|
||
import { TIER_COLORS, SCALE_TEMP, drynessColor, pctOrd, esc, todayISO, placeLabel,
|
||
tierKeySegs, GUIDE_LINK, fmtPrecip, fmtWind, fmtHumid } from "./shared.js";
|
||
|
||
let selected = null; // {lat, lon}
|
||
// True while `selected` came from the IP fallback rather than a real choice.
|
||
// A guess is loaded (so the page is useful) but never remembered and never
|
||
// written into the URL — see geoip.js for why that distinction matters.
|
||
let approx = false;
|
||
let approxLabel = ""; // the city the guess named, for headlines that must not overstate it
|
||
|
||
const dateInput = document.getElementById("date-input");
|
||
const todayBtn = document.getElementById("today-btn");
|
||
dateInput.value = todayISO();
|
||
dateInput.max = dateInput.value;
|
||
|
||
// The "Today" chip snaps the target date back to today; it stays lit while the
|
||
// target already is today, so it doubles as a "you're viewing now" indicator.
|
||
function syncTodayBtn() {
|
||
todayBtn.classList.toggle("active", dateInput.value === todayISO());
|
||
}
|
||
syncTodayBtn();
|
||
todayBtn.addEventListener("click", () => {
|
||
const t = todayISO();
|
||
if (dateInput.value === t) return;
|
||
dateInput.value = t;
|
||
dateInput.max = t;
|
||
syncTodayBtn();
|
||
if (selected) runGrade();
|
||
});
|
||
|
||
function selectLocation(lat, lon, opts) {
|
||
selected = { lat, lon };
|
||
// An approximate pick keeps its banner up; any real pick retires it, so the
|
||
// "this is a guess" claim can never outlive the guess.
|
||
approx = !!(opts && opts.approx);
|
||
approxLabel = approx ? ((opts && opts.label) || "") : "";
|
||
if (!approx) clearApprox(geoBox);
|
||
// Show the raw coordinates immediately; render() replaces them with the resolved
|
||
// neighborhood + city name once the grade fetch returns.
|
||
locLabel.textContent = `${lat.toFixed(3)}, ${lon.toFixed(3)}`;
|
||
locLabel.hidden = false;
|
||
runGrade();
|
||
}
|
||
|
||
// ---- location picker ----
|
||
// The Find button opens the shared modal map picker; choosing a spot loads it.
|
||
const findBtn = document.getElementById("find-btn");
|
||
const locLabel = document.getElementById("loc-label");
|
||
initFindButton(findBtn, "Find a location",
|
||
() => selected, (lat, lon) => selectLocation(lat, lon));
|
||
|
||
// ---- hero ----
|
||
// The hero's grade card is server-rendered showing the most unusual city we're
|
||
// tracking; once the visitor has a place of their own it re-points at that. The
|
||
// frame and its text slots already exist in the HTML, so swapping the numbers in
|
||
// shifts nothing on the page.
|
||
const hero = document.getElementById("hero");
|
||
|
||
const heroLocate = document.getElementById("hero-locate");
|
||
const heroPick = document.getElementById("hero-pick");
|
||
const heroMsg = document.getElementById("hero-locate-msg");
|
||
const geoBox = document.getElementById("geo-approx");
|
||
|
||
function locateMsg(text) {
|
||
if (!heroMsg) return;
|
||
heroMsg.textContent = text || "";
|
||
heroMsg.hidden = !text;
|
||
}
|
||
|
||
// Browsers expose geolocation ONLY on secure origins, but `navigator.geolocation`
|
||
// still exists on plain http:// — getCurrentPosition just fails with a permission
|
||
// error. So feature-testing the object is not enough: without the isSecureContext
|
||
// check the button is a dead control on the plain-HTTP LAN dev server (and on any
|
||
// phone reaching it by IP), which is exactly how it shipped broken.
|
||
// Rather than offer a button that cannot work, promote the map picker instead.
|
||
const canLocate = !!navigator.geolocation && window.isSecureContext;
|
||
if (heroLocate && !canLocate) {
|
||
heroLocate.hidden = true;
|
||
heroPick?.classList.replace("btn-ghost", "btn-primary");
|
||
}
|
||
|
||
heroLocate?.addEventListener("click", () => {
|
||
track("home.locate");
|
||
const label = heroLocate.textContent;
|
||
const restore = () => {
|
||
heroLocate.disabled = false;
|
||
heroLocate.textContent = label;
|
||
};
|
||
// Geolocation can take seconds (or hang until the timeout), so say so —
|
||
// a button that looks inert is indistinguishable from a broken one.
|
||
heroLocate.disabled = true;
|
||
heroLocate.textContent = "Locating…";
|
||
locateMsg("");
|
||
|
||
navigator.geolocation.getCurrentPosition(
|
||
(pos) => {
|
||
restore();
|
||
selectLocation(pos.coords.latitude, pos.coords.longitude);
|
||
},
|
||
(err) => {
|
||
restore();
|
||
// Always say something: a declined prompt or a timeout must not look
|
||
// like the button did nothing.
|
||
locateMsg(
|
||
err.code === err.PERMISSION_DENIED
|
||
? "Location permission was declined. Pick a spot on the map instead."
|
||
: err.code === err.TIMEOUT
|
||
? "That took too long. Try again, or pick a spot on the map."
|
||
: "Your location isn't available right now. Pick a spot on the map instead.",
|
||
);
|
||
// The dead end this fallback exists for. If the server can offer a
|
||
// coarse guess, take over the message — telling someone to "pick a spot
|
||
// on the map" while a guessed place is already loading reads as two
|
||
// contradictory instructions.
|
||
tryApprox().then((ok) => {
|
||
if (!ok) return;
|
||
locateMsg(err.code === err.PERMISSION_DENIED
|
||
? "No problem — location permission stays off."
|
||
: "Your device's location wasn't available.");
|
||
});
|
||
},
|
||
{ enableHighAccuracy: false, timeout: 10000, maximumAge: 600000 },
|
||
);
|
||
});
|
||
|
||
heroPick?.addEventListener("click", () => { locateMsg(""); findBtn.click(); });
|
||
|
||
// ---- approximate-location fallback ----
|
||
// Only ever a rescue for someone who has no location at all: it runs after a
|
||
// declined/failed geolocation prompt, or on load in a context where the browser
|
||
// will not offer geolocation at all (plain HTTP). It never runs for a visitor
|
||
// who already has a place — theirs is better than any guess — and never
|
||
// pre-empts the permission prompt.
|
||
let approxTried = false;
|
||
|
||
async function tryApprox() {
|
||
if (approxTried || selected) return false;
|
||
approxTried = true;
|
||
const data = await fetchApprox();
|
||
// 204/anything unusable → exactly today's behaviour, nothing rendered.
|
||
if (!data || selected) return false;
|
||
renderApprox(geoBox, data, () => { locateMsg(""); findBtn.click(); });
|
||
selectLocation(data.lat, data.lon, { approx: true, label: data.label });
|
||
return true;
|
||
}
|
||
|
||
// No geolocation available at all (insecure context, or a browser without it)
|
||
// and nothing remembered: there is no prompt to decline, so offer the guess up
|
||
// front rather than leaving the page with no place at all.
|
||
if (!canLocate && !loadLastLocation()) tryApprox();
|
||
|
||
/** Re-point the hero card at the place the visitor actually chose. */
|
||
function updateHero(data) {
|
||
if (!hero) return;
|
||
const card = document.getElementById("hero-grade");
|
||
const targetDay = data.recent.find((d) => d.date === data.target_date);
|
||
const g = targetDay && (targetDay.tmax || targetDay.tmin);
|
||
if (!card || !g) return;
|
||
|
||
// A guessed place is reverse-geocoded like any other cell, which would name a
|
||
// *neighbourhood* — far more precision than an IP lookup ever had. Say
|
||
// "roughly near <city>" instead, so the headline can't overstate what we know.
|
||
document.getElementById("hero-where").textContent =
|
||
approx ? `Roughly near ${approxLabel || placeLabel(data)}`
|
||
: `Today in ${placeLabel(data)}`;
|
||
document.getElementById("hero-band").textContent = g.grade;
|
||
document.getElementById("hero-detail").textContent =
|
||
`${targetDay.tmax === g ? "High temp" : "Low temp"} in the ${pctOrd(g.percentile)} percentile`;
|
||
// Band colour rides the same token set as everything else; the band word is
|
||
// always present too, so colour is never the only signal.
|
||
card.style.setProperty("--cat", TIER_COLORS[g.class] || "");
|
||
hero.querySelector(".grade-why")?.remove();
|
||
}
|
||
|
||
dateInput.addEventListener("change", () => { syncTodayBtn(); selected && runGrade(); });
|
||
|
||
// ---- grade request + render ----
|
||
const placeholder = document.getElementById("placeholder");
|
||
const results = document.getElementById("results");
|
||
let lastGraded = null; // most recent /api/grade response (for the PNG export)
|
||
|
||
// Clicking a graded day (any cell or its date header) opens its full breakdown.
|
||
results.addEventListener("click", (e) => {
|
||
const row = e.target.closest(".rd-grid [data-date]");
|
||
if (!row || !selected) return;
|
||
location.href = `day${locHash(selected.lat, selected.lon, row.dataset.date)}`;
|
||
});
|
||
|
||
let gradeSeq = 0; // supersedes an in-flight load when the user picks a new spot/date
|
||
|
||
async function runGrade() {
|
||
if (!selected) return;
|
||
updateHash();
|
||
placeholder.hidden = true;
|
||
results.hidden = false;
|
||
// Omit the date when it's today, so the URL (and cache key) matches the prefetch
|
||
// fired from the other views — a same-tab navigation then reuses the response.
|
||
const q = `lat=${selected.lat}&lon=${selected.lon}`;
|
||
const url = dateInput.value === todayISO() ? uv(`grade?${q}`) : uv(`grade?${q}&date=${dateInput.value}`);
|
||
await loadView({
|
||
url, ttl: TTL.grade, seq: ++gradeSeq, current: () => gradeSeq,
|
||
spinner: () => { results.innerHTML = `<p class="spinner">Fetching decades of climate history…</p>`; },
|
||
onData: render,
|
||
onError: (err) => { results.innerHTML = `<p class="error">${err.message}</p>`; },
|
||
});
|
||
}
|
||
|
||
// Compact cell formatters for the dense recent/forecast table (units live in the
|
||
// column headers, so values stay short). Dry days label the running dry streak
|
||
// (see precipCell) rather than the rain amount.
|
||
const cTemp = fmtTemp; // active unit, bare degree
|
||
const cHum = (v) => (v == null ? "—" : `${Math.round(v)}%`); // relative %, unit-invariant
|
||
const cWind = (v) => (v == null ? "—" : `${Math.round(toWind(v))}`);
|
||
// fmtPrecip carries the precision: whole millimetres, two decimals for inches.
|
||
const cRain = (v) => (v == null ? "—" : v > 0 ? fmtPrecip(v, false) : "·");
|
||
|
||
// Monochrome inline icons (currentColor) so the UI chrome matches the dark theme
|
||
// instead of using colorful emoji. Feather-style line paths.
|
||
const IC = {
|
||
link: `<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`,
|
||
download: `<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`,
|
||
calendar: `<svg class="ic ic-lg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>`,
|
||
};
|
||
|
||
const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
|
||
"July", "August", "September", "October", "November", "December"];
|
||
|
||
// Friendly, plain-language "what to expect" sentences for the selected date's
|
||
// season, built from the ±7-day climatology frequencies (rain_freq / sun_freq)
|
||
// the backend now returns. Rain drives a bit of cute packing advice. Any piece
|
||
// with no data (e.g. sunshine on a NASA/MET-sourced cell) is simply omitted.
|
||
function insightsHTML(data) {
|
||
const c = data.climatology || {};
|
||
const parts = data.target_date ? data.target_date.split("-") : [];
|
||
const monthName = parts.length === 3 ? MONTH_NAMES[+parts[1] - 1] : null;
|
||
const around = monthName ? `around mid-${monthName}` : "this time of year";
|
||
const lines = [];
|
||
|
||
const hi = c.tmax && c.tmax.p50 != null ? c.tmax.p50 : null;
|
||
const lo = c.tmin && c.tmin.p50 != null ? c.tmin.p50 : null;
|
||
if (hi != null && lo != null) {
|
||
lines.push(`<li><span class="ins-emoji" aria-hidden="true">🌡️</span> A typical day ${esc(around)} peaks near <b>${fmtTemp(hi, true)}</b> and dips to <b>${fmtTemp(lo, true)}</b>.</li>`);
|
||
}
|
||
|
||
if (c.sun_freq != null) {
|
||
const pct = Math.round(c.sun_freq * 100);
|
||
const emoji = c.sun_freq >= 0.6 ? "☀️" : c.sun_freq >= 0.3 ? "⛅" : "☁️";
|
||
const tone = c.sun_freq >= 0.6 ? "plenty of sunshine — " : c.sun_freq < 0.3 ? "often cloudy — " : "";
|
||
lines.push(`<li><span class="ins-emoji" aria-hidden="true">${emoji}</span> ${tone}sunny about <b>${pct}%</b> of days ${esc(around)}.</li>`);
|
||
}
|
||
|
||
if (c.rain_freq != null) {
|
||
const pct = Math.round(c.rain_freq * 100);
|
||
let emoji, advice;
|
||
if (c.rain_freq < 0.15) {
|
||
emoji = "🌤️"; advice = "you can probably leave the umbrella at home.";
|
||
} else if (c.rain_freq < 0.4) {
|
||
emoji = "🌦️"; advice = "maybe tuck a compact umbrella in your bag just in case.";
|
||
} else {
|
||
emoji = "🌧️"; advice = "don't forget your favorite umbrella or raincoat!";
|
||
}
|
||
lines.push(`<li class="ins-rain"><span class="ins-emoji" aria-hidden="true">${emoji}</span> Rain on about <b>${pct}%</b> of days ${esc(around)} — ${advice}</li>`);
|
||
}
|
||
|
||
if (!lines.length) return "";
|
||
return `<div class="insights">
|
||
<p class="insight-lead">What to expect ${esc(around)}</p>
|
||
<ul class="insight-list">${lines.join("")}</ul>
|
||
</div>`;
|
||
}
|
||
|
||
function render(data) {
|
||
recentData = data;
|
||
updateHero(data);
|
||
// The place name appears once — as the results heading (<h2>) below, which also
|
||
// carries the coordinates + climatology context. The top label only holds the
|
||
// transient coordinates written on selection, so hide it now that the named
|
||
// results have rendered (otherwise the name would show twice).
|
||
locLabel.hidden = true;
|
||
locLabel.textContent = "";
|
||
setFindLabel(findBtn, "Change location");
|
||
const c = data.climatology;
|
||
const cell = data.cell;
|
||
const yrs = c.year_range ? `${c.year_range[0]}–${c.year_range[1]}` : "—";
|
||
const coords = `${cell.center_lat.toFixed(3)}, ${cell.center_lon.toFixed(3)}`;
|
||
|
||
// Each card compares the target day's value to the normal (median) for that
|
||
// metric, tinted by its grade, and links to the full single-day breakdown. The
|
||
// window now runs past the target into the forecast, so the target is looked up
|
||
// by date rather than taken as the newest row.
|
||
const targetDay = data.recent.find((d) => d.date === data.target_date) || null;
|
||
const dayHref = `day${locHash(selected.lat, selected.lon, data.target_date)}`;
|
||
const cmpCard = (label, key, clim, fmt) => {
|
||
const g = targetDay ? targetDay[key] : null;
|
||
const normalVal = clim ? fmt(clim.p50) : "—";
|
||
const cat = g ? (TIER_COLORS[g.class] || "") : "";
|
||
const big = g ? fmt(g.value) : normalVal;
|
||
const grade = g
|
||
? `<span class="nc-grade" style="--cat:${cat}">${g.grade}</span>`
|
||
: "";
|
||
return `<a class="normal-card" href="${dayHref}">
|
||
<div class="nc-head"><h3>${label}</h3>${grade}</div>
|
||
<div class="big"${g ? ` style="--cat:${cat}"` : ""}>${big}</div>
|
||
<div class="range">normal: <b>${normalVal}</b></div>
|
||
</a>`;
|
||
};
|
||
|
||
results.innerHTML = `
|
||
<div class="loc-head">
|
||
<div class="loc-title">
|
||
<h2>${approx ? `Near ${esc(approxLabel || placeLabel(data))}` : placeLabel(data)}</h2>
|
||
${approx ? `<p class="loc-approx-tag">approximate — from your connection, not your device</p>` : ""}
|
||
<ul class="loc-meta">
|
||
${data.place ? `<li><b>${coords}</b></li>` : ""}
|
||
<li>Climatology from <b>${yrs}</b></li>
|
||
<li><b>${c.n_samples.toLocaleString()}</b> days sample size (day ±7)</li>
|
||
</ul>
|
||
</div>
|
||
<div class="share">
|
||
<button id="btn-link" title="Copy a link back to this exact view">${IC.link} Copy link</button>
|
||
<button id="btn-png" title="Download the trend chart as an image">${IC.download} Chart</button>
|
||
</div>
|
||
</div>
|
||
<a class="cta-cal" href="calendar${locHash(selected.lat, selected.lon)}">
|
||
<span class="cta-cal-icon" aria-hidden="true">${IC.calendar}</span>
|
||
<span>Check historical data</span>
|
||
<span class="cta-cal-arrow" aria-hidden="true">→</span>
|
||
</a>
|
||
${insightsHTML(data)}
|
||
<div class="section-title">${data.target_date} vs a typical day. Tap a metric for the full breakdown</div>
|
||
<div class="normals">
|
||
${cmpCard("High", "tmax", c.tmax, fmtTemp)}
|
||
${cmpCard("Low", "tmin", c.tmin, fmtTemp)}
|
||
${cmpCard("Feels", "feels", c.feels, fmtTemp)}
|
||
${cmpCard("Humidity", "humid", c.humid, fmtHumid)}
|
||
${cmpCard("Wind", "wind", c.wind, fmtWind)}
|
||
${cmpCard("Gust", "gust", c.gust, fmtWind)}
|
||
${cmpCard("Precip", "precip", c.precip, fmtPrecip)}
|
||
</div>
|
||
<div id="series"></div>
|
||
`;
|
||
|
||
renderSeries(); // fills #series (chart + graded-days timeline) from the window
|
||
prefetchViews(selected.lat, selected.lon, ["grade", "forecast"]); // warm calendar/day
|
||
document.getElementById("btn-link").onclick = copyShareLink;
|
||
document.getElementById("btn-png").onclick = downloadChartPng;
|
||
}
|
||
|
||
// One tinted value cell: background + value colored by the day's grade tier for
|
||
// that metric (the same diverging scale as everywhere else). Carries the date so
|
||
// tapping any cell opens that day's full breakdown.
|
||
function rdCell(g, fmt, date, isFc, isToday) {
|
||
const dd = date ? ` data-date="${date}"` : "";
|
||
const cls = "rd-c" + (isFc ? " rd-fc" : isToday ? " rd-today" : "");
|
||
if (!g) return `<span class="${cls}"${dd}>—</span>`;
|
||
const col = TIER_COLORS[g.class] || "";
|
||
return `<span class="${cls}"${dd} style="--c:${col}">${fmt(g.value)}</span>`;
|
||
}
|
||
|
||
// Precip cell: rain days show the amount (tinted by intensity tier); dry days
|
||
// label the running dry streak — "3d" = 3 days since measurable rain, warmed by
|
||
// the same dryness ramp as the chart — instead of a bare dot.
|
||
function precipCell(d, isFc, isToday) {
|
||
const g = d.precip;
|
||
const dd = ` data-date="${d.date}"`;
|
||
const cls = "rd-c" + (isFc ? " rd-fc" : isToday ? " rd-today" : "");
|
||
if (!g) return `<span class="${cls}"${dd}>—</span>`;
|
||
if (g.value === 0 && d.dsr != null && d.dsr > 0) {
|
||
return `<span class="${cls}"${dd} style="--c:${drynessColor(d.dsr)}" title="${d.dsr} days since measurable rain">${d.dsr}d</span>`;
|
||
}
|
||
const col = TIER_COLORS[g.class] || "";
|
||
return `<span class="${cls}"${dd} style="--c:${col}">${cRain(g.value)}</span>`;
|
||
}
|
||
|
||
// Compact "graded days" table — a ROW per metric, a COLUMN per day (newest first).
|
||
// Wide runs (e.g. 2 weeks) scroll horizontally inside their own container; the
|
||
// metric-label column stays pinned. Tapping any cell/day opens that day's detail.
|
||
// Wind and rain cells are bare numbers to keep the grid narrow, so their row
|
||
// label carries the unit — and has to be built per render, since the unit can
|
||
// change under us (onUnitChange re-renders).
|
||
const RD_METRICS = () => [
|
||
["tmax", "Hi", cTemp], ["tmin", "Lo", cTemp], ["feels", "Feel", cTemp],
|
||
["humid", "Hum", cHum],
|
||
["wind", `Wind <span class="rd-unit">${windUnit()}</span>`, cWind],
|
||
["gust", `Gust <span class="rd-unit">${windUnit()}</span>`, cWind],
|
||
["precip", `Rain <span class="rd-unit">${precipUnit()}</span>`, cRain],
|
||
];
|
||
function daysTable(rows, targetDate) {
|
||
if (!rows.length) return "";
|
||
const todayDate = todayISO();
|
||
const isFc = (d) => d.date > todayDate; // future = forecast columns
|
||
const isTarget = (d) => d.date === targetDate; // the graded target day (orange marker)
|
||
const cols = `grid-template-columns: 46px repeat(${rows.length}, minmax(42px, 1fr));`;
|
||
const header = `<div class="rd-corner"></div>` + rows.map((d) => {
|
||
const dt = new Date(d.date + "T00:00:00");
|
||
const dow = dt.toLocaleDateString(undefined, { weekday: "short" });
|
||
const md = dt.toLocaleDateString(undefined, { month: "numeric", day: "numeric" });
|
||
const cls = "rd-colh" + (isTarget(d) ? " rd-today" : isFc(d) ? " rd-fc" : "");
|
||
return `<div class="${cls}" data-date="${d.date}" title="See the full breakdown for this day"><b>${dow}</b><span>${md}</span></div>`;
|
||
}).join("");
|
||
const body = RD_METRICS().map(([key, label, fmt]) =>
|
||
`<div class="rd-mlabel">${label}</div>` +
|
||
rows.map((d) => key === "precip"
|
||
? precipCell(d, isFc(d), isTarget(d))
|
||
: rdCell(d[key], fmt, d.date, isFc(d), isTarget(d))).join("")
|
||
).join("");
|
||
return `<div class="rd-scroll"><div class="rd-grid" style="${cols}">${header}${body}</div></div>`;
|
||
}
|
||
|
||
// ---- graded-days timeline ----
|
||
// The header normals stay fixed on the target day; the chart + graded-days table
|
||
// below show one continuous window built server-side: two weeks of history before
|
||
// the target, the target itself (orange marker), then the days after it — real
|
||
// observations when they're in the past, the forward forecast when they run into
|
||
// the future (see backend _build_grade).
|
||
let recentData = null; // /grade response — the whole window, newest-first
|
||
|
||
// Repaint everything in the newly-picked unit.
|
||
onUnitChange(() => {
|
||
if (recentData) render(recentData);
|
||
});
|
||
|
||
// Rebuild the chart when the window is resized so its drawing width keeps
|
||
// tracking the container (debounced — resize fires continuously while dragging).
|
||
let resizeTimer = null;
|
||
window.addEventListener("resize", () => {
|
||
clearTimeout(resizeTimer);
|
||
resizeTimer = setTimeout(() => { if (recentData) renderSeries(); }, 160);
|
||
});
|
||
|
||
function renderSeries() {
|
||
const host = document.getElementById("series");
|
||
if (!host || !recentData) return;
|
||
const days = recentData.recent; // newest-first: history · target · after/forecast
|
||
const target = recentData.target_date;
|
||
const hasFc = days.some((d) => d.date > todayISO()); // window runs into the forecast
|
||
host.innerHTML = `
|
||
<div class="section-title">Trend vs normal${hasFc ? " · recent → forecast" : ""}</div>
|
||
<div id="chart-wrap"></div>
|
||
${tierKeyHtml()}
|
||
<div class="section-title">Daily, graded${hasFc ? ": recent & 7-day forecast" : ""}</div>
|
||
<div class="rd-orient"><span>← Older</span><span>Newer →</span></div>
|
||
${daysTable([...days].reverse(), target) || '<p class="muted">Nothing to grade.</p>'}
|
||
`;
|
||
buildChart(recentData);
|
||
scrollTableToTarget(host, target);
|
||
}
|
||
|
||
// Open the timeline centered on the target day's column (the orange marker), so
|
||
// the two weeks of history and the days after it are both in view.
|
||
function scrollTableToTarget(host, target) {
|
||
const scroll = host.querySelector(".rd-scroll");
|
||
if (!scroll) return;
|
||
requestAnimationFrame(() => {
|
||
const col = scroll.querySelector(`.rd-colh[data-date="${target}"]`);
|
||
if (!col) { scroll.scrollLeft = scroll.scrollWidth; return; }
|
||
scroll.scrollLeft = Math.max(0, col.offsetLeft - (scroll.clientWidth - col.offsetWidth) / 2);
|
||
});
|
||
}
|
||
|
||
// ---- trend chart (self-contained inline SVG) ----
|
||
|
||
function tierKeyHtml() {
|
||
// Highest tier first (Near Record hot → Near Record cold).
|
||
const segs = tierKeySegs([...SCALE_TEMP].reverse().map((t) =>
|
||
({ color: TIER_COLORS[t.c], label: t.label })));
|
||
return `<div class="section-title">Grade scale · low → high vs local normal</div>
|
||
<div class="tier-key">${segs}</div>${GUIDE_LINK}`;
|
||
}
|
||
|
||
let chartDays = [];
|
||
// Which chart category is shown. Persisted so a refresh keeps your selection.
|
||
let chartMetric = localStorage.getItem("thermograph:chartMetric") || "tmax";
|
||
|
||
function buildChart(data) {
|
||
const wrap = document.getElementById("chart-wrap");
|
||
const C = chartPalette();
|
||
// Drawing width tracks the on-screen box (see chart.js) so wide monitors gain
|
||
// plot room while phones keep the 720-unit floor (the SVG just scales down).
|
||
setChartWidth(wrap.clientWidth);
|
||
lastGraded = data; // the series currently drawn (for PNG export)
|
||
chartDays = [...data.recent].reverse(); // oldest -> newest
|
||
const days = chartDays, n = days.length;
|
||
if (!n) { wrap.innerHTML = ""; return; }
|
||
const xFor = (i) => (n === 1 ? PL + PW / 2 : PL + (i * PW) / (n - 1));
|
||
|
||
// shared: x date labels
|
||
const step = n > 9 ? 2 : 1;
|
||
let xlab = "";
|
||
days.forEach((d, i) => {
|
||
if (i % step && i !== n - 1) return;
|
||
const dt = new Date(d.date + "T00:00:00");
|
||
xlab += `<text x="${xFor(i).toFixed(1)}" y="${xLabY}" text-anchor="middle" font-size="10.5" fill="${C.muted}">${dt.getMonth() + 1}/${dt.getDate()}</text>`;
|
||
});
|
||
// shared: hover hit targets over the plot
|
||
let hits = "";
|
||
days.forEach((_, i) => {
|
||
const w = n === 1 ? PW : PW / (n - 1);
|
||
hits += `<rect class="hit" data-i="${i}" x="${(xFor(i) - w / 2).toFixed(1)}" y="${plotTop}" width="${w.toFixed(1)}" height="${plotBot - plotTop}" fill="transparent"/>`;
|
||
});
|
||
|
||
const built = chartMetric === "precip" ? precipChart(days, n, xFor, C)
|
||
: chartMetric === "dry" ? dryChart(days, n, xFor, C)
|
||
: tempChart(chartMetric, days, n, xFor, C);
|
||
|
||
// Solid orange marker line ON the target day, plus a dashed "forecast →" divider
|
||
// where the window crosses from the past into the future — drawn only when it's
|
||
// clearly separated from the target marker (i.e. the target is in the past; when
|
||
// the target is today the marker itself already sits at that boundary).
|
||
let marks = "";
|
||
const tIdx = days.findIndex((d) => d.date === data.target_date);
|
||
if (tIdx >= 0) {
|
||
const xt = xFor(tIdx).toFixed(1);
|
||
const td = new Date(data.target_date + "T00:00:00");
|
||
marks += `<line x1="${xt}" y1="${plotTop}" x2="${xt}" y2="${plotBot}" stroke="${C.accent}" stroke-width="1.8" opacity="0.9"/>`
|
||
+ `<text x="${xt}" y="${plotTop - 3}" text-anchor="middle" font-size="9" font-weight="700" fill="${C.accent}">${td.getMonth() + 1}/${td.getDate()}</text>`;
|
||
}
|
||
const fIdx = days.findIndex((d) => d.date > todayISO()); // first forecast (future) day
|
||
if (fIdx > tIdx + 1) {
|
||
const xd = ((xFor(fIdx - 1) + xFor(fIdx)) / 2).toFixed(1);
|
||
marks += `<line x1="${xd}" y1="${plotTop}" x2="${xd}" y2="${plotBot}" stroke="${C.accent}" stroke-width="1.1" stroke-dasharray="4 3" opacity="0.55"/>`
|
||
+ `<text x="${xd}" y="${plotTop - 3}" text-anchor="middle" font-size="8.5" font-weight="700" fill="${C.accent}" opacity="0.8">forecast →</text>`;
|
||
}
|
||
|
||
const title = `${placeLabel(data)} · ${data.target_date}`;
|
||
const svg = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" font-family="system-ui, -apple-system, Segoe UI, sans-serif" role="img" aria-label="${built.aria}">
|
||
<rect x="0" y="0" width="${W}" height="${H}" fill="${C.surface}"/>
|
||
<text x="${PL - 8}" y="24" font-size="12.5" font-weight="700" fill="${built.color}">${built.subtitle}</text>
|
||
<text x="${W - PR}" y="24" text-anchor="end" font-size="11" fill="${C.muted}">${title}</text>
|
||
${built.content}
|
||
${marks}
|
||
${xlab}
|
||
<line id="crosshair" x1="0" y1="${plotTop}" x2="0" y2="${plotBot}" stroke="${C.muted}" stroke-width="1" stroke-dasharray="3 3" opacity="0"/>
|
||
${hits}
|
||
</svg>`;
|
||
|
||
const btn = (m, label) => `<button type="button" data-metric="${m}"${chartMetric === m ? ' class="active"' : ""}>${label}</button>`;
|
||
wrap.innerHTML = `
|
||
<div class="chart-toggle" id="chart-toggle" role="group" aria-label="Chart metric">
|
||
${btn("tmax", "High")}${btn("tmin", "Low")}${btn("feels", "Feels")}${btn("humid", "Humid")}${btn("wind", "Wind")}${btn("gust", "Gust")}${btn("precip", "Precip")}${btn("dry", "Dry")}
|
||
</div>
|
||
<div class="chart-legend">${built.legend}</div>
|
||
${svg}
|
||
<div id="chart-tip" class="chart-tip" hidden></div>`;
|
||
|
||
document.getElementById("chart-toggle").addEventListener("click", (e) => {
|
||
const b = e.target.closest("button[data-metric]");
|
||
if (!b || b.dataset.metric === chartMetric) return;
|
||
chartMetric = b.dataset.metric;
|
||
try { localStorage.setItem("thermograph:chartMetric", chartMetric); } catch (e) {}
|
||
buildChart(data);
|
||
});
|
||
attachChartHover(wrap, chartDays);
|
||
}
|
||
|
||
// ---- share ----
|
||
function copyShareLink() {
|
||
if (!selected) return;
|
||
const url = `${location.origin}${location.pathname}${locHash(selected.lat, selected.lon, dateInput.value)}`;
|
||
navigator.clipboard.writeText(url).then(
|
||
() => flashBtn("btn-link", "✓ Copied!"),
|
||
() => { prompt("Copy this link:", url); }
|
||
);
|
||
}
|
||
|
||
// Build a table of graded days as SVG markup, stacked below the chart.
|
||
function exportTableSvg(C) {
|
||
const rows = lastGraded.recent; // newest first (matches the on-screen table)
|
||
const rowH = 27, headH = 42, padB = 16;
|
||
const top = H + 10;
|
||
const cDate = PL, cPcp = PL + 150, cHigh = PL + 322, cLow = PL + 494;
|
||
const totalH = top + headH + rows.length * rowH + padB;
|
||
|
||
const cell = (x, g, isPcp) => {
|
||
if (!g) return `<text x="${x}" y="0" font-size="12" fill="${C.muted}">—</text>`;
|
||
const color = TIER_COLORS[g.class] || C.ink;
|
||
const v = isPcp ? `${g.value.toFixed(2)}"` : fmtTemp(g.value);
|
||
return `<text x="${x}" y="0"><tspan font-size="13" font-weight="700" fill="${C.ink}">${v}</tspan>` +
|
||
`<tspan dx="7" font-size="11" font-weight="600" fill="${color}">${esc(g.grade)}</tspan></text>`;
|
||
};
|
||
|
||
const th = (x, t) =>
|
||
`<text x="${x}" y="${top + 30}" font-size="10.5" font-weight="700" letter-spacing="0.05em" fill="${C.muted}">${t}</text>`;
|
||
|
||
let body = "";
|
||
rows.forEach((d, i) => {
|
||
const y = top + headH + i * rowH;
|
||
const dt = new Date(d.date + "T00:00:00");
|
||
const dstr = dt.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
|
||
body += `<g transform="translate(0 ${y})">` +
|
||
(i ? `<line x1="${PL}" y1="-7" x2="${W - PR}" y2="-7" stroke="${C.grid}" stroke-width="1"/>` : "") +
|
||
`<text x="${cDate}" y="0" font-size="12.5" fill="${C.ink}">${esc(dstr)}</text>` +
|
||
cell(cPcp, d.precip, true) + cell(cHigh, d.tmax, false) + cell(cLow, d.tmin, false) +
|
||
`</g>`;
|
||
});
|
||
|
||
const markup = `
|
||
<text x="${PL}" y="${top + 8}" font-size="13" font-weight="700" fill="${C.ink}">Recent days, graded: ${esc(placeLabel(lastGraded))}</text>
|
||
${th(cDate, "DATE")}${th(cPcp, "PRECIP")}${th(cHigh, "HIGH")}${th(cLow, "LOW")}
|
||
<line x1="${PL}" y1="${top + headH - 9}" x2="${W - PR}" y2="${top + headH - 9}" stroke="${C.grid}" stroke-width="1.5"/>
|
||
${body}`;
|
||
return { markup, totalH };
|
||
}
|
||
|
||
function downloadChartPng() {
|
||
const chart = document.querySelector("#chart-wrap svg");
|
||
if (!chart || !lastGraded) return;
|
||
const C = chartPalette();
|
||
|
||
// Chart body minus interactive-only layers.
|
||
const clone = chart.cloneNode(true);
|
||
const cross = clone.querySelector("#crosshair"); if (cross) cross.remove();
|
||
clone.querySelectorAll("rect.hit").forEach((r) => r.remove());
|
||
const chartInner = clone.innerHTML;
|
||
|
||
const { markup, totalH } = exportTableSvg(C);
|
||
const xml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${totalH}" width="${W * 2}" height="${totalH * 2}" font-family="system-ui, -apple-system, Segoe UI, sans-serif">` +
|
||
`<rect x="0" y="0" width="${W}" height="${totalH}" fill="${C.surface}"/>` +
|
||
chartInner + markup + `</svg>`;
|
||
|
||
const url = URL.createObjectURL(new Blob([xml], { type: "image/svg+xml;charset=utf-8" }));
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = W * 2; canvas.height = totalH * 2;
|
||
canvas.getContext("2d").drawImage(img, 0, 0);
|
||
URL.revokeObjectURL(url);
|
||
canvas.toBlob((blob) => {
|
||
const a = document.createElement("a");
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = `thermograph_${dateInput.value}.png`;
|
||
a.click();
|
||
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
|
||
flashBtn("btn-png", "✓ Saved");
|
||
}, "image/png");
|
||
};
|
||
img.src = url;
|
||
}
|
||
|
||
function flashBtn(id, text) {
|
||
const b = document.getElementById(id);
|
||
if (!b) return;
|
||
const orig = b.innerHTML; // preserve the inline icon markup
|
||
b.textContent = text;
|
||
setTimeout(() => (b.innerHTML = orig), 1600);
|
||
}
|
||
|
||
function updateHash() {
|
||
if (!selected) return;
|
||
// A guessed location is deliberately not remembered and not written into the
|
||
// URL: next visit must ask again rather than treating a guess as a choice,
|
||
// and a shared link must never carry a rough location the sender never picked.
|
||
if (approx) return;
|
||
history.replaceState(null, "", locHash(selected.lat, selected.lon, dateInput.value));
|
||
saveLastLocation(selected.lat, selected.lon, dateInput.value);
|
||
}
|
||
|
||
// Start where you left off: an explicit link (hash) wins, otherwise the last
|
||
// place you looked at (remembered across views), otherwise the default world map.
|
||
function restoreFromHash() {
|
||
const loc = loadLastLocation();
|
||
if (!loc) return;
|
||
if (loc.date) dateInput.value = loc.date;
|
||
syncTodayBtn();
|
||
selectLocation(loc.lat, loc.lon);
|
||
}
|
||
restoreFromHash();
|