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/SecondarySchoolDetailView.tsx
+38 -10
View File
@@ -70,7 +70,7 @@ interface SecondarySchoolDetailViewProps {
export function SecondarySchoolDetailView({
schoolInfo, yearlyData,
ofsted, parentView, admissions, senDetail, deprivation, finance, absenceData,
ofsted, parentView, census, admissions, senDetail, deprivation, finance, absenceData,
}: SecondarySchoolDetailViewProps) {
const router = useRouter();
const { addSchool, removeSchool, isSelected } = useComparison();
@@ -793,15 +793,43 @@ export function SecondarySchoolDetailView({
<div className={styles.heroStatHint}>Education, Health and Care Plan</div>
</div>
)}
{(schoolInfo.total_pupils != null || latestResults?.total_pupils != null) && (
<div className={styles.heroStatCard}>
<div className={styles.heroStatLabel}>Total pupils</div>
<div className={styles.heroStatValue}>{(schoolInfo.total_pupils ?? latestResults!.total_pupils!).toLocaleString()}</div>
{schoolInfo.capacity != null && (
<div className={styles.heroStatHint}>Capacity: {schoolInfo.capacity}</div>
)}
</div>
)}
{(() => {
const total = census?.total_pupils ?? schoolInfo.total_pupils ?? latestResults?.total_pupils ?? null;
if (total == null) return null;
const female = census?.female_pupils ?? null;
const male = census?.male_pupils ?? null;
const isMixed = schoolInfo.gender === 'Mixed' || schoolInfo.gender == null;
const hasSplit = isMixed && female != null && male != null && female + male > 0;
const sum = hasSplit ? female! + male! : 0;
const girlsPct = hasSplit ? Math.round((female! / sum) * 100) : 0;
const boysPct = hasSplit ? 100 - girlsPct : 0;
return (
<div className={styles.heroStatCard}>
<div className={styles.heroStatLabel}>Total pupils</div>
<div className={styles.heroStatValue}>{total.toLocaleString()}</div>
{hasSplit && (
<>
<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.genderSplitHint}>
<span className={styles.genderSplitGirls}>{girlsPct}% girls</span>
<span className={styles.genderSplitSep}> · </span>
<span className={styles.genderSplitBoys}>{boysPct}% boys</span>
</div>
</>
)}
{schoolInfo.capacity != null && !hasSplit && (
<div className={styles.heroStatHint}>Capacity: {schoolInfo.capacity}</div>
)}
</div>
);
})()}
</div>
</>
)}