Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 9 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")
// days vs normal days, recent vs baseline. Re-rendered on unit change.
function wetbulbNote(m, baseYrs) {
const def = `<strong>Wet bulb</strong> is how cool evaporation — like sweat — can make you in the
current air. When it climbs, sweat stops shedding heat and high temperatures turn dangerous.`;
const def = `<strong>Wet bulb</strong> is the lowest temperature that evaporating sweat can cool you to.
When it climbs, sweat can't shed heat fast enough and hot days turn dangerous.`;
if (!m || m.score == null || !m.freq) {
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>`;
}
// 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) {
if (!m) return "";
if (m.score == null) {
return `<section class="normal-card">
<div class="nc-head"><h3>${esc(m.label)}</h3></div>
return `<section class="normal-card score-card">
<h3>${esc(m.label)}</h3>
<div class="big" style="--cat:var(--muted)">—</div>
<div class="range">${esc(m.reason || "no data")}</div>
</section>`;
}
return `<section class="normal-card" style="--cat:${tintColor(m.class)}">
<div class="nc-head"><h3>${esc(m.label)}</h3><span class="nc-grade">${esc(m.grade)}</span></div>
return `<section class="normal-card score-card" style="--cat:${tintColor(m.class)}">
<h3>${esc(m.label)}</h3>
<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>`;
}
// A short "shifted N pts warmer" line for a metric card.
function scoreDirection(m) {
if (m.score < 15) return "steady vs the long-term normal";
const pts = Math.abs(m.bias).toFixed(0);
return `~${pts} pts ${esc(m.direction)}`;
// The muted detail line under a card's tier — the signed drift, or a steady note.
function scoreDetail(m) {
if (m.score < 15) return "close to the long-term normal";
return `~${Math.abs(m.bias).toFixed(0)} pts ${esc(m.direction)}`;
}
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 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. */
.score-callout {
background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;