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

Stack score-card tier labels; clarify the wet-bulb explainer (#201)

Browse source 
On a narrow (2-up) phone card, a long grade like 'Extreme shift — windier'
crammed into the card's top-right corner and wrapped into a cluster. Restructure
each card to a clean vertical stack — metric name, score, tier, detail line — so
the label always has room, on mobile and desktop alike.

Also reword the wet-bulb explainer to state plainly what it is (the lowest
temperature evaporating sweat can cool you to).
This commit is contained in:
Emi Griffith 2026-07-19 17:22:38 -07:00 committed by GitHub
parent c008ece671
commit 9823fd47ec
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/score.js
View file

@ -148,8 +148,8 @@ function render(data) {
// Explains what wet bulb is and reports the share of heat-stress ("wet-bulb") // Explains what wet bulb is and reports the share of heat-stress ("wet-bulb")
// days vs normal days, recent vs baseline. Re-rendered on unit change. // days vs normal days, recent vs baseline. Re-rendered on unit change.
function wetbulbNote(m, baseYrs) { function wetbulbNote(m, baseYrs) {
const def = `<strong>Wet bulb</strong> is how cool evaporation — like sweat — can make you in the const def = `<strong>Wet bulb</strong> is the lowest temperature that evaporating sweat can cool you to.
current air. When it climbs, sweat stops shedding heat and high temperatures turn dangerous.`; When it climbs, sweat can't shed heat fast enough and hot days turn dangerous.`;
if (!m || m.score == null || !m.freq) { if (!m || m.score == null || !m.freq) {
return `<p class="score-callout">${def}</p>`; return `<p class="score-callout">${def}</p>`;
} }
@ -161,28 +161,30 @@ function wetbulbNote(m, baseYrs) {
vs <strong>${f45}%</strong> across ${baseYrs}${delta} — the rest are normal.</p>`; vs <strong>${f45}%</strong> across ${baseYrs}${delta} — the rest are normal.</p>`;
} }
// One metric score card (reuses .normal-card). Null metrics show a muted reason. // One metric score card. The tier and its direction stack under the score on
// their own lines (rather than crammed top-right), so a long grade like
// "Extreme shift — windier" never clusters in the corner on a narrow card.
function metricCard(m) { function metricCard(m) {
if (!m) return ""; if (!m) return "";
if (m.score == null) { if (m.score == null) {
return `<section class="normal-card"> return `<section class="normal-card score-card">
<div class="nc-head"><h3>${esc(m.label)}</h3></div> <h3>${esc(m.label)}</h3>
<div class="big" style="--cat:var(--muted)">—</div> <div class="big" style="--cat:var(--muted)">—</div>
<div class="range">${esc(m.reason || "no data")}</div> <div class="range">${esc(m.reason || "no data")}</div>
</section>`; </section>`;
} }
return `<section class="normal-card" style="--cat:${tintColor(m.class)}"> return `<section class="normal-card score-card" style="--cat:${tintColor(m.class)}">
<div class="nc-head"><h3>${esc(m.label)}</h3><span class="nc-grade">${esc(m.grade)}</span></div> <h3>${esc(m.label)}</h3>
<div class="big">${m.score}</div> <div class="big">${m.score}</div>
<div class="range">${scoreDirection(m)}</div> <div class="nc-tier">${esc(m.tier)}</div>
<div class="range">${scoreDetail(m)}</div>
</section>`; </section>`;
} }
// A short "shifted N pts warmer" line for a metric card. // The muted detail line under a card's tier — the signed drift, or a steady note.
function scoreDirection(m) { function scoreDetail(m) {
if (m.score < 15) return "steady vs the long-term normal"; if (m.score < 15) return "close to the long-term normal";
const pts = Math.abs(m.bias).toFixed(0); return `~${Math.abs(m.bias).toFixed(0)} pts ${esc(m.direction)}`;
return `~${pts} pts ${esc(m.direction)}`;
} }
function seasonCell(m) { function seasonCell(m) {

9
static/style.css
View file

@ -1731,6 +1731,15 @@ td.rec-date { color: var(--muted); font-size: 13px; }
.score-section { margin: 20px 0; } .score-section { margin: 20px 0; }
/* Score metric cards: name · score · tier · detail, each on its own line so a
long grade never crams into the corner on a narrow (2-up) phone card. */
.score-card h3 { margin-bottom: 6px; }
.score-card .nc-tier {
font-size: 12px; font-weight: 700; margin-top: 3px; line-height: 1.25;
color: color-mix(in oklab, var(--cat, var(--muted)), var(--text) 22%);
}
.score-card .range { margin-top: 1px; }
/* Wet-bulb explainer + heat-stress-day share. */ /* Wet-bulb explainer + heat-stress-day share. */
.score-callout { .score-callout {
background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;