diff --git a/nextjs-app/components/PerformanceChart.module.css b/nextjs-app/components/PerformanceChart.module.css index 854bd96..857c6d5 100644 --- a/nextjs-app/components/PerformanceChart.module.css +++ b/nextjs-app/components/PerformanceChart.module.css @@ -29,8 +29,98 @@ font-style: italic; } +/* ── Mobile chip selector ──────────────────────────────────────────── + Hidden on desktop. Replaces the in-chart legend on phones — one + metric at a time so the line variation is actually readable. */ + +.mobileChips { + display: none; +} + +.mobileSubtitle { + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-muted, #6d685f); + margin-bottom: 0.4rem; +} + +.chipRow { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; +} + +.chip { + border: 1px solid var(--border-color, #e5dfd5); + background: var(--bg-card, #fff); + color: var(--text-secondary, #5c564d); + padding: 0.4rem 0.75rem; + border-radius: 999px; + font-size: 0.8125rem; + font-weight: 500; + font-family: inherit; + cursor: pointer; + white-space: nowrap; + transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; + -webkit-tap-highlight-color: transparent; +} + +.chip:active { + background: var(--bg-secondary, #f3ede4); +} + +.chip:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.chipActive { + background: var(--accent-coral, #e07256); + color: white; + border-color: var(--accent-coral, #e07256); + font-weight: 600; +} + +.chipActive:active { + background: var(--accent-coral-dark, #c45a3f); +} + +.miniLegend { + display: flex; + gap: 0.875rem; + font-size: 0.75rem; + color: var(--text-secondary, #5c564d); + margin-top: -0.25rem; +} + +.miniLegend span { + display: inline-flex; + align-items: center; + gap: 0.3rem; +} + +.miniDot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; +} + @media (max-width: 768px) { .chartWrapper { font-size: 0.875rem; } } + +@media (max-width: 640px) { + .mobileChips { + display: block; + } + /* The desktop "click the legend to show progress" hint is irrelevant + once the chip row is the disclosure mechanism. */ + .chartHint { + display: none; + } +} diff --git a/nextjs-app/components/PerformanceChart.tsx b/nextjs-app/components/PerformanceChart.tsx index 9e67498..30b7d32 100644 --- a/nextjs-app/components/PerformanceChart.tsx +++ b/nextjs-app/components/PerformanceChart.tsx @@ -1,10 +1,16 @@ /** * PerformanceChart Component - * Displays school performance data over time using Chart.js + * Displays school performance data over time using Chart.js. + * + * Desktop: full multi-series chart with dual y-axis (percentage + progress). + * Mobile (≤640px): a chip selector switches the chart between one focused view + * at a time — no dual axis, no legend, auto-scaled y-axis. Designed so the + * actual variation in the data is visible on a phone instead of a flat line. */ 'use client'; +import { useEffect, useMemo, useState } from 'react'; import { Line } from 'react-chartjs-2'; import { ChartOptions, ChartDataset } from 'chart.js'; import '@/lib/chartSetup'; @@ -22,17 +28,35 @@ interface PerformanceChartProps { data: SchoolResult[]; schoolName: string; isSecondary?: boolean; - /** National average RWM expected % for the latest year — fallback if no by_year data */ nationalRwmAvg?: number | null; - /** National average Attainment 8 for the latest year — fallback if no by_year data */ nationalAtt8Avg?: number | null; - /** Per-year national averages — used to draw a changing reference line */ nationalByYear?: NationalByYear[]; } -// Academic years when SATs/GCSEs were cancelled due to COVID 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'; +interface ChipDef { + id: ChipId; + label: string; + /** Dataset labels (from the desktop dataset list below) this chip surfaces. */ + series: string[]; +} + +const PRIMARY_CHIPS: ChipDef[] = [ + { id: 'expected', label: 'At expected level', series: ['Reading, Writing & Maths expected %', 'National average'] }, + { id: 'higher', label: 'Above expected level', series: ['Exceeding expected level'] }, + { id: 'progress', label: 'Pupil progress', series: ['Reading progress', 'Writing progress', 'Maths progress'] }, +]; + +const SECONDARY_CHIPS: ChipDef[] = [ + { id: 'attainment8', label: 'Attainment 8', series: ['Attainment 8', 'National average'] }, + { id: 'em_pass', label: 'English & Maths grade 4+', series: ['English & Maths Grade 4+'] }, + { id: 'progress8', label: 'Progress 8', series: ['Progress 8'] }, +]; + export function PerformanceChart({ data, isSecondary = false, @@ -43,8 +67,18 @@ export function PerformanceChart({ const sortedData = [...data].sort((a, b) => a.year - b.year); const years = sortedData.map(d => formatAcademicYear(d.year)); - // Build per-year national average series aligned to the school's data years. - // Falls back to a flat line using the scalar prop if by_year isn't available. + // ── Mobile detection ───────────────────────────────────────────────── + // Hydration-safe: SSR renders desktop; client flips to mobile after mount. + const [isMobile, setIsMobile] = useState(false); + useEffect(() => { + const mq = window.matchMedia('(max-width: 640px)'); + const update = () => setIsMobile(mq.matches); + update(); + mq.addEventListener('change', update); + return () => mq.removeEventListener('change', update); + }, []); + + // ── Build per-year national averages ───────────────────────────────── const natRefRwm: (number | null)[] = sortedData.map(d => { if (nationalByYear) { const match = nationalByYear.find(n => n.year === d.year); @@ -62,7 +96,7 @@ export function PerformanceChart({ const hasNatRwm = natRefRwm.some(v => v != null); const hasNatAtt8 = natRefAtt8.some(v => v != null); - // ── Trend summary (primary only) ────────────────────────────────────── + // ── Trend summary (primary only — references headline metric) ──────── const trendSummary = (() => { if (isSecondary) return null; const rwm = sortedData.filter(d => d.rwm_expected_pct != null); @@ -80,13 +114,12 @@ export function PerformanceChart({ return `${arrow} Peaked at ${bestPct}% (${formatAcademicYear(best.year)}), currently ${latestPct}%`; })(); - // ── COVID gap note ───────────────────────────────────────────────────── const hasCovidGap = isSecondary ? false : COVID_YEARS.size > 0 && [...COVID_YEARS].some(y => !sortedData.find(d => d.year === y)); - // ── Datasets ────────────────────────────────────────────────────────── + // ── Datasets (full set; mobile filters them via the active chip) ───── const refLineStyle = { borderColor: 'rgba(90,80,70,0.35)', backgroundColor: 'transparent', @@ -97,7 +130,7 @@ export function PerformanceChart({ order: 10, }; - const datasets: ChartDataset<'line'>[] = isSecondary ? [ + const allDatasets: ChartDataset<'line'>[] = isSecondary ? [ { label: 'Attainment 8', data: sortedData.map(d => d.attainment_8_score), @@ -199,7 +232,53 @@ export function PerformanceChart({ }, ]; - const options: ChartOptions<'line'> = { + // ── Mobile chip state + filtered datasets ──────────────────────────── + const chips = isSecondary ? SECONDARY_CHIPS : PRIMARY_CHIPS; + + // A chip is enabled only if at least one of its series has any real data. + const chipHasData = (chip: ChipDef) => + chip.series.some(name => { + const ds = allDatasets.find(d => d.label === name); + return ds?.data?.some(v => v != null); + }); + + const firstEnabledChip = chips.find(chipHasData)?.id ?? chips[0].id; + const [activeChip, setActiveChip] = useState(firstEnabledChip); + + const activeChipDef = chips.find(c => c.id === activeChip) ?? chips[0]; + + const mobileDatasets = useMemo(() => { + return allDatasets + .filter(ds => activeChipDef.series.includes(ds.label ?? '')) + .map(ds => ({ ...ds, hidden: false, yAxisID: 'y' as const })); + }, [activeChipDef, allDatasets]); + + // Auto-scale Y axis for the mobile chart so variation is visible. + // For percentage chips: clamp to 0–100 but tighten when data sits in a band. + // For progress chips: centre on 0 with a small symmetric range. + const mobileYBounds = useMemo(() => { + const isProgress = activeChip === 'progress' || activeChip === 'progress8'; + const values: number[] = mobileDatasets.flatMap(ds => + (ds.data as Array).filter((v): v is number => typeof v === 'number') + ); + if (values.length === 0) return { min: 0, max: 100, isProgress }; + const lo = Math.min(...values); + const hi = Math.max(...values); + if (isProgress) { + const reach = Math.max(2, Math.ceil(Math.max(Math.abs(lo), Math.abs(hi)) + 0.5)); + return { min: -reach, max: reach, isProgress }; + } + // Percentage: leave headroom but never widen below 0 / above 100. + const padded = Math.max(5, Math.round((hi - lo) * 0.2)); + return { + min: Math.max(0, Math.floor((lo - padded) / 5) * 5), + max: Math.min(100, Math.ceil((hi + padded) / 5) * 5), + isProgress, + }; + }, [activeChip, mobileDatasets]); + + // ── Chart options ──────────────────────────────────────────────────── + const desktopOptions: ChartOptions<'line'> = { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, @@ -210,7 +289,6 @@ export function PerformanceChart({ usePointStyle: true, padding: 14, font: { size: 12 }, - filter: item => item.text !== 'National average' || true, }, }, title: { display: false }, @@ -225,36 +303,22 @@ export function PerformanceChart({ if (ctx.parsed.y == null) return label; const isProgress = ctx.dataset.yAxisID === 'y1'; const suffix = isProgress ? '' : '%'; - const val = ctx.parsed.y.toFixed(1); - return `${label}: ${val}${suffix}`; + return `${label}: ${ctx.parsed.y.toFixed(1)}${suffix}`; }, }, }, }, scales: { y: { - type: 'linear', - display: true, - position: 'left', - title: { - display: true, - text: isSecondary ? 'Score / %' : 'Percentage (%)', - font: { size: 11 }, - }, - min: 0, - max: isSecondary ? undefined : 100, + type: 'linear', display: true, position: 'left', + title: { display: true, text: isSecondary ? 'Score / %' : 'Percentage (%)', font: { size: 11 } }, + min: 0, max: isSecondary ? undefined : 100, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { font: { size: 11 } }, }, y1: { - type: 'linear', - display: true, - position: 'right', - title: { - display: true, - text: isSecondary ? 'Progress 8' : 'Progress score', - font: { size: 11 }, - }, + type: 'linear', display: true, position: 'right', + title: { display: true, text: isSecondary ? 'Progress 8' : 'Progress score', font: { size: 11 } }, grid: { drawOnChartArea: false }, ticks: { font: { size: 11 } }, }, @@ -265,19 +329,102 @@ export function PerformanceChart({ }, }; + const mobileOptions: ChartOptions<'line'> = { + responsive: true, + maintainAspectRatio: false, + interaction: { mode: 'index', intersect: false }, + plugins: { + legend: { display: false }, + title: { display: false }, + tooltip: { + backgroundColor: 'rgba(26,22,18,0.92)', + padding: 10, + titleFont: { size: 12 }, + bodyFont: { size: 11 }, + callbacks: { + label: ctx => { + const label = ctx.dataset.label ?? ''; + if (ctx.parsed.y == null) return label; + const suffix = mobileYBounds.isProgress ? '' : '%'; + return `${label}: ${ctx.parsed.y.toFixed(1)}${suffix}`; + }, + }, + }, + }, + scales: { + y: { + type: 'linear', display: true, position: 'left', + min: mobileYBounds.min, max: mobileYBounds.max, + grid: { color: 'rgba(0,0,0,0.05)' }, + ticks: { font: { size: 10 }, maxTicksLimit: 5 }, + }, + x: { + grid: { display: false }, + ticks: { font: { size: 10 }, autoSkip: false }, + }, + }, + }; + + const subtitle = isSecondary + ? 'GCSE results · Year 11' + : 'KS2 SATs · Reading, Writing & Maths'; + return (
{trendSummary && (
{trendSummary}
)} -
- + + {/* Mobile-only chip selector */} +
+
{subtitle}
+
+ {chips.map(chip => { + const enabled = chipHasData(chip); + const active = chip.id === activeChip; + return ( + + ); + })} +
+ +
+ +
+ + {/* When the Progress chip is active on primary, show a tiny inline legend + for the 3 sub-series (reading/writing/maths) — they share a unit and + belong together. */} + {isMobile && activeChip === 'progress' && ( +
+ Reading + Writing + Maths +
+ )} + {hasCovidGap && (

* No data for 2019/20 or 2020/21 — national assessments were cancelled due to COVID-19.

)} + + {/* Desktop-only hint about toggling progress in the legend */} {!isSecondary && (

Progress scores (Reading, Writing, Maths) are hidden by default — click them in the legend to show.