TudorandClaude Opus 4.8
17bd4d5a5e
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m8s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 12s
PR Checks / Build Frontend (no push) (pull_request) Successful in 50s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Failing after 2m38s
Applies the compare screen's chart-truthfulness rules (spec §8.1) to the school detail page's time-series charts. PerformanceChart (Results Over Time, both phases): - Fill every academic year between the first and last data point via the shared fillAcademicYears helper, so cancelled/unpublished years (2019/20, 2020/21, and — for KS2 — 2021/22) render as real gaps instead of compressed time. Each series and the England overlay map onto this filled axis with null for missing years; spanGaps:false so school lines never bridge a gap. - Replace the primary-only COVID note with a distinct, honest gap caption: KS2 names the cancelled tests plus the unpublished 2021/22 school-level year; KS4 names the unpublished 2019/20–2020/21 GCSE grading years. - Mobile x-axis switches to autoSkip so the longer (gap-honest) axis stays readable; the broken line still marks a missing year even when its tick label is skipped. AdmissionsTrendChart: - Same gap-honest axis + spanGaps:false so a missing admissions year is a real gap, not compressed time. Point 12 (definite canvas heights): desktop is already a definite 280px; fix the secondary detail's mobile .chartContainer, which fixed the outer box at 220px and double-constrained PerformanceChart's own 220px canvas + chip strip (clipping the chips onto the plot) — now height:auto to match the primary view. SatsChart is out of scope (single-year per-subject CSS bars — no year axis, no canvas height to constrain). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
'use client';
|
||
|
||
/**
|
||
* AdmissionsTrendChart
|
||
* Compact line chart of the first-choice offer rate across admissions years.
|
||
* Renders nothing unless at least two years carry an offer-rate value.
|
||
*/
|
||
|
||
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';
|
||
|
||
export default function AdmissionsTrendChart({ history }: { history: SchoolAdmissions[] }) {
|
||
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];
|
||
|
||
// 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 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);
|
||
|
||
const options: ChartOptions<'line'> = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
interaction: { mode: 'index', intersect: false },
|
||
// Headroom so a point sitting on the y-max ceiling (e.g. 100%) isn't
|
||
// clipped by the top of the plot area.
|
||
layout: { padding: { top: 8 } },
|
||
plugins: {
|
||
legend: { display: false },
|
||
title: { display: false },
|
||
tooltip: {
|
||
backgroundColor: 'rgba(26,22,18,0.92)',
|
||
padding: 10,
|
||
titleFont: { size: 12 },
|
||
bodyFont: { size: 12 },
|
||
callbacks: {
|
||
label: (ctx) => (ctx.parsed.y == null ? '' : `First-choice offers: ${Math.round(ctx.parsed.y)}%`),
|
||
},
|
||
},
|
||
},
|
||
scales: {
|
||
y: {
|
||
min: yMin,
|
||
max: yMax,
|
||
grid: { color: 'rgba(0,0,0,0.05)' },
|
||
ticks: { font: { size: 11 }, maxTicksLimit: 5, callback: (v) => `${v}%` },
|
||
},
|
||
x: {
|
||
grid: { display: false },
|
||
ticks: { font: { size: 11 }, autoSkip: true, maxRotation: 0, autoSkipPadding: 16 },
|
||
},
|
||
},
|
||
};
|
||
|
||
const data = {
|
||
labels,
|
||
datasets: [
|
||
{
|
||
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)),
|
||
pointBackgroundColor: '#e07256',
|
||
pointBorderColor: '#fff',
|
||
pointBorderWidth: values.map((_, i) => (i === lastIdx ? 2 : 0)),
|
||
pointHoverRadius: 6,
|
||
},
|
||
],
|
||
};
|
||
|
||
return (
|
||
<div className={styles.wrapper}>
|
||
<Line data={data} options={options} />
|
||
</div>
|
||
);
|
||
}
|