Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Weekly timeline: label dry streak instead of a dot

Browse source 
On the precip row of the recent/forecast timeline, dry days now show the
running dry-streak count ("3d" = 3 days since measurable rain), tinted by
the same dryness ramp as the chart, rather than a bare "·".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Emi Griffith 2026-07-10 18:39:47 -07:00
parent d4272e57da
commit 54e053ab46
1 changed files with 20 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
static/app.js
View file

@ -77,7 +77,8 @@ const fmtPrecip = (v) => (v == null ? "—" : `${v.toFixed(2)}"`);
const fmtWind = (v) => (v == null ? "—" : `${Math.round(v)} mph`); const fmtWind = (v) => (v == null ? "—" : `${Math.round(v)} mph`);
const fmtHumid = (v) => (v == null ? "—" : `${v.toFixed(1)} g/m³`); const fmtHumid = (v) => (v == null ? "—" : `${v.toFixed(1)} g/m³`);
// Compact cell formatters for the dense recent/forecast table (units live in the // Compact cell formatters for the dense recent/forecast table (units live in the
// column headers, so values stay short). Precip shows a dot for a dry day. // column headers, so values stay short). Dry days label the running dry streak
// (see precipCell) rather than the rain amount.
const cTemp = (v) => (v == null ? "—" : `${Math.round(v)}°`); const cTemp = (v) => (v == null ? "—" : `${Math.round(v)}°`);
const cHum = (v) => (v == null ? "—" : `${Math.round(v)}%`); const cHum = (v) => (v == null ? "—" : `${Math.round(v)}%`);
const cWind = (v) => (v == null ? "—" : `${Math.round(v)}`); const cWind = (v) => (v == null ? "—" : `${Math.round(v)}`);
@ -177,6 +178,21 @@ function rdCell(g, fmt, date, isFc, isToday) {
return `<span class="${cls}"${dd} style="--c:${col}">${fmt(g.value)}</span>`; 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). // 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 // 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. // metric-label column stays pinned. Tapping any cell/day opens that day's detail.
@ -197,7 +213,9 @@ function daysTable(rows, todayDate) {
}).join(""); }).join("");
const body = RD_METRICS.map(([key, label, fmt]) => const body = RD_METRICS.map(([key, label, fmt]) =>
`<div class="rd-mlabel">${label}</div>` + `<div class="rd-mlabel">${label}</div>` +
rows.map((d) => rdCell(d[key], fmt, d.date, isFc(d), d.date === todayDate)).join("") rows.map((d) => key === "precip"
? precipCell(d, isFc(d), d.date === todayDate)
: rdCell(d[key], fmt, d.date, isFc(d), d.date === todayDate)).join("")
).join(""); ).join("");
return `<div class="rd-scroll"><div class="rd-grid" style="${cols}">${header}${body}</div></div>`; return `<div class="rd-scroll"><div class="rd-grid" style="${cols}">${header}${body}</div></div>`;
} }