feat(sats): add "why is combined lower?" bridge between hero and cascade
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 2m20s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 49s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 13s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s

Explains the intersection semantics of RWM combined — a pupil is only
counted if they met the bar in all three subjects — with a math line
showing the per-subject percentages collapsing to the combined figure.
Only renders when all four values are present; national-average pill
markers on the cascade are untouched.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-14 13:30:11 +01:00
parent 35deedcc16
commit 045dbc65b7
2 changed files with 89 additions and 0 deletions
@@ -895,6 +895,71 @@
} }
} }
/* ── RWM bridge ("Why is combined lower?") ── */
.rwmBridge {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0.5rem 0 1.5rem;
padding: 0.9rem 1rem;
background: var(--bg-secondary, #f3ede4);
border-radius: 8px;
}
.rwmBridgeIcon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent-coral, #e07256);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
margin-top: 0.05rem;
}
.rwmBridgeBody {
flex: 1;
min-width: 0;
}
.rwmBridgeText {
font-size: 0.85rem;
color: var(--text-secondary, #5c564d);
line-height: 1.5;
}
.rwmBridgeText strong {
color: var(--text-primary, #1a1612);
font-weight: 700;
}
.rwmBridgeMath {
display: flex;
gap: 0.35rem;
margin-top: 0.35rem;
flex-wrap: wrap;
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
color: var(--text-muted, #6d685f);
font-size: 0.78rem;
font-style: italic;
align-items: baseline;
}
.rwmBridgeMath strong {
color: var(--text-primary, #1a1612);
font-weight: 700;
font-style: normal;
}
.rwmBridgeMathSep {
opacity: 0.5;
}
/* ── Progress scores row (below SatsChart) ── */ /* ── Progress scores row (below SatsChart) ── */
.progressScoresRow { .progressScoresRow {
margin-top: 1.25rem; margin-top: 1.25rem;
@@ -562,6 +562,30 @@ export function SchoolDetailView({
)} )}
</div> </div>
{latestResults.rwm_expected_pct != null &&
latestResults.reading_expected_pct != null &&
latestResults.writing_expected_pct != null &&
latestResults.maths_expected_pct != null && (
<div className={styles.rwmBridge}>
<span className={styles.rwmBridgeIcon} aria-hidden="true">?</span>
<div className={styles.rwmBridgeBody}>
<div className={styles.rwmBridgeText}>
Why is combined lower? A pupil is only counted if they met the bar in{' '}
<strong>all three</strong> subjects. Some passed reading but not writing; some passed writing but not maths.
</div>
<div className={styles.rwmBridgeMath}>
<span>Reading <strong>{latestResults.reading_expected_pct.toFixed(0)}%</strong></span>
<span className={styles.rwmBridgeMathSep}>·</span>
<span>Writing <strong>{latestResults.writing_expected_pct.toFixed(0)}%</strong></span>
<span className={styles.rwmBridgeMathSep}>·</span>
<span>Maths <strong>{latestResults.maths_expected_pct.toFixed(0)}%</strong></span>
<span className={styles.rwmBridgeMathSep}></span>
<span>All three <strong>{latestResults.rwm_expected_pct.toFixed(0)}%</strong></span>
</div>
</div>
</div>
)}
<SatsChart <SatsChart
subjects={[ subjects={[
{ {