tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(detail): show pupil gender split on school detail pages
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 19s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 46s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Upgrades the existing "Pupils" stat to include a compact split bar and
percentage hint for mixed schools (single-sex schools already carry a
"Boys's/Girls's school" badge, so the split would be redundant).

Wires fact_pupil_characteristics into the API: new SQLAlchemy model and
a real census block in /api/schools/{urn} replacing the prior null stub.

On the primary detail page the inline "Pupils: 241" text is replaced by
a richer block (display number + bar + "52% girls · 48% boys"). On the
secondary detail page the existing "Total pupils" hero stat card grows
the bar and hint beneath the number. Both fall back to the previous
text-only rendering when census gender data is missing.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-17 22:36:33 +01:00
parent b7da3054e1
commit 675601869b
7 changed files with 260 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.tsx
+50 -6
View File
@@ -235,12 +235,56 @@ export function SchoolDetailView({
</a>
</span>
)}
{latestResults?.total_pupils != null && (
<span className={styles.headerDetail}>
<strong>Pupils:</strong> {latestResults.total_pupils.toLocaleString()}
{schoolInfo.capacity != null && ` (capacity: ${schoolInfo.capacity})`}
</span>
)}
{(() => {
const censusTotal = census?.total_pupils ?? null;
const female = census?.female_pupils ?? null;
const male = census?.male_pupils ?? null;
const total = censusTotal ?? latestResults?.total_pupils ?? null;
const isMixed = schoolInfo.gender === 'Mixed' || schoolInfo.gender == null;
const hasSplit = isMixed && female != null && male != null && female + male > 0;
if (hasSplit && total != null) {
const sum = female! + male!;
const girlsPct = Math.round((female! / sum) * 100);
const boysPct = 100 - girlsPct;
return (
<div className={styles.pupilsBlock}>
<div className={styles.pupilsFigure}>{total.toLocaleString()}</div>
<div className={styles.pupilsInfo}>
<div className={styles.pupilsLegend}>
pupils
{schoolInfo.capacity != null && (
<span className={styles.pupilsCapacity}> · capacity {schoolInfo.capacity.toLocaleString()}</span>
)}
</div>
<div className={styles.pupilsSplitRow}>
<span className={styles.pupilsSplitGirls}>{girlsPct}% girls</span>
<span className={styles.pupilsSplitSep}>·</span>
<span className={styles.pupilsSplitBoys}>{boysPct}% boys</span>
</div>
<div
className={styles.pupilsBar}
role="img"
aria-label={`Gender split: ${girlsPct}% girls, ${boysPct}% boys`}
>
<span className={styles.pupilsBarGirls} style={{ width: `${girlsPct}%` }} />
<span className={styles.pupilsBarBoys} style={{ width: `${boysPct}%` }} />
</div>
</div>
</div>
);
}
if (total != null) {
return (
<span className={styles.headerDetail}>
<strong>Pupils:</strong> {total.toLocaleString()}
{schoolInfo.capacity != null && ` (capacity: ${schoolInfo.capacity})`}
</span>
);
}
return null;
})()}
{schoolInfo.trust_name && (
<span className={styles.headerDetail}>
Part of <strong>{schoolInfo.trust_name}</strong>