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

feat(detail): replace SATs text tables with cascade bar charts, add admissions bar and history accordion
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 13s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Redesign the School Details page for better parent comprehension:
- New SatsChart component: horizontal cascade bars with ruler scale and
  national average marker (teal/coral palette matching site theme)
- Admissions section: visual progress bar showing 1st-preference demand
  vs available places, colour-coded by oversubscription status
- Historical data: collapse raw year-by-year table behind a disclosure
  element while keeping the performance line chart always visible
- EAL metric: add national average comparison via DeltaChip (backend now
  includes eal_pct in national averages endpoint)
- New formatWithSuppression utility for null/suppressed data handling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-13 21:22:24 +01:00
parent 8ce34b3ecc
commit 3bf2e8f262
6 changed files with 506 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.tsx
+68 -112
View File
@@ -22,6 +22,7 @@ import {
buildOfstedHeroChip,
} from '@/lib/utils';
import { DeltaChip } from './DeltaChip';
import SatsChart from './SatsChart';
import styles from './SchoolDetailView.module.css';
const OFSTED_LABELS: Record<number, string> = {
@@ -561,127 +562,61 @@ export function SchoolDetailView({
)}
</div>
<div className={styles.metricGroupsGrid} style={{ marginTop: '1rem' }}>
<div className={styles.metricGroup}>
<h3 className={styles.metricGroupTitle}>Reading</h3>
<div className={styles.metricTable}>
{latestResults.reading_expected_pct !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>Expected level</span>
<span className={styles.metricValue}>
{formatPercentage(latestResults.reading_expected_pct)}
{primaryAvg.reading_expected_pct != null && (
<DeltaChip value={latestResults.reading_expected_pct} baseline={primaryAvg.reading_expected_pct} unit="pts" size="sm" />
)}
</span>
</div>
)}
{latestResults.reading_high_pct !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>Exceeding</span>
<span className={styles.metricValue}>{formatPercentage(latestResults.reading_high_pct)}</span>
</div>
)}
{latestResults.reading_progress !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>
Progress score
<MetricTooltip metricKey="reading_progress" />
</span>
<span className={`${styles.metricValue} ${progressClass(latestResults.reading_progress)}`}>
<SatsChart
subjects={[
{
name: 'Reading',
expectedPct: latestResults.reading_expected_pct,
exceedingPct: latestResults.reading_high_pct,
nationalExpectedPct: primaryAvg.reading_expected_pct,
},
{
name: 'Writing',
expectedPct: latestResults.writing_expected_pct,
exceedingPct: latestResults.writing_high_pct,
nationalExpectedPct: primaryAvg.writing_expected_pct,
},
{
name: 'Maths',
expectedPct: latestResults.maths_expected_pct,
exceedingPct: latestResults.maths_high_pct,
nationalExpectedPct: primaryAvg.maths_expected_pct,
},
]}
/>
{/* Progress scores row */}
{(latestResults.reading_progress != null || latestResults.writing_progress != null || latestResults.maths_progress != null) && (
<div className={styles.progressScoresRow}>
<h3 className={styles.subSectionTitle}>Progress Scores</h3>
<div className={styles.progressScoresGrid}>
{latestResults.reading_progress != null && (
<div className={styles.progressScoreItem}>
<span className={styles.progressScoreLabel}>Reading</span>
<span className={`${styles.progressScoreValue} ${progressClass(latestResults.reading_progress)}`}>
{formatProgress(latestResults.reading_progress)}
</span>
</div>
)}
{latestResults.reading_avg_score !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>
Average score
<MetricTooltip metricKey="reading_avg_score" />
</span>
<span className={styles.metricValue}>{latestResults.reading_avg_score.toFixed(1)}</span>
</div>
)}
</div>
</div>
<div className={styles.metricGroup}>
<h3 className={styles.metricGroupTitle}>Writing</h3>
<div className={styles.metricTable}>
{latestResults.writing_expected_pct !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>Expected level</span>
<span className={styles.metricValue}>
{formatPercentage(latestResults.writing_expected_pct)}
{primaryAvg.writing_expected_pct != null && (
<DeltaChip value={latestResults.writing_expected_pct} baseline={primaryAvg.writing_expected_pct} unit="pts" size="sm" />
)}
</span>
</div>
)}
{latestResults.writing_high_pct !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>Exceeding</span>
<span className={styles.metricValue}>{formatPercentage(latestResults.writing_high_pct)}</span>
</div>
)}
{latestResults.writing_progress !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>
Progress score
<MetricTooltip metricKey="writing_progress" />
</span>
<span className={`${styles.metricValue} ${progressClass(latestResults.writing_progress)}`}>
{latestResults.writing_progress != null && (
<div className={styles.progressScoreItem}>
<span className={styles.progressScoreLabel}>Writing</span>
<span className={`${styles.progressScoreValue} ${progressClass(latestResults.writing_progress)}`}>
{formatProgress(latestResults.writing_progress)}
</span>
</div>
)}
</div>
</div>
<div className={styles.metricGroup}>
<h3 className={styles.metricGroupTitle}>Maths</h3>
<div className={styles.metricTable}>
{latestResults.maths_expected_pct !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>Expected level</span>
<span className={styles.metricValue}>
{formatPercentage(latestResults.maths_expected_pct)}
{primaryAvg.maths_expected_pct != null && (
<DeltaChip value={latestResults.maths_expected_pct} baseline={primaryAvg.maths_expected_pct} unit="pts" size="sm" />
)}
</span>
</div>
)}
{latestResults.maths_high_pct !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>Exceeding</span>
<span className={styles.metricValue}>{formatPercentage(latestResults.maths_high_pct)}</span>
</div>
)}
{latestResults.maths_progress !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>
Progress score
<MetricTooltip metricKey="maths_progress" />
</span>
<span className={`${styles.metricValue} ${progressClass(latestResults.maths_progress)}`}>
{latestResults.maths_progress != null && (
<div className={styles.progressScoreItem}>
<span className={styles.progressScoreLabel}>Maths</span>
<span className={`${styles.progressScoreValue} ${progressClass(latestResults.maths_progress)}`}>
{formatProgress(latestResults.maths_progress)}
</span>
</div>
)}
{latestResults.maths_avg_score !== null && (
<div className={styles.metricRow}>
<span className={styles.metricName}>
Average score
<MetricTooltip metricKey="maths_avg_score" />
</span>
<span className={styles.metricValue}>{latestResults.maths_avg_score.toFixed(1)}</span>
</div>
)}
</div>
</div>
</div>
)}
{(latestResults.reading_progress !== null || latestResults.writing_progress !== null || latestResults.maths_progress !== null) && (
<p className={styles.progressNote}>
@@ -852,7 +787,20 @@ export function SchoolDetailView({
{admissions && (
<section id="admissions" className={styles.card}>
<h2 className={styles.sectionTitle}>How Hard to Get Into This School ({formatAcademicYear(admissions.year)})</h2>
{admissions.oversubscribed != null && (
{admissions.first_preference_applications != null && admissions.published_admission_number != null && (
<div className={styles.admissionsBarWrap}>
<div className={styles.admissionsBarLabel}>
<strong>{admissions.published_admission_number}</strong> places for <strong>{admissions.first_preference_applications}</strong> first-choice applications
</div>
<div className={styles.admissionsBarTrack}>
<div
className={`${styles.admissionsBarFill} ${admissions.oversubscribed ? styles.admissionsBarOversubscribed : styles.admissionsBarUndersubscribed}`}
style={{ width: `${Math.min(100, (admissions.published_admission_number / admissions.first_preference_applications) * 100)}%` }}
/>
</div>
</div>
)}
{admissions.first_preference_applications == null && admissions.oversubscribed != null && (
<div className={`${styles.admissionsBadge} ${admissions.oversubscribed ? styles.statusWarn : styles.statusGood}`}>
{admissions.oversubscribed
? '⚠ Oversubscribed'
@@ -905,7 +853,15 @@ export function SchoolDetailView({
English as an additional language
<MetricTooltip metricKey="eal_pct" />
</div>
<div className={styles.metricValue}>{formatPercentage(latestResults.eal_pct)}</div>
<div className={styles.metricValue}>
{formatPercentage(latestResults.eal_pct)}
{primaryAvg.eal_pct != null && (
<DeltaChip value={latestResults.eal_pct} baseline={primaryAvg.eal_pct} unit="pts" size="sm" />
)}
</div>
{primaryAvg.eal_pct != null && (
<div className={styles.metricHint}>National avg: {primaryAvg.eal_pct.toFixed(0)}%</div>
)}
</div>
)}
{latestResults?.sen_support_pct != null && (
@@ -1034,8 +990,8 @@ export function SchoolDetailView({
/>
</div>
{yearlyData.length > 1 && (
<>
<p className={styles.historicalSubtitle}>Detailed year-by-year figures</p>
<details className={styles.historyDisclosure}>
<summary className={styles.historyToggle}>View raw year-by-year data</summary>
<div className={styles.tableWrapper}>
<table className={styles.dataTable}>
<thead>
@@ -1084,7 +1040,7 @@ export function SchoolDetailView({
</tbody>
</table>
</div>
</>
</details>
)}
</section>
)}