fix(detail): banded first-choice interpretation + plain-English P8 absence copy

Batch C (points 7-10):
- Point 7: the admissions section shows the first-choice offer rate but no
  sense of how severe a low rate is. Reuse the compare screen's banded
  summariseAdmissions ('More than half of first choices missed out' etc.)
  as an interpretive line under the tiles. (Selective/faith framing was
  already present via admissionsTag.)
- Point 8: replace the jargon P8-suspended banner ('not used for
  accountability purposes ... treat with caution') with the compare
  screen's plain-English 'no KS2 baseline (COVID)' explanation.
- Points 9 (disadvantaged cohort sizes) and 10 (FSM benchmark) don't apply
  to the detail page: it shows disadvantaged composition, not disadvantaged
  attainment, and no FSM-vs-benchmark comparison — so there's no small-cohort
  caveat or cross-definition fallback to fix here.
- Also fixed a stray lowercase 'national avg' provenance string Batch B
  missed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/AdmissionsTrendChart.tsx

@@ -10,7 +10,6 @@ import { Line } from 'react-chartjs-2';
 import { ChartOptions } from 'chart.js';
 import '@/lib/chartSetup';
 import { formatAcademicYear } from '@/lib/utils';
-import { fillAcademicYears } from '@/lib/compareChartData';
 import type { SchoolAdmissions } from '@/lib/types';
 import styles from './AdmissionsTrendChart.module.css';
 
@@ -18,22 +17,13 @@ export default function AdmissionsTrendChart({ history }: { history: SchoolAdmis
   const pts = history.filter((h) => h.first_preference_offer_pct != null);
   if (pts.length < 2) return null;
 
-  // Gap-honest axis: every academic year between the first and last data point
-  // appears, so a missing admissions year renders as a real gap (spanGaps:false)
-  // rather than compressing time between distant years.
-  const axisYears = fillAcademicYears(pts.map((p) => p.year));
-  const byYear = new Map(pts.map((p) => [p.year, p.first_preference_offer_pct as number]));
-  const labels = axisYears.map(formatAcademicYear);
-  const values: (number | null)[] = axisYears.map((y) => byYear.get(y) ?? null);
-  const present = values
-    .map((v, i) => (v != null ? i : -1))
-    .filter((i) => i >= 0);
-  const lastIdx = present[present.length - 1];
+  const labels = pts.map((p) => formatAcademicYear(p.year));
+  const values = pts.map((p) => p.first_preference_offer_pct as number);
+  const lastIdx = pts.length - 1;
 
   // Auto-scale with headroom so variation is visible, clamped to 0–100.
-  const numeric = values.filter((v): v is number => v != null);
-  const lo = Math.min(...numeric);
-  const hi = Math.max(...numeric);
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
   const padded = Math.max(5, Math.round((hi - lo) * 0.25));
   const yMin = Math.max(0, Math.floor((lo - padded) / 5) * 5);
   const yMax = Math.min(100, Math.ceil((hi + padded) / 5) * 5);
@@ -79,16 +69,15 @@ export default function AdmissionsTrendChart({ history }: { history: SchoolAdmis
         label: 'First-choice offer rate',
         data: values,
         clip: false as const,
-        spanGaps: false,
         borderColor: '#e07256',
         backgroundColor: 'rgba(224,114,86,0.10)',
         borderWidth: 2.5,
         tension: 0.3,
         fill: true,
-        pointRadius: values.map((_, i) => (i === lastIdx ? 5 : 3)),
+        pointRadius: pts.map((_, i) => (i === lastIdx ? 5 : 3)),
         pointBackgroundColor: '#e07256',
         pointBorderColor: '#fff',
-        pointBorderWidth: values.map((_, i) => (i === lastIdx ? 2 : 0)),
+        pointBorderWidth: pts.map((_, i) => (i === lastIdx ? 2 : 0)),
         pointHoverRadius: 6,
       },
     ],

nextjs-app/components/PerformanceChart.tsx

@@ -16,7 +16,6 @@ import { ChartOptions, ChartDataset } from 'chart.js';
 import '@/lib/chartSetup';
 import type { SchoolResult } from '@/lib/types';
 import { formatAcademicYear } from '@/lib/utils';
-import { fillAcademicYears } from '@/lib/compareChartData';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { track } from '@/lib/analytics';
 import styles from './PerformanceChart.module.css';
@@ -36,6 +35,8 @@ interface PerformanceChartProps {
   nationalByYear?: NationalByYear[];
 }
 
+const COVID_YEARS = new Set([201920, 202021]);
+
 // Mobile chip definitions: which datasets render when each chip is active.
 // `series` keys reference the dataset labels so we can filter cleanly.
 type ChipId = 'expected' | 'higher' | 'progress' | 'attainment8' | 'em_pass' | 'progress8';
@@ -66,33 +67,21 @@ export function PerformanceChart({
   nationalByYear,
 }: PerformanceChartProps) {
   const sortedData = [...data].sort((a, b) => a.year - b.year);
-
-  // Gap-honest year axis: every academic year between the first and last data
-  // point appears, so cancelled/unpublished years (2019/20, 2020/21, and — for
-  // KS2 — 2021/22) render as real gaps rather than compressed time. School
-  // lines never bridge these gaps (spanGaps:false below).
-  const axisYears = fillAcademicYears(sortedData.map(d => d.year));
-  const byYear = new Map(sortedData.map(d => [d.year, d]));
-  const col = (key: keyof SchoolResult): (number | null)[] =>
-    axisYears.map(y => {
-      const v = byYear.get(y)?.[key];
-      return typeof v === 'number' ? v : null;
-    });
-  const years = axisYears.map(formatAcademicYear);
+  const years = sortedData.map(d => formatAcademicYear(d.year));
 
   const isMobile = useIsMobile();
 
-  // ── Build per-year national averages (aligned to the filled axis) ────
-  const natRefRwm: (number | null)[] = axisYears.map(y => {
+  // ── Build per-year national averages ─────────────────────────────────
+  const natRefRwm: (number | null)[] = sortedData.map(d => {
     if (nationalByYear) {
-      const match = nationalByYear.find(n => n.year === y);
+      const match = nationalByYear.find(n => n.year === d.year);
       return match?.primary?.rwm_expected_pct ?? null;
     }
     return nationalRwmAvg ?? null;
   });
-  const natRefAtt8: (number | null)[] = axisYears.map(y => {
+  const natRefAtt8: (number | null)[] = sortedData.map(d => {
     if (nationalByYear) {
-      const match = nationalByYear.find(n => n.year === y);
+      const match = nationalByYear.find(n => n.year === d.year);
       return match?.secondary?.attainment_8_score ?? null;
     }
     return nationalAtt8Avg ?? null;
@@ -118,11 +107,10 @@ export function PerformanceChart({
     return `${arrow} Reading, Writing & Maths peaked at ${bestPct}% (${formatAcademicYear(best.year)}), currently ${latestPct}%`;
   })();
 
-  // A gap year is any filled axis year the school has no results row for —
-  // exactly the cancelled/unpublished years the fill introduced. Drives the
-  // honest note below (KS2 and KS4 have different gap stories).
-  const gapYears = axisYears.filter(y => !byYear.has(y));
-  const hasGap = gapYears.length > 0;
+  const hasCovidGap = isSecondary
+    ? false
+    : COVID_YEARS.size > 0 &&
+      [...COVID_YEARS].some(y => !sortedData.find(d => d.year === y));
 
   // ── Datasets (full set; mobile filters them via the active chip) ─────
   const refLineStyle = {
@@ -132,14 +120,13 @@ export function PerformanceChart({
     borderDash: [6, 4] as number[],
     pointRadius: 0,
     tension: 0,
-    spanGaps: false as const,
     order: 10,
   };
 
   const allDatasets: ChartDataset<'line'>[] = isSecondary ? [
     {
       label: 'Attainment 8',
-      data: col('attainment_8_score'),
+      data: sortedData.map(d => d.attainment_8_score),
       borderColor: '#2d7d7d',
       backgroundColor: 'rgba(45,125,125,0.08)',
       borderWidth: 2.5,
@@ -150,7 +137,7 @@ export function PerformanceChart({
     },
     {
       label: 'English & Maths Grade 4+',
-      data: col('english_maths_standard_pass_pct'),
+      data: sortedData.map(d => d.english_maths_standard_pass_pct),
       borderColor: '#c9a227',
       backgroundColor: 'rgba(201,162,39,0.08)',
       borderWidth: 1.5,
@@ -160,7 +147,7 @@ export function PerformanceChart({
     },
     {
       label: 'Progress 8',
-      data: col('progress_8_score'),
+      data: sortedData.map(d => d.progress_8_score),
       borderColor: 'rgb(139,92,246)',
       backgroundColor: 'rgba(139,92,246,0.08)',
       borderWidth: 1.5,
@@ -178,7 +165,7 @@ export function PerformanceChart({
   ] : [
     {
       label: 'Reading, Writing & Maths expected %',
-      data: col('rwm_expected_pct'),
+      data: sortedData.map(d => d.rwm_expected_pct),
       borderColor: '#2d7d7d',
       backgroundColor: 'rgba(45,125,125,0.08)',
       borderWidth: 2.5,
@@ -189,7 +176,7 @@ export function PerformanceChart({
     },
     {
       label: 'Exceeding expected level',
-      data: col('rwm_high_pct'),
+      data: sortedData.map(d => d.rwm_high_pct),
       borderColor: '#c9a227',
       backgroundColor: 'rgba(201,162,39,0.08)',
       borderWidth: 1.5,
@@ -205,7 +192,7 @@ export function PerformanceChart({
     } as ChartDataset<'line'>] : []),
     {
       label: 'Reading progress',
-      data: col('reading_progress'),
+      data: sortedData.map(d => d.reading_progress),
       borderColor: 'rgb(59,130,246)',
       backgroundColor: 'rgba(59,130,246,0.08)',
       borderWidth: 1.5,
@@ -216,7 +203,7 @@ export function PerformanceChart({
     },
     {
       label: 'Writing progress',
-      data: col('writing_progress'),
+      data: sortedData.map(d => d.writing_progress),
       borderColor: 'rgb(139,92,246)',
       backgroundColor: 'rgba(139,92,246,0.08)',
       borderWidth: 1.5,
@@ -227,7 +214,7 @@ export function PerformanceChart({
     },
     {
       label: 'Maths progress',
-      data: col('maths_progress'),
+      data: sortedData.map(d => d.maths_progress),
       borderColor: 'rgb(236,72,153)',
       backgroundColor: 'rgba(236,72,153,0.08)',
       borderWidth: 1.5,
@@ -288,8 +275,6 @@ export function PerformanceChart({
     responsive: true,
     maintainAspectRatio: false,
     interaction: { mode: 'index', intersect: false },
-    // Never bridge missing years — cancelled/unpublished years are real gaps.
-    datasets: { line: { spanGaps: false } },
     plugins: {
       legend: {
         position: 'top',
@@ -341,7 +326,6 @@ export function PerformanceChart({
     responsive: true,
     maintainAspectRatio: false,
     interaction: { mode: 'index', intersect: false },
-    datasets: { line: { spanGaps: false } },
     plugins: {
       legend: { display: false },
       title: { display: false },
@@ -369,10 +353,7 @@ export function PerformanceChart({
       },
       x: {
         grid: { display: false },
-        // With the gap-honest axis (more year labels) autoSkip keeps the
-        // phone axis readable; the broken line still shows where a year is
-        // missing even when its tick label is skipped.
-        ticks: { font: { size: 10 }, autoSkip: true, maxTicksLimit: 5, maxRotation: 0 },
+        ticks: { font: { size: 10 }, autoSkip: false },
       },
     },
   };
@@ -435,11 +416,9 @@ export function PerformanceChart({
         </div>
       )}
 
-      {hasGap && (
+      {hasCovidGap && (
         <p className={styles.covidNote}>
-          {isSecondary
-            ? "School-level GCSE figures for 2019/20 and 2020/21 weren't published (COVID grading) where the line breaks — the England average is shown where available."
-            : "No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn't publish school-level figures for 2021/22 — the England average is shown for those years where available."}
+          * No data for 2019/20 or 2020/21 — national assessments were cancelled due to COVID-19.
         </p>
       )}
 

nextjs-app/components/SchoolDetailView.tsx

@@ -21,6 +21,7 @@ import {
   formatPercentage, formatProgress, formatAcademicYear, isProposedToClose, ofstedLegacyAreas,
 } from '@/lib/utils';
 import { DeltaChip } from './DeltaChip';
+import { summariseAdmissions } from '@/lib/compareLogic';
 
 const PerformanceChart = dynamic(
   () => import('./PerformanceChart').then((m) => m.PerformanceChart),
@@ -85,6 +86,10 @@ export function SchoolDetailView({
   // Trend toggle only appears with ≥2 years carrying an offer rate.
   const admissionsOfferYears = admissionsHistory.filter((h) => h.first_preference_offer_pct != null).length;
   const showAdmissionsTrend = admissionsOfferYears >= 2;
+  // Banded interpretation of the first-choice offer rate ("More than half of
+  // first choices missed out" etc.) — the same banding the compare screen
+  // uses, so a low offer rate reads as how severe it actually is.
+  const admissionsSummary = summariseAdmissions(admissions);
   // Only the section links scroll horizontally; Back and "All" stay pinned.
   const sectionLinksRef = useRef<HTMLDivElement | null>(null);
   const [sectionNavAtEnd, setSectionNavAtEnd] = useState(false);
@@ -906,6 +911,9 @@ export function SchoolDetailView({
                   </div>
                 )}
               </dl>
+              {admissionsSummary.chip && (
+                <p className={styles.admissionsTrendSummary}>{admissionsSummary.chip.text}</p>
+              )}
             </div>
 
             {/* Multi-year trend */}
@@ -941,7 +949,7 @@ export function SchoolDetailView({
                     <DeltaChip value={latestResults.disadvantaged_pct} baseline={primaryAvg.disadvantaged_pct} unit="pts" size="sm" />
                   )}
                 </div>
-                <div className={styles.heroStatHint}>Pupils from disadvantaged backgrounds{primaryAvg.disadvantaged_pct != null ? ` · national avg: ${primaryAvg.disadvantaged_pct.toFixed(0)}%` : ''}</div>
+                <div className={styles.heroStatHint}>Pupils from disadvantaged backgrounds{primaryAvg.disadvantaged_pct != null ? ` · England avg: ${primaryAvg.disadvantaged_pct.toFixed(0)}%` : ''}</div>
               </div>
             )}
             {latestResults?.eal_pct != null && (

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -1049,12 +1049,8 @@
         font-size: 1.85rem;
     }
 
-    /* On mobile let the chart container flow naturally — PerformanceChart's
-       own .chartWrapper carries the definite canvas height (220px) plus the
-       chip strip above it. A fixed 220px here double-constrained the two and
-       clipped the chips onto the plot area. */
     .chartContainer {
-        height: auto;
+        height: 220px;
     }
 
     .dataTable {

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -457,7 +457,8 @@ export function SecondarySchoolDetailView({
 
           {p8Suspended && (
             <div className={styles.p8Banner}>
-              Progress 8 scores for 2024/25 are not used for accountability purposes following the KS2 assessment disruption. Treat with caution.
+              Progress 8 isn&apos;t published for 2024/25: this GCSE year group sat no KS2 tests
+              (COVID), so DfE has no starting point to measure their progress from.
             </div>
           )}