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

refactor(primary): move gender split out of header into Pupils & Inclusion
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 48s
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 
Header "Pupils" line reverts to plain inline text matching Headteacher
and website weight. Gender split lives in Pupils & Inclusion as a card
alongside pupil premium / EAL / SEN support — peers of similar weight.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-17 22:52:59 +01:00
parent 675601869b
commit 1fb4b3ec5e
2 changed files with 72 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.tsx
+46 -49
View File
@@ -109,11 +109,19 @@ export function SchoolDetailView({
return `This school is in one of England's less deprived areas (decile ${decile}/10).`;
};
// Gender split availability (only meaningful for Mixed schools with census data)
const isMixedSchool = schoolInfo.gender === 'Mixed' || schoolInfo.gender == null;
const hasGenderSplit = isMixedSchool
&& census?.female_pupils != null
&& census?.male_pupils != null
&& (census.female_pupils + census.male_pupils) > 0;
// Guard for Pupils & Inclusion — only show if at least one metric is available
const hasInclusionData = (latestResults?.disadvantaged_pct != null)
|| (latestResults?.eal_pct != null)
|| (latestResults?.sen_support_pct != null)
|| senDetail != null;
|| senDetail != null
|| hasGenderSplit;
const hasSchoolLife = absenceData != null || census?.class_size_avg != null;
const hasPhonics = phonics != null && phonics.year1_phonics_pct != null;
@@ -236,54 +244,14 @@ export function SchoolDetailView({
</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;
const total = census?.total_pupils ?? latestResults?.total_pupils ?? null;
if (total == null) return null;
return (
<span className={styles.headerDetail}>
<strong>Pupils:</strong> {total.toLocaleString()}
{schoolInfo.capacity != null && ` (capacity: ${schoolInfo.capacity})`}
</span>
);
})()}
{schoolInfo.trust_name && (
<span className={styles.headerDetail}>
@@ -962,6 +930,35 @@ export function SchoolDetailView({
)}
</div>
)}
{hasGenderSplit && (() => {
const female = census!.female_pupils!;
const male = census!.male_pupils!;
const girlsPct = Math.round((female / (female + male)) * 100);
const boysPct = 100 - girlsPct;
return (
<div className={styles.heroStatCard}>
<div className={styles.heroStatLabel}>Boys and girls</div>
<div className={styles.genderSplitValue}>
<span className={styles.genderSplitGirls}>{girlsPct}%</span>
<span className={styles.genderSplitLabel}>girls</span>
<span className={styles.genderSplitSep}>·</span>
<span className={styles.genderSplitBoys}>{boysPct}%</span>
<span className={styles.genderSplitLabel}>boys</span>
</div>
<div
className={styles.genderBar}
role="img"
aria-label={`Gender split: ${girlsPct}% girls, ${boysPct}% boys`}
>
<span className={styles.genderBarGirls} style={{ width: `${girlsPct}%` }} />
<span className={styles.genderBarBoys} style={{ width: `${boysPct}%` }} />
</div>
<div className={styles.heroStatHint}>
{female.toLocaleString()} girls, {male.toLocaleString()} boys
</div>
</div>
);
})()}
</div>
{senDetail && (
<>