Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 TudorandClaude Opus 5
|
7fa2a76c05 |
No files matched your search
@@ -5,9 +5,3 @@ __pycache__/
|
||||
pipeline/transform/target/
|
||||
pipeline/transform/logs/
|
||||
pipeline/transform/.user.yml
|
||||
|
||||
# Playwright MCP scratch output (screenshots, console logs, page snapshots)
|
||||
.playwright-mcp/
|
||||
|
||||
# Playwright run artefacts written when the suite is run from the repo root
|
||||
test-results/
|
||||
@@ -632,8 +632,6 @@ async def get_school_details(request: Request, urn: int):
|
||||
"census": supplementary.get("census"),
|
||||
"admissions": supplementary.get("admissions"),
|
||||
"admissions_history": supplementary.get("admissions_history") or [],
|
||||
"admission_distance": supplementary.get("admission_distance"),
|
||||
"admission_distance_history": supplementary.get("admission_distance_history") or [],
|
||||
"sen_detail": supplementary.get("sen_detail"),
|
||||
"phonics": supplementary.get("phonics"),
|
||||
"deprivation": supplementary.get("deprivation"),
|
||||
|
||||
+1
-39
@@ -18,7 +18,7 @@ from .config import settings
|
||||
from .database import SessionLocal, engine
|
||||
from .models import (
|
||||
DimSchool, DimLocation, KS2Performance,
|
||||
FactOfstedInspection, FactAdmissions, FactAdmissionDistance,
|
||||
FactOfstedInspection, FactAdmissions,
|
||||
FactDeprivation, FactFinance, FactPupilCharacteristics,
|
||||
)
|
||||
from .ofsted_codes import ofsted_page_url, report_card_labels
|
||||
@@ -723,17 +723,6 @@ def _admissions_row_dict(a) -> dict:
|
||||
}
|
||||
|
||||
|
||||
def _admission_distance_dict(d) -> dict:
|
||||
"""Serialize one fact_admission_distance row for API responses."""
|
||||
return {
|
||||
"year": d.year,
|
||||
"distance_m": d.distance_m,
|
||||
"route_count": d.route_count,
|
||||
"la_name": d.la_name,
|
||||
"distance_unit_raw": d.distance_unit_raw,
|
||||
}
|
||||
|
||||
|
||||
def _census_dict(pc) -> dict:
|
||||
return {
|
||||
"year": pc.year,
|
||||
@@ -770,8 +759,6 @@ def _empty_supplementary() -> dict:
|
||||
"census": None,
|
||||
"admissions": None,
|
||||
"admissions_history": [],
|
||||
"admission_distance": None,
|
||||
"admission_distance_history": [],
|
||||
"sen_detail": None,
|
||||
"phonics": None,
|
||||
"deprivation": None,
|
||||
@@ -850,31 +837,6 @@ def get_supplementary_data_batch(db: Session, urns: list[int]) -> dict:
|
||||
result[urn]["admissions"] = rows_for_urn[-1] if rows_for_urn else None
|
||||
_safe(_admissions)
|
||||
|
||||
# Last distance offered — all years per URN, oldest first, with the latest
|
||||
# also exposed on its own.
|
||||
#
|
||||
# The history was deliberately withheld at first: coverage is ragged (a
|
||||
# school may have 2021 and 2026 and nothing between), and a plain series
|
||||
# would draw a trend line straight through gaps that are absences of
|
||||
# publication rather than absences of a cut-off. It is served now because
|
||||
# the client distinguishes those gaps explicitly — see cutoffYearRows in
|
||||
# lastDistanceOffered.ts, which classifies every year in the range and
|
||||
# breaks the line rather than interpolating across it.
|
||||
def _admission_distance():
|
||||
rows = (
|
||||
db.query(FactAdmissionDistance)
|
||||
.filter(FactAdmissionDistance.urn.in_(urns))
|
||||
.order_by(FactAdmissionDistance.urn, FactAdmissionDistance.year.asc())
|
||||
.all()
|
||||
)
|
||||
history: dict = {urn: [] for urn in urns}
|
||||
for d in rows:
|
||||
history[d.urn].append(_admission_distance_dict(d))
|
||||
for urn, rows_for_urn in history.items():
|
||||
result[urn]["admission_distance_history"] = rows_for_urn
|
||||
result[urn]["admission_distance"] = rows_for_urn[-1] if rows_for_urn else None
|
||||
_safe(_admission_distance)
|
||||
|
||||
# Deprivation — one row per URN.
|
||||
def _deprivation():
|
||||
rows = (
|
||||
|
||||
@@ -188,37 +188,6 @@ class FactAdmissions(Base):
|
||||
admissions_policy = Column(String(100))
|
||||
|
||||
|
||||
class FactAdmissionDistance(Base):
|
||||
"""Last distance offered — one row per URN per year.
|
||||
|
||||
Separate from FactAdmissions because the source is separate: EES publishes
|
||||
admissions for the whole country, whereas cut-off distances exist only for
|
||||
the local authorities that choose to publish them (57 at the time of
|
||||
writing), and the two refresh on unrelated timetables.
|
||||
"""
|
||||
__tablename__ = "fact_admission_distance"
|
||||
__table_args__ = (
|
||||
Index("ix_admission_distance_urn_year", "urn", "year"),
|
||||
MARTS,
|
||||
)
|
||||
|
||||
urn = Column(Integer, primary_key=True)
|
||||
year = Column(Integer, primary_key=True)
|
||||
# Straight-line distance in metres from the school to the last home offered
|
||||
# a place that year.
|
||||
distance_m = Column(Float)
|
||||
# How many admission routes (ability bands, separate reception/junior
|
||||
# intakes) were collapsed into distance_m. >1 means the figure is the
|
||||
# furthest of several and the page must say so.
|
||||
route_count = Column(Integer)
|
||||
la_code = Column(Integer)
|
||||
la_name = Column(String(100))
|
||||
# The unit the council published in, so the page can lead with the unit a
|
||||
# parent was given rather than always converting.
|
||||
distance_unit_raw = Column(String(20))
|
||||
source_file = Column(Text)
|
||||
|
||||
|
||||
class FactPupilCharacteristics(Base):
|
||||
"""School pupil composition from EES census — one row per URN per year."""
|
||||
__tablename__ = "fact_pupil_characteristics"
|
||||
|
||||
@@ -8,31 +8,8 @@ from backend import data_loader
|
||||
from backend.data_loader import get_supplementary_data_batch
|
||||
|
||||
|
||||
def _sort_key(criterion):
|
||||
"""(column name, descending) for a SQLAlchemy order_by argument.
|
||||
|
||||
A bare column (Model.year) arrives as an InstrumentedAttribute carrying
|
||||
.key; Model.year.desc() wraps it in a UnaryExpression whose column sits on
|
||||
.element.
|
||||
"""
|
||||
name = getattr(criterion, "key", None)
|
||||
if name is not None:
|
||||
return name, False
|
||||
element = getattr(criterion, "element", None)
|
||||
name = getattr(element, "key", None)
|
||||
return name, "DESC" in str(criterion).upper()
|
||||
|
||||
|
||||
class _FakeQuery:
|
||||
"""Records that a query ran and serves canned rows filtered by an in-list.
|
||||
|
||||
order_by is honoured rather than ignored. The batch loader picks a row per
|
||||
URN by position — first for "latest Ofsted", last for "latest cut-off
|
||||
distance" — which is only correct because the database returned them
|
||||
sorted. A double that drops the ORDER BY makes those picks depend on
|
||||
fixture insertion order instead, so the test would pass with the sort
|
||||
reversed or removed and prove nothing about the query.
|
||||
"""
|
||||
"""Records that a query ran and serves canned rows filtered by an in-list."""
|
||||
|
||||
def __init__(self, recorder, model_name, rows):
|
||||
self._rec = recorder
|
||||
@@ -42,20 +19,7 @@ class _FakeQuery:
|
||||
def filter(self, *args, **kwargs):
|
||||
return self
|
||||
|
||||
def order_by(self, *criteria):
|
||||
for crit in reversed(criteria): # reversed = stable multi-key sort
|
||||
name, descending = _sort_key(crit)
|
||||
if not name:
|
||||
continue
|
||||
values = [getattr(r, name, None) for r in self._rows]
|
||||
# Only sort on plainly comparable values. Some fixtures stand dates
|
||||
# up as namespace objects, which raise on <; leaving those in their
|
||||
# given order matches what the real query would produce for them.
|
||||
if not all(isinstance(v, (int, float, str)) for v in values):
|
||||
continue
|
||||
self._rows = sorted(
|
||||
self._rows, key=lambda r: getattr(r, name), reverse=descending
|
||||
)
|
||||
def order_by(self, *args, **kwargs):
|
||||
return self
|
||||
|
||||
def all(self):
|
||||
@@ -105,13 +69,6 @@ def _adm_row(urn, year):
|
||||
)
|
||||
|
||||
|
||||
def _dist_row(urn, year, distance_m, route_count=1):
|
||||
return types.SimpleNamespace(
|
||||
urn=urn, year=year, distance_m=distance_m, route_count=route_count,
|
||||
la_name="Camden", distance_unit_raw="miles", source_file="camden/guide.pdf",
|
||||
)
|
||||
|
||||
|
||||
def test_one_query_per_table_and_latest_row_per_urn():
|
||||
rows = {
|
||||
# URN 1 has two Ofsted rows; the batch must keep the most recent (2023).
|
||||
@@ -121,14 +78,6 @@ def test_one_query_per_table_and_latest_row_per_urn():
|
||||
_ofsted_row(2, "2021-06-01", 1),
|
||||
],
|
||||
"FactAdmissions": [_adm_row(1, 202526), _adm_row(1, 202627), _adm_row(2, 202627)],
|
||||
# URN 1 has three years of cut-offs; only the most recent is served.
|
||||
# Deliberately not in year order — the ordering is the query's job.
|
||||
"FactAdmissionDistance": [
|
||||
_dist_row(1, 2026, 529.47),
|
||||
_dist_row(1, 2024, 772.49),
|
||||
_dist_row(1, 2025, 1421.05),
|
||||
_dist_row(2, 2023, 2029.38, route_count=4),
|
||||
],
|
||||
"FactPupilCharacteristics": [],
|
||||
"FactDeprivation": [],
|
||||
"FactFinance": [],
|
||||
@@ -136,10 +85,10 @@ def test_one_query_per_table_and_latest_row_per_urn():
|
||||
session = _FakeSession(rows)
|
||||
out = get_supplementary_data_batch(session, [1, 2])
|
||||
|
||||
# Exactly one query per table — six total, regardless of two URNs.
|
||||
# Exactly one query per table — five total, regardless of two URNs.
|
||||
assert sorted(session.queries) == [
|
||||
"FactAdmissionDistance", "FactAdmissions", "FactDeprivation",
|
||||
"FactFinance", "FactOfstedInspection", "FactPupilCharacteristics",
|
||||
"FactAdmissions", "FactDeprivation", "FactFinance",
|
||||
"FactOfstedInspection", "FactPupilCharacteristics",
|
||||
]
|
||||
|
||||
# Latest Ofsted kept per URN
|
||||
@@ -151,16 +100,6 @@ def test_one_query_per_table_and_latest_row_per_urn():
|
||||
assert out[1]["admissions"]["year"] == 202627
|
||||
assert out[2]["admissions_history"] == [{**out[2]["admissions_history"][0]}]
|
||||
|
||||
# Cut-off distance: full history oldest-first, with the newest year also
|
||||
# exposed on its own. The fixture rows are deliberately out of order, so
|
||||
# this only passes if the query's ORDER BY is doing the work.
|
||||
assert [r["year"] for r in out[1]["admission_distance_history"]] == [2024, 2025, 2026]
|
||||
assert out[1]["admission_distance"]["year"] == 2026
|
||||
assert out[1]["admission_distance"]["distance_m"] == 529.47
|
||||
# route_count travels with the figure — the page needs it to say the
|
||||
# distance is the furthest of several bands rather than the only one.
|
||||
assert out[2]["admission_distance"]["route_count"] == 4
|
||||
|
||||
# Empty tables degrade to the null block, not a crash
|
||||
assert out[1]["census"] is None and out[1]["deprivation"] is None
|
||||
|
||||
@@ -170,5 +109,3 @@ def test_single_wrapper_matches_batch(monkeypatch):
|
||||
single = data_loader.get_supplementary_data(session, 5)
|
||||
assert single["ofsted"]["overall_effectiveness"] == 2
|
||||
assert single["admissions_history"] == []
|
||||
assert single["admission_distance"] is None
|
||||
assert single["admission_distance_history"] == []
|
||||
@@ -19,7 +19,7 @@
|
||||
- Screenshot `j1-postcode-results-mobile.png` confirms cards carry only the LA name ("Solihull"), no "X miles away".
|
||||
|
||||
**Desktop (1440×900) — Attempt A repeat + keyboard + zoom.**
|
||||
- Desktop hero additionally shows a trust badge ("● UPDATED WITH 2026/2027 ADMISSIONS RESULTS") and a value-prop subheading ("27,000+ primary and secondary schools with Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores and admissions data — side by side, in one place"). **Both are absent on the mobile hero** (mobile jumps H1 → search box).
|
||||
- Desktop hero additionally shows a trust badge ("● UPDATED WITH 2026/2027 ADMISSIONS RESULTS") and a value-prop subheading ("24,000+ primary and secondary schools with Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores and admissions data — side by side, in one place"). **Both are absent on the mobile hero** (mobile jumps H1 → search box).
|
||||
- Name search identical, correct, instant (`j1-search-results-desktop.png`).
|
||||
- Keyboard: tab order is logical — Skip link → logo → Search/Compare/Rankings/Admissions nav → search input → Search button → Schools near me → content. Skip link, logo, nav links and Search button all get a clear **2px solid orange (#E07256) focus outline**. The search input uses an orange border + very faint ring (`box-shadow rgba(224,114,86,0.12) 0 0 0 3px`, `outline:none`) — visible but weaker than the other controls. Search → results → school link is fully keyboard-operable (standard links/buttons).
|
||||
- 200% reflow (720×450): **no horizontal scroll** (`scrollWidth == clientWidth == 720`); deadline cards reflow from 1×4 to 2×2, no overlap or clipping. Pass.
|
||||
@@ -57,7 +57,7 @@
|
||||
- Severity guess: P2
|
||||
|
||||
- **F6. Mobile hero omits the value proposition shown on desktop**
|
||||
- Evidence: Desktop hero has the "UPDATED WITH 2026/2027…" badge + subheading "27,000+ primary and secondary schools with KS2 SATs, GCSE results, Ofsted grades… side by side, in one place" (`j1-home-desktop-fold.png`). The mobile hero (`j1-home-mobile-fold.png`) drops both — below the poetic-but-vague H1 there is only a search box.
|
||||
- Evidence: Desktop hero has the "UPDATED WITH 2026/2027…" badge + subheading "24,000+ primary and secondary schools with KS2 SATs, GCSE results, Ofsted grades… side by side, in one place" (`j1-home-desktop-fold.png`). The mobile hero (`j1-home-mobile-fold.png`) drops both — below the poetic-but-vague H1 there is only a search box.
|
||||
- Criterion violated: Nielsen #1 (Visibility of system status) / recognition-over-recall; mobile content-parity best practice (the primary 63%-of-entries viewport should not lose the core "what is this and why trust it" copy).
|
||||
- Argument: A first-time parent landing on mobile sees "Every school in England, compared." + a bare box, with no statement of coverage, data sources, or freshness. Weak/absent value proposition above the fold is a classic driver of immediate exits — directly relevant to the 46% home-exit rate.
|
||||
- Severity guess: P2 (candidate P1 given mobile is the primary, highest-traffic viewport)
|
||||
|
||||
+38
-444
@@ -121,33 +121,6 @@ test('the home page has a real title', async ({ page }) => {
|
||||
expect(await page.title()).toMatch(/schoolcompare/i);
|
||||
});
|
||||
|
||||
test('the site states its independence and never claims to be official', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
|
||||
// Carried in the footer, so it appears on every page rather than only here.
|
||||
await expect(
|
||||
page.getByText(/an independent site\.\s*not affiliated with the department for education/i)
|
||||
).toBeVisible();
|
||||
|
||||
/*
|
||||
* Describing the DATA as official is accurate and appears throughout
|
||||
* ("official DfE figures", "the official figure isn't in"). Describing the
|
||||
* SITE as official is not: schoolcompare republishes government data, it is
|
||||
* not a government service. The difference is the grammatical subject, so
|
||||
* this looks for text that opens with "Official" as a standalone label —
|
||||
* the shape a value-prop title or heading takes, and the shape the old
|
||||
* "Official & trusted" took.
|
||||
*/
|
||||
const claims = await page.evaluate(() =>
|
||||
[...document.querySelectorAll('body *')]
|
||||
.flatMap(el => [...el.childNodes]
|
||||
.filter(n => n.nodeType === 3)
|
||||
.map(n => (n.textContent ?? '').trim()))
|
||||
.filter(t => /^Official\b/i.test(t) && !/^Official\s+(DfE|data|figures)/i.test(t))
|
||||
);
|
||||
expect(claims, `text presenting the site itself as official: ${claims.join(' | ')}`).toEqual([]);
|
||||
});
|
||||
|
||||
test('the landing bands share one vertical rhythm', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
const gaps = await page.evaluate(() => {
|
||||
@@ -167,73 +140,59 @@ test('the landing bands share one vertical rhythm', async ({ page }) => {
|
||||
});
|
||||
|
||||
/*
|
||||
* The hero artwork. Every assertion here covers a failure that renders as a
|
||||
* perfectly valid page: a path that 404s leaves an empty box, a crop that
|
||||
* stops switching silently decapitates the subject, and a format negotiation
|
||||
* that regresses just serves a bigger file.
|
||||
* The hero illustration. Two separate regressions are guarded here, both of
|
||||
* which shipped: the drawing being cropped past its own subject on phones, and
|
||||
* the drawing keeping a fixed light palette on a near-black page.
|
||||
*/
|
||||
function heroImageState(page: Page) {
|
||||
return page.evaluate(() => {
|
||||
const img = document.querySelector('[class*="heroArt"] img') as HTMLImageElement | null;
|
||||
if (!img) return null;
|
||||
test('the hero illustration swaps composition rather than cropping its subject', async ({ page }) => {
|
||||
const visible = () => page.evaluate(() => {
|
||||
const wide = document.querySelector('[class*="heroArtWide"]');
|
||||
const band = document.querySelector('[class*="heroArtBand"]');
|
||||
return {
|
||||
// naturalWidth is 0 for an image that failed to load, whatever the src says.
|
||||
loaded: img.complete && img.naturalWidth > 0,
|
||||
file: img.currentSrc.split('/').pop() ?? '',
|
||||
wide: wide ? getComputedStyle(wide).display : 'missing',
|
||||
band: band ? getComputedStyle(band).display : 'missing',
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
test('the hero artwork loads, and switches crop rather than cropping its subject', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.goto('/');
|
||||
const wide = await heroImageState(page);
|
||||
expect(wide).not.toBeNull();
|
||||
expect(wide!.loaded).toBe(true);
|
||||
expect(wide!.file).toContain('hero-wide');
|
||||
expect(await visible()).toEqual({ wide: 'block', band: 'none' });
|
||||
|
||||
/*
|
||||
* Below the one-column breakpoint the slot becomes a band up to 4.9:1. The
|
||||
* desktop frame centre-cropped to that shape loses the schoolhouse, which is
|
||||
* how the previous hero failed on phones — so <picture> must switch to the
|
||||
* pre-cropped band file, not merely to a smaller version of the same frame.
|
||||
*/
|
||||
// Below the one-column breakpoint the slot becomes a wide, short band. The
|
||||
// tall composition sliced to that shape cropped the schoolhouse away
|
||||
// entirely, leaving hills and a pin pointing at nothing.
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto('/');
|
||||
const band = await heroImageState(page);
|
||||
expect(band!.loaded).toBe(true);
|
||||
expect(band!.file).toContain('hero-band');
|
||||
expect(await visible()).toEqual({ wide: 'none', band: 'block' });
|
||||
});
|
||||
|
||||
test('the hero artwork is served in a modern format', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.goto('/');
|
||||
const state = await heroImageState(page);
|
||||
// The JPEG exists only as the <img> fallback. Chromium takes AVIF, so seeing
|
||||
// the fallback here means the <source> negotiation broke — which costs about
|
||||
// 24kB extra on the LCP element and nothing visible.
|
||||
expect(state!.file).toMatch(/\.(avif|webp)$/);
|
||||
});
|
||||
|
||||
test('the hero artwork is dimmed for the dark theme', async ({ browser }) => {
|
||||
const filterFor = async (colorScheme: 'light' | 'dark') => {
|
||||
test('the hero illustration is re-graded for the dark theme', async ({ browser }) => {
|
||||
const read = async (colorScheme: 'light' | 'dark') => {
|
||||
const ctx = await browser.newContext({ colorScheme });
|
||||
const p = await ctx.newPage();
|
||||
await p.goto('/');
|
||||
const value = await p.evaluate(() => {
|
||||
const img = document.querySelector('[class*="heroArt"] img');
|
||||
return img ? getComputedStyle(img).filter : 'missing';
|
||||
});
|
||||
const value = await p.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--ill-sky-high').trim()
|
||||
);
|
||||
await ctx.close();
|
||||
return value;
|
||||
};
|
||||
|
||||
// The artwork is a fixed raster, so it cannot be re-graded per theme the way
|
||||
// the drawn hero was. Undimmed it is the brightest object on a near-black
|
||||
// page and out-shouts the H1 and the search box — the exact regression the
|
||||
// drawn version shipped with.
|
||||
expect(await filterFor('light')).toBe('none');
|
||||
expect(await filterFor('dark')).toMatch(/brightness/);
|
||||
const toLuminance = (hex: string) => {
|
||||
const m = hex.replace('#', '');
|
||||
const [r, g, b] = [0, 2, 4].map(i => parseInt(m.slice(i, i + 2), 16) / 255);
|
||||
const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
|
||||
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
|
||||
};
|
||||
|
||||
const light = await read('light');
|
||||
const dark = await read('dark');
|
||||
expect(light).toMatch(/^#[0-9a-f]{6}$/i);
|
||||
expect(dark).toMatch(/^#[0-9a-f]{6}$/i);
|
||||
// The sky used to be the same pale blue in both themes, which made it the
|
||||
// brightest object on the page in dark mode — it out-shouted the H1 and the
|
||||
// search box. It must now be substantially darker than its light value.
|
||||
expect(toLuminance(dark)).toBeLessThan(toLuminance(light) / 4);
|
||||
});
|
||||
|
||||
test('searching by name returns school results', async ({ page }) => {
|
||||
@@ -800,108 +759,6 @@ test('sticky section nav jumps to server-rendered sections', async ({ page }) =>
|
||||
* These are silent failures — nothing on the page looks wrong — so they need
|
||||
* a gate.
|
||||
*/
|
||||
/**
|
||||
* Chart benchmark markers, against whatever they actually overlap.
|
||||
*
|
||||
* The national-average marker shipped as var(--brand) on both templates —
|
||||
* identical to the bar fill it sits on, so it measured 1.00:1 wherever it
|
||||
* crossed a bar and was visible only for schools BELOW the benchmark.
|
||||
*
|
||||
* The WCAG journey below never saw it, and could not have: it composites
|
||||
* backgrounds by walking the ANCESTOR chain, while these markers are
|
||||
* absolutely positioned over a SIBLING. Ancestor-walking is structurally blind
|
||||
* to overlap. This test asks the stacking order instead —
|
||||
* document.elementsFromPoint returns what is genuinely beneath a point — which
|
||||
* is the same question a reader's eye asks.
|
||||
*/
|
||||
const MARKER_PROBE = `(() => {
|
||||
const ps = c => { const m=(c||'').match(/[\\d.]+/g); if(!m) return null;
|
||||
const a=m.map(Number); return {r:a[0],g:a[1],b:a[2],a:m.length>3?a[3]:1}; };
|
||||
const ov = (f,b) => ({r:f.r*f.a+b.r*(1-f.a), g:f.g*f.a+b.g*(1-f.a), b:f.b*f.a+b.b*(1-f.a), a:1});
|
||||
const L = c => { const f=v=>{v/=255; return v<=0.03928?v/12.92:Math.pow((v+.055)/1.055,2.4);};
|
||||
return .2126*f(c.r)+.7152*f(c.g)+.0722*f(c.b); };
|
||||
const RT = (a,b) => { const x=L(a),y=L(b); return (Math.max(x,y)+.05)/(Math.min(x,y)+.05); };
|
||||
|
||||
const markers = [...document.querySelectorAll('[class*="natTick"], [class*="NatLine"]')]
|
||||
.filter(el => el.getBoundingClientRect().width > 0);
|
||||
const out = { count: markers.length, failures: [], unmeasured: 0 };
|
||||
|
||||
for (const el of markers) {
|
||||
/*
|
||||
* Scroll it in first. elementsFromPoint takes VIEWPORT coordinates and
|
||||
* returns an empty stack for anything off-screen — and these markers sit
|
||||
* well down the page. Without this the backdrop silently defaults to
|
||||
* white, which makes a teal-on-teal marker look like teal-on-white and
|
||||
* pass. 'instant' because globals.css sets scroll-behavior: smooth on
|
||||
* html, and a smooth scroll would still be moving when we measure.
|
||||
*/
|
||||
el.scrollIntoView({ block: 'center', behavior: 'instant' });
|
||||
const r = el.getBoundingClientRect();
|
||||
const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
|
||||
const own = ps(getComputedStyle(el).backgroundColor);
|
||||
const edge = ps((getComputedStyle(el).boxShadow.match(/rgba?\\([^)]*\\)/) || [])[0] || '');
|
||||
if (!own) continue;
|
||||
|
||||
// What is genuinely underneath, by stacking order rather than by ancestry.
|
||||
const stack = document.elementsFromPoint(cx, cy);
|
||||
if (stack.length === 0) { out.unmeasured++; continue; } // never assume white
|
||||
let backdrop = null;
|
||||
for (const under of stack) {
|
||||
if (under === el || el.contains(under)) continue;
|
||||
const c = ps(getComputedStyle(under).backgroundColor);
|
||||
if (c && c.a > 0.9) { backdrop = c; break; }
|
||||
}
|
||||
if (!backdrop) { out.unmeasured++; continue; }
|
||||
|
||||
// A knockout marker only needs ONE of its two parts to separate.
|
||||
const best = Math.max(RT(ov(own, backdrop), backdrop),
|
||||
edge ? RT(ov(edge, backdrop), backdrop) : 0);
|
||||
if (best < 3) {
|
||||
out.failures.push((el.className || '?').toString().split(' ')[0] +
|
||||
' ' + best.toFixed(2) + ':1 over rgb(' +
|
||||
[backdrop.r, backdrop.g, backdrop.b].map(Math.round).join(',') + ')');
|
||||
}
|
||||
}
|
||||
return out;
|
||||
})()`;
|
||||
|
||||
async function firstSchoolLink(page: Page, query: string): Promise<string> {
|
||||
await page.goto(`/?search=${encodeURIComponent(query)}`);
|
||||
const link = schoolLinks(page).first();
|
||||
await expect(link).toBeVisible({ timeout: 15_000 });
|
||||
return (await link.getAttribute('href'))!;
|
||||
}
|
||||
|
||||
for (const scheme of ['light', 'dark'] as const) {
|
||||
test(`chart benchmark markers stay visible in the ${scheme} theme`, async ({ browser }) => {
|
||||
const context = await browser.newContext({ colorScheme: scheme });
|
||||
const page = await context.newPage();
|
||||
const failures: string[] = [];
|
||||
|
||||
// One primary (SATs bars) and one secondary (Attainment 8 bar) — the two
|
||||
// templates carry separate implementations of the same marker.
|
||||
for (const query of ['primary', 'academy']) {
|
||||
const href = await firstSchoolLink(page, query);
|
||||
await page.goto(href);
|
||||
await expect(page.locator('h1').first()).toBeVisible({ timeout: 15_000 });
|
||||
await page.waitForTimeout(900); // bar widths animate in from an effect
|
||||
|
||||
const res = (await page.evaluate(MARKER_PROBE)) as
|
||||
{ count: number; failures: string[]; unmeasured: number };
|
||||
test.skip(res.count === 0 && query === 'primary',
|
||||
'no benchmark markers rendered — environment has no national averages');
|
||||
// A marker we could not resolve a backdrop for is a hole in the check,
|
||||
// not a pass. Fail loudly rather than quietly measuring nothing.
|
||||
expect(res.unmeasured,
|
||||
`${href}: ${res.unmeasured} of ${res.count} markers had no resolvable backdrop`).toBe(0);
|
||||
failures.push(...res.failures.map(f => `${href} → ${f}`));
|
||||
}
|
||||
|
||||
await context.close();
|
||||
expect(failures, `benchmark markers under 3:1 in ${scheme}:\n ${failures.join('\n ')}`).toEqual([]);
|
||||
});
|
||||
}
|
||||
|
||||
test('the brand asset set is complete and served', async ({ page }) => {
|
||||
const response = await page.goto('/');
|
||||
expect(response?.ok()).toBe(true);
|
||||
@@ -918,21 +775,9 @@ test('the brand asset set is complete and served', async ({ page }) => {
|
||||
expect(og.ok()).toBe(true);
|
||||
expect(og.headers()['content-type']).toContain('image/png');
|
||||
|
||||
/*
|
||||
* iOS ignores SVG touch icons, so this must be a real raster.
|
||||
*
|
||||
* Read the href off the page rather than hardcoding a path. The route moved
|
||||
* when the generated app/apple-icon.tsx became a static app/apple-icon.png:
|
||||
* a generated icon is served at /apple-icon, a static one at /apple-icon.png
|
||||
* with a content hash. This test kept asking for /apple-icon and got a 404 —
|
||||
* reporting a missing icon while the icon was present and correctly linked.
|
||||
*/
|
||||
const appleLink = page.locator('link[rel="apple-touch-icon"]');
|
||||
await expect(appleLink).toHaveCount(1);
|
||||
const appleHref = await appleLink.getAttribute('href');
|
||||
expect(appleHref).toBeTruthy();
|
||||
const apple = await page.request.get(appleHref!);
|
||||
expect(apple.ok(), `apple touch icon at ${appleHref} should be served`).toBe(true);
|
||||
// iOS ignores SVG touch icons, so this must be a real raster.
|
||||
const apple = await page.request.get('/apple-icon');
|
||||
expect(apple.ok()).toBe(true);
|
||||
expect(apple.headers()['content-type']).toContain('image/png');
|
||||
|
||||
// Android needs a maskable PNG or the install prompt has no icon.
|
||||
@@ -1053,22 +898,8 @@ test('the header carries the schoolcompare lockup', async ({ page }) => {
|
||||
// hashed at build time and change on any unrelated edit.
|
||||
await expect(home).toHaveText(/^\s*schoolcompare\s*$/);
|
||||
|
||||
/*
|
||||
* The mark is raster artwork, not an inline SVG — it has been since the
|
||||
* supplied logo replaced the reconstruction, and this locator went on
|
||||
* looking for an <svg> that no longer exists.
|
||||
*
|
||||
* Assert on naturalWidth rather than visibility: a <picture> whose sources
|
||||
* all 404 still lays out and still passes toBeVisible(), so the weaker
|
||||
* assertion would go green on a broken lockup.
|
||||
*/
|
||||
const mark = home.locator('img').first();
|
||||
const mark = home.locator('svg').first();
|
||||
await expect(mark).toBeVisible();
|
||||
const markState = await mark.evaluate((el: HTMLImageElement) => ({
|
||||
loaded: el.complete && el.naturalWidth > 0,
|
||||
src: el.currentSrc,
|
||||
}));
|
||||
expect(markState.loaded, `header mark failed to load: ${markState.src}`).toBe(true);
|
||||
});
|
||||
|
||||
test('no visible text falls back to the browser default black', async ({ page }) => {
|
||||
@@ -1210,240 +1041,3 @@ for (const scheme of ['light', 'dark'] as const) {
|
||||
expect(failures, `AA failures in ${scheme}:\n ${failures.join('\n ')}`).toEqual([]);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Last distance offered ────────────────────────────────────────────────
|
||||
//
|
||||
// Coverage is partial by nature: only 57 local authorities publish cut-off
|
||||
// distances at all, and staging may not yet hold the extract. These tests
|
||||
// therefore locate a school that HAS a figure and assert the invariants that
|
||||
// make it safe to show, rather than asserting any particular school has one.
|
||||
|
||||
/** URNs known to be in the collected cut-off dataset, spread across LAs so a
|
||||
* single council's data gap cannot skip the whole check. */
|
||||
const CUTOFF_CANDIDATE_URNS = [
|
||||
139837, 100010, 100011, 100028, 100029, 130342, // Camden
|
||||
100458, 135587, // Islington (banded)
|
||||
101099, 100553, 102574, 100769, // mixed
|
||||
];
|
||||
|
||||
async function schoolWithCutoff(page: Page, minPublishedYears = 1) {
|
||||
for (const urn of CUTOFF_CANDIDATE_URNS) {
|
||||
const res = await page.request.get(`/api/schools/${urn}`);
|
||||
if (!res.ok()) continue;
|
||||
const body = await res.json();
|
||||
if (body?.admission_distance?.distance_m == null) continue;
|
||||
const published = (body.admission_distance_history ?? [])
|
||||
.filter((h: { distance_m?: number | null }) => h.distance_m != null);
|
||||
if (published.length < minPublishedYears) continue;
|
||||
return {
|
||||
urn,
|
||||
distance: body.admission_distance,
|
||||
history: published,
|
||||
phase: body.school_info?.phase,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
test('a published cut-off distance is shown with the year it belongs to', async ({ page }) => {
|
||||
const found = await schoolWithCutoff(page);
|
||||
test.skip(found === null, 'no school in the sample has a published cut-off distance yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('h1').first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const label = page.getByText(/Last distance offered/).first();
|
||||
await expect(label).toBeVisible();
|
||||
|
||||
// The year is the difference between a fact and a floating number: a cut-off
|
||||
// is the outcome of one admissions round and means nothing without it.
|
||||
await expect(label).toContainText(`September ${found!.distance.year}`);
|
||||
|
||||
// And the figure itself, in the unit councils publish in.
|
||||
await expect(page.getByText(/\d+(\.\d+)? (miles|m)\b/).first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('a cut-off distance is never shown without saying it is not a catchment', async ({ page }) => {
|
||||
const found = await schoolWithCutoff(page);
|
||||
test.skip(found === null, 'no school in the sample has a published cut-off distance yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('h1').first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
await expect(page.getByText(/not a fixed catchment/)).toBeVisible();
|
||||
|
||||
// The old secondary template asserted "distance cut-off data is not
|
||||
// available for this school" on every page, including ones whose council
|
||||
// does publish it. Showing both at once would be a flat contradiction.
|
||||
await expect(page.getByText(/has not published a cut-off distance/)).toHaveCount(0);
|
||||
|
||||
// A banded school's figure is the widest of several routes, and must say so.
|
||||
if ((found!.distance.route_count ?? 1) > 1) {
|
||||
await expect(page.getByText(/admission routes at this school/)).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('a cut-off distance opens the Admissions section in the sticky nav', async ({ page }) => {
|
||||
// buildNavItems and the section composers gate on the same condition; when
|
||||
// they drift the nav links to an anchor that was never rendered.
|
||||
const found = await schoolWithCutoff(page);
|
||||
test.skip(found === null, 'no school in the sample has a published cut-off distance yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('h1').first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
await expect(page.locator('#admissions')).toHaveCount(1);
|
||||
});
|
||||
|
||||
test('no school page shows an implausible cut-off distance', async ({ page }) => {
|
||||
// The source carries transcription errors up to 533 miles, filtered in
|
||||
// stg_school_distance. This asserts the filter is actually reaching the API,
|
||||
// because a visibly absurd figure on a live page is the failure that would
|
||||
// cost the site its credibility.
|
||||
let checked = 0;
|
||||
for (const urn of CUTOFF_CANDIDATE_URNS) {
|
||||
const res = await page.request.get(`/api/schools/${urn}`);
|
||||
if (!res.ok()) continue;
|
||||
const d = (await res.json())?.admission_distance;
|
||||
if (d?.distance_m == null) continue;
|
||||
checked += 1;
|
||||
expect(d.distance_m, `URN ${urn} cut-off outside the plausibility band`)
|
||||
.toBeGreaterThanOrEqual(25);
|
||||
expect(d.distance_m, `URN ${urn} cut-off outside the plausibility band`)
|
||||
.toBeLessThanOrEqual(25000);
|
||||
}
|
||||
test.skip(checked === 0, 'no cut-off distances available to check yet');
|
||||
});
|
||||
|
||||
// ── The Distance view, map and postcode check ────────────────────────────
|
||||
|
||||
test('a school with several published years gets the Distance view', async ({ page }) => {
|
||||
const found = await schoolWithCutoff(page, 2);
|
||||
test.skip(found === null, 'no school in the sample has 2+ published cut-off years yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('#admissions')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Its own section on both templates, not a third tab inside Admissions —
|
||||
// stacking a view that tall in the admissions viewport sized the whole card
|
||||
// to it and left the default view mostly blank.
|
||||
await expect(page.locator('#distance')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: 'Distance' })).toHaveCount(0);
|
||||
|
||||
// Every published year must appear as a row.
|
||||
for (const h of found!.history as { year: number }[]) {
|
||||
await expect(page.getByRole('rowheader', { name: String(h.year) })).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('the year table never leaves a gap unexplained', async ({ page }) => {
|
||||
// A blank row would tell a parent nothing; each gap must name its reason.
|
||||
const found = await schoolWithCutoff(page, 2);
|
||||
test.skip(found === null, 'no school in the sample has 2+ published cut-off years yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('#distance')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const statuses = await page.locator('[class*="cutoffPill"]').allTextContents();
|
||||
expect(statuses.length).toBeGreaterThan(0);
|
||||
for (const s of statuses) {
|
||||
expect(s.trim(), 'every row carries a status').not.toBe('');
|
||||
}
|
||||
// The stronger claim the data cannot support must never appear.
|
||||
await expect(page.getByText(/every applicant was offered/i)).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('the postcode check answers with a distance and per-year verdicts', async ({ page }) => {
|
||||
const found = await schoolWithCutoff(page, 2);
|
||||
test.skip(found === null, 'no school in the sample has 2+ published cut-off years yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('#distance')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const input = page.getByLabel('Your postcode');
|
||||
await expect(input).toBeVisible();
|
||||
await input.fill('SW1A 1AA');
|
||||
await page.getByRole('button', { name: 'Check' }).click();
|
||||
|
||||
// Either a verdict or a plain error — never a silent no-op.
|
||||
const result = page.getByRole('status');
|
||||
const error = page.getByRole('alert');
|
||||
await expect(result.or(error)).toBeVisible({ timeout: 20_000 });
|
||||
|
||||
if (await result.isVisible()) {
|
||||
await expect(result).toContainText(/mile|m\b/);
|
||||
}
|
||||
});
|
||||
|
||||
test('the postcode check states its limits before it is used', async ({ page }) => {
|
||||
// The caveat is not revealed with the answer — it is there while the parent
|
||||
// is deciding whether to trust the answer at all.
|
||||
const found = await schoolWithCutoff(page, 2);
|
||||
test.skip(found === null, 'no school in the sample has 2+ published cut-off years yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('#distance')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const caveat = page.getByText(/Distance is the last criterion applied/);
|
||||
await expect(caveat).toBeVisible();
|
||||
await expect(caveat).toContainText(/not a catchment boundary/);
|
||||
await expect(caveat).toContainText(/walking route/);
|
||||
// One caveat for the section, not the three paragraphs it replaced.
|
||||
await expect(caveat).toHaveCount(1);
|
||||
});
|
||||
|
||||
test('the distance section never scrolls the page sideways', async ({ page }) => {
|
||||
const found = await schoolWithCutoff(page, 2);
|
||||
test.skip(found === null, 'no school in the sample has 2+ published cut-off years yet');
|
||||
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('#distance')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// The year table is deliberately wider than a phone; its own wrapper has to
|
||||
// absorb that, or the whole page slides under the reader's thumb.
|
||||
const overflow = await page.evaluate(() =>
|
||||
document.documentElement.scrollWidth - document.documentElement.clientWidth);
|
||||
expect(overflow, 'page must not scroll horizontally').toBeLessThanOrEqual(1);
|
||||
});
|
||||
|
||||
test('no single section dominates the height of a school page', async ({ page }) => {
|
||||
/*
|
||||
* The admissions views are stacked in one grid cell so switching them never
|
||||
* shifts layout, which means the card is sized by its TALLEST view while the
|
||||
* hidden ones keep their box. A distance view carrying a chart, a table and a
|
||||
* map was added there and measured 1402px against the tile grid's 316px; the
|
||||
* DEFAULT view rendered as four tiles adrift in ~1080px of blank card, and
|
||||
* Admissions alone came to half the height of every section on the page
|
||||
* (1503px against 526px for the next largest).
|
||||
*
|
||||
* Measuring the card's internals cannot catch it: the tile grid is
|
||||
* `flex: 1`, so it absorbs the stretch and every box still looks full. What
|
||||
* a reader actually sees is one section wildly out of proportion with its
|
||||
* neighbours, so that is what this asserts.
|
||||
*/
|
||||
const found = await schoolWithCutoff(page, 2);
|
||||
test.skip(found === null, 'no school in the sample has 2+ published cut-off years yet');
|
||||
|
||||
await page.goto(`/school/${found!.urn}`);
|
||||
await expect(page.locator('#admissions')).toBeVisible({ timeout: 15_000 });
|
||||
await page.waitForTimeout(1200); // charts settle, and they carry real height
|
||||
|
||||
const sections = await page.evaluate(() =>
|
||||
[...document.querySelectorAll('section[id]')]
|
||||
.map((s) => ({ id: s.id, h: Math.round(s.getBoundingClientRect().height) }))
|
||||
.filter((s) => s.h > 0));
|
||||
|
||||
expect(sections.length).toBeGreaterThanOrEqual(3);
|
||||
const heights = sections.map((s) => s.h).sort((a, b) => a - b);
|
||||
const median = heights[Math.floor(heights.length / 2)];
|
||||
const worst = sections.reduce((a, b) => (a.h > b.h ? a : b));
|
||||
|
||||
// Generous: a rich section may fairly run to twice a plain one. Nearly three
|
||||
// times over is the shape of a layout fault, not of denser content.
|
||||
expect(
|
||||
worst.h / median,
|
||||
`#${worst.id} is ${worst.h}px against a ${median}px median: `
|
||||
+ sections.map((s) => `${s.id}=${s.h}`).join(', '),
|
||||
).toBeLessThan(2.5);
|
||||
});
|
||||
@@ -1,591 +0,0 @@
|
||||
<title>Last distance offered — detail page mockup</title>
|
||||
<style>
|
||||
:root{
|
||||
--bg-primary:#faf7f2; --bg-secondary:#f3ede4; --bg-card:#fff;
|
||||
--text-primary:#1a1612; --text-secondary:#5c564d; --text-muted:#6d685f;
|
||||
--accent-coral:#e07256; --accent-coral-dark:#b04a2e;
|
||||
--accent-teal:#296f6f; --accent-teal-light:#3a9e9e;
|
||||
--accent-gold:#c9a227; --accent-gold-text:#7a6800;
|
||||
--coral-bg:rgba(224,114,86,.12); --teal-bg:rgba(45,125,125,.12); --gold-bg:rgba(201,162,39,.12);
|
||||
--border:#e5dfd5; --shadow:0 2px 8px rgba(26,22,18,.06); --shadow-md:0 4px 20px rgba(26,22,18,.1);
|
||||
--radius-sm:4px; --radius-md:8px; --radius-lg:16px;
|
||||
--serif:'Playfair Display',Georgia,'Iowan Old Style',serif;
|
||||
--sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
||||
}
|
||||
/* Mockup is a fixed light artefact — it mirrors the live app, which is light-only. */
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:var(--sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;
|
||||
padding:44px 20px 110px;font-variant-numeric:tabular-nums}
|
||||
.wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0}
|
||||
|
||||
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,34px);letter-spacing:-.015em;text-wrap:balance}
|
||||
.pagehead p{color:var(--text-secondary);margin-top:10px;font-size:15px;max-width:64ch}
|
||||
.pagehead p + p{margin-top:8px}
|
||||
|
||||
.step{margin:60px 0 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
|
||||
.step h2{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em}
|
||||
.step .where{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-teal);
|
||||
background:var(--teal-bg);padding:3px 9px;border-radius:999px}
|
||||
.stepdesc{color:var(--text-muted);font-size:14px;margin-bottom:18px;max-width:66ch}
|
||||
.stepdesc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--bg-secondary);padding:1px 5px;border-radius:var(--radius-sm)}
|
||||
|
||||
/* ---- card shell mirrors SchoolDetailView .card ---- */
|
||||
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
|
||||
box-shadow:var(--shadow);padding:26px 26px 24px}
|
||||
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
|
||||
.sectionTitle{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em}
|
||||
.sectionSub{color:var(--text-secondary);font-size:14px;margin-bottom:18px}
|
||||
|
||||
.seg{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:3px;gap:2px;flex:none}
|
||||
.seg button{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
|
||||
color:var(--text-muted);padding:6px 13px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
|
||||
.seg button[aria-pressed="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow)}
|
||||
.seg button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}
|
||||
|
||||
/* ---- tiles ---- */
|
||||
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin-top:4px}
|
||||
.tile{background:var(--bg-secondary);border-radius:var(--radius-md);padding:14px 15px 13px}
|
||||
.tile .num{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15;letter-spacing:-.01em;display:block}
|
||||
.tile .num .unit{font-family:var(--sans);font-size:15px;font-weight:600;margin-left:2px}
|
||||
.tile .num .sub{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--text-muted);margin-top:1px}
|
||||
.tile .lbl{display:block;font-size:12.5px;color:var(--text-secondary);margin-top:5px;line-height:1.35}
|
||||
.tile.accent{background:var(--coral-bg)}
|
||||
.tile.accent .num{color:var(--accent-coral-dark)}
|
||||
.tile.newtile{background:var(--coral-bg);box-shadow:inset 0 0 0 1.5px var(--accent-coral)}
|
||||
.tile.newtile .num{color:var(--accent-coral-dark)}
|
||||
.newflag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
|
||||
color:var(--accent-coral-dark);background:rgba(224,114,86,.2);padding:1px 6px;border-radius:999px;margin-bottom:6px}
|
||||
|
||||
/* ---- verdict banner ---- */
|
||||
.verdict{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:var(--radius-md);margin:2px 0 20px}
|
||||
.verdict.hard{background:var(--coral-bg)}
|
||||
.verdict .vic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
|
||||
background:var(--accent-coral-dark);color:#fff;font-size:12px;font-weight:700}
|
||||
.verdict .vhead{font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--accent-coral-dark);text-wrap:balance}
|
||||
.verdict .vsub{color:var(--text-secondary);font-size:13.5px;margin-top:3px}
|
||||
|
||||
/* ---- chart ---- */
|
||||
.chartwrap{overflow-x:auto}
|
||||
.chart{display:block;width:100%;min-width:460px;height:auto}
|
||||
.axtxt{font-family:var(--sans);font-size:11px;fill:var(--text-muted)}
|
||||
.ptlbl{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--accent-coral-dark)}
|
||||
.keyrow{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
|
||||
.keyrow span{display:inline-flex;align-items:center;gap:7px}
|
||||
.kdot{width:11px;height:11px;border-radius:50%;flex:none}
|
||||
.kdot.line{background:var(--accent-coral)}
|
||||
.kdot.open{background:#fff;box-shadow:inset 0 0 0 2px var(--accent-teal)}
|
||||
.kdot.gap{background:repeating-linear-gradient(90deg,var(--text-muted) 0 2px,transparent 2px 4px);border-radius:0;height:2px}
|
||||
|
||||
/* ---- table ---- */
|
||||
.tblwrap{overflow-x:auto;margin-top:4px}
|
||||
table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
|
||||
thead th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
|
||||
color:var(--text-muted);padding:0 10px 9px;border-bottom:1px solid var(--border)}
|
||||
thead th:first-child{text-align:left}
|
||||
tbody td{text-align:right;padding:11px 10px;border-bottom:1px solid var(--border)}
|
||||
tbody td:first-child{text-align:left;font-weight:600}
|
||||
tbody tr:last-child td{border-bottom:none}
|
||||
tbody tr.now{background:var(--bg-secondary)}
|
||||
td.miss{color:var(--text-muted);font-weight:400}
|
||||
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
|
||||
.pill.over{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
||||
.pill.ok{background:var(--teal-bg);color:var(--accent-teal)}
|
||||
.pill.na{background:var(--bg-secondary);color:var(--text-muted)}
|
||||
|
||||
/* ---- map ---- */
|
||||
.mapfig{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#eef2ec}
|
||||
.mapsvg{display:block;width:100%;height:auto}
|
||||
.maplegend{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
|
||||
.maplegend span{display:inline-flex;align-items:center;gap:7px}
|
||||
.swatch{width:14px;height:14px;border-radius:50%;flex:none}
|
||||
.swatch.now{background:rgba(224,114,86,.18);box-shadow:inset 0 0 0 2px var(--accent-coral)}
|
||||
.swatch.past{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(176,74,46,.4)}
|
||||
.swatch.you{background:var(--accent-teal);border-radius:2px;transform:rotate(45deg);width:11px;height:11px}
|
||||
|
||||
/* ---- postcode check ---- */
|
||||
.checkbox{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}
|
||||
.checkhead{font-weight:700;font-size:15px;margin-bottom:3px}
|
||||
.checksub{font-size:13.5px;color:var(--text-muted);margin-bottom:12px}
|
||||
.checkform{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.checkform input{font:inherit;font-size:15px;padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-md);
|
||||
background:var(--bg-card);color:var(--text-primary);min-width:150px;flex:1 1 150px;text-transform:uppercase}
|
||||
.checkform input:focus-visible{outline:2px solid var(--accent-teal);outline-offset:1px;border-color:var(--accent-teal)}
|
||||
.checkform button{font:inherit;font-weight:600;font-size:15px;padding:10px 20px;border:none;border-radius:var(--radius-md);
|
||||
background:var(--accent-coral-dark);color:#fff;cursor:pointer;transition:background .15s}
|
||||
.checkform button:hover{background:#9c3f26}
|
||||
.checkform button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}
|
||||
.result{margin-top:14px;background:var(--teal-bg);border-radius:var(--radius-md);padding:15px 17px}
|
||||
.result .rhead{font-weight:700;font-size:16px;color:var(--accent-teal);letter-spacing:-.01em;text-wrap:balance}
|
||||
.result .rsub{font-size:13.5px;color:var(--text-secondary);margin-top:4px}
|
||||
.yearstrip{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
|
||||
.yr{font-size:11px;font-weight:600;padding:3px 7px;border-radius:var(--radius-sm);white-space:nowrap}
|
||||
.yr.in{background:rgba(45,125,125,.22);color:var(--accent-teal)}
|
||||
.yr.out{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
||||
.yr.none{background:var(--bg-secondary);color:var(--text-muted)}
|
||||
|
||||
/* ---- notes / disclosure ---- */
|
||||
.note{display:flex;gap:9px;margin-top:16px;font-size:13px;color:var(--text-muted);line-height:1.55}
|
||||
.note .i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--bg-secondary);color:var(--text-muted);
|
||||
font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px}
|
||||
.disclosure{margin-top:16px;border-top:1px solid var(--border);padding-top:4px}
|
||||
.disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;
|
||||
font-weight:600;font-size:14px;color:var(--accent-teal)}
|
||||
.disclosure>summary::-webkit-details-marker{display:none}
|
||||
.disclosure>summary:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px;border-radius:var(--radius-sm)}
|
||||
.disclosure .chev{transition:transform .2s ease}
|
||||
.disclosure[open]>summary .chev{transform:rotate(90deg)}
|
||||
.disclosure .body{padding:2px 0 10px;font-size:13.5px;color:var(--text-secondary);display:flex;flex-direction:column;gap:10px}
|
||||
.disclosure .body b{color:var(--text-primary)}
|
||||
|
||||
/* ---- viewport stack (keeps card height stable across views) ---- */
|
||||
.viewport{display:grid}
|
||||
.viewport>.view{grid-area:1/1}
|
||||
.viewport>.view[hidden]{display:block;visibility:hidden;pointer-events:none}
|
||||
|
||||
/* ---- edge cases ---- */
|
||||
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
|
||||
.case{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 17px}
|
||||
.case h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
|
||||
.case .body{font-size:14px;color:var(--text-secondary);line-height:1.5}
|
||||
.case .body strong{color:var(--text-primary)}
|
||||
.emptybox{background:var(--bg-secondary);border-radius:var(--radius-md);padding:13px 15px;font-size:13.5px;color:var(--text-secondary)}
|
||||
|
||||
/* ---- phone ---- */
|
||||
.phonerow{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
|
||||
.phone{width:330px;max-width:100%;border:9px solid #1a1612;border-radius:34px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--bg-primary)}
|
||||
.phonebody{padding:14px 13px 20px;display:flex;flex-direction:column;gap:12px}
|
||||
.phone .card{padding:17px 16px 16px;border-radius:var(--radius-md)}
|
||||
.phone .sectionTitle{font-size:18px}
|
||||
.phone .tiles{grid-template-columns:1fr 1fr;gap:8px}
|
||||
.phone .tile{padding:11px 12px}
|
||||
.phone .tile .num{font-size:22px}
|
||||
.phone .chart{min-width:0}
|
||||
.phone .chartwrap{overflow:visible}
|
||||
.phonenote{font-size:13px;color:var(--text-muted);flex:1 1 240px;min-width:220px}
|
||||
.phonenote h3{font-family:var(--serif);font-size:17px;color:var(--text-primary);margin-bottom:8px;font-weight:600}
|
||||
.phonenote ul{padding-left:18px;display:flex;flex-direction:column;gap:7px}
|
||||
|
||||
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<div class="pagehead">
|
||||
<h1>Last distance offered — school detail page</h1>
|
||||
<p>Adds the final-offer cut-off distance to the existing <b>Admissions</b> card, plus a catchment
|
||||
view on the map. Data covers one to ten years depending on the school and local authority, so every
|
||||
screen here is built around partial coverage rather than assuming a full run.</p>
|
||||
<p>Sample school: <b>Fairlawn Primary School</b>, Lewisham — 8 years of distance data out of 10 years of admissions data.</p>
|
||||
</div>
|
||||
|
||||
<!-- ============ 1. ADMISSIONS CARD ============ -->
|
||||
<div class="step">
|
||||
<h2>1. A distance tile joins the admissions tiles</h2>
|
||||
<span class="where">SchoolDetailView · #admissions</span>
|
||||
</div>
|
||||
<p class="stepdesc">No new section and no new nav entry — the number a parent actually asks for
|
||||
("how close do we need to live?") sits with the rest of the intake story. The segmented control gains a
|
||||
third view, <code>Distance</code>.</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="cardhead">
|
||||
<h2 class="sectionTitle">Admissions</h2>
|
||||
<div class="seg" role="group" aria-label="Admissions view">
|
||||
<button type="button" aria-pressed="true" data-view="year">This year</button>
|
||||
<button type="button" aria-pressed="false" data-view="trend">10-year trend</button>
|
||||
<button type="button" aria-pressed="false" data-view="dist">Distance</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="sectionSub">Reception entry, September 2025.</p>
|
||||
|
||||
<div class="viewport">
|
||||
<!-- view: this year -->
|
||||
<div class="view" id="v-year">
|
||||
<dl class="tiles">
|
||||
<div class="tile">
|
||||
<dd class="num">60</dd><dt class="lbl">Places offered</dt>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<dd class="num">142</dd><dt class="lbl">Wanted it first</dt>
|
||||
</div>
|
||||
<div class="tile accent">
|
||||
<dd class="num">54<span class="sub">of 142 · 38%</span></dd>
|
||||
<dt class="lbl">Got their first choice</dt>
|
||||
</div>
|
||||
<div class="tile newtile">
|
||||
<span class="newflag">New</span>
|
||||
<dd class="num">0.31<span class="unit">mi</span><span class="sub">≈ 500 m · 6 min walk</span></dd>
|
||||
<dt class="lbl">Last distance offered</dt>
|
||||
</div>
|
||||
</dl>
|
||||
<div class="note">
|
||||
<span class="i" aria-hidden="true">i</span>
|
||||
<span>The furthest home offered a place once siblings, faith and EHCP priority were applied.
|
||||
It is not a fixed catchment — it moves every year with the number of applications.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- view: distance -->
|
||||
<div class="view" id="v-dist" hidden>
|
||||
<div class="verdict hard">
|
||||
<span class="vic" aria-hidden="true">↓</span>
|
||||
<div>
|
||||
<div class="vhead">The catchment has halved in nine years</div>
|
||||
<div class="vsub">0.62 mi in 2016 → 0.31 mi in 2025. Four of the last five years tightened.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chartwrap">
|
||||
<svg class="chart" viewBox="0 0 700 250" role="img"
|
||||
aria-label="Last distance offered by year: 0.62 miles in 2016, 0.55 in 2017, not published in 2018, 0.48 in 2019, 0.51 in 2020, 0.44 in 2021, no cut-off needed in 2022, 0.39 in 2023, 0.35 in 2024, 0.31 in 2025.">
|
||||
<!-- grid -->
|
||||
<g stroke="#e5dfd5" stroke-width="1">
|
||||
<line x1="46" y1="30" x2="686" y2="30"/>
|
||||
<line x1="46" y1="80" x2="686" y2="80"/>
|
||||
<line x1="46" y1="130" x2="686" y2="130"/>
|
||||
<line x1="46" y1="180" x2="686" y2="180"/>
|
||||
</g>
|
||||
<line x1="46" y1="206" x2="686" y2="206" stroke="#d8d0c3" stroke-width="1.5"/>
|
||||
<g class="axtxt" text-anchor="end">
|
||||
<text x="38" y="34">0.8</text><text x="38" y="84">0.6</text>
|
||||
<text x="38" y="134">0.4</text><text x="38" y="184">0.2</text>
|
||||
</g>
|
||||
<text class="axtxt" x="46" y="16" text-anchor="start">miles</text>
|
||||
|
||||
<!-- gap segments (dashed = no figure published) -->
|
||||
<g fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="4 4" opacity=".55">
|
||||
<path d="M114 92 L182 110"/>
|
||||
<path d="M318 122 L386 132.5"/>
|
||||
</g>
|
||||
<!-- solid series -->
|
||||
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||||
points="46,75 114,92"/>
|
||||
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||||
points="182,110 250,102 318,122"/>
|
||||
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||||
points="386,132.5 454,142.5 522,152.5"/>
|
||||
|
||||
<!-- points -->
|
||||
<g fill="#e07256" stroke="#fff" stroke-width="2">
|
||||
<circle cx="46" cy="75" r="5"/><circle cx="114" cy="92" r="5"/>
|
||||
<circle cx="182" cy="110" r="5"/><circle cx="250" cy="102" r="5"/>
|
||||
<circle cx="318" cy="122" r="5"/><circle cx="386" cy="132.5" r="5"/>
|
||||
<circle cx="454" cy="142.5" r="5"/>
|
||||
</g>
|
||||
<!-- latest, emphasised -->
|
||||
<circle cx="522" cy="152.5" r="7.5" fill="#b04a2e" stroke="#fff" stroke-width="2.5"/>
|
||||
|
||||
<!-- "no cut-off needed" marker, 2022 -->
|
||||
<circle cx="352" cy="46" r="6" fill="#fff" stroke="#296f6f" stroke-width="2.5"/>
|
||||
<text class="axtxt" x="352" y="34" text-anchor="middle" fill="#296f6f" font-weight="600">all offered</text>
|
||||
<line x1="352" y1="54" x2="352" y2="196" stroke="#296f6f" stroke-width="1.5" stroke-dasharray="3 4" opacity=".45"/>
|
||||
|
||||
<!-- endpoint labels -->
|
||||
<text class="ptlbl" x="46" y="63" text-anchor="start">0.62</text>
|
||||
<text class="ptlbl" x="530" y="157" text-anchor="start">0.31 mi</text>
|
||||
|
||||
<!-- year axis -->
|
||||
<g class="axtxt" text-anchor="middle">
|
||||
<text x="46" y="226">2016</text><text x="114" y="226">2017</text>
|
||||
<text x="182" y="226">2019</text><text x="250" y="226">2020</text>
|
||||
<text x="318" y="226">2021</text><text x="386" y="226">2023</text>
|
||||
<text x="454" y="226">2024</text><text x="522" y="226">2025</text>
|
||||
</g>
|
||||
<text class="axtxt" x="148" y="243" text-anchor="middle" fill="#6d685f">2018 not published</text>
|
||||
<text class="axtxt" x="352" y="243" text-anchor="middle" fill="#296f6f">2022 undersubscribed</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="keyrow">
|
||||
<span><i class="kdot line" aria-hidden="true"></i>Distance of the last place offered</span>
|
||||
<span><i class="kdot open" aria-hidden="true"></i>No cut-off needed — every applicant offered</span>
|
||||
<span><i class="kdot gap" aria-hidden="true"></i>Not published by the local authority</span>
|
||||
</div>
|
||||
|
||||
<div class="tblwrap" style="margin-top:22px">
|
||||
<table>
|
||||
<caption class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Last distance offered by year</caption>
|
||||
<thead>
|
||||
<tr><th scope="col">Year</th><th scope="col">Last distance</th><th scope="col">Places</th><th scope="col">Status</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="now"><td>2025</td><td>0.31 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2024</td><td>0.35 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2023</td><td>0.39 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2022</td><td class="miss">No cut-off needed</td><td>60</td><td><span class="pill ok">All offered</span></td></tr>
|
||||
<tr><td>2021</td><td>0.44 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2020</td><td>0.51 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2019</td><td>0.48 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2018</td><td class="miss">—</td><td>60</td><td><span class="pill na">Not published</span></td></tr>
|
||||
<tr><td>2017</td><td>0.55 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
<tr><td>2016</td><td>0.62 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<details class="disclosure">
|
||||
<summary><span class="chev" aria-hidden="true">›</span>What this number does and doesn't tell you</summary>
|
||||
<div class="body">
|
||||
<span><b>It is a result, not a rule.</b> It records how far the last successful applicant lived
|
||||
in a given year. Move one large sibling cohort and the figure shifts.</span>
|
||||
<span><b>Distance is the final tiebreak.</b> Children in care, EHCP places, siblings and — at faith
|
||||
schools — the faith criteria are ranked first. A family inside the distance can still miss out.</span>
|
||||
<span><b>Lewisham measures straight-line distance</b> from home to the school's main gate. Other
|
||||
authorities use walking routes, which are always longer for the same home.</span>
|
||||
<span><b>Gaps are normal.</b> An authority may not publish a figure, or the school may not have
|
||||
needed a distance cut-off that year. Both are shown here rather than hidden.</span>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ 2. MAP ============ -->
|
||||
<div class="step">
|
||||
<h2>2. The cut-off drawn on the map</h2>
|
||||
<span class="where">SchoolHeroMap · catchment layer</span>
|
||||
</div>
|
||||
<p class="stepdesc">"0.31 miles" is abstract until you see it over your own streets. The latest year is a
|
||||
filled ring; earlier years sit behind it as hairlines, so the tightening reads instantly as a set of
|
||||
shrinking circles. Straight-line rings only — they're an illustration of the number, not a boundary.</p>
|
||||
|
||||
<div class="card">
|
||||
<div class="cardhead" style="margin-bottom:14px">
|
||||
<h2 class="sectionTitle">Where the last place went</h2>
|
||||
<div class="seg" role="group" aria-label="Map years">
|
||||
<button type="button" aria-pressed="true">2025 only</button>
|
||||
<button type="button" aria-pressed="false">Last 5 years</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="mapfig">
|
||||
<svg class="mapsvg" viewBox="0 0 700 400" role="img"
|
||||
aria-label="Map showing concentric catchment rings around Fairlawn Primary School: 0.62 miles in 2016 shrinking to 0.31 miles in 2025, with a marker for a sample home 0.24 miles away, inside the current ring.">
|
||||
<rect width="700" height="400" fill="#eef2ec"/>
|
||||
<!-- park -->
|
||||
<path d="M470 20 h230 v150 h-160 q-70 -20 -70 -80 z" fill="#dfe9dc"/>
|
||||
<!-- water -->
|
||||
<path d="M0 330 q120 -40 250 -10 t260 -20 l190 -30 v130 H0 z" fill="#dbe6ee"/>
|
||||
<!-- street grid -->
|
||||
<g stroke="#fff" stroke-width="7" stroke-linecap="round" opacity=".95">
|
||||
<path d="M-10 90 H710"/><path d="M-10 200 H710"/><path d="M-10 300 H710"/>
|
||||
<path d="M120 -10 V410"/><path d="M300 -10 V410"/><path d="M470 -10 V410"/><path d="M620 -10 V410"/>
|
||||
</g>
|
||||
<g stroke="#fff" stroke-width="3.5" opacity=".8">
|
||||
<path d="M-10 145 H710"/><path d="M-10 250 H710"/><path d="M210 -10 V410"/><path d="M385 -10 V410"/><path d="M550 -10 V410"/>
|
||||
</g>
|
||||
<!-- building blocks -->
|
||||
<g fill="#e4e2dc" opacity=".85">
|
||||
<rect x="132" y="102" width="60" height="30" rx="2"/><rect x="222" y="102" width="64" height="30" rx="2"/>
|
||||
<rect x="132" y="212" width="60" height="26" rx="2"/><rect x="222" y="212" width="64" height="26" rx="2"/>
|
||||
<rect x="400" y="102" width="56" height="30" rx="2"/><rect x="400" y="212" width="56" height="26" rx="2"/>
|
||||
</g>
|
||||
|
||||
<!-- historic rings (hairline) -->
|
||||
<g fill="none" stroke="#b04a2e" opacity=".38" stroke-width="1.5">
|
||||
<circle cx="300" cy="200" r="150"/>
|
||||
<circle cx="300" cy="200" r="126"/>
|
||||
<circle cx="300" cy="200" r="106"/>
|
||||
<circle cx="300" cy="200" r="90"/>
|
||||
</g>
|
||||
<text class="axtxt" x="300" y="44" text-anchor="middle" fill="#b04a2e" font-weight="600">2016 · 0.62 mi</text>
|
||||
<!-- current ring -->
|
||||
<circle cx="300" cy="200" r="75" fill="rgba(224,114,86,.18)" stroke="#e07256" stroke-width="3"/>
|
||||
<text class="axtxt" x="300" y="118" text-anchor="middle" fill="#b04a2e" font-weight="700" font-size="12.5">2025 · 0.31 mi</text>
|
||||
|
||||
<!-- school pin -->
|
||||
<circle cx="300" cy="200" r="11" fill="#b04a2e" stroke="#fff" stroke-width="3"/>
|
||||
<text class="axtxt" x="300" y="232" text-anchor="middle" fill="#1a1612" font-weight="700" font-size="12">Fairlawn Primary</text>
|
||||
|
||||
<!-- your home -->
|
||||
<g transform="translate(246,158)">
|
||||
<rect x="-7" y="-7" width="14" height="14" rx="2" fill="#296f6f" stroke="#fff" stroke-width="2.5" transform="rotate(45)"/>
|
||||
</g>
|
||||
<text class="axtxt" x="246" y="140" text-anchor="middle" fill="#296f6f" font-weight="700" font-size="12">Your home · 0.24 mi</text>
|
||||
</svg>
|
||||
</figure>
|
||||
|
||||
<div class="maplegend">
|
||||
<span><i class="swatch now" aria-hidden="true"></i>2025 cut-off — 0.31 mi</span>
|
||||
<span><i class="swatch past" aria-hidden="true"></i>Earlier years, 2016–2024</span>
|
||||
<span><i class="swatch you" aria-hidden="true"></i>Your home</span>
|
||||
</div>
|
||||
|
||||
<div class="checkbox">
|
||||
<div class="checkhead">Would you have got in?</div>
|
||||
<p class="checksub">We measure straight-line distance from your postcode, the same way Lewisham does.</p>
|
||||
<form class="checkform" onsubmit="return false">
|
||||
<label class="sr-only" for="pc" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Your postcode</label>
|
||||
<input id="pc" type="text" value="SE23 3NA" autocomplete="postal-code" spellcheck="false">
|
||||
<button type="submit">Check</button>
|
||||
</form>
|
||||
|
||||
<div class="result">
|
||||
<div class="rhead">0.24 miles away — inside the cut-off in all 8 years on record</div>
|
||||
<div class="rsub">That's 0.07 miles of headroom on 2025, the tightest year so far. 2018 has no published
|
||||
figure, and in 2022 every applicant was offered a place.</div>
|
||||
<div class="yearstrip">
|
||||
<span class="yr in">2016 ✓</span>
|
||||
<span class="yr in">2017 ✓</span>
|
||||
<span class="yr none">2018 –</span>
|
||||
<span class="yr in">2019 ✓</span>
|
||||
<span class="yr in">2020 ✓</span>
|
||||
<span class="yr in">2021 ✓</span>
|
||||
<span class="yr in">2022 ✓</span>
|
||||
<span class="yr in">2023 ✓</span>
|
||||
<span class="yr in">2024 ✓</span>
|
||||
<span class="yr in">2025 ✓</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<span class="i" aria-hidden="true">!</span>
|
||||
<span>An indication only. Distance is applied after siblings, faith and EHCP priority, and next year's
|
||||
cut-off depends on next year's applicants. Always check the school's own admissions policy.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ 3. COVERAGE STATES ============ -->
|
||||
<div class="step">
|
||||
<h2>3. Coverage states</h2>
|
||||
<span class="where">Partial data is the normal case</span>
|
||||
</div>
|
||||
<p class="stepdesc">Coverage runs from ten years to none. Each state says something true rather than
|
||||
falling back on a generic "no data" — the reason a figure is absent is itself useful to a parent.</p>
|
||||
|
||||
<div class="cases">
|
||||
<div class="case">
|
||||
<h3>4+ years</h3>
|
||||
<div class="body">Full treatment: verdict banner, chart, table, map rings. <strong>The verdict line only
|
||||
appears with 4+ points</strong> — below that a two-year swing isn't a trend.</div>
|
||||
</div>
|
||||
<div class="case">
|
||||
<h3>2–3 years</h3>
|
||||
<div class="body">Tile and table, no verdict banner, single map ring for the latest year.
|
||||
<strong>"Only 3 years available"</strong> sits under the table.</div>
|
||||
</div>
|
||||
<div class="case">
|
||||
<h3>1 year</h3>
|
||||
<div class="body">Tile plus one map ring. No <code>Distance</code> tab — the tile and its footnote are
|
||||
the whole story.</div>
|
||||
</div>
|
||||
<div class="case">
|
||||
<h3>Never oversubscribed</h3>
|
||||
<div class="body" style="margin-bottom:10px">Not missing data — good news, and it should read that way.</div>
|
||||
<div class="emptybox"><b style="color:var(--accent-teal)">Everyone who applied was offered a place</b>
|
||||
in each of the last 6 years, so no distance cut-off was needed.</div>
|
||||
</div>
|
||||
<div class="case">
|
||||
<h3>No data at all</h3>
|
||||
<div class="body" style="margin-bottom:10px">Replaces the current placeholder text in
|
||||
<code>SecondarySchoolDetailView.tsx:780</code>.</div>
|
||||
<div class="emptybox">Lewisham hasn't published cut-off distances for this school.
|
||||
<a href="#" style="color:var(--accent-teal);font-weight:600">The council's admissions page</a> may list them.</div>
|
||||
</div>
|
||||
<div class="case">
|
||||
<h3>Not distance-ranked</h3>
|
||||
<div class="body" style="margin-bottom:10px">Grammar and some faith schools rank on test score or faith
|
||||
practice, so a distance figure would mislead.</div>
|
||||
<div class="emptybox">Places here are ranked by the entrance test, not by distance.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ 4. MOBILE ============ -->
|
||||
<div class="step">
|
||||
<h2>4. Mobile</h2>
|
||||
<span class="where">≤ 640 px</span>
|
||||
</div>
|
||||
<p class="stepdesc">Tiles fall to two columns and the distance tile takes the full width beneath them, so the
|
||||
headline number survives the reflow. The chart drops its table on mobile behind a "See all years" disclosure.</p>
|
||||
|
||||
<div class="phonerow">
|
||||
<div class="phone">
|
||||
<div class="phonebody">
|
||||
<div class="card">
|
||||
<div class="cardhead" style="margin-bottom:6px">
|
||||
<h2 class="sectionTitle">Admissions</h2>
|
||||
</div>
|
||||
<p class="sectionSub" style="font-size:13px;margin-bottom:12px">Reception, Sept 2025</p>
|
||||
<div class="seg" style="margin-bottom:14px">
|
||||
<button type="button" aria-pressed="true">Year</button>
|
||||
<button type="button" aria-pressed="false">Trend</button>
|
||||
<button type="button" aria-pressed="false">Distance</button>
|
||||
</div>
|
||||
<dl class="tiles">
|
||||
<div class="tile"><dd class="num">60</dd><dt class="lbl">Places offered</dt></div>
|
||||
<div class="tile"><dd class="num">142</dd><dt class="lbl">Wanted it first</dt></div>
|
||||
</dl>
|
||||
<div class="tile newtile" style="margin-top:8px">
|
||||
<span class="newflag">New</span>
|
||||
<dd class="num" style="font-size:26px">0.31<span class="unit">mi</span>
|
||||
<span class="sub">≈ 500 m · 6 min walk</span></dd>
|
||||
<dt class="lbl">Last distance offered, 2025</dt>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2 class="sectionTitle" style="margin-bottom:12px">Distance</h2>
|
||||
<div class="verdict hard" style="padding:12px 13px;margin:0 0 14px">
|
||||
<span class="vic" aria-hidden="true">↓</span>
|
||||
<div><div class="vhead" style="font-size:15px">Halved in nine years</div>
|
||||
<div class="vsub" style="font-size:12.5px">0.62 mi → 0.31 mi</div></div>
|
||||
</div>
|
||||
<div class="chartwrap">
|
||||
<svg class="chart" viewBox="0 0 300 150" role="img" aria-label="Last distance offered falling from 0.62 miles in 2016 to 0.31 miles in 2025.">
|
||||
<g stroke="#e5dfd5" stroke-width="1">
|
||||
<line x1="26" y1="20" x2="292" y2="20"/><line x1="26" y1="62" x2="292" y2="62"/><line x1="26" y1="104" x2="292" y2="104"/>
|
||||
</g>
|
||||
<g class="axtxt" text-anchor="end" font-size="9">
|
||||
<text x="21" y="23">0.8</text><text x="21" y="65">0.5</text><text x="21" y="107">0.2</text>
|
||||
</g>
|
||||
<path d="M26 55 L64 69" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M64 69 L102 84" fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="3 3" opacity=".55"/>
|
||||
<path d="M102 84 L140 78 L178 95" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<path d="M178 95 L216 109" fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="3 3" opacity=".55"/>
|
||||
<path d="M216 109 L254 116 L280 120" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
<g fill="#e07256" stroke="#fff" stroke-width="1.8">
|
||||
<circle cx="26" cy="55" r="4"/><circle cx="64" cy="69" r="4"/><circle cx="102" cy="84" r="4"/>
|
||||
<circle cx="140" cy="78" r="4"/><circle cx="178" cy="95" r="4"/><circle cx="216" cy="109" r="4"/><circle cx="254" cy="116" r="4"/>
|
||||
</g>
|
||||
<circle cx="280" cy="120" r="6" fill="#b04a2e" stroke="#fff" stroke-width="2"/>
|
||||
<circle cx="197" cy="30" r="4.5" fill="#fff" stroke="#296f6f" stroke-width="2"/>
|
||||
<g class="axtxt" font-size="9" text-anchor="middle">
|
||||
<text x="26" y="132">'16</text><text x="140" y="132">'20</text><text x="280" y="132">'25</text>
|
||||
</g>
|
||||
<text class="ptlbl" x="280" y="140" text-anchor="middle" font-size="11">0.31 mi</text>
|
||||
</svg>
|
||||
</div>
|
||||
<details class="disclosure" style="margin-top:10px">
|
||||
<summary style="font-size:13px"><span class="chev" aria-hidden="true">›</span>See all 10 years</summary>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phonenote">
|
||||
<h3>Mobile decisions</h3>
|
||||
<ul>
|
||||
<li>Distance tile spans both columns — the number a parent came for shouldn't be a half-width cell.</li>
|
||||
<li>Chart keeps every year but labels only first, middle and last; the endpoint stays labelled.</li>
|
||||
<li>Year-by-year table collapses into a disclosure rather than forcing a horizontal scroll.</li>
|
||||
<li>Map rings reuse the existing full-screen hero map sheet, opened from the tile.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Segmented control on the admissions card swaps the stacked views.
|
||||
document.querySelectorAll('.seg button[data-view]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var group = btn.closest('.seg');
|
||||
group.querySelectorAll('button').forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
|
||||
var target = btn.dataset.view === 'dist' ? 'v-dist' : 'v-year';
|
||||
['v-year', 'v-dist'].forEach(function (id) {
|
||||
document.getElementById(id).hidden = id !== target;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,161 +0,0 @@
|
||||
/**
|
||||
* The postcode check.
|
||||
*
|
||||
* This is the one place on the site that answers a question about a specific
|
||||
* family rather than about a school, so the tests here are mostly about what it
|
||||
* refuses to say: no verdict without a published figure, and no verdict at all
|
||||
* when the margin is inside the error of a postcode centroid.
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { CutoffMapPanel } from '@/components/school/CutoffMapPanel';
|
||||
import { cutoffYearRows, CUTOFF_UNCERTAINTY_M } from '@/components/school/lastDistanceOffered';
|
||||
import type { School, SchoolAdmissionDistance } from '@/lib/types';
|
||||
|
||||
// Leaflet needs a real layout box and network tiles; neither exists in jsdom.
|
||||
// The panel's logic is independent of it, so the map is stubbed out.
|
||||
jest.mock('@/components/LeafletCutoffMapInner', () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="cutoff-map" />,
|
||||
}));
|
||||
|
||||
const mockGeocode = jest.fn();
|
||||
jest.mock('@/lib/api', () => ({
|
||||
...jest.requireActual('@/lib/api'),
|
||||
geocodePostcode: (pc: string) => mockGeocode(pc),
|
||||
}));
|
||||
|
||||
const SCHOOL = { urn: 100010, school_name: 'Test Primary', latitude: 51.5, longitude: -0.12 } as School;
|
||||
|
||||
const d = (year: number, distance_m: number): SchoolAdmissionDistance => ({
|
||||
year, distance_m, route_count: 1, la_name: 'Camden', distance_unit_raw: 'miles',
|
||||
});
|
||||
|
||||
/** A point due north of the school, `metres` away. 1° latitude ≈ 111,320 m. */
|
||||
function northOf(metres: number) {
|
||||
return { latitude: SCHOOL.latitude! + metres / 111_320, longitude: SCHOOL.longitude! };
|
||||
}
|
||||
|
||||
function renderPanel(history: SchoolAdmissionDistance[], admissions: { year: number; oversubscribed?: boolean }[] = []) {
|
||||
return render(
|
||||
<CutoffMapPanel schoolInfo={SCHOOL} rows={cutoffYearRows(history, admissions)} />,
|
||||
);
|
||||
}
|
||||
|
||||
async function check(postcode: string) {
|
||||
fireEvent.change(screen.getByLabelText('Your postcode'), { target: { value: postcode } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Check' }));
|
||||
}
|
||||
|
||||
beforeEach(() => mockGeocode.mockReset());
|
||||
|
||||
describe('CutoffMapPanel', () => {
|
||||
it('renders nothing without a published figure to draw', () => {
|
||||
const { container } = renderPanel([]);
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('renders nothing when the school has no coordinates', () => {
|
||||
const { container } = render(
|
||||
<CutoffMapPanel
|
||||
schoolInfo={{ ...SCHOOL, latitude: null, longitude: null } as School}
|
||||
rows={cutoffYearRows([d(2024, 800)])}
|
||||
/>,
|
||||
);
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('rejects a malformed postcode without calling the geocoder', async () => {
|
||||
renderPanel([d(2024, 800)]);
|
||||
await check('not a postcode');
|
||||
|
||||
expect(await screen.findByRole('alert')).toHaveTextContent(/does not look like a UK postcode/);
|
||||
expect(mockGeocode).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('reports a home clearly inside every published year', async () => {
|
||||
mockGeocode.mockResolvedValue(northOf(200));
|
||||
renderPanel([d(2022, 1000), d(2024, 800)]);
|
||||
await check('SE23 3NA');
|
||||
|
||||
expect(await screen.findByRole('status')).toHaveTextContent(/inside the cut-off in all 2 years/);
|
||||
});
|
||||
|
||||
it('reports a home clearly outside every published year', async () => {
|
||||
mockGeocode.mockResolvedValue(northOf(5000));
|
||||
renderPanel([d(2022, 1000), d(2024, 800)]);
|
||||
await check('SE23 3NA');
|
||||
|
||||
expect(await screen.findByRole('status')).toHaveTextContent(/outside the cut-off in every year/);
|
||||
});
|
||||
|
||||
it('declines to call a result that sits inside the measurement error', async () => {
|
||||
// The home is nominally inside 2024's 800 m cut-off, but only by half the
|
||||
// uncertainty band — which a postcode centroid cannot resolve.
|
||||
mockGeocode.mockResolvedValue(northOf(800 - CUTOFF_UNCERTAINTY_M / 2));
|
||||
renderPanel([d(2024, 800)]);
|
||||
await check('SE23 3NA');
|
||||
|
||||
const result = await screen.findByRole('status');
|
||||
expect(result).toHaveTextContent(/too close to call/);
|
||||
expect(result).not.toHaveTextContent(/inside the cut-off in all/);
|
||||
});
|
||||
|
||||
it('counts an unpublished year as unknown rather than as a pass', async () => {
|
||||
mockGeocode.mockResolvedValue(northOf(200));
|
||||
renderPanel([d(2022, 1000), d(2024, 800)], [{ year: 2023, oversubscribed: false }]);
|
||||
await check('SE23 3NA');
|
||||
|
||||
const result = await screen.findByRole('status');
|
||||
expect(result).toHaveTextContent(/inside the cut-off in all 2 years/);
|
||||
expect(result).toHaveTextContent(/no published figure/);
|
||||
});
|
||||
|
||||
it('surfaces a postcode the geocoder cannot find', async () => {
|
||||
mockGeocode.mockResolvedValue(null);
|
||||
renderPanel([d(2024, 800)]);
|
||||
await check('ZZ99 9ZZ');
|
||||
|
||||
expect(await screen.findByRole('alert')).toHaveTextContent(/could not find that postcode/);
|
||||
});
|
||||
|
||||
it('recovers from a geocoder failure instead of leaving a stale verdict', async () => {
|
||||
mockGeocode.mockResolvedValue(northOf(200));
|
||||
renderPanel([d(2024, 800)]);
|
||||
await check('SE23 3NA');
|
||||
await screen.findByRole('status');
|
||||
|
||||
mockGeocode.mockRejectedValue(new Error('network'));
|
||||
await check('SE23 3NB');
|
||||
|
||||
await waitFor(() => expect(screen.queryByRole('status')).not.toBeInTheDocument());
|
||||
expect(screen.getByRole('alert')).toHaveTextContent(/Something went wrong/);
|
||||
});
|
||||
|
||||
it('does not carry the caveat itself', () => {
|
||||
// It moved to CutoffDistanceDetail so it renders once per section, and so
|
||||
// it still appears for a school with no coordinates (no map, no check).
|
||||
// Asserting its absence here is what stops the old three-paragraph stutter
|
||||
// creeping back.
|
||||
renderPanel([d(2024, 800)]);
|
||||
expect(screen.queryByText(/Distance is the last criterion/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps the map behind a request until there is a reason to show it', async () => {
|
||||
renderPanel([d(2024, 800)]);
|
||||
expect(screen.queryByTestId('cutoff-map')).not.toBeInTheDocument();
|
||||
|
||||
// A successful check is that reason: the rings only answer a question once
|
||||
// there is a home to sit beside them.
|
||||
mockGeocode.mockResolvedValue(northOf(200));
|
||||
await check('SE23 3NA');
|
||||
await screen.findByRole('status');
|
||||
expect(screen.getByTestId('cutoff-map')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('can also show the map without a postcode, on request', () => {
|
||||
renderPanel([d(2024, 800)]);
|
||||
fireEvent.click(screen.getByRole('button', { name: /Show these distances on a map/ }));
|
||||
expect(screen.getByTestId('cutoff-map')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,242 +0,0 @@
|
||||
/**
|
||||
* Last distance offered, rendered on both detail templates.
|
||||
*
|
||||
* The figure is the one number on these pages that a parent may act on — it is
|
||||
* easy to read as "we live inside the catchment, we will get a place". These
|
||||
* tests pin the things that stop it being read that way: the year is always
|
||||
* present, the caveat is always present, and the blanket "not available"
|
||||
* sentence appears only when it is actually true.
|
||||
*/
|
||||
|
||||
import { screen, fireEvent } from '@testing-library/react';
|
||||
import { renderSchoolDetail, renderSecondarySchoolDetail } from '../support/renderSchoolDetail';
|
||||
import { primaryFixture, secondaryFixture } from '../support/schoolFixtures';
|
||||
import type { SchoolAdmissionDistance } from '@/lib/types';
|
||||
|
||||
const cutoff = (over: Partial<SchoolAdmissionDistance> = {}): SchoolAdmissionDistance => ({
|
||||
year: 2025,
|
||||
distance_m: 500,
|
||||
route_count: 1,
|
||||
la_name: 'Camden',
|
||||
distance_unit_raw: 'miles',
|
||||
...over,
|
||||
});
|
||||
|
||||
describe('primary detail page', () => {
|
||||
it('shows the figure with the year it belongs to', () => {
|
||||
renderSchoolDetail({ ...primaryFixture, admissionDistance: cutoff({ distance_m: 772.49, year: 2024 }) });
|
||||
|
||||
expect(screen.getByText('0.48 miles')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Last distance offered/)).toHaveTextContent('September 2024');
|
||||
});
|
||||
|
||||
it('never shows the figure without saying it is not a catchment', () => {
|
||||
renderSchoolDetail({ ...primaryFixture, admissionDistance: cutoff() });
|
||||
|
||||
expect(screen.getByText(/not a fixed catchment/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/moves every year/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('flags that a banded school\'s figure is the widest of several routes', () => {
|
||||
renderSchoolDetail({ ...primaryFixture, admissionDistance: cutoff({ route_count: 4 }) });
|
||||
|
||||
expect(screen.getByText(/4 admission routes/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders nothing distance-related when the LA publishes none', () => {
|
||||
renderSchoolDetail({ ...primaryFixture, admissionDistance: null });
|
||||
|
||||
expect(screen.queryByText(/Last distance offered/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/not a fixed catchment/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('carries the figure even with no EES admissions row', () => {
|
||||
// The two sources are independent; this school has a cut-off and no
|
||||
// admissions figures. Before this feature the section did not render at all.
|
||||
renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissions: null,
|
||||
admissionsHistory: [],
|
||||
admissionDistance: cutoff({ distance_m: 1421.05 }),
|
||||
});
|
||||
|
||||
expect(screen.getByText('0.88 miles')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('secondary detail page', () => {
|
||||
it('shows the figure with the year it belongs to', () => {
|
||||
renderSecondarySchoolDetail({ ...secondaryFixture, admissionDistance: cutoff({ distance_m: 3472.96 }) });
|
||||
|
||||
expect(screen.getByText('2.16 miles')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Last distance offered/)).toHaveTextContent('September 2025');
|
||||
});
|
||||
|
||||
it('drops the blanket "not available" line once a distance exists', () => {
|
||||
renderSecondarySchoolDetail({ ...secondaryFixture, admissionDistance: cutoff() });
|
||||
|
||||
expect(screen.queryByText(/has not published a cut-off distance/)).not.toBeInTheDocument();
|
||||
expect(screen.getByText(/not a fixed catchment/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('names the authority that would hold the data when there is none', () => {
|
||||
// The old copy asserted "Historical distance cut-off data is not available
|
||||
// for this school" on every secondary page, including the ones whose
|
||||
// council does publish it.
|
||||
renderSecondarySchoolDetail({ ...secondaryFixture, admissionDistance: null });
|
||||
|
||||
expect(screen.getByText(/has not published a cut-off distance/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ── The Distance view ──────────────────────────────────────────────────
|
||||
|
||||
const history = (pts: [number, number][]): SchoolAdmissionDistance[] =>
|
||||
pts.map(([year, distance_m]) => ({
|
||||
year, distance_m, route_count: 1, la_name: 'Camden', distance_unit_raw: 'miles',
|
||||
}));
|
||||
|
||||
describe('primary Distance section', () => {
|
||||
it('appears as its own section once there are two or more published years', () => {
|
||||
// Not a third tab inside Admissions: stacking a 1402px view in the
|
||||
// admissions viewport sized the whole card to it and left the default view
|
||||
// as four tiles in ~1080px of blank card.
|
||||
const { container } = renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2021, 1000], [2022, 900], [2023, 800], [2024, 700]]),
|
||||
});
|
||||
|
||||
expect(container.querySelector('#distance')).toBeInTheDocument();
|
||||
expect(screen.getByText('How far the last place went')).toBeInTheDocument();
|
||||
// And it did not come back as a tab.
|
||||
expect(screen.queryByRole('button', { name: 'Distance' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('stays away on a single published year', () => {
|
||||
// One point is a fact, not a history; a chart of it invites a trend reading
|
||||
// that is not there.
|
||||
const { container } = renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2024, 700]]),
|
||||
});
|
||||
|
||||
expect(container.querySelector('#distance')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('lists every year in the span, including the ones with no figure', () => {
|
||||
renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2021, 1000], [2024, 700]]),
|
||||
});
|
||||
|
||||
// 2022 and 2023 were never published but must still appear as rows, or the
|
||||
// gap in the chart has nothing explaining it.
|
||||
for (const year of ['2021', '2022', '2023', '2024']) {
|
||||
expect(screen.getByRole('rowheader', { name: year })).toBeInTheDocument();
|
||||
}
|
||||
expect(screen.getAllByText('Not published').length).toBe(2);
|
||||
});
|
||||
|
||||
it('never claims everyone was offered a place', () => {
|
||||
// fact_admissions.oversubscribed is about first preferences only, so the
|
||||
// stronger claim is not supported by the data behind it.
|
||||
renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2021, 1000], [2024, 700]]),
|
||||
admissionsHistory: [
|
||||
...primaryFixture.admissionsHistory,
|
||||
{ year: 2022, oversubscribed: false, places_offered: 60 },
|
||||
],
|
||||
});
|
||||
|
||||
expect(screen.getByText(/Places available on first preferences/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/every applicant/i)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/all offered/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('draws the chart only once it will also state a direction', () => {
|
||||
const four = renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2021, 1000], [2022, 900], [2023, 800], [2024, 700]]),
|
||||
});
|
||||
expect(screen.getByText(/Last distance offered, by year/)).toBeInTheDocument();
|
||||
four.unmount();
|
||||
|
||||
renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2023, 800], [2024, 700]]),
|
||||
});
|
||||
expect(screen.queryByText(/Last distance offered, by year/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('states the caveat exactly once, even though the check also renders', () => {
|
||||
renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
schoolInfo: { ...primaryFixture.schoolInfo, latitude: 51.5, longitude: -0.12 },
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2021, 1000], [2024, 700]]),
|
||||
});
|
||||
|
||||
expect(screen.getAllByText(/Distance is the last criterion/)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('withholds a trend reading while the record is thin', () => {
|
||||
renderSchoolDetail({
|
||||
...primaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 700, year: 2024 }),
|
||||
admissionDistanceHistory: history([[2023, 800], [2024, 700]]),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/too few to read as a trend/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Across \d+ published years/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('secondary Distance section', () => {
|
||||
it('renders as its own section once there are two published years', () => {
|
||||
renderSecondarySchoolDetail({
|
||||
...secondaryFixture,
|
||||
admissionDistance: cutoff({ distance_m: 3472.96 }),
|
||||
admissionDistanceHistory: history([[2023, 3800], [2024, 3472.96]]),
|
||||
});
|
||||
|
||||
expect(screen.getByRole('rowheader', { name: '2023' })).toBeInTheDocument();
|
||||
// Two points is below the threshold that lets us state a direction, so no
|
||||
// chart is drawn — a line through three points asserts a trend the
|
||||
// summary underneath would refuse to.
|
||||
expect(screen.queryByText(/Last distance offered, by year/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('explains a selective school by how it admits rather than as missing data', () => {
|
||||
renderSecondarySchoolDetail({
|
||||
...secondaryFixture,
|
||||
schoolInfo: { ...secondaryFixture.schoolInfo, admissions_policy: 'Selective' },
|
||||
admissionDistance: null,
|
||||
admissionDistanceHistory: [],
|
||||
});
|
||||
|
||||
expect(screen.getByText(/ranked by the entrance test/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/has not published a cut-off distance/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('reads a consistently undersubscribed school as good news', () => {
|
||||
renderSecondarySchoolDetail({
|
||||
...secondaryFixture,
|
||||
admissionDistance: null,
|
||||
admissionDistanceHistory: [],
|
||||
admissionsHistory: [
|
||||
{ year: 2022, oversubscribed: false },
|
||||
{ year: 2023, oversubscribed: false },
|
||||
{ year: 2024, oversubscribed: false },
|
||||
],
|
||||
});
|
||||
|
||||
expect(screen.getByText(/has not needed a distance cut-off/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,231 +0,0 @@
|
||||
/**
|
||||
* Last distance offered — formatting and the caveats attached to the figure.
|
||||
*
|
||||
* The assertions about the route note and the year are not cosmetic. A cut-off
|
||||
* shown without its year, or a banded school's widest cut-off shown as if it
|
||||
* were the only one, tells a parent something false about their chances of a
|
||||
* place — so both are pinned here rather than left to the component.
|
||||
*/
|
||||
|
||||
import { formatCutoffDistance, formatEntryYear } from '@/lib/utils';
|
||||
import {
|
||||
describeCutoff, cutoffYearRows, cutoffTrendSummary, cutoffCoverageNote,
|
||||
describeCutoffAbsence, compareToCutoffs, entryYearOf, CUTOFF_UNCERTAINTY_M,
|
||||
} from '@/components/school/lastDistanceOffered';
|
||||
import type { SchoolAdmissionDistance } from '@/lib/types';
|
||||
|
||||
const distance = (over: Partial<SchoolAdmissionDistance> = {}): SchoolAdmissionDistance => ({
|
||||
year: 2025,
|
||||
distance_m: 500,
|
||||
route_count: 1,
|
||||
la_name: 'Camden',
|
||||
distance_unit_raw: 'miles',
|
||||
...over,
|
||||
});
|
||||
|
||||
describe('formatCutoffDistance', () => {
|
||||
it('leads with miles, the unit councils publish in', () => {
|
||||
expect(formatCutoffDistance(500)).toEqual({ primary: '0.31 miles', secondary: '500 m' });
|
||||
expect(formatCutoffDistance(1609.344)).toEqual({ primary: '1.00 miles', secondary: '1.6 km' });
|
||||
});
|
||||
|
||||
it('switches to kilometres for the support figure above a kilometre', () => {
|
||||
expect(formatCutoffDistance(3472.96)!.secondary).toBe('3.5 km');
|
||||
});
|
||||
|
||||
it('leads with metres below 100 m, where a miles figure carries nothing', () => {
|
||||
expect(formatCutoffDistance(27)).toEqual({ primary: '27 m', secondary: '0.02 miles' });
|
||||
});
|
||||
|
||||
it('returns null rather than a zero cut-off', () => {
|
||||
// 0.0 miles appears in the source where a school filled on a higher
|
||||
// criterion. Rendered as "0.00 miles" it would read as the opposite.
|
||||
expect(formatCutoffDistance(0)).toBeNull();
|
||||
expect(formatCutoffDistance(null)).toBeNull();
|
||||
expect(formatCutoffDistance(undefined)).toBeNull();
|
||||
expect(formatCutoffDistance(Number.NaN)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('formatEntryYear', () => {
|
||||
it('names the intake, not the academic year', () => {
|
||||
// formatAcademicYear would render 2025 as "2025/26", which reads as a
|
||||
// school year rather than the September a child started.
|
||||
expect(formatEntryYear(2025)).toBe('September 2025');
|
||||
expect(formatEntryYear(null)).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('describeCutoff', () => {
|
||||
it('always carries the entry year alongside the figure', () => {
|
||||
const d = describeCutoff(distance({ distance_m: 772.49, year: 2024 }));
|
||||
expect(d).not.toBeNull();
|
||||
expect(d!.primary).toBe('0.48 miles');
|
||||
expect(d!.entryYear).toBe('September 2024');
|
||||
});
|
||||
|
||||
it('says nothing about routes for a school with one', () => {
|
||||
expect(describeCutoff(distance({ route_count: 1 }))!.routeNote).toBeNull();
|
||||
expect(describeCutoff(distance({ route_count: null }))!.routeNote).toBeNull();
|
||||
});
|
||||
|
||||
it('warns that a banded school\'s figure is the widest of several', () => {
|
||||
const note = describeCutoff(distance({ route_count: 4 }))!.routeNote;
|
||||
expect(note).toContain('4 admission routes');
|
||||
expect(note).toContain('shorter cut-off');
|
||||
});
|
||||
|
||||
it('is null when there is nothing publishable', () => {
|
||||
expect(describeCutoff(null)).toBeNull();
|
||||
expect(describeCutoff(undefined)).toBeNull();
|
||||
expect(describeCutoff(distance({ distance_m: null }))).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
// ── Year-by-year history ───────────────────────────────────────────────
|
||||
|
||||
const d = (year: number, distance_m: number | null, route_count = 1): SchoolAdmissionDistance => ({
|
||||
year, distance_m, route_count, la_name: 'Camden', distance_unit_raw: 'miles',
|
||||
});
|
||||
|
||||
describe('entryYearOf', () => {
|
||||
it('reduces EES academic codes and plain entry years to one key', () => {
|
||||
// Without this the two histories never join and every year looks unpublished.
|
||||
expect(entryYearOf(202425)).toBe(2024);
|
||||
expect(entryYearOf(2024)).toBe(2024);
|
||||
});
|
||||
});
|
||||
|
||||
describe('cutoffYearRows', () => {
|
||||
it('emits a row for every year in the span, including the empty ones', () => {
|
||||
const rows = cutoffYearRows([d(2021, 900), d(2024, 700)]);
|
||||
expect(rows.map((r) => r.year)).toEqual([2024, 2023, 2022, 2021]);
|
||||
expect(rows.map((r) => r.status)).toEqual([
|
||||
'published', 'not-published', 'not-published', 'published',
|
||||
]);
|
||||
});
|
||||
|
||||
it('separates "nothing published" from "was not oversubscribed"', () => {
|
||||
// The two look identical in the distance data and mean opposite things.
|
||||
const rows = cutoffYearRows(
|
||||
[d(2021, 900), d(2023, 700)],
|
||||
[{ year: 2022, oversubscribed: false }],
|
||||
);
|
||||
expect(rows.find((r) => r.year === 2022)!.status).toBe('not-oversubscribed');
|
||||
});
|
||||
|
||||
it('matches EES six-digit years against plain cut-off years', () => {
|
||||
const rows = cutoffYearRows(
|
||||
[d(2023, 700)],
|
||||
[{ year: 202324, places_offered: 60, oversubscribed: true }],
|
||||
);
|
||||
expect(rows.find((r) => r.year === 2023)!.placesOffered).toBe(60);
|
||||
});
|
||||
|
||||
it('does not stretch the span back over admissions years with no cut-offs', () => {
|
||||
// EES reaches back further than councils publish; padding the chart with a
|
||||
// decade of blanks would bury the years that carry a figure.
|
||||
const rows = cutoffYearRows(
|
||||
[d(2024, 700)],
|
||||
[{ year: 2015, oversubscribed: true }, { year: 2024, oversubscribed: true }],
|
||||
);
|
||||
expect(rows.map((r) => r.year)).toEqual([2024]);
|
||||
});
|
||||
|
||||
it('is safe when the backend does not send the field at all', () => {
|
||||
expect(cutoffYearRows(undefined as never)).toEqual([]);
|
||||
expect(cutoffYearRows([], [])).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('cutoffTrendSummary', () => {
|
||||
const rowsFor = (pts: [number, number][]) => cutoffYearRows(pts.map(([y, m]) => d(y, m)));
|
||||
|
||||
it('says nothing below four published points', () => {
|
||||
expect(cutoffTrendSummary(rowsFor([[2022, 900], [2023, 800], [2024, 700]]))).toBeNull();
|
||||
});
|
||||
|
||||
it('names both endpoints and their years rather than passing a verdict', () => {
|
||||
const s = cutoffTrendSummary(rowsFor([
|
||||
[2021, 1000], [2022, 900], [2023, 800], [2024, 500],
|
||||
]));
|
||||
expect(s).toContain('2021');
|
||||
expect(s).toContain('2024');
|
||||
expect(s).toContain('tightened');
|
||||
});
|
||||
|
||||
it('does not call a small wobble a direction', () => {
|
||||
const s = cutoffTrendSummary(rowsFor([
|
||||
[2021, 1000], [2022, 1010], [2023, 990], [2024, 1030],
|
||||
]));
|
||||
expect(s).toContain('stayed broadly the same');
|
||||
});
|
||||
});
|
||||
|
||||
describe('cutoffCoverageNote', () => {
|
||||
it('warns while the record is too thin to read as a trend', () => {
|
||||
expect(cutoffCoverageNote(cutoffYearRows([d(2024, 700)]))).toContain('Only 1 year');
|
||||
expect(cutoffCoverageNote(cutoffYearRows([
|
||||
d(2021, 1000), d(2022, 900), d(2023, 800), d(2024, 700),
|
||||
]))).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('describeCutoffAbsence', () => {
|
||||
it('explains a selective school by how it admits, not by missing data', () => {
|
||||
const s = describeCutoffAbsence({ localAuthority: 'Kent', admissionsPolicy: 'Selective' });
|
||||
expect(s).toContain('entrance test');
|
||||
expect(s).not.toContain('has not published');
|
||||
});
|
||||
|
||||
it('reads a consistently undersubscribed school as good news', () => {
|
||||
const s = describeCutoffAbsence({
|
||||
localAuthority: 'Camden',
|
||||
admissionsHistory: [
|
||||
{ year: 2022, oversubscribed: false },
|
||||
{ year: 2023, oversubscribed: false },
|
||||
{ year: 2024, oversubscribed: false },
|
||||
],
|
||||
});
|
||||
expect(s).toContain('has not needed a distance cut-off');
|
||||
});
|
||||
|
||||
it('otherwise names the authority that would hold the figure', () => {
|
||||
expect(describeCutoffAbsence({ localAuthority: 'Camden' }))
|
||||
.toContain('Camden has not published');
|
||||
});
|
||||
});
|
||||
|
||||
describe('compareToCutoffs', () => {
|
||||
const rows = cutoffYearRows(
|
||||
[d(2022, 1000), d(2024, 800)],
|
||||
[{ year: 2023, oversubscribed: false }],
|
||||
);
|
||||
|
||||
it('marks a clearly nearer home as inside every comparable year', () => {
|
||||
const r = compareToCutoffs(300, rows);
|
||||
expect(r.insideCount).toBe(2);
|
||||
expect(r.comparableCount).toBe(2);
|
||||
expect(r.headline).toContain('inside the cut-off in all 2 years');
|
||||
});
|
||||
|
||||
it('marks a clearly further home as outside', () => {
|
||||
const r = compareToCutoffs(4000, rows);
|
||||
expect(r.insideCount).toBe(0);
|
||||
expect(r.headline).toContain('outside the cut-off in every year');
|
||||
});
|
||||
|
||||
it('refuses to call a result inside the measurement error', () => {
|
||||
// A postcode centroid covers several addresses; claiming a place on a 20 m
|
||||
// margin would be inventing precision the inputs do not have.
|
||||
const r = compareToCutoffs(800 - CUTOFF_UNCERTAINTY_M / 2, rows);
|
||||
expect(r.years.find((y) => y.year === 2024)!.verdict).toBe('too-close');
|
||||
expect(r.detail).toContain('too close to call');
|
||||
});
|
||||
|
||||
it('never counts an unpublished year as a pass or a fail', () => {
|
||||
const r = compareToCutoffs(300, rows);
|
||||
expect(r.years.find((y) => y.year === 2023)!.verdict).toBe('unknown');
|
||||
expect(r.detail).toContain('no published figure');
|
||||
});
|
||||
});
|
||||
@@ -60,7 +60,7 @@ describe('buildNavItems', () => {
|
||||
it('omits sections with no data', () => {
|
||||
const flags = computeSchoolFlags(specialFixture);
|
||||
const ids = buildNavItems(flags, {
|
||||
ofsted: null, admissions: null, admissionDistance: null, yearlyDataLength: 1,
|
||||
ofsted: null, admissions: null, yearlyDataLength: 1,
|
||||
}).map((n) => n.id);
|
||||
|
||||
expect(ids).not.toContain('ofsted');
|
||||
@@ -74,7 +74,6 @@ describe('buildNavItems', () => {
|
||||
return buildNavItems(flags, {
|
||||
ofsted: fixture.ofsted,
|
||||
admissions: fixture.admissions,
|
||||
admissionDistance: null,
|
||||
yearlyDataLength: fixture.yearlyData.length,
|
||||
}).find((n) => n.id === 'results')?.label;
|
||||
};
|
||||
@@ -84,27 +83,11 @@ describe('buildNavItems', () => {
|
||||
expect(label(allThroughFixture)).toBe('Results');
|
||||
});
|
||||
|
||||
it('opens the admissions entry for a cut-off distance with no EES admissions', () => {
|
||||
// 3% of the schools that render have one source and not the other. The nav
|
||||
// condition and the section's render condition have to agree, or the sticky
|
||||
// nav links to an anchor that was never rendered.
|
||||
const flags = computeSchoolFlags(specialFixture);
|
||||
const ids = buildNavItems(flags, {
|
||||
ofsted: null,
|
||||
admissions: null,
|
||||
admissionDistance: { year: 2025, distance_m: 500, route_count: 1, la_name: 'Camden', distance_unit_raw: 'miles' },
|
||||
yearlyDataLength: 1,
|
||||
}).map((n) => n.id);
|
||||
|
||||
expect(ids).toContain('admissions');
|
||||
});
|
||||
|
||||
it('keeps the engagement-led ordering', () => {
|
||||
const flags = computeSchoolFlags(primaryFixture);
|
||||
const ids = buildNavItems(flags, {
|
||||
ofsted: primaryFixture.ofsted,
|
||||
admissions: primaryFixture.admissions,
|
||||
admissionDistance: null,
|
||||
yearlyDataLength: primaryFixture.yearlyData.length,
|
||||
}).map((n) => n.id);
|
||||
|
||||
@@ -144,29 +127,16 @@ describe('buildSecondaryNavItems', () => {
|
||||
const ids = buildSecondaryNavItems(flags, {
|
||||
ofsted: secondaryFixture.ofsted,
|
||||
admissions: secondaryFixture.admissions,
|
||||
admissionDistance: null,
|
||||
yearlyDataLength: secondaryFixture.yearlyData.length,
|
||||
}).map((n) => n.id);
|
||||
|
||||
expect(ids).toEqual(['ofsted', 'gcse', 'admissions', 'history', 'wellbeing', 'finances']);
|
||||
});
|
||||
|
||||
it('opens the admissions entry for a cut-off distance alone', () => {
|
||||
const flags = computeSecondaryFlags(secondaryFixture);
|
||||
const ids = buildSecondaryNavItems(flags, {
|
||||
ofsted: null,
|
||||
admissions: null,
|
||||
admissionDistance: { year: 2025, distance_m: 2400, route_count: 4, la_name: 'Islington', distance_unit_raw: 'miles' },
|
||||
yearlyDataLength: 1,
|
||||
}).map((n) => n.id);
|
||||
|
||||
expect(ids).toContain('admissions');
|
||||
});
|
||||
|
||||
it('gates History on more than one year, unlike the primary page', () => {
|
||||
const flags = computeSecondaryFlags(secondaryFixture);
|
||||
const ids = buildSecondaryNavItems(flags, {
|
||||
ofsted: null, admissions: null, admissionDistance: null, yearlyDataLength: 1,
|
||||
ofsted: null, admissions: null, yearlyDataLength: 1,
|
||||
}).map((n) => n.id);
|
||||
|
||||
expect(ids).not.toContain('history');
|
||||
|
||||
@@ -31,7 +31,6 @@ export function renderSchoolDetail(fixture: any) {
|
||||
const navItems = buildNavItems(flags, {
|
||||
ofsted: fixture.ofsted,
|
||||
admissions: fixture.admissions,
|
||||
admissionDistance: fixture.admissionDistance ?? null,
|
||||
yearlyDataLength: fixture.yearlyData.length,
|
||||
});
|
||||
|
||||
@@ -45,7 +44,6 @@ export function renderSchoolDetail(fixture: any) {
|
||||
>
|
||||
<PrimarySchoolSections
|
||||
{...fixture}
|
||||
admissionDistanceHistory={fixture.admissionDistanceHistory ?? []}
|
||||
nationalAvg={nationalAveragesFixture}
|
||||
flags={flags}
|
||||
/>
|
||||
@@ -59,7 +57,6 @@ export function renderSecondarySchoolDetail(fixture: any) {
|
||||
const navItems = buildSecondaryNavItems(flags, {
|
||||
ofsted: fixture.ofsted,
|
||||
admissions: fixture.admissions,
|
||||
admissionDistance: fixture.admissionDistance ?? null,
|
||||
yearlyDataLength: fixture.yearlyData.length,
|
||||
});
|
||||
|
||||
@@ -73,8 +70,6 @@ export function renderSecondarySchoolDetail(fixture: any) {
|
||||
>
|
||||
<SecondarySchoolSections
|
||||
{...fixture}
|
||||
admissionsHistory={fixture.admissionsHistory ?? []}
|
||||
admissionDistanceHistory={fixture.admissionDistanceHistory ?? []}
|
||||
nationalAvg={nationalAveragesFixture}
|
||||
flags={flags}
|
||||
/>
|
||||
|
||||
+51
-22
@@ -188,22 +188,33 @@
|
||||
--section-gap: 4rem;
|
||||
--section-head-gap: 1.5rem;
|
||||
|
||||
/* ── Hero artwork ───────────────────────────────────────────────────
|
||||
The landing hero is now a supplied raster illustration rather than a
|
||||
drawn SVG, so its colours are in the file, not here. What is left is the
|
||||
ground the artwork sits on and fades into.
|
||||
|
||||
--hero-ground is sampled from the artwork's own copy area, not from
|
||||
Sand — a scrim in Sand (#F5EFE6) is far enough off to leave a visible
|
||||
seam straight down the hero.
|
||||
|
||||
The artwork's copy area is not one flat colour: it runs from a peach
|
||||
#FEE8D2 at the top to a cream #FDF3E7 around 43% height, and below ~48%
|
||||
the left edge is foliage rather than cream. This value is sampled from
|
||||
the middle of that pale run, where the headline and search actually sit;
|
||||
the scrim is what covers the foliage further down. */
|
||||
--hero-ground: #FEF2E1;
|
||||
--hero-ground-rgb: 254, 242, 225;
|
||||
/* ── Illustration ───────────────────────────────────────────────────
|
||||
The hero landscape's palette. These are tokens rather than literals in
|
||||
the SVG for one reason: the drawing previously kept a fixed light
|
||||
palette in both themes, which left a pale sky slab as the brightest
|
||||
object on a near-black page — it out-shouted the H1 and the search box.
|
||||
Artwork still shouldn't invert (that breaks the picture), so the dark
|
||||
values below are a re-grade, not an inversion: the same scene, lit at
|
||||
dusk, sitting a step above the panel it lives on. */
|
||||
--ill-sky-high: #DAEDF8;
|
||||
--ill-sky-low: #EFF8FB;
|
||||
--ill-cloud: #FFFFFF;
|
||||
--ill-hill-far: #D6EDE2;
|
||||
--ill-hill-mid: #A7D7C5;
|
||||
--ill-hill-near: #7FC3AC;
|
||||
--ill-hill-front: #5BA88F;
|
||||
--ill-path: #FAF6EE;
|
||||
--ill-path-edge: #E6DAC2;
|
||||
--ill-wall: #FCE8C3;
|
||||
--ill-roof: #F0A868;
|
||||
--ill-door: #0F766E;
|
||||
--ill-window: #C7EBF5;
|
||||
--ill-tree-dark: #2E7D6B;
|
||||
--ill-tree-mid: #3E8C74;
|
||||
--ill-tree-light: #4A9E85;
|
||||
--ill-tree-pale: #7FC3AC;
|
||||
--ill-pin: #F97360;
|
||||
--ill-pin-eye: #FFFFFF;
|
||||
|
||||
/* ── Geometry & motion ──────────────────────────────────────────────
|
||||
"Soft shapes, rounded corners" — the guideline's geometry is markedly
|
||||
@@ -329,12 +340,30 @@
|
||||
--medal-silver-rgb: 169, 182, 188;
|
||||
--medal-bronze-rgb: 201, 144, 112;
|
||||
|
||||
/* The artwork is a fixed, bright raster — it cannot be re-graded by
|
||||
token the way the drawn version was. The dark theme instead dims it
|
||||
in CSS (see .heroArt in HomeView.module.css) and fades it into this
|
||||
ground, which is the panel colour rather than the artwork's cream. */
|
||||
--hero-ground: #16222A;
|
||||
--hero-ground-rgb: 22, 34, 42;
|
||||
/* Dusk re-grade of the hero landscape. The sky sits one step above the
|
||||
Sand panel (#16222A) rather than 60 points above it, so the picture
|
||||
reads as a framed vignette instead of a light leak. The pin keeps
|
||||
the theme's coral and is the only bright thing left in the scene —
|
||||
which is the point, since it marks "you are here". */
|
||||
--ill-sky-high: #1B2C36;
|
||||
--ill-sky-low: #16242C;
|
||||
--ill-cloud: #2A3F4A;
|
||||
--ill-hill-far: #1E3A38;
|
||||
--ill-hill-mid: #234944;
|
||||
--ill-hill-near: #2A5A51;
|
||||
--ill-hill-front: #326B5E;
|
||||
--ill-path: #4A5A52;
|
||||
--ill-path-edge: #3A4842;
|
||||
--ill-wall: #45423A;
|
||||
--ill-roof: #8A5A3E;
|
||||
--ill-door: #5FC7BB;
|
||||
--ill-window: #2F5966;
|
||||
--ill-tree-dark: #16302C;
|
||||
--ill-tree-mid: #1B3A34;
|
||||
--ill-tree-light: #21453D;
|
||||
--ill-tree-pale: #2A5A51;
|
||||
--ill-pin: #F08A72;
|
||||
--ill-pin-eye: #16242C;
|
||||
|
||||
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: 0 4px 18px rgba(0, 0, 0, 0.45);
|
||||
|
||||
@@ -147,7 +147,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const { school_info, yearly_data, absence_data, ofsted, census, admissions, admissions_history, admission_distance, admission_distance_history, deprivation, finance } = data;
|
||||
const { school_info, yearly_data, absence_data, ofsted, census, admissions, admissions_history, deprivation, finance } = data;
|
||||
|
||||
// Redirect bare URN to canonical slug URL
|
||||
const canonicalSlug = schoolUrl(urn, school_info.school_name).replace('/school/', '');
|
||||
@@ -176,9 +176,6 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
|
||||
const navInput = {
|
||||
ofsted: ofsted ?? null,
|
||||
admissions: admissions ?? null,
|
||||
admissionDistance: admission_distance ?? null,
|
||||
admissionDistanceHistory: admission_distance_history ?? [],
|
||||
admissionsHistory: admissions_history ?? [],
|
||||
yearlyDataLength: yearly_data.length,
|
||||
};
|
||||
const primaryNavItems = buildNavItems(primaryFlags, navInput);
|
||||
@@ -231,9 +228,6 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
|
||||
ofsted={ofsted ?? null}
|
||||
census={census ?? null}
|
||||
admissions={admissions ?? null}
|
||||
admissionsHistory={admissions_history ?? []}
|
||||
admissionDistance={admission_distance ?? null}
|
||||
admissionDistanceHistory={admission_distance_history ?? []}
|
||||
deprivation={deprivation ?? null}
|
||||
finance={finance ?? null}
|
||||
nationalAvg={nationalAvg}
|
||||
@@ -255,8 +249,6 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
|
||||
census={census ?? null}
|
||||
admissions={admissions ?? null}
|
||||
admissionsHistory={admissions_history ?? []}
|
||||
admissionDistance={admission_distance ?? null}
|
||||
admissionDistanceHistory={admission_distance_history ?? []}
|
||||
deprivation={deprivation ?? null}
|
||||
finance={finance ?? null}
|
||||
nationalAvg={nationalAvg}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 MiB |
@@ -1,123 +0,0 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* CutoffTrendChart
|
||||
* The last distance offered, year by year.
|
||||
*
|
||||
* Two things this chart deliberately does not do.
|
||||
*
|
||||
* It does not join across gaps (`spanGaps: false`). A missing year is usually a
|
||||
* year the authority published nothing, and a line drawn through it would
|
||||
* assert a cut-off that was never measured.
|
||||
*
|
||||
* It does not plot the non-distance outcomes. A year in which the school was
|
||||
* not oversubscribed has no distance — that is the point of it — and giving it
|
||||
* a y-position would put a number on the axis that does not exist. The mockup
|
||||
* floated such years at the top of the plot; here they are a gap in the line
|
||||
* and a labelled row in the table underneath, which is where a reason can be
|
||||
* stated in words rather than implied by a coordinate.
|
||||
*/
|
||||
|
||||
import { Line } from 'react-chartjs-2';
|
||||
import { ChartOptions } from 'chart.js';
|
||||
import '@/lib/chartSetup';
|
||||
import { useThemeTokens, alpha } from '@/lib/theme';
|
||||
import type { CutoffYearRow } from './school/lastDistanceOffered';
|
||||
import styles from './AdmissionsTrendChart.module.css';
|
||||
|
||||
const METRES_PER_MILE = 1609.344;
|
||||
|
||||
export default function CutoffTrendChart({ rows }: { rows: CutoffYearRow[] }) {
|
||||
// rows arrive newest-first; a time axis reads oldest-first.
|
||||
const axis = [...rows].reverse();
|
||||
const published = axis.filter((r) => r.distanceM != null);
|
||||
if (published.length < 2) return null;
|
||||
|
||||
const labels = axis.map((r) => String(r.year));
|
||||
const values: (number | null)[] = axis.map((r) =>
|
||||
r.distanceM != null ? r.distanceM / METRES_PER_MILE : null,
|
||||
);
|
||||
|
||||
const present = values.map((v, i) => (v != null ? i : -1)).filter((i) => i >= 0);
|
||||
const lastIdx = present[present.length - 1];
|
||||
|
||||
const numeric = values.filter((v): v is number => v != null);
|
||||
const lo = Math.min(...numeric);
|
||||
const hi = Math.max(...numeric);
|
||||
// Headroom proportional to the spread, with a floor so a flat series does not
|
||||
// collapse onto a single gridline and read as more precise than it is.
|
||||
const pad = Math.max(0.05, (hi - lo) * 0.25);
|
||||
const yMin = Math.max(0, lo - pad);
|
||||
const yMax = hi + pad;
|
||||
|
||||
const [cBrand, cGrid, cInverse, cInverseText, cCard] = useThemeTokens(
|
||||
'--brand', '--chart-grid', '--surface-inverse', '--text-inverse', '--bg-card',
|
||||
);
|
||||
|
||||
const options: ChartOptions<'line'> = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
layout: { padding: { top: 8 } },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
title: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: cInverse,
|
||||
titleColor: cInverseText,
|
||||
bodyColor: cInverseText,
|
||||
padding: 10,
|
||||
titleFont: { size: 12 },
|
||||
bodyFont: { size: 12 },
|
||||
callbacks: {
|
||||
label: (ctx) =>
|
||||
ctx.parsed.y == null ? '' : `Last distance offered: ${ctx.parsed.y.toFixed(2)} miles`,
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
min: yMin,
|
||||
max: yMax,
|
||||
grid: { color: cGrid },
|
||||
ticks: {
|
||||
font: { size: 11 },
|
||||
maxTicksLimit: 5,
|
||||
callback: (v) => `${Number(v).toFixed(2)} mi`,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { font: { size: 11 }, autoSkip: true, maxRotation: 0, autoSkipPadding: 16 },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const data = {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Last distance offered',
|
||||
data: values,
|
||||
clip: false as const,
|
||||
spanGaps: false,
|
||||
borderColor: cBrand,
|
||||
backgroundColor: alpha('--brand', 0.10),
|
||||
borderWidth: 2.5,
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
pointRadius: values.map((v, i) => (v == null ? 0 : i === lastIdx ? 5 : 3)),
|
||||
pointBackgroundColor: cBrand,
|
||||
pointBorderColor: cCard,
|
||||
pointBorderWidth: values.map((_, i) => (i === lastIdx ? 2 : 0)),
|
||||
pointHoverRadius: 6,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<Line data={data} options={options} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -460,30 +460,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Narrow phones: the button drops below the input instead of sharing the row.
|
||||
*
|
||||
* "Search schools" is a fixed 134px with `white-space: nowrap`, so on a 390px
|
||||
* screen it took 48% of the row and left the input 102px of text space for a
|
||||
* 194px placeholder — the field showed "School name or" and stopped. At 320px
|
||||
* the input was down to 32px, which is too narrow to read what you are typing.
|
||||
*
|
||||
* Wrapping rather than restructuring: the pill stays one element, so it keeps
|
||||
* its border, shadow and :focus-within ring, and the button gets a full-width
|
||||
* tap target on the way. Giving the button a 100% flex-basis is what forces
|
||||
* the wrap; the input keeps `flex: 1` and so takes the whole first row.
|
||||
*/
|
||||
@media (max-width: 480px) {
|
||||
.heroMode .omniBoxContainer {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.heroMode .searchButton {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
/* Below this the pin costs more room than it earns. */
|
||||
.heroMode .omniIcon {
|
||||
|
||||
@@ -92,33 +92,13 @@
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
/*
|
||||
* Quieter than .description, but by size only — not by contrast.
|
||||
*
|
||||
* --on-sunken-faint measured 4.71:1 here, which clears AA by 0.21. That is a
|
||||
* fine margin for decorative text and the wrong one for a disclaimer, whose
|
||||
* whole job is to be legible to someone checking whether this is a government
|
||||
* site. --on-sunken-muted is 5.66:1 on the same band.
|
||||
*/
|
||||
.independence {
|
||||
margin: 0;
|
||||
font-size: var(--step--2);
|
||||
line-height: 1.6;
|
||||
color: var(--on-sunken-muted);
|
||||
max-width: 38ch;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
/* --sage flips with the theme; this band does not (it is teal in both), so
|
||||
the pairing only held in one of them — the dark sage measured 4.08:1 here
|
||||
against a 4.5 floor, on every page. The --on-sunken-* family exists
|
||||
precisely because this surface is theme-invariant. */
|
||||
color: var(--on-sunken-muted);
|
||||
color: var(--sage);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
@@ -35,14 +35,6 @@ export function Footer() {
|
||||
<p className={styles.description}>
|
||||
Compare primary and secondary schools across England.
|
||||
</p>
|
||||
{/*
|
||||
Says once, plainly, what the landing page's value props only
|
||||
imply: we publish official data, we are not an official body.
|
||||
Cheap to state and expensive to be wrong about.
|
||||
*/}
|
||||
<p className={styles.independence}>
|
||||
An independent site. Not affiliated with the Department for Education or Ofsted.
|
||||
</p>
|
||||
<a
|
||||
href="mailto:contact@schoolcompare.co.uk"
|
||||
className={styles.link}
|
||||
|
||||
@@ -77,153 +77,52 @@
|
||||
}
|
||||
|
||||
/* ── Hero ──────────────────────────────────────────────────────────────────
|
||||
The artwork fills the panel and the proposition sits on top of it, in the
|
||||
empty cream area the illustration reserves on its left. It is not a
|
||||
two-column grid: splitting the panel would crop that reserved area off and
|
||||
shrink the scene into a thumbnail, which is the one thing the artwork is
|
||||
composed not to be.
|
||||
|
||||
Below the one-column breakpoint the artwork leaves the background and
|
||||
becomes a band under the search — see the 860px block. */
|
||||
A Sand panel: proposition and search on the left, the brand landscape
|
||||
bleeding to the panel's right edge. The illustration is decorative, so on
|
||||
phones it drops to a short band under the content rather than competing
|
||||
with the search for the fold. */
|
||||
.heroPanel {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
background: var(--hero-ground);
|
||||
display: grid;
|
||||
grid-template-columns: 1.12fr 0.88fr;
|
||||
align-items: stretch;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 3.5rem 1.5rem 3.5rem 3rem;
|
||||
/* Held inside the artwork's cream area. Beyond roughly this width the text
|
||||
runs onto the hillside, where the scrim below is doing all the work. */
|
||||
max-width: min(56%, 40rem);
|
||||
align-self: center;
|
||||
padding: 3rem 1.5rem 3rem 3rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.heroArt {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
/* The scene needs height to read; without a floor it collapses to the
|
||||
content column's height on short viewports. */
|
||||
min-height: 24rem;
|
||||
}
|
||||
|
||||
.heroArt picture,
|
||||
.heroArt img {
|
||||
display: block;
|
||||
/* Both compositions fill the slot; the breakpoint below picks one. */
|
||||
.heroArtWide,
|
||||
.heroArtBand {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.heroArt svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.heroArt img {
|
||||
object-fit: cover;
|
||||
/* Centre keeps the schoolhouse in frame at every desktop panel ratio: the
|
||||
panel runs about 2.1:1 to 2.7:1 against a 1.78:1 image, so cover crops
|
||||
height only, and the school sits well inside the surviving band. */
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Contrast guarantee.
|
||||
*
|
||||
* The artwork's cream area is generous but it is a fixed image on a fluid
|
||||
* panel — as the panel widens the text block and the cream drift apart, and at
|
||||
* some width the headline would sit on hillside green. Rather than tune the
|
||||
* text width per breakpoint and hope, the panel fades its own ground across
|
||||
* the left of the artwork, so the copy always has a known surface under it.
|
||||
*
|
||||
* The gradient starts from --hero-ground, which is sampled from the artwork
|
||||
* itself, so in the light theme this is invisible — it reads as the
|
||||
* illustration, not as an overlay on it.
|
||||
*/
|
||||
.heroPanel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--hero-ground) 0%,
|
||||
rgba(var(--hero-ground-rgb), 0.97) 26%,
|
||||
rgba(var(--hero-ground-rgb), 0.72) 44%,
|
||||
rgba(var(--hero-ground-rgb), 0) 62%
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark theme.
|
||||
*
|
||||
* The artwork is a fixed raster, so unlike the drawn hero it cannot be
|
||||
* re-graded token by token — but the failure it would otherwise reproduce is
|
||||
* the same one: a bright illustration is the brightest object on a near-black
|
||||
* page and out-shouts the H1 and the search box. Dimming it in CSS is the
|
||||
* whole treatment, and the scrim then fades it into the dark panel instead of
|
||||
* into cream.
|
||||
*
|
||||
* Raising the brightness raises the background under light dark-theme text, so
|
||||
* this value has a contrast floor, not just a taste range. Measured off
|
||||
* rendered pixels, sampling background up to 120px past each line:
|
||||
*
|
||||
* brightness title body
|
||||
* 0.52 11.01:1 6.44:1
|
||||
* 0.75 9.48:1 5.21:1 ← current
|
||||
*
|
||||
* Body text is the binding one. Going much above 0.75 walks it toward the
|
||||
* 4.5:1 floor, and at that point the scrim needs to carry further right rather
|
||||
* than the artwork being dimmed less.
|
||||
*/
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.heroArt img {
|
||||
filter: brightness(0.75) saturate(0.72) contrast(1.02);
|
||||
}
|
||||
.heroPanel::before {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--hero-ground) 0%,
|
||||
rgba(var(--hero-ground-rgb), 0.96) 30%,
|
||||
rgba(var(--hero-ground-rgb), 0.66) 50%,
|
||||
rgba(var(--hero-ground-rgb), 0.15) 78%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The one line in the first person, so it is set apart from the marketing copy
|
||||
* around it without shouting: display face, a step down in size, and a short
|
||||
* brand rule instead of a bullet or an emoji.
|
||||
*
|
||||
* No italic — Manrope ships no italic in the loaded weights, so font-style
|
||||
* would be synthesised into a slant. Same reason .heroEmph sets font-style
|
||||
* back to normal.
|
||||
*/
|
||||
.heroByline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
margin: 1.25rem 0 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.heroByline::before {
|
||||
content: '';
|
||||
flex: 0 0 auto;
|
||||
width: 1.25rem;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.heroByline {
|
||||
margin-top: 1rem;
|
||||
font-size: var(--step--2);
|
||||
}
|
||||
/* The band composition only exists below the one-column breakpoint — above
|
||||
it the slot is tall and the wide drawing is the right picture. */
|
||||
.heroArtBand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.heroEyebrow {
|
||||
@@ -234,10 +133,7 @@
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
/* --brand on its own 10% tint over Sand measures 4.19:1 — the tint darkens
|
||||
the ground under the label, and the token was specced against the ground,
|
||||
not against the tint. --brand-strong on the same composite is 5.85:1. */
|
||||
color: var(--brand-strong);
|
||||
color: var(--brand);
|
||||
background: rgba(var(--brand-rgb), 0.1);
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
@@ -285,65 +181,33 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.heroContent {
|
||||
padding: 2.75rem 1.5rem 2.75rem 2rem;
|
||||
max-width: min(64%, 34rem);
|
||||
padding: 2.25rem 1.5rem 2.25rem 2rem;
|
||||
}
|
||||
.heroArt {
|
||||
min-height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* One column: the artwork stops being a background and becomes a band under
|
||||
* the search.
|
||||
*
|
||||
* Overlaying at this width does not work — the panel is too narrow for the
|
||||
* copy to stay inside the artwork's cream area, so the scrim would have to
|
||||
* cover nearly the whole image, which is just a tinted rectangle with a
|
||||
* picture faintly behind it. Below the band, <picture> has already switched
|
||||
* to the pre-cropped file (see Illustration.tsx); this is the layout half of
|
||||
* the same decision.
|
||||
*/
|
||||
/* One column: content first, then a short band of landscape. */
|
||||
@media (max-width: 860px) {
|
||||
/*
|
||||
* Artwork above the copy, not below it.
|
||||
*
|
||||
* The DOM keeps .heroContent first so the desktop overlay does not depend on
|
||||
* source order, which left the band stranded under the search on phones —
|
||||
* reading as a strip stuck on the end rather than as a hero image. `order`
|
||||
* moves it visually only; it is decorative and aria-hidden, so there is no
|
||||
* reading order to disturb.
|
||||
*
|
||||
* It costs about 136px above the search. Measured on a 667px viewport (the
|
||||
* shortest phone still in use) the search still lands near 400px, well
|
||||
* inside the fold.
|
||||
*/
|
||||
.heroPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.heroContent {
|
||||
padding: 1.75rem 1.5rem 1.75rem;
|
||||
max-width: none;
|
||||
padding: 2rem 1.5rem 1.75rem;
|
||||
}
|
||||
/* 13rem, not 11: at 860px an 11rem band is 4.5:1, and squeezing the 3.2:1
|
||||
crop into that throws away enough height to cut the flag off the roof and
|
||||
the base off the building. 13rem holds it at about 3.8:1, where the
|
||||
building stays whole. */
|
||||
/* One column: the slot becomes a wide, short band, so swap in the drawing
|
||||
composed for that crop. See the note at the top of Illustration.tsx. */
|
||||
.heroArt {
|
||||
position: static;
|
||||
order: -1;
|
||||
height: 13rem;
|
||||
min-height: 11rem;
|
||||
order: 2;
|
||||
}
|
||||
/* The band crop puts the schoolhouse at 73% across — reported by
|
||||
scripts/build-hero-images.js, which derives it from the crop box rather
|
||||
than leaving the two to drift. Squeezing narrower then crops the emptier
|
||||
left side rather than the subject. */
|
||||
.heroArt img {
|
||||
object-position: 73% center;
|
||||
}
|
||||
/* The scrim exists to protect text sitting on the artwork. Nothing sits on
|
||||
it here, and leaving it would wash the band out. */
|
||||
.heroPanel::before {
|
||||
.heroArtWide {
|
||||
display: none;
|
||||
}
|
||||
.heroArtBand {
|
||||
display: block;
|
||||
}
|
||||
.heroTitle {
|
||||
font-size: var(--step-3);
|
||||
max-width: none;
|
||||
@@ -378,12 +242,8 @@
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
/* 10rem, not 8.5: the band is widest-per-height right at this breakpoint —
|
||||
at 640px an 8.5rem band is 4.2:1, worse than anything above it, because
|
||||
the height steps down here while the width does not. 10rem keeps it near
|
||||
3.6:1, in line with the rest of the range. */
|
||||
.heroArt {
|
||||
height: 10rem;
|
||||
min-height: 8.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -919,19 +779,8 @@
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* The preview panel sits on the card surface, not on Sand.
|
||||
*
|
||||
* Everything inside it is a translucent status or brand tint, and those tokens
|
||||
* are specced to clear AA over --bg-card. Over Sand the same tints composite
|
||||
* darker, which put the report-card chips at 4.22:1 and 4.29:1 against a 4.5
|
||||
* floor — the ratio depended on a ground two levels up. On the card surface
|
||||
* they are 5.69:1 and 5.81:1. The border keeps it reading as an inset frame
|
||||
* now that panel and card share a colour.
|
||||
*/
|
||||
.hiwVisual {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 10px;
|
||||
padding: 0.9rem;
|
||||
min-height: 180px;
|
||||
@@ -1277,10 +1126,7 @@
|
||||
.compareHeadLabel {
|
||||
font-family: inherit;
|
||||
font-size: 0.48rem;
|
||||
/* --text-muted on the header row's tint is 4.45:1 in the dark theme —
|
||||
under the floor by a hair, because the tint darkens the ground beneath
|
||||
the label. --text-secondary clears it on both grounds. */
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -12,7 +12,7 @@ import { SchoolRow } from './SchoolRow';
|
||||
import { SecondarySchoolRow } from './SecondarySchoolRow';
|
||||
import { SchoolMap } from './SchoolMap';
|
||||
import { EmptyState } from './EmptyState';
|
||||
import { HeroIllustration } from './Illustration';
|
||||
import { HeroIllustration, HeroIllustrationBand } from './Illustration';
|
||||
import { useComparisonContext } from '@/context/ComparisonContext';
|
||||
import { fetchSchools, fetchLAaverages, fetchNationalAverages } from '@/lib/api';
|
||||
import type { SchoolsResponse, Filters, School } from '@/lib/types';
|
||||
@@ -157,20 +157,7 @@ const VALUE_PROPS: ValueProp[] = [
|
||||
{
|
||||
icon: <ShieldCheckIcon />,
|
||||
tintClass: styles.propIconTrust,
|
||||
/*
|
||||
* "Built on official data", never "Official".
|
||||
*
|
||||
* The previous title was "Official & trusted", whose grammatical subject
|
||||
* is this site — it reads as a claim that schoolcompare is itself an
|
||||
* official service. It is not: it is an independent site that republishes
|
||||
* official figures. The distinction is the difference between describing
|
||||
* the data and describing ourselves, and only the first is true.
|
||||
*
|
||||
* Everywhere else the word appears ("official DfE figures", "the official
|
||||
* figure isn't in") it already qualifies the data, which is correct and
|
||||
* should stay.
|
||||
*/
|
||||
title: 'Built on official data',
|
||||
title: 'Official & trusted',
|
||||
body: 'Every figure comes from DfE performance tables and Ofsted.',
|
||||
},
|
||||
{
|
||||
@@ -463,16 +450,21 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
geoState={geoState}
|
||||
geoError={geoError}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{/*
|
||||
Rendered after the content on purpose. On desktop it is absolutely
|
||||
positioned behind the panel, so order does not matter; below the
|
||||
one-column breakpoint it returns to normal flow, where DOM order is
|
||||
what puts the band under the search rather than above the headline.
|
||||
Two drawings, one visible — see the note at the top of
|
||||
Illustration.tsx. The hero art slot ranges from about 1.34:1 to
|
||||
4.9:1 across the breakpoints, which no single composition survives.
|
||||
*/}
|
||||
<div className={styles.heroArt}>
|
||||
<HeroIllustration />
|
||||
<div className={styles.heroArtWide}>
|
||||
<HeroIllustration />
|
||||
</div>
|
||||
<div className={styles.heroArtBand}>
|
||||
<HeroIllustrationBand />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,103 +1,212 @@
|
||||
/**
|
||||
* The landing hero artwork.
|
||||
* Brand illustration — the landing hero's landscape.
|
||||
*
|
||||
* This is the supplied illustration, not a drawing of one — see
|
||||
* assets/hero-source.png and scripts/build-hero-images.js, which produces
|
||||
* everything under public/brand/hero-*. Regenerate rather than hand-editing.
|
||||
* Guideline rules for illustration: no people or faces, soft shapes, rounded
|
||||
* corners, minimal detail, maximum clarity. The scene reads as "the journey to
|
||||
* a school" — a path climbing through layered hills to a small schoolhouse,
|
||||
* with a pin marking where you are.
|
||||
*
|
||||
* Server-safe by construction: no 'use client', no hooks, no handlers, so it
|
||||
* renders in the RSC pass and never reaches the client bundle.
|
||||
* Deliberately server-safe: no 'use client', no hooks, no event handlers, so
|
||||
* it renders in the RSC pass and never reaches the client bundle.
|
||||
*
|
||||
* TWO CROPS, ONE <picture>
|
||||
* ------------------------
|
||||
* The slot is two different shapes. On desktop the artwork sits behind the
|
||||
* whole panel at roughly 2.1:1 → 2.7:1, with the headline over the empty cream
|
||||
* area the illustration reserves on its left. Below the one-column breakpoint
|
||||
* it becomes a band between 2.6:1 and 4.9:1, under the search rather than
|
||||
* behind it.
|
||||
* TWO COMPOSITIONS, ON PURPOSE
|
||||
* ----------------------------
|
||||
* The hero art slot is not one shape. On a wide desktop it is roughly 1.5:1;
|
||||
* at the 1024px breakpoint about 1.34:1; on a phone it collapses to a band
|
||||
* near 2.6:1, and just above the one-column breakpoint it is nearly 5:1.
|
||||
*
|
||||
* A single file under `object-fit: cover` centre-crops, and at the band's
|
||||
* extreme that slices a strip through the middle of the scene and loses the
|
||||
* schoolhouse — exactly how the previous SVG hero failed on phones. So the
|
||||
* <source media> switches crop, not just resolution: `band` is pre-cropped
|
||||
* around the school and is already near 2.6:1, so the narrow band barely
|
||||
* crops it further.
|
||||
* A single drawing cannot cover 1.34:1 → 4.9:1. With `slice`, the SVG scales
|
||||
* to cover and crops the overflow, anchored here to the bottom edge — so at
|
||||
* 860×176 a 540×520 scene shows only its bottom 110 user units. That is what
|
||||
* used to happen: the schoolhouse sat at y 218–324 and was cropped away
|
||||
* entirely on phones, leaving bare hills and a pin pointing at nothing.
|
||||
*
|
||||
* `object-position` is set in CSS per breakpoint and is load-bearing — see
|
||||
* .heroArt in HomeView.module.css.
|
||||
* So there are two drawings and CSS shows exactly one. They are both static
|
||||
* server-rendered SVG, so this costs markup and nothing else — no JS, no
|
||||
* second request, no layout shift. Each is composed against the crop window
|
||||
* its own breakpoint actually produces; see the safe-zone note on each.
|
||||
*
|
||||
* The artwork is decorative: the proposition beside it carries the meaning, so
|
||||
* alt is empty and it is hidden from assistive tech rather than described.
|
||||
* Colour comes from the --ill-* tokens in globals.css, which are re-graded for
|
||||
* the dark theme. Everything else about the scene is identical in both themes.
|
||||
*/
|
||||
|
||||
/*
|
||||
* The panel is not the viewport. `.main` is capped at 1400px with 1.5rem of
|
||||
* padding (1rem under 768px), so the artwork's box is that minus the padding —
|
||||
* describing it as 100vw over-requests by ~48px worth of candidate at every
|
||||
* width, which on a slow connection is a larger file than needed for the LCP
|
||||
* element.
|
||||
*/
|
||||
const SIZES = '(min-width: 1400px) 1352px, (min-width: 769px) calc(100vw - 3rem), calc(100vw - 2rem)';
|
||||
/** Scoped so the gradient ids can't collide with another inline SVG. */
|
||||
const SKY_TALL_ID = 'sc-hero-sky-tall';
|
||||
const SKY_BAND_ID = 'sc-hero-sky-band';
|
||||
|
||||
/** Intrinsic size of the wide crop — the aspect hint that prevents reflow. */
|
||||
const WIDE_W = 2000;
|
||||
const WIDE_H = 1125;
|
||||
|
||||
export function HeroIllustration() {
|
||||
function SkyGradient({ id }: { id: string }) {
|
||||
return (
|
||||
<picture>
|
||||
{/* Band crop first: <source> is first-match-wins, so the narrow-viewport
|
||||
rules have to precede the unconstrained desktop ones. */}
|
||||
<source
|
||||
media="(max-width: 860px)"
|
||||
type="image/avif"
|
||||
srcSet="/brand/hero-band-600.avif 600w, /brand/hero-band-900.avif 900w, /brand/hero-band-1344.avif 1344w"
|
||||
sizes={SIZES}
|
||||
<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stopColor="var(--ill-sky-high)" />
|
||||
<stop offset="1" stopColor="var(--ill-sky-low)" />
|
||||
</linearGradient>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The schoolhouse. Drawn once, placed by each composition.
|
||||
*
|
||||
* Detail deliberately below what it was: the gable clock, the flagpole
|
||||
* pennant and the four-window grid are gone. At the sizes this actually
|
||||
* renders they read as noise, and they were what tipped the drawing from
|
||||
* "soft brand illustration" into clip art.
|
||||
*/
|
||||
function Schoolhouse({ x, y, scale = 1 }: { x: number; y: number; scale?: number }) {
|
||||
return (
|
||||
<g transform={`translate(${x} ${y}) scale(${scale})`}>
|
||||
<rect x="12" y="34" width="98" height="58" rx="6" fill="var(--ill-wall)" />
|
||||
<path d="M2 36 L61 6 L120 36 Z" fill="var(--ill-roof)" />
|
||||
<rect x="52" y="60" width="20" height="32" rx="3" fill="var(--ill-door)" />
|
||||
<rect x="26" y="48" width="18" height="16" rx="4" fill="var(--ill-window)" />
|
||||
<rect x="80" y="48" width="18" height="16" rx="4" fill="var(--ill-window)" />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
/** The "you are here" pin. The only saturated thing in either composition. */
|
||||
function Pin({ x, y, scale = 1 }: { x: number; y: number; scale?: number }) {
|
||||
return (
|
||||
<g transform={`translate(${x} ${y}) scale(${scale})`}>
|
||||
<path
|
||||
d="M21 48 C21 48 42 26 42 15.5 A21 21 0 1 0 0 15.5 C0 26 21 48 21 48 Z"
|
||||
fill="var(--ill-pin)"
|
||||
/>
|
||||
<source
|
||||
media="(max-width: 860px)"
|
||||
type="image/webp"
|
||||
srcSet="/brand/hero-band-600.webp 600w, /brand/hero-band-900.webp 900w, /brand/hero-band-1344.webp 1344w"
|
||||
sizes={SIZES}
|
||||
<circle cx="21" cy="15.5" r="8" fill="var(--ill-pin-eye)" />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Desktop composition — the two-column hero panel.
|
||||
*
|
||||
* Crop window: `slice` anchored to the bottom, so the widest slot (about
|
||||
* 590×384) reveals y ∈ [169, 520] and the narrowest (about 430×320) reveals
|
||||
* y ∈ [118, 520]. Everything that carries meaning is therefore kept at
|
||||
* y ≥ 200; the sky above it exists only to be cropped.
|
||||
*/
|
||||
export function HeroIllustration() {
|
||||
return (
|
||||
<svg viewBox="0 0 540 520" preserveAspectRatio="xMidYMax slice" aria-hidden="true" focusable="false">
|
||||
<defs>
|
||||
<SkyGradient id={SKY_TALL_ID} />
|
||||
</defs>
|
||||
|
||||
<rect width="540" height="520" fill={`url(#${SKY_TALL_ID})`} />
|
||||
|
||||
{/* Two soft clouds. Low opacity so they never compete with the pin. */}
|
||||
<g fill="var(--ill-cloud)" opacity="0.7">
|
||||
<ellipse cx="96" cy="196" rx="34" ry="14" />
|
||||
<ellipse cx="124" cy="189" rx="24" ry="17" />
|
||||
<ellipse cx="424" cy="168" rx="28" ry="12" />
|
||||
<ellipse cx="445" cy="162" rx="19" ry="14" />
|
||||
</g>
|
||||
|
||||
{/* Four layered rolling hills, palest and furthest first */}
|
||||
<path d="M0 300 C 90 264 168 294 246 276 C 330 256 410 282 540 254 L540 520 L0 520 Z" fill="var(--ill-hill-far)" />
|
||||
<path d="M0 344 C 104 308 186 340 268 324 C 356 306 452 332 540 306 L540 520 L0 520 Z" fill="var(--ill-hill-mid)" />
|
||||
<path d="M0 408 C 118 378 214 410 306 392 C 400 374 470 398 540 382 L540 520 L0 520 Z" fill="var(--ill-hill-near)" />
|
||||
<path d="M0 468 C 130 446 236 474 340 458 C 432 444 486 462 540 452 L540 520 L0 520 Z" fill="var(--ill-hill-front)" />
|
||||
|
||||
{/* The path climbs from the near edge up to the school */}
|
||||
<path
|
||||
d="M214 520 C 202 466 254 448 276 424 C 298 400 274 378 254 366 C 230 352 244 328 276 316"
|
||||
stroke="var(--ill-path)"
|
||||
strokeWidth="18"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
{/*
|
||||
The band's JPEG, and the reason it exists.
|
||||
|
||||
<img src> cannot vary by viewport, so it is always the wide crop. A
|
||||
browser that takes neither AVIF nor WebP would therefore fall through
|
||||
to the desktop frame on a phone and lose the schoolhouse — the exact
|
||||
failure this whole component is arranged to prevent, surviving in the
|
||||
one path nobody looks at. No `type` here, so it matches anywhere the
|
||||
media query does, and it sits after the modern formats so they still
|
||||
win where supported.
|
||||
*/}
|
||||
<source media="(max-width: 860px)" srcSet="/brand/hero-band-900.jpg" />
|
||||
<source
|
||||
type="image/avif"
|
||||
srcSet="/brand/hero-wide-1000.avif 1000w, /brand/hero-wide-1400.avif 1400w, /brand/hero-wide-2000.avif 2000w"
|
||||
sizes={SIZES}
|
||||
<path
|
||||
d="M214 520 C 202 466 254 448 276 424 C 298 400 274 378 254 366 C 230 352 244 328 276 316"
|
||||
stroke="var(--ill-path-edge)"
|
||||
strokeWidth="18"
|
||||
fill="none"
|
||||
strokeLinecap="butt"
|
||||
strokeLinejoin="round"
|
||||
strokeDasharray="0.5 26"
|
||||
opacity="0.5"
|
||||
/>
|
||||
<source
|
||||
type="image/webp"
|
||||
srcSet="/brand/hero-wide-1000.webp 1000w, /brand/hero-wide-1400.webp 1400w, /brand/hero-wide-2000.webp 2000w"
|
||||
sizes={SIZES}
|
||||
|
||||
<Schoolhouse x={276} y={232} />
|
||||
|
||||
{/* Scattered rounded trees */}
|
||||
<g fill="var(--ill-tree-dark)">
|
||||
<circle cx="104" cy="372" r="27" />
|
||||
<circle cx="136" cy="386" r="19" />
|
||||
<circle cx="470" cy="336" r="23" />
|
||||
</g>
|
||||
<g fill="var(--ill-tree-light)">
|
||||
<circle cx="78" cy="394" r="21" />
|
||||
<circle cx="492" cy="358" r="17" />
|
||||
<circle cx="176" cy="420" r="18" />
|
||||
</g>
|
||||
<g fill="var(--ill-tree-mid)">
|
||||
<ellipse cx="44" cy="336" rx="15" ry="22" />
|
||||
<ellipse cx="508" cy="296" rx="13" ry="18" />
|
||||
<ellipse cx="150" cy="342" rx="12" ry="17" />
|
||||
</g>
|
||||
<g fill="var(--ill-tree-pale)" opacity="0.9">
|
||||
<circle cx="410" cy="420" r="16" />
|
||||
<circle cx="438" cy="430" r="12" />
|
||||
<circle cx="120" cy="470" r="14" />
|
||||
</g>
|
||||
|
||||
<Pin x={196} y={372} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Band composition — the one-column hero, where the art becomes a short strip
|
||||
* beneath the search.
|
||||
*
|
||||
* Crop window: at 358×136 (a phone) `slice` reveals x ∈ [42, 358] of the
|
||||
* 400-unit width; at 860×176 (just under the one-column breakpoint) it reveals
|
||||
* the full width but only y ∈ [38, 120]. The intersection — x ∈ [70, 330],
|
||||
* y ∈ [38, 120] — is where the school and the pin sit. Hills and trees run to
|
||||
* the edges precisely because they are the parts that may be cropped.
|
||||
*/
|
||||
export function HeroIllustrationBand() {
|
||||
return (
|
||||
<svg viewBox="0 0 400 120" preserveAspectRatio="xMidYMax slice" aria-hidden="true" focusable="false">
|
||||
<defs>
|
||||
<SkyGradient id={SKY_BAND_ID} />
|
||||
</defs>
|
||||
|
||||
<rect width="400" height="120" fill={`url(#${SKY_BAND_ID})`} />
|
||||
|
||||
{/* Hills sit low so the safe zone stays clear for the building */}
|
||||
<path d="M0 74 C 70 62 120 76 176 70 C 244 62 318 74 400 62 L400 120 L0 120 Z" fill="var(--ill-hill-far)" />
|
||||
<path d="M0 92 C 84 82 140 94 208 88 C 286 80 340 92 400 84 L400 120 L0 120 Z" fill="var(--ill-hill-mid)" />
|
||||
<path d="M0 108 C 96 100 168 110 248 104 C 322 98 356 106 400 102 L400 120 L0 120 Z" fill="var(--ill-hill-near)" />
|
||||
|
||||
{/* A shorter path — the same idea at band scale, without the switchback,
|
||||
which turns to mush below about 40 user units of height. */}
|
||||
<path
|
||||
d="M150 120 C 156 104 186 100 202 92 C 216 84 210 76 216 70"
|
||||
stroke="var(--ill-path)"
|
||||
strokeWidth="9"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
{/*
|
||||
The hero is the largest thing above the fold, so it is almost certainly
|
||||
the LCP element: fetchPriority high, and never lazy. eslint's
|
||||
no-img-element wants next/image, which cannot art-direct between two
|
||||
different crops — that is the whole point of the <picture> above.
|
||||
*/}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src="/brand/hero-wide-1400.jpg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
width={WIDE_W}
|
||||
height={WIDE_H}
|
||||
decoding="async"
|
||||
fetchPriority="high"
|
||||
/>
|
||||
</picture>
|
||||
|
||||
<Schoolhouse x={186} y={30} scale={0.52} />
|
||||
|
||||
<g fill="var(--ill-tree-dark)">
|
||||
<circle cx="58" cy="86" r="15" />
|
||||
<circle cx="78" cy="94" r="11" />
|
||||
<circle cx="342" cy="80" r="13" />
|
||||
</g>
|
||||
<g fill="var(--ill-tree-light)">
|
||||
<circle cx="40" cy="98" r="12" />
|
||||
<circle cx="360" cy="92" r="10" />
|
||||
<circle cx="300" cy="100" r="11" />
|
||||
</g>
|
||||
<g fill="var(--ill-tree-pale)" opacity="0.9">
|
||||
<circle cx="112" cy="104" r="9" />
|
||||
<circle cx="266" cy="108" r="8" />
|
||||
</g>
|
||||
|
||||
<Pin x={124} y={70} scale={0.62} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
/**
|
||||
* LeafletCutoffMapInner
|
||||
* The cut-off distances drawn around the school.
|
||||
*
|
||||
* L.circle takes a radius in metres and projects it properly, which is exactly
|
||||
* what these rings are: a straight-line distance from the school. (L.circleMarker
|
||||
* would take pixels and would silently stop meaning anything as the user zoomed.)
|
||||
*
|
||||
* The latest year is filled and labelled; earlier years are hairlines behind it,
|
||||
* so a tightening cut-off reads as a set of shrinking circles without needing a
|
||||
* legend to decode it. The map auto-fits the widest ring, so the whole history
|
||||
* is in frame whatever the distances are.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
export interface CutoffRing {
|
||||
year: number;
|
||||
radiusM: number;
|
||||
latest: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
lat: number;
|
||||
lng: number;
|
||||
rings: CutoffRing[];
|
||||
/** The parent's geocoded postcode, once they have entered one. */
|
||||
home: { lat: number; lng: number } | null;
|
||||
interactive: boolean;
|
||||
}
|
||||
|
||||
const SCHOOL_PIN = `
|
||||
<div style="position:relative;width:22px;height:22px">
|
||||
<span style="position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:var(--brand-bg)"></span>
|
||||
<span style="position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--brand);border:3px solid var(--bg-card)"></span>
|
||||
</div>`;
|
||||
|
||||
// A square rotated 45° — a different SHAPE from the school's circle, not just a
|
||||
// different colour, so the two are still distinguishable to anyone who cannot
|
||||
// separate the hues.
|
||||
const HOME_PIN = `
|
||||
<div style="width:18px;height:18px;display:grid;place-items:center">
|
||||
<span style="width:12px;height:12px;background:var(--status-above);border:2.5px solid var(--bg-card);transform:rotate(45deg);border-radius:2px"></span>
|
||||
</div>`;
|
||||
|
||||
function cssVar(name: string, fallback: string): string {
|
||||
if (typeof window === 'undefined') return fallback;
|
||||
return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
|
||||
}
|
||||
|
||||
export default function LeafletCutoffMapInner({ lat, lng, rings, home, interactive }: Props) {
|
||||
const elRef = useRef<HTMLDivElement>(null);
|
||||
const mapRef = useRef<L.Map | null>(null);
|
||||
const layersRef = useRef<L.Layer[]>([]);
|
||||
const zoomCtrlRef = useRef<L.Control.Zoom | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!elRef.current || mapRef.current) return;
|
||||
const map = L.map(elRef.current, {
|
||||
zoomControl: false,
|
||||
attributionControl: true,
|
||||
dragging: false,
|
||||
scrollWheelZoom: false,
|
||||
doubleClickZoom: false,
|
||||
boxZoom: false,
|
||||
keyboard: false,
|
||||
touchZoom: false,
|
||||
}).setView([lat, lng], 14);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
|
||||
mapRef.current = map;
|
||||
setTimeout(() => map.invalidateSize(), 60);
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
layersRef.current = [];
|
||||
zoomCtrlRef.current = null;
|
||||
};
|
||||
}, [lat, lng]);
|
||||
|
||||
// Redraw rings, pins and the viewport whenever the data changes.
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
|
||||
layersRef.current.forEach((l) => l.remove());
|
||||
layersRef.current = [];
|
||||
|
||||
const brand = cssVar('--brand', '#0F766E');
|
||||
const above = cssVar('--status-above', '#2F855A');
|
||||
|
||||
// Widest first, so the small recent ring is not buried under the old ones.
|
||||
const ordered = [...rings].sort((a, b) => b.radiusM - a.radiusM);
|
||||
for (const r of ordered) {
|
||||
const circle = L.circle([lat, lng], {
|
||||
radius: r.radiusM,
|
||||
color: brand,
|
||||
weight: r.latest ? 3 : 1.5,
|
||||
opacity: r.latest ? 1 : 0.45,
|
||||
fill: r.latest,
|
||||
fillColor: brand,
|
||||
fillOpacity: r.latest ? 0.12 : 0,
|
||||
interactive: false,
|
||||
}).addTo(map);
|
||||
layersRef.current.push(circle);
|
||||
}
|
||||
|
||||
const school = L.marker([lat, lng], {
|
||||
icon: L.divIcon({ className: '', iconSize: [22, 22], iconAnchor: [11, 11], html: SCHOOL_PIN }),
|
||||
keyboard: false,
|
||||
interactive: false,
|
||||
}).addTo(map);
|
||||
layersRef.current.push(school);
|
||||
|
||||
if (home) {
|
||||
const pin = L.marker([home.lat, home.lng], {
|
||||
icon: L.divIcon({ className: '', iconSize: [18, 18], iconAnchor: [9, 9], html: HOME_PIN }),
|
||||
keyboard: false,
|
||||
interactive: false,
|
||||
}).addTo(map);
|
||||
layersRef.current.push(pin);
|
||||
|
||||
const line = L.polyline([[lat, lng], [home.lat, home.lng]], {
|
||||
color: above,
|
||||
weight: 2,
|
||||
dashArray: '5 5',
|
||||
opacity: 0.85,
|
||||
interactive: false,
|
||||
}).addTo(map);
|
||||
layersRef.current.push(line);
|
||||
}
|
||||
|
||||
// Frame the widest ring — and the home pin when it falls outside it, so a
|
||||
// family beyond every cut-off can still see where they sit.
|
||||
const widest = ordered[0]?.radiusM ?? 500;
|
||||
let bounds = L.latLng(lat, lng).toBounds(widest * 2.2);
|
||||
if (home) bounds = bounds.extend(L.latLng(home.lat, home.lng));
|
||||
map.fitBounds(bounds, { padding: [16, 16] });
|
||||
}, [lat, lng, rings, home]);
|
||||
|
||||
useEffect(() => {
|
||||
const map = mapRef.current;
|
||||
if (!map) return;
|
||||
const handlers = [
|
||||
map.dragging, map.scrollWheelZoom, map.doubleClickZoom, map.boxZoom, map.keyboard, map.touchZoom,
|
||||
];
|
||||
handlers.forEach((h) => { if (h) { interactive ? h.enable() : h.disable(); } });
|
||||
|
||||
if (interactive && !zoomCtrlRef.current) {
|
||||
zoomCtrlRef.current = L.control.zoom({ position: 'topleft' });
|
||||
zoomCtrlRef.current.addTo(map);
|
||||
} else if (!interactive && zoomCtrlRef.current) {
|
||||
zoomCtrlRef.current.remove();
|
||||
zoomCtrlRef.current = null;
|
||||
}
|
||||
setTimeout(() => map.invalidateSize(), 80);
|
||||
}, [interactive]);
|
||||
|
||||
return <div ref={elRef} style={{ width: '100%', height: '100%' }} />;
|
||||
}
|
||||
@@ -48,32 +48,13 @@
|
||||
Each bar compares against its own benchmark (expected vs higher standard /
|
||||
greater depth), so the marker sits on the individual bar's track rather than
|
||||
as one line spanning both bars. */
|
||||
/*
|
||||
* Knockout, not a colour.
|
||||
*
|
||||
* This marker was var(--brand) — the same value as .barExpected and
|
||||
* .barExceeding, so wherever it crossed a bar it measured 1.00:1 and was not
|
||||
* rendered distinguishably at all. It scored 5.47:1 only against the empty
|
||||
* track, which means it was visible precisely when a school was BELOW the
|
||||
* national average and vanished for every school at or above it.
|
||||
*
|
||||
* No single colour fixes this, because the marker's position is data-driven:
|
||||
* it can land on the bar, on the empty track, or straddle the boundary. So it
|
||||
* is drawn as a knockout — a light core carrying a dark edge. On the teal bar
|
||||
* the core reads; on the pale track the edge reads. Both tokens flip with the
|
||||
* theme, so the pairing holds in dark mode too.
|
||||
*
|
||||
* The edge is box-shadow rather than border so it costs no layout width and
|
||||
* cannot shift the 50% translate.
|
||||
*/
|
||||
.natTick {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
bottom: -3px;
|
||||
width: 3px;
|
||||
width: 2px;
|
||||
transform: translateX(-50%);
|
||||
background: var(--bg-card);
|
||||
box-shadow: 0 0 0 1px var(--text-primary);
|
||||
background: var(--brand);
|
||||
border-radius: 2px;
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
@@ -82,14 +63,13 @@
|
||||
.natTick::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
top: -3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
box-shadow: 0 0 0 1px var(--text-primary);
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
.barHeaderRight {
|
||||
@@ -142,24 +122,12 @@
|
||||
transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/*
|
||||
* Expected and Exceeding were both var(--brand) — one colour for two series,
|
||||
* distinguished only by which row you were looking at, while the legend
|
||||
* claimed two.
|
||||
*
|
||||
* They are a sequential pair, not two categories: "exceeding" is a subset of
|
||||
* the same cohort at a harder bar. So they take two steps of the same hue
|
||||
* rather than two different hues, with the harder measure the more intense
|
||||
* step. --brand-stronger is darker than --brand in the light theme and lighter
|
||||
* in the dark one, which is the right direction in both: further from the
|
||||
* ground.
|
||||
*/
|
||||
.barExpected {
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
.barExceeding {
|
||||
background: var(--brand-stronger);
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
|
||||
@@ -143,40 +143,17 @@ export default function SatsChart({ subjects }: SatsChartProps) {
|
||||
<SubjectColumn key={subject.name} subject={subject} />
|
||||
))}
|
||||
</div>
|
||||
{/*
|
||||
The legend describes what is drawn, which it previously did not.
|
||||
|
||||
Both data swatches were var(--status-above) — green — while the bars
|
||||
they labelled were var(--brand) teal, and they were identical to each
|
||||
other, so two different series shared one swatch. Worse, the only
|
||||
swatch that matched the bar colour was the one labelled "National
|
||||
average": anyone reading the chart by matching colours would conclude
|
||||
the teal bars WERE the national average.
|
||||
|
||||
Each swatch now carries the exact value its bar carries, and the
|
||||
national-average swatch mirrors the knockout marker rather than being
|
||||
a flat colour, so it is recognisable as the thing on the chart.
|
||||
*/}
|
||||
<div className={styles.legend}>
|
||||
<div className={styles.legendItem}>
|
||||
<div className={styles.legendSwatch} style={{ background: 'var(--brand)' }} />
|
||||
<div className={styles.legendSwatch} style={{ background: 'var(--status-above)' }} />
|
||||
Expected standard
|
||||
</div>
|
||||
<div className={styles.legendItem}>
|
||||
<div className={styles.legendSwatch} style={{ background: 'var(--brand-stronger)' }} />
|
||||
<div className={styles.legendSwatch} style={{ background: 'var(--status-above)' }} />
|
||||
Exceeding / high score
|
||||
</div>
|
||||
<div className={styles.legendItem}>
|
||||
<div
|
||||
className={styles.legendSwatch}
|
||||
style={{
|
||||
background: 'var(--bg-card)',
|
||||
boxShadow: '0 0 0 1px var(--text-primary)',
|
||||
width: '3px',
|
||||
height: '12px',
|
||||
borderRadius: '2px',
|
||||
}}
|
||||
/>
|
||||
<div className={styles.legendSwatch} style={{ background: 'var(--brand)', width: '3px', height: '12px', borderRadius: '2px' }} />
|
||||
National average
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,122 +9,62 @@
|
||||
* AdmissionsViewToggle client island, which receives both views as
|
||||
* server-rendered children. When there is only one year of offer data no
|
||||
* toggle renders at all, so such pages ship zero admissions JavaScript.
|
||||
*
|
||||
* The two views are stacked in one grid cell so switching never shifts layout,
|
||||
* which means the card is sized by the TALLER of them. Keep any view added
|
||||
* here close to the tile grid in height: a cut-off-distance view carrying a
|
||||
* chart, a table and a map was tried, measured 1402px against the tiles' 316px,
|
||||
* and left the default view as four tiles adrift in blank card. It now lives in
|
||||
* DistanceSection.
|
||||
*/
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import type { SchoolAdmissions, SchoolAdmissionDistance } from '@/lib/types';
|
||||
import type { SchoolAdmissions } from '@/lib/types';
|
||||
import { formatAcademicYear, formatPercentage } from '@/lib/utils';
|
||||
import { summariseAdmissions } from '@/lib/compareLogic';
|
||||
import { Section, sectionStyles as styles } from './sectionShared';
|
||||
import { AdmissionsViewToggle, type AdmissionsView } from './AdmissionsViewToggle';
|
||||
import { AdmissionsViewToggle } from './AdmissionsViewToggle';
|
||||
import { AdmissionsTrendChart } from './charts';
|
||||
import { describeCutoff, CUTOFF_NOTE, CUTOFF_MEASUREMENT_NOTE } from './lastDistanceOffered';
|
||||
|
||||
|
||||
export function AdmissionsSection({
|
||||
admissions,
|
||||
admissionsHistory,
|
||||
admissionDistance,
|
||||
isAllThrough,
|
||||
}: {
|
||||
/* Nullable: the two data sources are independent. A minority of schools have
|
||||
a published cut-off distance but no EES admissions row (3% of the schools
|
||||
that render, sampled against staging), and for those this section exists
|
||||
to carry the distance alone. */
|
||||
admissions: SchoolAdmissions | null;
|
||||
admissions: SchoolAdmissions;
|
||||
admissionsHistory: SchoolAdmissions[];
|
||||
admissionDistance: SchoolAdmissionDistance | null;
|
||||
isAllThrough: boolean;
|
||||
}) {
|
||||
const cutoff = describeCutoff(admissionDistance);
|
||||
|
||||
// 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 = admissions != null && admissionsOfferYears >= 2;
|
||||
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 = admissions ? summariseAdmissions(admissions) : null;
|
||||
const admissionsSummary = summariseAdmissions(admissions);
|
||||
|
||||
const title = (
|
||||
<>Admissions{!showAdmissionsTrend && admissions && ` (${formatAcademicYear(admissions.year)})`}</>
|
||||
);
|
||||
const title = <>Admissions{!showAdmissionsTrend && ` (${formatAcademicYear(admissions.year)})`}</>;
|
||||
|
||||
{/* All-through admissions data covers a single entry point (usually the
|
||||
Year 7 secondary intake), not reception — say so, or a parent could
|
||||
read these as the whole-school figures. */}
|
||||
const subtitle: ReactNode = isAllThrough && admissions?.school_phase ? (
|
||||
const subtitle: ReactNode = isAllThrough && admissions.school_phase ? (
|
||||
<p className={styles.sectionSubtitle}>
|
||||
These figures are for {admissions.school_phase.toLowerCase()} entry
|
||||
{/secondary/i.test(admissions.school_phase) ? ' (Year 7)' : /primary/i.test(admissions.school_phase) ? ' (Reception)' : ''}.
|
||||
</p>
|
||||
) : null;
|
||||
|
||||
{/* Spans both columns rather than taking a half-width cell. This is the
|
||||
figure parents come to the page for, and at tile width the two-line
|
||||
"0.31 miles / September 2025" pairing wraps badly. */}
|
||||
const distanceTile = cutoff && (
|
||||
<div className={`${styles.admissionsTile} ${styles.admissionsTileDistance}`}>
|
||||
<dd className={styles.admissionsTileNum}>
|
||||
{cutoff.primary}
|
||||
<span className={styles.admissionsTileSub}>{cutoff.secondary}</span>
|
||||
</dd>
|
||||
<dt className={styles.admissionsTileLabel}>
|
||||
Last distance offered · {cutoff.entryYear}
|
||||
</dt>
|
||||
</div>
|
||||
);
|
||||
|
||||
const distanceNote = cutoff && (
|
||||
<p className={styles.admissionsDistanceNote}>
|
||||
{CUTOFF_NOTE} {CUTOFF_MEASUREMENT_NOTE}
|
||||
{cutoff.routeNote && <> {cutoff.routeNote}</>}
|
||||
</p>
|
||||
);
|
||||
|
||||
/*
|
||||
* Which row template the tile grid needs.
|
||||
*
|
||||
* The grid reserves two equal rows so the year view matches the height of the
|
||||
* trend chart beside it. With a cut-off and no EES admissions there are no
|
||||
* metric tiles to fill them, and the reserved rows render as a bare block of
|
||||
* the grid's own gap colour under the distance tile.
|
||||
*/
|
||||
const hasMetricTiles = admissions != null && (
|
||||
admissions.places_offered != null
|
||||
|| admissions.first_preference_applications != null
|
||||
|| admissions.first_preference_offer_pct != null
|
||||
|| admissions.total_applications != null
|
||||
);
|
||||
const tilesClass = [
|
||||
styles.admissionsTiles,
|
||||
cutoff && hasMetricTiles ? styles.admissionsTilesWithDistance : '',
|
||||
cutoff && !hasMetricTiles ? styles.admissionsTilesDistanceOnly : '',
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const yearView = (
|
||||
<>
|
||||
<dl className={tilesClass}>
|
||||
{admissions?.places_offered != null && (
|
||||
<dl className={styles.admissionsTiles}>
|
||||
{admissions.places_offered != null && (
|
||||
<div className={styles.admissionsTile}>
|
||||
<dd className={styles.admissionsTileNum}>{admissions.places_offered}</dd>
|
||||
<dt className={styles.admissionsTileLabel}>Places offered</dt>
|
||||
</div>
|
||||
)}
|
||||
{admissions?.first_preference_applications != null && (
|
||||
{admissions.first_preference_applications != null && (
|
||||
<div className={styles.admissionsTile}>
|
||||
<dd className={styles.admissionsTileNum}>{admissions.first_preference_applications}</dd>
|
||||
<dt className={styles.admissionsTileLabel}>Wanted it first</dt>
|
||||
</div>
|
||||
)}
|
||||
{admissions?.first_preference_offer_pct != null && (
|
||||
{admissions.first_preference_offer_pct != null && (
|
||||
<div className={`${styles.admissionsTile} ${styles.admissionsTileAccent}`}>
|
||||
<dd className={styles.admissionsTileNum}>
|
||||
{admissions.first_preference_offers != null && admissions.first_preference_applications != null ? (
|
||||
@@ -141,25 +81,20 @@ export function AdmissionsSection({
|
||||
<dt className={styles.admissionsTileLabel}>Got their first choice</dt>
|
||||
</div>
|
||||
)}
|
||||
{admissions?.total_applications != null && (
|
||||
{admissions.total_applications != null && (
|
||||
<div className={styles.admissionsTile}>
|
||||
<dd className={styles.admissionsTileNum}>{admissions.total_applications.toLocaleString()}</dd>
|
||||
<dt className={styles.admissionsTileLabel}>Applied in total</dt>
|
||||
</div>
|
||||
)}
|
||||
{distanceTile}
|
||||
</dl>
|
||||
{admissionsSummary?.chip && (
|
||||
{admissionsSummary.chip && (
|
||||
<p className={styles.admissionsTrendSummary}>{admissionsSummary.chip.text}</p>
|
||||
)}
|
||||
{distanceNote}
|
||||
</>
|
||||
);
|
||||
|
||||
{/* Guarded rather than asserted: showAdmissionsTrend already requires
|
||||
admissions, and tying the two together in one expression keeps that
|
||||
invariant checked by the compiler instead of assumed. */}
|
||||
const trendView = admissions && (
|
||||
const trendView = (
|
||||
<>
|
||||
<div className={styles.admissionsChartCap}>First-choice offer rate</div>
|
||||
<AdmissionsTrendChart history={admissionsHistory} />
|
||||
@@ -174,24 +109,18 @@ export function AdmissionsSection({
|
||||
</>
|
||||
);
|
||||
|
||||
const views: AdmissionsView[] = [
|
||||
{ id: 'year', label: 'This year', content: yearView, className: styles.admissionsViewYear },
|
||||
];
|
||||
if (showAdmissionsTrend) {
|
||||
views.push({
|
||||
id: 'trend',
|
||||
label: `${admissionsHistory.length}-year trend`,
|
||||
content: trendView,
|
||||
className: styles.admissionsViewTrend,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Section id="admissions">
|
||||
{views.length > 1 ? (
|
||||
<AdmissionsViewToggle title={title} subtitle={subtitle} views={views} />
|
||||
{showAdmissionsTrend ? (
|
||||
<AdmissionsViewToggle
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
trendLabel={`${admissionsHistory.length}-year trend`}
|
||||
yearView={yearView}
|
||||
trendView={trendView}
|
||||
/>
|
||||
) : (
|
||||
/* One view — render statically, with no client component at all. */
|
||||
/* No trend data — render statically, with no client component at all. */
|
||||
<>
|
||||
<div className={styles.admissionsHeader}>
|
||||
<h2 className={styles.sectionTitle}>{title}</h2>
|
||||
|
||||
@@ -3,25 +3,14 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import styles from './schoolSections.module.css';
|
||||
|
||||
export interface AdmissionsView {
|
||||
id: string;
|
||||
/** Button text. "This year" and the "N-year trend" label are asserted by the
|
||||
* e2e journey, so they are not free to drift. */
|
||||
label: string;
|
||||
content: ReactNode;
|
||||
/** The year view sizes its tile grid to match the chart beside it, so each
|
||||
* view keeps its own class rather than sharing one wrapper style. */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The only interactive part of the primary admissions section, and the only
|
||||
* client component in components/school/.
|
||||
*
|
||||
* Every view is always present in the DOM and visibility is toggled with the
|
||||
* `hidden` attribute, so the server-rendered markup passed in as content never
|
||||
* ships as client JavaScript — this component carries the state and nothing
|
||||
* else.
|
||||
* Both views are always present in the DOM and visibility is toggled with the
|
||||
* `hidden` attribute — matching the previous behaviour exactly — so the
|
||||
* server-rendered markup passed in as yearView/trendView never ships as client
|
||||
* JavaScript.
|
||||
*
|
||||
* It spans the header and the viewport because the segmented control sits
|
||||
* inside .admissionsHeader beside the <h2> while the viewport is a sibling
|
||||
@@ -30,38 +19,39 @@ export interface AdmissionsView {
|
||||
export function AdmissionsViewToggle({
|
||||
title,
|
||||
subtitle,
|
||||
views,
|
||||
trendLabel,
|
||||
yearView,
|
||||
trendView,
|
||||
}: {
|
||||
title: ReactNode;
|
||||
subtitle: ReactNode;
|
||||
views: AdmissionsView[];
|
||||
trendLabel: string;
|
||||
yearView: ReactNode;
|
||||
trendView: ReactNode;
|
||||
}) {
|
||||
const [active, setActive] = useState(views[0]?.id);
|
||||
const [view, setView] = useState<'year' | 'trend'>('year');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.admissionsHeader}>
|
||||
<h2 className={styles.sectionTitle}>{title}</h2>
|
||||
<div className={styles.admissionsSeg} role="group" aria-label="Admissions view">
|
||||
{views.map((v) => (
|
||||
<button
|
||||
key={v.id}
|
||||
type="button"
|
||||
aria-pressed={active === v.id}
|
||||
onClick={() => setActive(v.id)}
|
||||
>
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
<button type="button" aria-pressed={view === 'year'} onClick={() => setView('year')}>
|
||||
This year
|
||||
</button>
|
||||
<button type="button" aria-pressed={view === 'trend'} onClick={() => setView('trend')}>
|
||||
{trendLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{subtitle}
|
||||
<div className={styles.admissionsViewport}>
|
||||
{views.map((v) => (
|
||||
<div key={v.id} className={v.className} hidden={active !== v.id}>
|
||||
{v.content}
|
||||
</div>
|
||||
))}
|
||||
<div className={styles.admissionsViewYear} hidden={view !== 'year'}>
|
||||
{yearView}
|
||||
</div>
|
||||
<div className={styles.admissionsViewTrend} hidden={view !== 'trend'}>
|
||||
{trendView}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
/**
|
||||
* CutoffDistanceDetail — the full year-by-year cut-off story.
|
||||
*
|
||||
* Chart, table, map and postcode check, in that order: the shape of the trend,
|
||||
* then what happened in each year, then the same numbers over real streets,
|
||||
* then the reader's own address measured against them.
|
||||
*
|
||||
* Shared by both templates because the content is identical, but placed
|
||||
* differently by each. The primary page has a segmented control and gives this
|
||||
* its own "Distance" tab; the secondary page is one flat panel by design, so it
|
||||
* renders inline beneath the metric cards. Extracting it keeps the caveats and
|
||||
* the ordering from drifting apart between the two.
|
||||
*
|
||||
* Server component — the map and postcode form are the only client parts, and
|
||||
* they carry their own boundary.
|
||||
*/
|
||||
|
||||
import type { School } from '@/lib/types';
|
||||
import { sectionStyles as styles } from './sectionShared';
|
||||
import { CutoffTrendChart } from './charts';
|
||||
import { CutoffYearTable } from './CutoffYearTable';
|
||||
import { CutoffMapPanel } from './CutoffMapPanel';
|
||||
import {
|
||||
cutoffTrendSummary, cutoffCoverageNote, CUTOFF_CHECK_CAVEAT,
|
||||
type CutoffYearRow,
|
||||
} from './lastDistanceOffered';
|
||||
|
||||
export function CutoffDistanceDetail({
|
||||
rows,
|
||||
schoolInfo,
|
||||
}: {
|
||||
rows: CutoffYearRow[];
|
||||
schoolInfo: School;
|
||||
}) {
|
||||
const publishedYears = rows.filter((r) => r.status === 'published').length;
|
||||
if (publishedYears < 2) return null;
|
||||
|
||||
const trendSummary = cutoffTrendSummary(rows);
|
||||
const coverageNote = cutoffCoverageNote(rows);
|
||||
/*
|
||||
* The chart appears at the same four points that let cutoffTrendSummary
|
||||
* state a direction. Below that we already refuse to call the series a
|
||||
* trend, and drawing a trend line under that refusal contradicts it — three
|
||||
* points joined by a line say "look, it is falling" whatever the sentence
|
||||
* beneath admits. The table carries every one of those years anyway, with
|
||||
* the reasons a line cannot show, so nothing is lost by leaving it out.
|
||||
*/
|
||||
const showChart = publishedYears >= 4;
|
||||
|
||||
return (
|
||||
<>
|
||||
{showChart && (
|
||||
<>
|
||||
<div className={styles.admissionsChartCap}>Last distance offered, by year</div>
|
||||
<CutoffTrendChart rows={rows} />
|
||||
<p className={styles.cutoffChartKey}>
|
||||
Gaps are years with no published figure — the line is never drawn
|
||||
across one. The table says what happened in each.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{trendSummary && <p className={styles.admissionsTrendSummary}>{trendSummary}</p>}
|
||||
|
||||
<CutoffYearTable rows={rows} />
|
||||
{coverageNote && <p className={styles.cutoffChartKey}>{coverageNote}</p>}
|
||||
|
||||
<CutoffMapPanel schoolInfo={schoolInfo} rows={rows} />
|
||||
|
||||
{/* The single caveat for the whole section. It lives here rather than
|
||||
inside the check, so it still renders for a school with no
|
||||
coordinates — where there is a table but no map and no check. */}
|
||||
<p className={styles.cutoffCheckCaveat}>{CUTOFF_CHECK_CAVEAT}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,226 +0,0 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* CutoffMapPanel — "Where the last place went".
|
||||
*
|
||||
* The rings and the postcode check live in one component because they are one
|
||||
* question asked twice: the form answers "how far are we?" and the map shows
|
||||
* that answer against the cut-offs. Entering a postcode drops a pin on the same
|
||||
* rings rather than producing a separate verdict elsewhere on the page.
|
||||
*
|
||||
* The map is not rendered until asked for. Before a postcode is entered it is a
|
||||
* circle drawn round a school, and it costs a Leaflet bundle and 240px of
|
||||
* section height to say that; a successful check opens it automatically,
|
||||
* because that is the point at which it starts answering something.
|
||||
*
|
||||
* The postcode never leaves the browser except to postcodes.io for a lat/long,
|
||||
* and nothing is stored — this is a client-side measurement, not a lookup
|
||||
* against the family.
|
||||
*/
|
||||
|
||||
import { useState, useMemo, type FormEvent } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import type { School } from '@/lib/types';
|
||||
import { geocodePostcode, calculateDistance } from '@/lib/api';
|
||||
import { isValidPostcode } from '@/lib/utils';
|
||||
import {
|
||||
compareToCutoffs,
|
||||
type CutoffYearRow, type CutoffCheckResult, type CutoffVerdict,
|
||||
} from './lastDistanceOffered';
|
||||
import type { CutoffRing } from '../LeafletCutoffMapInner';
|
||||
import styles from './schoolSections.module.css';
|
||||
|
||||
const CutoffMap = dynamic(() => import('../LeafletCutoffMapInner'), {
|
||||
ssr: false,
|
||||
loading: () => <div className={styles.cutoffMapSkeleton} aria-hidden="true" />,
|
||||
});
|
||||
|
||||
const VERDICT_MARK: Record<CutoffVerdict, string> = {
|
||||
inside: '✓',
|
||||
outside: '✕',
|
||||
'too-close': '≈',
|
||||
unknown: '–',
|
||||
};
|
||||
|
||||
const VERDICT_TITLE: Record<CutoffVerdict, string> = {
|
||||
inside: 'Inside that year’s cut-off',
|
||||
outside: 'Outside that year’s cut-off',
|
||||
'too-close': 'Too close to the cut-off to say',
|
||||
unknown: 'No published figure for this year',
|
||||
};
|
||||
|
||||
// Written out rather than composed from the verdict string. A computed
|
||||
// `styles[...]` key silently yields undefined when a class is renamed, and an
|
||||
// unstyled "outside" chip would look exactly like an "inside" one.
|
||||
const VERDICT_CLASS: Record<CutoffVerdict, string> = {
|
||||
inside: styles.cutoffYearInside,
|
||||
outside: styles.cutoffYearOutside,
|
||||
'too-close': styles.cutoffYearTooClose,
|
||||
unknown: styles.cutoffYearUnknown,
|
||||
};
|
||||
|
||||
export function CutoffMapPanel({
|
||||
schoolInfo,
|
||||
rows,
|
||||
}: {
|
||||
schoolInfo: School;
|
||||
rows: CutoffYearRow[];
|
||||
}) {
|
||||
const [postcode, setPostcode] = useState('');
|
||||
const [home, setHome] = useState<{ lat: number; lng: number } | null>(null);
|
||||
const [result, setResult] = useState<CutoffCheckResult | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
/* The map is not rendered until it is asked for. It costs a Leaflet bundle
|
||||
and 240px of section height, and before a postcode is entered it is a
|
||||
circle drawn round a school — it only starts answering a question once
|
||||
there is a home to put beside the rings. A successful check therefore
|
||||
opens it automatically. */
|
||||
const [mapOpen, setMapOpen] = useState(false);
|
||||
|
||||
const lat = schoolInfo.latitude;
|
||||
const lng = schoolInfo.longitude;
|
||||
|
||||
const rings: CutoffRing[] = useMemo(() => {
|
||||
const published = rows.filter((r) => r.distanceM != null);
|
||||
return published.map((r, i) => ({
|
||||
year: r.year,
|
||||
radiusM: r.distanceM as number,
|
||||
// rows are newest-first, so the first published row is the current year.
|
||||
latest: i === 0,
|
||||
}));
|
||||
}, [rows]);
|
||||
|
||||
// Without coordinates there is nothing to draw rings around and nothing to
|
||||
// measure a postcode against.
|
||||
if (lat == null || lng == null || rings.length === 0) return null;
|
||||
|
||||
const onCheck = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
const value = postcode.trim();
|
||||
if (!value) return;
|
||||
|
||||
if (!isValidPostcode(value)) {
|
||||
setError('That does not look like a UK postcode. Try one like SE23 3NA.');
|
||||
setResult(null);
|
||||
setHome(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const point = await geocodePostcode(value);
|
||||
if (!point) {
|
||||
setError('We could not find that postcode. Check it and try again.');
|
||||
setResult(null);
|
||||
setHome(null);
|
||||
return;
|
||||
}
|
||||
setHome({ lat: point.latitude, lng: point.longitude });
|
||||
setMapOpen(true);
|
||||
// calculateDistance returns kilometres; everything here is metres.
|
||||
const metres = calculateDistance(point.latitude, point.longitude, lat, lng) * 1000;
|
||||
setResult(compareToCutoffs(metres, rows));
|
||||
} catch {
|
||||
setError('Something went wrong looking up that postcode. Try again in a moment.');
|
||||
setResult(null);
|
||||
setHome(null);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const latestRing = rings[0];
|
||||
|
||||
return (
|
||||
<div className={styles.cutoffMapPanel}>
|
||||
{/* No "Where the last place went" heading above this any more. It
|
||||
introduced a map that now sits behind a button, so it named nothing,
|
||||
and it echoed the section title directly above it. */}
|
||||
<div className={styles.cutoffCheck}>
|
||||
<h3 className={styles.cutoffCheckTitle}>How far away are you?</h3>
|
||||
<p className={styles.cutoffCheckSub}>
|
||||
Straight-line distance from your postcode, compared with each year’s
|
||||
cut-off. Not stored.
|
||||
</p>
|
||||
|
||||
<form className={styles.cutoffCheckForm} onSubmit={onCheck}>
|
||||
<label className={styles.srOnly} htmlFor="cutoff-postcode">Your postcode</label>
|
||||
<input
|
||||
id="cutoff-postcode"
|
||||
type="text"
|
||||
inputMode="text"
|
||||
autoComplete="postal-code"
|
||||
spellCheck={false}
|
||||
placeholder="e.g. SE23 3NA"
|
||||
value={postcode}
|
||||
onChange={(e) => setPostcode(e.target.value)}
|
||||
className={styles.cutoffCheckInput}
|
||||
/>
|
||||
<button type="submit" className={styles.cutoffCheckButton} disabled={busy}>
|
||||
{busy ? 'Checking…' : 'Check'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{error && <p className={styles.cutoffCheckError} role="alert">{error}</p>}
|
||||
|
||||
{result && (
|
||||
<div className={styles.cutoffCheckResult} role="status">
|
||||
<p className={styles.cutoffCheckHeadline}>{result.headline}</p>
|
||||
{result.detail && <p className={styles.cutoffCheckDetail}>{result.detail}</p>}
|
||||
|
||||
<ul className={styles.cutoffYearStrip}>
|
||||
{[...result.years].reverse().map((y) => (
|
||||
<li
|
||||
key={y.year}
|
||||
className={`${styles.cutoffYearChip} ${VERDICT_CLASS[y.verdict]}`}
|
||||
title={VERDICT_TITLE[y.verdict]}
|
||||
>
|
||||
<span className={styles.cutoffYearChipYear}>{y.year}</span>
|
||||
<span aria-hidden="true">{VERDICT_MARK[y.verdict]}</span>
|
||||
<span className={styles.srOnly}>{VERDICT_TITLE[y.verdict]}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mapOpen ? (
|
||||
<div className={styles.cutoffMapReveal}>
|
||||
<div className={styles.cutoffMapFigure}>
|
||||
<CutoffMap lat={lat} lng={lng} rings={rings} home={home} interactive={false} />
|
||||
</div>
|
||||
<ul className={styles.cutoffMapLegend}>
|
||||
<li>
|
||||
<span className={`${styles.cutoffSwatch} ${styles.cutoffSwatchNow}`} aria-hidden="true" />
|
||||
{latestRing.year} cut-off
|
||||
</li>
|
||||
{rings.length > 1 && (
|
||||
<li>
|
||||
<span className={`${styles.cutoffSwatch} ${styles.cutoffSwatchPast}`} aria-hidden="true" />
|
||||
Earlier years, {rings[rings.length - 1].year}–{rings[1].year}
|
||||
</li>
|
||||
)}
|
||||
{home && (
|
||||
<li>
|
||||
<span className={`${styles.cutoffSwatch} ${styles.cutoffSwatchHome}`} aria-hidden="true" />
|
||||
Your postcode
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.cutoffMapToggle}
|
||||
onClick={() => setMapOpen(true)}
|
||||
>
|
||||
Show these distances on a map
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
/**
|
||||
* CutoffYearTable — the last distance offered, year by year.
|
||||
*
|
||||
* The table is where the chart's gaps get explained. Each year says which of
|
||||
* the three things happened, in words, because "no figure" alone is the least
|
||||
* useful thing we could tell a parent about a year.
|
||||
*
|
||||
* Server component: it is static markup over data the page already holds.
|
||||
*/
|
||||
|
||||
import type { CutoffYearRow, CutoffYearStatus } from './lastDistanceOffered';
|
||||
import { sectionStyles as styles } from './sectionShared';
|
||||
|
||||
const STATUS_LABEL: Record<CutoffYearStatus, string> = {
|
||||
published: 'Oversubscribed',
|
||||
// Precisely what the EES field supports, and no more: first preferences did
|
||||
// not exceed places. It does not establish that every applicant was offered
|
||||
// a place, so it must not be worded as though it did.
|
||||
'not-oversubscribed': 'Places available on first preferences',
|
||||
'not-published': 'Not published',
|
||||
};
|
||||
|
||||
const STATUS_CLASS: Record<CutoffYearStatus, string> = {
|
||||
published: styles.cutoffPillOver,
|
||||
'not-oversubscribed': styles.cutoffPillOk,
|
||||
'not-published': styles.cutoffPillNa,
|
||||
};
|
||||
|
||||
const DISTANCE_TEXT: Record<CutoffYearStatus, string> = {
|
||||
published: '',
|
||||
'not-oversubscribed': 'No cut-off needed',
|
||||
'not-published': '—',
|
||||
};
|
||||
|
||||
export function CutoffYearTable({ rows }: { rows: CutoffYearRow[] }) {
|
||||
if (rows.length === 0) return null;
|
||||
|
||||
const showPlaces = rows.some((r) => r.placesOffered != null);
|
||||
|
||||
return (
|
||||
<div className={styles.cutoffTableWrap}>
|
||||
<table className={styles.cutoffTable}>
|
||||
<caption className={styles.srOnly}>
|
||||
Last distance offered by year, with the reason where no figure was published
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Year</th>
|
||||
<th scope="col">Last distance</th>
|
||||
{showPlaces && <th scope="col">Places</th>}
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r, i) => (
|
||||
<tr key={r.year} className={i === 0 ? styles.cutoffRowLatest : undefined}>
|
||||
<th scope="row">{r.year}</th>
|
||||
<td className={r.status === 'published' ? undefined : styles.cutoffCellMissing}>
|
||||
{r.status === 'published' ? r.figure : DISTANCE_TEXT[r.status]}
|
||||
{r.status === 'published' && (r.routeCount ?? 1) > 1 && (
|
||||
<span className={styles.cutoffRouteFlag}>
|
||||
{' '}furthest of {r.routeCount}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
{showPlaces && (
|
||||
<td className={r.placesOffered == null ? styles.cutoffCellMissing : undefined}>
|
||||
{r.placesOffered ?? '—'}
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
<span className={`${styles.cutoffPill} ${STATUS_CLASS[r.status]}`}>
|
||||
{STATUS_LABEL[r.status]}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
/**
|
||||
* DistanceSection — "How far the last place went".
|
||||
*
|
||||
* Its own section rather than a third tab inside Admissions.
|
||||
*
|
||||
* It began as a tab, which broke the admissions card in a way worth recording:
|
||||
* the two admissions views are stacked in one grid cell so switching them never
|
||||
* shifts layout, which means the card is sized by its TALLEST view. A view
|
||||
* carrying a chart, a table and a map came to 1402px against the tile grid's
|
||||
* 316px, so the default view — the one nobody had clicked — rendered as four
|
||||
* tiles adrift in ~1080px of blank card, and Admissions alone accounted for
|
||||
* half the height of every section on the page.
|
||||
*
|
||||
* The structural point stands on its own though: every other topic here is a
|
||||
* section with a nav entry, and "how close did we need to live, and would we
|
||||
* have got in?" is a topic, not a variant reading of the intake figures. The
|
||||
* headline number stays on the Admissions tile where the intake story is; the
|
||||
* record behind it lives here.
|
||||
*
|
||||
* Server component; the map and postcode form carry their own client boundary.
|
||||
*/
|
||||
|
||||
import type { School, SchoolAdmissions, SchoolAdmissionDistance } from '@/lib/types';
|
||||
import { Section, sectionStyles as styles } from './sectionShared';
|
||||
import { CutoffDistanceDetail } from './CutoffDistanceDetail';
|
||||
import { cutoffYearRows, hasCutoffDetail } from './lastDistanceOffered';
|
||||
|
||||
export function DistanceSection({
|
||||
admissionDistanceHistory,
|
||||
admissionsHistory,
|
||||
schoolInfo,
|
||||
}: {
|
||||
admissionDistanceHistory: SchoolAdmissionDistance[];
|
||||
admissionsHistory: SchoolAdmissions[];
|
||||
schoolInfo: School;
|
||||
}) {
|
||||
const rows = cutoffYearRows(admissionDistanceHistory, admissionsHistory);
|
||||
if (!hasCutoffDetail(rows)) return null;
|
||||
|
||||
return (
|
||||
<Section id="distance">
|
||||
<h2 className={styles.sectionTitle}>How far the last place went</h2>
|
||||
<p className={styles.sectionSubtitle}>
|
||||
The distance of the furthest home offered a place each year, and how your
|
||||
own address compares.
|
||||
</p>
|
||||
<CutoffDistanceDetail rows={rows} schoolInfo={schoolInfo} />
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -13,14 +13,13 @@
|
||||
|
||||
import type {
|
||||
School, SchoolResult, AbsenceData, OfstedInspection, SchoolCensus,
|
||||
SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance, NationalAverages,
|
||||
SchoolAdmissions, SchoolDeprivation, SchoolFinance, NationalAverages,
|
||||
} from '@/lib/types';
|
||||
import { ofstedLegacyAreas } from '@/lib/utils';
|
||||
import type { SchoolFlags } from '@/lib/schoolSections';
|
||||
import { OfstedSection } from './OfstedSection';
|
||||
import { ResultsSection } from './ResultsSection';
|
||||
import { AdmissionsSection } from './AdmissionsSection';
|
||||
import { DistanceSection } from './DistanceSection';
|
||||
import { InclusionSection } from './InclusionSection';
|
||||
import { HistorySection } from './HistorySection';
|
||||
import { SchoolLifeSection } from './SchoolLifeSection';
|
||||
@@ -35,8 +34,6 @@ export interface PrimarySchoolSectionsProps {
|
||||
census: SchoolCensus | null;
|
||||
admissions: SchoolAdmissions | null;
|
||||
admissionsHistory: SchoolAdmissions[];
|
||||
admissionDistance: SchoolAdmissionDistance | null;
|
||||
admissionDistanceHistory: SchoolAdmissionDistance[];
|
||||
deprivation: SchoolDeprivation | null;
|
||||
finance: SchoolFinance | null;
|
||||
nationalAvg: NationalAverages | null;
|
||||
@@ -45,8 +42,7 @@ export interface PrimarySchoolSectionsProps {
|
||||
|
||||
export function PrimarySchoolSections({
|
||||
schoolInfo, yearlyData, absenceData, ofsted, census,
|
||||
admissions, admissionsHistory, admissionDistance, admissionDistanceHistory,
|
||||
deprivation, finance, nationalAvg, flags,
|
||||
admissions, admissionsHistory, deprivation, finance, nationalAvg, flags,
|
||||
}: PrimarySchoolSectionsProps) {
|
||||
const primaryAvg = nationalAvg?.primary ?? {};
|
||||
const secondaryAvg = nationalAvg?.secondary ?? {};
|
||||
@@ -95,27 +91,14 @@ export function PrimarySchoolSections({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Either source is enough to justify the section. The cut-off distance
|
||||
and the EES admissions figures come from different places and a
|
||||
minority of schools have one without the other — gating on admissions
|
||||
alone would hide a published distance on those pages. */}
|
||||
{(admissions || admissionDistance) && (
|
||||
{admissions && (
|
||||
<AdmissionsSection
|
||||
admissions={admissions}
|
||||
admissionsHistory={admissionsHistory}
|
||||
admissionDistance={admissionDistance}
|
||||
isAllThrough={flags.isAllThrough}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Its own section, directly after Admissions: it answers the question
|
||||
the tile above raises. */}
|
||||
<DistanceSection
|
||||
admissionDistanceHistory={admissionDistanceHistory}
|
||||
admissionsHistory={admissionsHistory}
|
||||
schoolInfo={schoolInfo}
|
||||
/>
|
||||
|
||||
{flags.hasInclusionData && (
|
||||
<InclusionSection
|
||||
latestResults={flags.latestResults}
|
||||
|
||||
@@ -6,26 +6,17 @@
|
||||
* JavaScript at all. Server component.
|
||||
*/
|
||||
|
||||
import type { School, SchoolAdmissions, SchoolAdmissionDistance } from '@/lib/types';
|
||||
import type { School, SchoolAdmissions } from '@/lib/types';
|
||||
import { formatPercentage } from '@/lib/utils';
|
||||
import { Section, sectionStyles as styles } from './sectionShared';
|
||||
import {
|
||||
describeCutoff, describeCutoffAbsence,
|
||||
CUTOFF_NOTE, CUTOFF_MEASUREMENT_NOTE,
|
||||
} from './lastDistanceOffered';
|
||||
|
||||
export function SecondaryAdmissionsSection({
|
||||
admissions, admissionsHistory, admissionDistance, schoolInfo, hasSixthForm,
|
||||
admissions, schoolInfo, hasSixthForm,
|
||||
}: {
|
||||
/* Nullable for the same reason as the primary section: a school can have a
|
||||
published cut-off and no EES admissions row. */
|
||||
admissions: SchoolAdmissions | null;
|
||||
admissionsHistory: SchoolAdmissions[];
|
||||
admissionDistance: SchoolAdmissionDistance | null;
|
||||
admissions: SchoolAdmissions;
|
||||
schoolInfo: School;
|
||||
hasSixthForm: boolean;
|
||||
}) {
|
||||
const cutoff = describeCutoff(admissionDistance);
|
||||
// Moved with this section from SecondarySchoolDetailView, its only consumer.
|
||||
const admissionsTag = (() => {
|
||||
const policy = schoolInfo.admissions_policy?.toLowerCase() ?? '';
|
||||
@@ -49,43 +40,32 @@ export function SecondaryAdmissionsSection({
|
||||
)}
|
||||
|
||||
<div className={styles.metricsGrid}>
|
||||
{admissions?.places_offered != null && (
|
||||
{admissions.places_offered != null && (
|
||||
<div className={styles.metricCard}>
|
||||
<div className={styles.metricLabel}>Year 7 places offered</div>
|
||||
<div className={styles.metricValue}>{admissions.places_offered}</div>
|
||||
</div>
|
||||
)}
|
||||
{admissions?.total_applications != null && (
|
||||
{admissions.total_applications != null && (
|
||||
<div className={styles.metricCard}>
|
||||
<div className={styles.metricLabel}>Total applications</div>
|
||||
<div className={styles.metricValue}>{admissions.total_applications.toLocaleString()}</div>
|
||||
</div>
|
||||
)}
|
||||
{admissions?.first_preference_applications != null && (
|
||||
{admissions.first_preference_applications != null && (
|
||||
<div className={styles.metricCard}>
|
||||
<div className={styles.metricLabel}>1st preference applications</div>
|
||||
<div className={styles.metricValue}>{admissions.first_preference_applications.toLocaleString()}</div>
|
||||
</div>
|
||||
)}
|
||||
{admissions?.first_preference_offer_pct != null && (
|
||||
{admissions.first_preference_offer_pct != null && (
|
||||
<div className={styles.metricCard}>
|
||||
<div className={styles.metricLabel}>Families who got their first choice</div>
|
||||
<div className={styles.metricValue}>{formatPercentage(admissions.first_preference_offer_pct)}</div>
|
||||
</div>
|
||||
)}
|
||||
{cutoff && (
|
||||
<div className={`${styles.metricCard} ${styles.metricCardDistance}`}>
|
||||
<div className={styles.metricLabel}>
|
||||
Last distance offered · {cutoff.entryYear}
|
||||
</div>
|
||||
<div className={styles.metricValue}>
|
||||
{cutoff.primary}
|
||||
<span className={styles.metricValueSub}>{cutoff.secondary}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{admissions?.oversubscribed != null && (
|
||||
{admissions.oversubscribed != null && (
|
||||
<div className={`${styles.admissionsBadge} ${admissions.oversubscribed ? styles.statusWarn : styles.statusGood}`}>
|
||||
{admissions.oversubscribed
|
||||
? '⚠ Applications exceeded places last year'
|
||||
@@ -93,24 +73,9 @@ export function SecondaryAdmissionsSection({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Replaces a blanket "distance cut-off data is not available for this
|
||||
school", which was hardcoded onto every secondary page and was untrue
|
||||
wherever the local authority does publish. The absence is now stated
|
||||
only when it is real, and names the authority that would hold it. */}
|
||||
{cutoff ? (
|
||||
<p className={styles.admissionsDistanceNote}>
|
||||
{CUTOFF_NOTE} {CUTOFF_MEASUREMENT_NOTE}
|
||||
{cutoff.routeNote && <> {cutoff.routeNote}</>}
|
||||
</p>
|
||||
) : (
|
||||
<p className={styles.sectionSubtitle} style={{ marginTop: '1rem' }}>
|
||||
{describeCutoffAbsence({
|
||||
localAuthority: schoolInfo.local_authority,
|
||||
admissionsPolicy: schoolInfo.admissions_policy,
|
||||
admissionsHistory,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
<p className={styles.sectionSubtitle} style={{ marginTop: '1rem' }}>
|
||||
Historical distance cut-off data is not available for this school. Contact the admissions authority for oversubscription criteria details.
|
||||
</p>
|
||||
|
||||
{hasSixthForm && (
|
||||
<div className={styles.sixthFormNote}>
|
||||
|
||||
@@ -13,14 +13,13 @@
|
||||
|
||||
import type {
|
||||
School, SchoolResult, AbsenceData, OfstedInspection, SchoolCensus,
|
||||
SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance, NationalAverages,
|
||||
SchoolAdmissions, SchoolDeprivation, SchoolFinance, NationalAverages,
|
||||
} from '@/lib/types';
|
||||
import { ofstedLegacyAreas } from '@/lib/utils';
|
||||
import type { SecondaryFlags } from '@/lib/schoolSections';
|
||||
import { OfstedSection } from './OfstedSection';
|
||||
import { GcseSection } from './GcseSection';
|
||||
import { SecondaryAdmissionsSection } from './SecondaryAdmissionsSection';
|
||||
import { DistanceSection } from './DistanceSection';
|
||||
import { SecondaryHistorySection } from './SecondaryHistorySection';
|
||||
import { WellbeingSection } from './WellbeingSection';
|
||||
import { FinancesSection } from './FinancesSection';
|
||||
@@ -33,11 +32,6 @@ export interface SecondarySchoolSectionsProps {
|
||||
ofsted: OfstedInspection | null;
|
||||
census: SchoolCensus | null;
|
||||
admissions: SchoolAdmissions | null;
|
||||
/** Needed to tell a year with no published cut-off apart from a year the
|
||||
* school simply was not oversubscribed. */
|
||||
admissionsHistory: SchoolAdmissions[];
|
||||
admissionDistance: SchoolAdmissionDistance | null;
|
||||
admissionDistanceHistory: SchoolAdmissionDistance[];
|
||||
deprivation: SchoolDeprivation | null;
|
||||
finance: SchoolFinance | null;
|
||||
nationalAvg: NationalAverages | null;
|
||||
@@ -46,8 +40,7 @@ export interface SecondarySchoolSectionsProps {
|
||||
|
||||
export function SecondarySchoolSections({
|
||||
schoolInfo, yearlyData, ofsted, census,
|
||||
admissions, admissionsHistory, admissionDistance, admissionDistanceHistory,
|
||||
deprivation, finance, nationalAvg, flags,
|
||||
admissions, deprivation, finance, nationalAvg, flags,
|
||||
}: SecondarySchoolSectionsProps) {
|
||||
const secondaryAvg = nationalAvg?.secondary ?? {};
|
||||
|
||||
@@ -86,25 +79,14 @@ export function SecondarySchoolSections({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* See PrimarySchoolSections: distance and EES admissions are independent
|
||||
sources, so either one warrants the section. */}
|
||||
{(admissions || admissionDistance) && (
|
||||
{admissions && (
|
||||
<SecondaryAdmissionsSection
|
||||
admissions={admissions}
|
||||
admissionDistance={admissionDistance}
|
||||
admissionsHistory={admissionsHistory}
|
||||
schoolInfo={schoolInfo}
|
||||
hasSixthForm={flags.hasSixthForm}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* See PrimarySchoolSections — same placement, same reason. */}
|
||||
<DistanceSection
|
||||
admissionDistanceHistory={admissionDistanceHistory}
|
||||
admissionsHistory={admissionsHistory}
|
||||
schoolInfo={schoolInfo}
|
||||
/>
|
||||
|
||||
{yearlyData.length > 1 && (
|
||||
<SecondaryHistorySection
|
||||
yearlyData={yearlyData}
|
||||
|
||||
@@ -24,8 +24,3 @@ export const AdmissionsTrendChart = dynamic(
|
||||
() => import('../AdmissionsTrendChart'),
|
||||
{ ssr: false },
|
||||
);
|
||||
|
||||
export const CutoffTrendChart = dynamic(
|
||||
() => import('../CutoffTrendChart'),
|
||||
{ ssr: false },
|
||||
);
|
||||
@@ -1,390 +0,0 @@
|
||||
/**
|
||||
* Shared logic and copy for the "last distance offered" figure.
|
||||
*
|
||||
* The primary and secondary admissions sections lay their metrics out
|
||||
* differently (a seamless tile grid vs. metric cards), so the markup is not
|
||||
* shared — but the words are. Every caveat below is doing a specific job, and
|
||||
* a figure that appeared on one template without them would be misleading in a
|
||||
* way the other template was not:
|
||||
*
|
||||
* * The year, because a cut-off is the outcome of one particular admissions
|
||||
* round and means nothing detached from it.
|
||||
* * "not a fixed catchment", because that is the inference a parent will
|
||||
* otherwise draw, and it is wrong — the distance moves every year.
|
||||
* * The route count, because on a banded school the headline is the widest
|
||||
* of several cut-offs and does not apply to every child.
|
||||
*/
|
||||
|
||||
import type { SchoolAdmissionDistance } from '@/lib/types';
|
||||
import { formatCutoffDistance, formatEntryYear } from '@/lib/utils';
|
||||
|
||||
export interface CutoffDisplay {
|
||||
/** Headline figure, e.g. "0.31 miles". */
|
||||
primary: string;
|
||||
/** Supporting conversion, e.g. "500 m". */
|
||||
secondary: string;
|
||||
/** Entry point the figure belongs to, e.g. "September 2025". */
|
||||
entryYear: string;
|
||||
/** Present only where several admission routes were collapsed into one figure. */
|
||||
routeNote: string | null;
|
||||
}
|
||||
|
||||
/** What the cut-off measures, and what it does not. Identical on both templates. */
|
||||
export const CUTOFF_NOTE =
|
||||
'The furthest home offered a place, after higher priorities such as siblings, ' +
|
||||
'faith and EHCP were applied. It is not a fixed catchment — it moves every year ' +
|
||||
'with the number of applications.';
|
||||
|
||||
/** Straight-line, because that is how councils measure it. */
|
||||
export const CUTOFF_MEASUREMENT_NOTE = 'Measured in a straight line from the school.';
|
||||
|
||||
export function describeCutoff(
|
||||
distance: SchoolAdmissionDistance | null | undefined
|
||||
): CutoffDisplay | null {
|
||||
if (!distance) return null;
|
||||
|
||||
const figure = formatCutoffDistance(distance.distance_m);
|
||||
if (!figure) return null;
|
||||
|
||||
const routes = distance.route_count ?? 1;
|
||||
|
||||
return {
|
||||
primary: figure.primary,
|
||||
secondary: figure.secondary,
|
||||
entryYear: formatEntryYear(distance.year),
|
||||
routeNote:
|
||||
routes > 1
|
||||
? `Furthest of ${routes} admission routes at this school — the one that ` +
|
||||
'applies to your child may have had a shorter cut-off.'
|
||||
: null,
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Year-by-year history
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Why a year has no cut-off figure.
|
||||
*
|
||||
* The distinction matters more than the figure does. A missing year is not one
|
||||
* fact but three, and collapsing them into "no data" throws away the most
|
||||
* reassuring case (the school had places for everyone who put it first) and
|
||||
* the most important caveat (nobody published anything, so we cannot say).
|
||||
*/
|
||||
export type CutoffYearStatus =
|
||||
/** The authority published a cut-off for this year. */
|
||||
| 'published'
|
||||
/**
|
||||
* No cut-off published, and EES shows fewer first-preference applications
|
||||
* than places offered. Note the precise claim: this says the school was not
|
||||
* oversubscribed ON FIRST PREFERENCES, which is what the data supports. It
|
||||
* does NOT establish that every applicant was offered a place — total
|
||||
* applications can still exceed places — so no copy here may say so.
|
||||
*/
|
||||
| 'not-oversubscribed'
|
||||
/** Nothing published, and nothing in the admissions data to explain why. */
|
||||
| 'not-published';
|
||||
|
||||
export interface CutoffYearRow {
|
||||
year: number;
|
||||
status: CutoffYearStatus;
|
||||
/** Straight-line metres, present only when status is 'published'. */
|
||||
distanceM: number | null;
|
||||
/** Formatted figure, present only when status is 'published'. */
|
||||
figure: string | null;
|
||||
placesOffered: number | null;
|
||||
routeCount: number | null;
|
||||
}
|
||||
|
||||
interface AdmissionsYearLike {
|
||||
year: number;
|
||||
places_offered?: number | null;
|
||||
oversubscribed?: boolean | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* EES years are six-digit academic codes (202425); cut-off years are plain
|
||||
* entry years (2024). Both denote the same September intake, so they have to be
|
||||
* reduced to a common key before they can be matched.
|
||||
*/
|
||||
export function entryYearOf(year: number): number {
|
||||
const s = String(year);
|
||||
return s.length === 6 ? Number(s.slice(0, 4)) : year;
|
||||
}
|
||||
|
||||
/**
|
||||
* One row per year across the full span the school has any record for, newest
|
||||
* first. Years with no record at all still appear — an unbroken axis is what
|
||||
* makes a gap legible as a gap.
|
||||
*/
|
||||
export function cutoffYearRows(
|
||||
/* Defaulted, not merely optional: admission_distance_history is an additive
|
||||
API field, so a frontend deployed ahead of its backend receives undefined
|
||||
here. Defaulting keeps that a section that renders nothing rather than a
|
||||
page that throws. */
|
||||
history: SchoolAdmissionDistance[] = [],
|
||||
admissionsHistory: AdmissionsYearLike[] = [],
|
||||
): CutoffYearRow[] {
|
||||
const published = new Map<number, SchoolAdmissionDistance>();
|
||||
for (const d of history ?? []) {
|
||||
if (d.distance_m != null) published.set(entryYearOf(d.year), d);
|
||||
}
|
||||
|
||||
const admissions = new Map<number, AdmissionsYearLike>();
|
||||
for (const a of admissionsHistory ?? []) admissions.set(entryYearOf(a.year), a);
|
||||
|
||||
const years = [...published.keys(), ...admissions.keys()];
|
||||
if (years.length === 0) return [];
|
||||
|
||||
// The span is bounded by the cut-off data, not by admissions: EES reaches
|
||||
// back further than councils publish, and padding the chart with a decade of
|
||||
// "not published" would bury the years that carry a figure.
|
||||
const publishedYears = [...published.keys()];
|
||||
const from = publishedYears.length ? Math.min(...publishedYears) : Math.min(...years);
|
||||
const to = Math.max(...years);
|
||||
|
||||
const rows: CutoffYearRow[] = [];
|
||||
for (let y = to; y >= from; y -= 1) {
|
||||
const d = published.get(y);
|
||||
const a = admissions.get(y);
|
||||
|
||||
let status: CutoffYearStatus = 'not-published';
|
||||
if (d) status = 'published';
|
||||
else if (a?.oversubscribed === false) status = 'not-oversubscribed';
|
||||
|
||||
rows.push({
|
||||
year: y,
|
||||
status,
|
||||
distanceM: d?.distance_m ?? null,
|
||||
figure: d ? formatCutoffDistance(d.distance_m)?.primary ?? null : null,
|
||||
placesOffered: a?.places_offered ?? null,
|
||||
routeCount: d?.route_count ?? null,
|
||||
});
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
/**
|
||||
* A factual summary of how the cut-off has moved.
|
||||
*
|
||||
* Deliberately not a verdict. It names both endpoints and their years and lets
|
||||
* the reader draw the conclusion, because the series is short, gappy, and
|
||||
* driven by things outside the school's control — one large sibling cohort
|
||||
* moves it. Withheld below four published points, where a swing between two
|
||||
* years is noise wearing the clothes of a trend.
|
||||
*/
|
||||
export function cutoffTrendSummary(rows: CutoffYearRow[]): string | null {
|
||||
const pts = rows.filter((r) => r.status === 'published' && r.distanceM != null);
|
||||
if (pts.length < 4) return null;
|
||||
|
||||
// rows are newest-first
|
||||
const latest = pts[0];
|
||||
const earliest = pts[pts.length - 1];
|
||||
const a = formatCutoffDistance(earliest.distanceM)?.primary;
|
||||
const b = formatCutoffDistance(latest.distanceM)?.primary;
|
||||
if (!a || !b) return null;
|
||||
|
||||
const change = latest.distanceM! - earliest.distanceM!;
|
||||
// A tenth of the earlier figure — below that the endpoints are effectively
|
||||
// the same and calling it a direction would be reading noise.
|
||||
const meaningful = Math.abs(change) > earliest.distanceM! * 0.1;
|
||||
|
||||
const direction = !meaningful
|
||||
? 'has stayed broadly the same'
|
||||
: change < 0
|
||||
? 'has tightened'
|
||||
: 'has widened';
|
||||
|
||||
return `Across ${pts.length} published years the cut-off ${direction}: `
|
||||
+ `${a} in ${earliest.year}, ${b} in ${latest.year}.`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// "Would we have got in?"
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* How close a home has to be to a year's cut-off before the comparison stops
|
||||
* meaning anything, in metres.
|
||||
*
|
||||
* A UK postcode unit covers roughly fifteen addresses and postcodes.io returns
|
||||
* its centroid, so the home point carries error of this order before anything
|
||||
* else is considered. Against a cut-off that is often only 500 m, that is a
|
||||
* fifth of the whole distance. Inside this band the honest answer is that we
|
||||
* cannot tell, and saying "you would have been offered a place" would be
|
||||
* inventing precision the inputs do not have.
|
||||
*/
|
||||
export const CUTOFF_UNCERTAINTY_M = 100;
|
||||
|
||||
export type CutoffVerdict = 'inside' | 'outside' | 'too-close' | 'unknown';
|
||||
|
||||
export interface CutoffYearComparison {
|
||||
year: number;
|
||||
status: CutoffYearStatus;
|
||||
verdict: CutoffVerdict;
|
||||
}
|
||||
|
||||
export interface CutoffCheckResult {
|
||||
/** Straight-line metres from the given postcode to the school. */
|
||||
distanceM: number;
|
||||
distanceLabel: string;
|
||||
years: CutoffYearComparison[];
|
||||
/** Years the home is clearly inside, out of those with a published figure. */
|
||||
insideCount: number;
|
||||
comparableCount: number;
|
||||
headline: string;
|
||||
detail: string;
|
||||
}
|
||||
|
||||
export function compareToCutoffs(
|
||||
distanceM: number,
|
||||
rows: CutoffYearRow[],
|
||||
): CutoffCheckResult {
|
||||
const years: CutoffYearComparison[] = rows.map((r) => {
|
||||
if (r.status !== 'published' || r.distanceM == null) {
|
||||
return { year: r.year, status: r.status, verdict: 'unknown' as const };
|
||||
}
|
||||
const margin = r.distanceM - distanceM;
|
||||
const verdict: CutoffVerdict =
|
||||
Math.abs(margin) <= CUTOFF_UNCERTAINTY_M ? 'too-close' : margin > 0 ? 'inside' : 'outside';
|
||||
return { year: r.year, status: r.status, verdict };
|
||||
});
|
||||
|
||||
const comparable = years.filter((y) => y.verdict !== 'unknown');
|
||||
const inside = comparable.filter((y) => y.verdict === 'inside');
|
||||
const tooClose = comparable.filter((y) => y.verdict === 'too-close');
|
||||
const label = formatCutoffDistance(distanceM)?.primary ?? `${Math.round(distanceM)} m`;
|
||||
|
||||
let headline: string;
|
||||
if (comparable.length === 0) {
|
||||
headline = `${label} from the school`;
|
||||
} else if (inside.length === comparable.length) {
|
||||
headline = `${label} away — inside the cut-off in all ${comparable.length} `
|
||||
+ `${comparable.length === 1 ? 'year' : 'years'} with a published figure`;
|
||||
} else if (inside.length === 0 && tooClose.length === 0) {
|
||||
headline = `${label} away — outside the cut-off in every year with a published figure`;
|
||||
} else {
|
||||
headline = `${label} away — inside the cut-off in ${inside.length} of `
|
||||
+ `${comparable.length} years with a published figure`;
|
||||
}
|
||||
|
||||
const parts: string[] = [];
|
||||
if (tooClose.length > 0) {
|
||||
parts.push(
|
||||
`${tooClose.length} ${tooClose.length === 1 ? 'year is' : 'years are'} too close to call: `
|
||||
+ 'your postcode is a centroid covering several addresses, so a margin under '
|
||||
+ `${CUTOFF_UNCERTAINTY_M} m is inside the measurement error.`,
|
||||
);
|
||||
}
|
||||
const unknown = years.length - comparable.length;
|
||||
if (unknown > 0) {
|
||||
parts.push(`${unknown} ${unknown === 1 ? 'year has' : 'years have'} no published figure to compare against.`);
|
||||
}
|
||||
|
||||
return {
|
||||
distanceM,
|
||||
distanceLabel: label,
|
||||
years,
|
||||
insideCount: inside.length,
|
||||
comparableCount: comparable.length,
|
||||
headline,
|
||||
detail: parts.join(' '),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The limits of the figure, and of the check made against it.
|
||||
*
|
||||
* One caveat, rendered once at the end of the section. It was previously three
|
||||
* paragraphs — under the map, under the check, and a trailing "not a catchment"
|
||||
* line — which took ~180px between them, said walking-route twice, and made
|
||||
* the same point about priorities in two voices.
|
||||
*
|
||||
* Phrased to stand up whether or not the postcode check is on the page: it
|
||||
* opens on the figure rather than on "your result", because a school with no
|
||||
* coordinates renders the table with no check beneath it.
|
||||
*
|
||||
* Every claim is still here:
|
||||
* * distance is the last criterion applied, not the first;
|
||||
* * the figures and rings are straight-line, and not a boundary;
|
||||
* * some authorities measure a walking route, always longer for the same home;
|
||||
* * a past cut-off constrains next year's not at all.
|
||||
*/
|
||||
export const CUTOFF_CHECK_CAVEAT =
|
||||
'Distance is the last criterion applied. Places go first to children in care, '
|
||||
+ 'EHCP places, siblings and — at faith schools — on faith criteria, so a home '
|
||||
+ 'inside the distance can still miss out. Figures are straight-line distances '
|
||||
+ 'and not a catchment boundary; some authorities measure a walking route '
|
||||
+ "instead, which is always longer for the same home. Next year's cut-off "
|
||||
+ "depends on next year's applicants — always check the school's own "
|
||||
+ 'admissions policy.';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// When there is no figure
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AbsenceInput {
|
||||
localAuthority?: string | null;
|
||||
admissionsPolicy?: string | null;
|
||||
admissionsHistory?: AdmissionsYearLike[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Why this school has no cut-off distance, in the most useful terms available.
|
||||
*
|
||||
* "No data" is the least informative thing we could say, and for two of these
|
||||
* cases it is also the most pessimistic reading of a fact that is either
|
||||
* neutral or good news. The order matters: a selective school's absence is
|
||||
* explained by how it admits, which outranks anything the publication record
|
||||
* says.
|
||||
*/
|
||||
export function describeCutoffAbsence({
|
||||
localAuthority,
|
||||
admissionsPolicy,
|
||||
admissionsHistory = [],
|
||||
}: AbsenceInput): string {
|
||||
const policy = (admissionsPolicy ?? '').toLowerCase();
|
||||
if (policy.includes('selective')) {
|
||||
return 'Places at this school are ranked by the entrance test rather than by '
|
||||
+ 'distance, so no cut-off distance applies.';
|
||||
}
|
||||
|
||||
const known = admissionsHistory.filter((a) => a.oversubscribed != null);
|
||||
if (known.length >= 3 && known.every((a) => a.oversubscribed === false)) {
|
||||
return `First preferences have not exceeded places in any of the last ${known.length} `
|
||||
+ 'years, so this school has not needed a distance cut-off.';
|
||||
}
|
||||
|
||||
return (localAuthority
|
||||
? `${localAuthority} has not published a cut-off distance for this school.`
|
||||
: 'No cut-off distance has been published for this school.')
|
||||
+ ' Contact the admissions authority for its oversubscription criteria.';
|
||||
}
|
||||
|
||||
/**
|
||||
* A short note on how thin the record is.
|
||||
*
|
||||
* Four points is the same threshold the trend summary uses: below it the series
|
||||
* is too short to carry a direction, and saying so is more useful than leaving
|
||||
* the reader to count the rows.
|
||||
*/
|
||||
export function cutoffCoverageNote(rows: CutoffYearRow[]): string | null {
|
||||
const published = rows.filter((r) => r.status === 'published').length;
|
||||
if (published === 0 || published >= 4) return null;
|
||||
return `Only ${published} ${published === 1 ? 'year has' : 'years have'} a published figure, `
|
||||
+ 'which is too few to read as a trend.';
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether there is enough of a record to justify a section of its own.
|
||||
*
|
||||
* Two published years is the floor: one is a fact the Admissions tile already
|
||||
* states, and a chart of a single point invites a trend reading that is not
|
||||
* there. Shared so the section, its nav entry and the detail component cannot
|
||||
* disagree about when it exists — a nav link to a section that did not render
|
||||
* is exactly the failure this codebase keeps warning about.
|
||||
*/
|
||||
export function hasCutoffDetail(rows: CutoffYearRow[]): boolean {
|
||||
return rows.filter((r) => r.status === 'published').length >= 2;
|
||||
}
|
||||
@@ -778,38 +778,6 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Last distance offered, secondary template. These cards are opaque
|
||||
(--bg-secondary), so the tint can be set directly here — unlike the primary
|
||||
tile grid, nothing shows through between them. */
|
||||
.metricCardDistance {
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(var(--brand-bg), var(--brand-bg));
|
||||
border-color: var(--brand);
|
||||
/* Two columns' worth of width. Its label carries the entry year as well as
|
||||
the measure, which at the 140px track width of the other cards wraps to
|
||||
three lines and pushes the figure out of alignment with them. */
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.metricCardDistance .metricValue {
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.metricValueSub {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Same measured reason as .admissionsTileDistance above: --text-muted falls to
|
||||
4.09:1 on the tinted card in dark theme. */
|
||||
.metricCardDistance .metricLabel,
|
||||
.metricCardDistance .metricValueSub {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.metricHint {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
@@ -1485,62 +1453,6 @@
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
/* ── Admissions: last distance offered ──
|
||||
*
|
||||
* Spans the full grid width instead of taking a fifth half-cell. Two reasons:
|
||||
* the tiles are a 2-column grid, so a fifth tile would sit alone next to a gap;
|
||||
* and this is the figure the section is most often opened for, which a
|
||||
* half-width cell would rank below "Applied in total".
|
||||
*/
|
||||
.admissionsTileDistance {
|
||||
grid-column: 1 / -1;
|
||||
/*
|
||||
* --brand-bg is translucent, and the tile grid paints --border between
|
||||
* cells, so a plain `background` would let the hairline colour show through
|
||||
* and read as muddy rather than tinted. The opaque card colour is laid down
|
||||
* first and the tint composited over it as an image.
|
||||
*/
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(var(--brand-bg), var(--brand-bg));
|
||||
}
|
||||
|
||||
.admissionsTileDistance .admissionsTileNum {
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
/*
|
||||
* The tint costs the muted tokens their AA margin, so this tile does not use
|
||||
* them.
|
||||
*
|
||||
* Measured on the composited backdrop, not the computed one: the tint is a
|
||||
* background-image over --bg-card, so getComputedStyle reports the untinted
|
||||
* card and flatters the result. Sampling the rendered pixel in dark theme gives
|
||||
* a backdrop of rgb(34,59,64), on which --text-muted is 4.09:1 — under the 4.5
|
||||
* floor — while --text-secondary is 6.50:1.
|
||||
*
|
||||
* The label is where the year lives, so it is the last thing on the tile that
|
||||
* can afford to be hard to read: a distance without its year is not a fact
|
||||
* about anything.
|
||||
*/
|
||||
.admissionsTileDistance .admissionsTileLabel,
|
||||
.admissionsTileDistance .admissionsTileSub {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/*
|
||||
* The caveats, not a footnote in the visual-noise sense: without them the
|
||||
* figure reads as a catchment boundary. Kept at body contrast rather than
|
||||
* --text-muted for that reason — it qualifies the number above it, so it has
|
||||
* to be as readable as the number.
|
||||
*/
|
||||
.admissionsDistanceNote {
|
||||
margin: 0.85rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
.admissionsVerdict {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
@@ -1627,23 +1539,8 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/*
|
||||
* Stack both views in one grid cell so the card sizes to the taller view —
|
||||
* toggling modes never shifts layout.
|
||||
*
|
||||
* This only works while the views are of COMPARABLE height, and it fails
|
||||
* silently rather than loudly when they are not. The hidden view keeps its
|
||||
* box (display stays block below; only visibility is dropped), so the grid
|
||||
* row is sized by the tallest view and every other view is padded out to
|
||||
* match it. A cut-off-distance view carrying a chart, a table and a map was
|
||||
* added here and came to 1402px against the tile grid's 316px, which left
|
||||
* the DEFAULT view — the one nobody had clicked — as four tiles floating in
|
||||
* ~1080px of blank card.
|
||||
*
|
||||
* Anything substantially taller than the tile grid belongs in its own
|
||||
* section, not in this viewport. That is where the distance detail now
|
||||
* lives; see DistanceSection.
|
||||
*/
|
||||
/* Stack both views in one grid cell so the card sizes to the taller view —
|
||||
toggling modes never shifts layout. */
|
||||
.admissionsViewport {
|
||||
display: grid;
|
||||
}
|
||||
@@ -1671,20 +1568,6 @@
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
/* The distance tile occupies a third row. Left implicit it would inherit the
|
||||
1fr sizing of the row template and stretch to match the metric tiles above,
|
||||
which are twice its content height. */
|
||||
.admissionsViewYear .admissionsTilesWithDistance {
|
||||
grid-template-rows: 1fr 1fr auto;
|
||||
}
|
||||
|
||||
/* Cut-off distance but no EES admissions figures: there is nothing to put in
|
||||
the two metric rows, and leaving them in the template paints an empty block
|
||||
of the grid's gap colour beneath the tile. */
|
||||
.admissionsViewYear .admissionsTilesDistanceOnly {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.admissionsChartCap {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
@@ -1924,23 +1807,12 @@
|
||||
border-radius: 4px 0 0 4px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
/*
|
||||
* Knockout, for the same reason as .natTick in SatsChart.module.css: this was
|
||||
* var(--brand), identical to .att8VizFill above it, so where the marker
|
||||
* crossed the school's own bar it measured 1.00:1 — invisible for exactly the
|
||||
* schools at or above the national average.
|
||||
*
|
||||
* A light core with a dark edge reads on the teal fill and on the pale track
|
||||
* alike, and both tokens flip with the theme. Keep this in step with
|
||||
* SatsChart's .natTick; they are the same marker on two templates.
|
||||
*/
|
||||
.att8VizNatLine {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
bottom: -4px;
|
||||
width: 3px;
|
||||
background: var(--bg-card);
|
||||
box-shadow: 0 0 0 1px var(--text-primary);
|
||||
width: 2px;
|
||||
background: var(--brand);
|
||||
border-radius: 2px;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -2079,412 +1951,3 @@
|
||||
.secondaryScope .ofstedReportLink { margin-left: 0; display: block; margin-top: 0.25rem; }
|
||||
.secondaryScope .admissionsTypeBadge { font-size: 0.75rem; }
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
Last distance offered — the Distance view, map and postcode check
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* Visually hidden but still read aloud. The year strip encodes its verdict as
|
||||
a glyph, so every chip carries a spelled-out equivalent here — a screen
|
||||
reader announcing "2025 ✓" tells you nothing. */
|
||||
.srOnly {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cutoffChartKey {
|
||||
margin: 0.6rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
/* ── Year-by-year table ── */
|
||||
|
||||
.cutoffTableWrap {
|
||||
margin-top: 1.25rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.cutoffTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
/* Below this the four columns crush; the wrapper scrolls instead of the
|
||||
page, so the section itself never scrolls sideways. */
|
||||
min-width: 26rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.cutoffTable thead th {
|
||||
text-align: right;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
padding: 0 0.625rem 0.55rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cutoffTable thead th:first-child,
|
||||
.cutoffTable tbody th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cutoffTable tbody td,
|
||||
.cutoffTable tbody th {
|
||||
text-align: right;
|
||||
padding: 0.65rem 0.625rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 400;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.cutoffTable tbody th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cutoffTable tbody tr:last-child td,
|
||||
.cutoffTable tbody tr:last-child th {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cutoffRowLatest td,
|
||||
.cutoffRowLatest th {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.cutoffCellMissing {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cutoffRouteFlag {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cutoffPill {
|
||||
display: inline-block;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cutoffPillOver {
|
||||
background: var(--brand-bg);
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.cutoffPillOk {
|
||||
background: var(--status-above-bg);
|
||||
color: var(--status-above);
|
||||
}
|
||||
|
||||
.cutoffPillNa {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Map panel ── */
|
||||
|
||||
.cutoffMapPanel {
|
||||
margin-top: 1.75rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
|
||||
.cutoffMapFigure {
|
||||
/* Enough to read a set of concentric rings and no more — this is a
|
||||
diagram of a number, not a map anyone navigates by. */
|
||||
height: 240px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.cutoffMapSkeleton {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.cutoffMapLegend {
|
||||
list-style: none;
|
||||
margin: 0.85rem 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cutoffMapLegend li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.cutoffSwatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.cutoffSwatchNow {
|
||||
background: var(--brand-bg);
|
||||
box-shadow: inset 0 0 0 2px var(--brand);
|
||||
}
|
||||
|
||||
.cutoffSwatchPast {
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 1.5px var(--brand);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cutoffSwatchHome {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 2px;
|
||||
background: var(--status-above);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.cutoffMapCaveat {
|
||||
margin: 0.75rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
/* ── Postcode check ── */
|
||||
|
||||
/* The check now leads the panel, so it carries no divider of its own — the
|
||||
rule above it belonged to a map that used to sit there. */
|
||||
.cutoffCheck {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cutoffCheckTitle {
|
||||
margin: 0 0 0.25rem;
|
||||
font-family: var(--font-display);
|
||||
/* Now the panel's only heading (an h3), so it carries the weight the
|
||||
retired .cutoffMapTitle used to. */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.cutoffCheckSub {
|
||||
margin: 0 0 0.85rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
.cutoffCheckForm {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cutoffCheckInput {
|
||||
font: inherit;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
/* Grows into the row but never past it — at 320px a fixed width would push
|
||||
the button out of the viewport. */
|
||||
flex: 1 1 9rem;
|
||||
/* Stops well short of full width on desktop, where a postcode field
|
||||
spanning the whole card reads as a search box. */
|
||||
max-width: 16rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cutoffCheckInput::placeholder {
|
||||
text-transform: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cutoffCheckInput:focus-visible {
|
||||
outline: 2px solid var(--brand);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--brand);
|
||||
}
|
||||
|
||||
.cutoffCheckButton {
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
padding: 0.6rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--brand);
|
||||
color: var(--brand-on);
|
||||
cursor: pointer;
|
||||
flex: none;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.cutoffCheckButton:hover:not(:disabled) {
|
||||
background: var(--brand-strong);
|
||||
}
|
||||
|
||||
.cutoffCheckButton:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.cutoffCheckButton:focus-visible {
|
||||
outline: 2px solid var(--brand);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.cutoffCheckError {
|
||||
margin: 0.75rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--status-below);
|
||||
}
|
||||
|
||||
.cutoffCheckResult {
|
||||
margin-top: 0.9rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--bg-card);
|
||||
background-image: linear-gradient(var(--brand-bg), var(--brand-bg));
|
||||
}
|
||||
|
||||
.cutoffCheckHeadline {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: var(--text-primary);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.cutoffCheckDetail {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cutoffYearStrip {
|
||||
list-style: none;
|
||||
margin: 0.75rem 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.cutoffYearChip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cutoffYearChipYear {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cutoffYearInside {
|
||||
background: var(--status-above-bg);
|
||||
color: var(--status-above);
|
||||
}
|
||||
|
||||
.cutoffYearOutside {
|
||||
background: var(--status-below-bg);
|
||||
color: var(--status-below);
|
||||
}
|
||||
|
||||
/* Deliberately neutral rather than a warning colour: "we cannot tell" is not a
|
||||
bad outcome, and tinting it amber would read as one. */
|
||||
.cutoffYearTooClose {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--border);
|
||||
}
|
||||
|
||||
.cutoffYearUnknown {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cutoffCheckCaveat {
|
||||
margin: 0.9rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
color: var(--text-secondary);
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.cutoffMapFigure {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Map, revealed on request ── */
|
||||
|
||||
.cutoffMapToggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 0.9rem;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--brand-strong);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition), background var(--transition);
|
||||
}
|
||||
|
||||
.cutoffMapToggle:hover {
|
||||
border-color: var(--brand);
|
||||
background: var(--brand-bg);
|
||||
}
|
||||
|
||||
.cutoffMapToggle:focus-visible {
|
||||
outline: 2px solid var(--brand);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.cutoffMapReveal {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -9,10 +9,9 @@
|
||||
|
||||
import type {
|
||||
School, SchoolResult, AbsenceData, SchoolCensus,
|
||||
OfstedInspection, SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance,
|
||||
OfstedInspection, SchoolAdmissions, SchoolDeprivation, SchoolFinance,
|
||||
} from './types';
|
||||
import { isSpecialSchool } from './utils';
|
||||
import { cutoffYearRows, hasCutoffDetail } from '@/components/school/lastDistanceOffered';
|
||||
|
||||
export interface SchoolFlagsInput {
|
||||
schoolInfo: School;
|
||||
@@ -120,14 +119,6 @@ export function computeSchoolFlags({
|
||||
export interface NavItemsInput {
|
||||
ofsted: OfstedInspection | null;
|
||||
admissions: SchoolAdmissions | null;
|
||||
/** A published cut-off distance renders the Admissions section on its own,
|
||||
* so it has to open the nav entry too. */
|
||||
admissionDistance: SchoolAdmissionDistance | null;
|
||||
/** Drives the separate Distance section. Gated through hasCutoffDetail, the
|
||||
* same predicate the section itself uses, so the nav can never link to an
|
||||
* anchor that was not rendered. */
|
||||
admissionDistanceHistory?: SchoolAdmissionDistance[];
|
||||
admissionsHistory?: SchoolAdmissions[];
|
||||
yearlyDataLength: number;
|
||||
}
|
||||
|
||||
@@ -142,10 +133,7 @@ export interface NavItemsInput {
|
||||
*/
|
||||
export function buildNavItems(
|
||||
flags: SchoolFlags,
|
||||
{
|
||||
ofsted, admissions, admissionDistance,
|
||||
admissionDistanceHistory, admissionsHistory, yearlyDataLength,
|
||||
}: NavItemsInput,
|
||||
{ ofsted, admissions, yearlyDataLength }: NavItemsInput,
|
||||
): NavItem[] {
|
||||
const navItems: NavItem[] = [];
|
||||
if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
|
||||
@@ -155,10 +143,7 @@ export function buildNavItems(
|
||||
label: flags.isAllThrough ? 'Results' : flags.isSecondary ? 'GCSEs' : 'SATs',
|
||||
});
|
||||
}
|
||||
if (admissions || admissionDistance) navItems.push({ id: 'admissions', label: 'Admissions' });
|
||||
if (hasCutoffDetail(cutoffYearRows(admissionDistanceHistory, admissionsHistory))) {
|
||||
navItems.push({ id: 'distance', label: 'Distance' });
|
||||
}
|
||||
if (admissions) navItems.push({ id: 'admissions', label: 'Admissions' });
|
||||
if (flags.hasInclusionData) navItems.push({ id: 'inclusion', label: 'Pupils' });
|
||||
if (yearlyDataLength > 0) navItems.push({ id: 'history', label: 'History' });
|
||||
if (flags.hasSchoolLife) navItems.push({ id: 'school-life', label: 'School Life' });
|
||||
@@ -228,18 +213,12 @@ export function computeSecondaryFlags({
|
||||
*/
|
||||
export function buildSecondaryNavItems(
|
||||
flags: SecondaryFlags,
|
||||
{
|
||||
ofsted, admissions, admissionDistance,
|
||||
admissionDistanceHistory, admissionsHistory, yearlyDataLength,
|
||||
}: NavItemsInput,
|
||||
{ ofsted, admissions, yearlyDataLength }: NavItemsInput,
|
||||
): NavItem[] {
|
||||
const navItems: NavItem[] = [];
|
||||
if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
|
||||
if (flags.hasResults) navItems.push({ id: 'gcse', label: 'GCSEs' });
|
||||
if (admissions || admissionDistance) navItems.push({ id: 'admissions', label: 'Admissions' });
|
||||
if (hasCutoffDetail(cutoffYearRows(admissionDistanceHistory, admissionsHistory))) {
|
||||
navItems.push({ id: 'distance', label: 'Distance' });
|
||||
}
|
||||
if (admissions) navItems.push({ id: 'admissions', label: 'Admissions' });
|
||||
if (yearlyDataLength > 1) navItems.push({ id: 'history', label: 'History' });
|
||||
if (flags.hasWellbeing) navItems.push({ id: 'wellbeing', label: 'Wellbeing' });
|
||||
if (flags.hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
|
||||
|
||||
@@ -163,30 +163,6 @@ export interface SchoolAdmissions {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Last distance offered — how far from the school the last child to be given a
|
||||
* place that year lived.
|
||||
*
|
||||
* Not a catchment: it is the outcome of one year's applications and moves every
|
||||
* year. Only published by the local authorities that choose to, so most schools
|
||||
* have none of this at all.
|
||||
*/
|
||||
export interface SchoolAdmissionDistance {
|
||||
/** Entry year the cut-off belongs to — always shown alongside the figure. */
|
||||
year: number;
|
||||
/** Straight-line distance in metres. */
|
||||
distance_m: number | null;
|
||||
/**
|
||||
* Admission routes collapsed into this figure (ability bands, or separate
|
||||
* reception and junior intakes). Above 1 the distance is the furthest of
|
||||
* several, which the page has to say out loud.
|
||||
*/
|
||||
route_count: number | null;
|
||||
la_name: string | null;
|
||||
/** The unit the council published in ("miles", "meters", "km"). */
|
||||
distance_unit_raw: string | null;
|
||||
}
|
||||
|
||||
export interface SchoolDeprivation {
|
||||
lsoa_code: string | null;
|
||||
idaci_score: number | null;
|
||||
@@ -354,14 +330,6 @@ export interface SchoolDetailsResponse {
|
||||
admissions: SchoolAdmissions | null;
|
||||
/** All available admissions years, oldest first. Drives the multi-year trend view. */
|
||||
admissions_history: SchoolAdmissions[];
|
||||
/** Latest published cut-off distance, or null where the LA publishes none. */
|
||||
admission_distance: SchoolAdmissionDistance | null;
|
||||
/**
|
||||
* Every published cut-off year, oldest first. Sparse by nature — a school may
|
||||
* have 2021 and 2026 and nothing between, so consumers must classify the
|
||||
* missing years rather than joining the points they do have.
|
||||
*/
|
||||
admission_distance_history: SchoolAdmissionDistance[];
|
||||
deprivation: SchoolDeprivation | null;
|
||||
finance: SchoolFinance | null;
|
||||
}
|
||||
|
||||
@@ -502,54 +502,6 @@ export function getPhaseStyle(phase?: string | null): { key: string; label: stri
|
||||
}
|
||||
}
|
||||
|
||||
const METRES_PER_MILE = 1609.344;
|
||||
|
||||
/**
|
||||
* Format an admission cut-off distance.
|
||||
*
|
||||
* Miles lead because that is the unit councils publish in — 90% of the source
|
||||
* rows are miles — and because it is the unit a parent has already been quoted
|
||||
* if they have read their council's booklet. The metric figure follows as
|
||||
* support rather than replacing it.
|
||||
*
|
||||
* Below 100 m the miles figure stops carrying information ("0.03 miles"), so
|
||||
* the two swap round and metres lead instead.
|
||||
*/
|
||||
export function formatCutoffDistance(
|
||||
metres: number | null | undefined
|
||||
): { primary: string; secondary: string } | null {
|
||||
if (metres == null || !Number.isFinite(metres) || metres <= 0) return null;
|
||||
|
||||
const miles = metres / METRES_PER_MILE;
|
||||
|
||||
if (metres < 100) {
|
||||
return {
|
||||
primary: `${Math.round(metres)} m`,
|
||||
secondary: `${miles.toFixed(2)} miles`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
primary: `${miles.toFixed(2)} miles`,
|
||||
secondary: metres < 1000
|
||||
? `${Math.round(metres / 10) * 10} m`
|
||||
: `${(metres / 1000).toFixed(1)} km`,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The entry point a cut-off belongs to, phrased the way councils phrase it.
|
||||
*
|
||||
* The distance year is a plain entry year (2025 = the September 2025 intake),
|
||||
* not the six-digit academic year EES uses, so formatAcademicYear would render
|
||||
* it as "2025/26" and invite the reader to think of it as a school year rather
|
||||
* than an application round.
|
||||
*/
|
||||
export function formatEntryYear(year: number | null | undefined): string {
|
||||
if (year == null) return '';
|
||||
return `September ${year}`;
|
||||
}
|
||||
|
||||
export function formatAcademicYear(year: number | null | undefined): string {
|
||||
if (year == null) return '';
|
||||
const s = year.toString();
|
||||
|
||||
Generated
+5
-6
@@ -31,8 +31,7 @@
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"jest": "^30.2.0",
|
||||
"jest-environment-jsdom": "^30.2.0",
|
||||
"sharp": "^0.34.5"
|
||||
"jest-environment-jsdom": "^30.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
@@ -938,8 +937,8 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
|
||||
"integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
@@ -4161,8 +4160,8 @@
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
@@ -8585,9 +8584,9 @@
|
||||
"version": "0.34.5",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
|
||||
"integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
|
||||
"devOptional": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@img/colour": "^1.0.0",
|
||||
"detect-libc": "^2.1.2",
|
||||
@@ -8630,8 +8629,8 @@
|
||||
"version": "7.7.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
|
||||
"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
|
||||
"devOptional": true,
|
||||
"license": "ISC",
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
|
||||
@@ -36,7 +36,6 @@
|
||||
"@types/jest": "^30.0.0",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"jest": "^30.2.0",
|
||||
"jest-environment-jsdom": "^30.2.0",
|
||||
"sharp": "^0.34.5"
|
||||
"jest-environment-jsdom": "^30.2.0"
|
||||
}
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
# Brand asset provenance
|
||||
|
||||
Every image shipped in this folder, where it came from, and what we are allowed
|
||||
to do with it. Add a row before adding a file — in two years nobody will
|
||||
remember, and "we think it was fine" is not a licence.
|
||||
|
||||
## `mark.png`, `mark-on-dark.png`
|
||||
|
||||
The schoolcompare mark, extracted from the logo sheet supplied by the project
|
||||
owner. Two colourways on one 176×208 canvas — see `components/Logo.tsx` for why
|
||||
they must share a canvas.
|
||||
|
||||
- **Source:** supplied by the project owner
|
||||
- **Licence:** owned by the project
|
||||
|
||||
> Only a 153×189 instance exists on the supplied sheet, so the 512px PWA icon is
|
||||
> upscaled and slightly soft. A vector (SVG/AI/EPS) dropped in here and
|
||||
> regenerated fixes it; every consumer goes through `components/Logo.tsx` or
|
||||
> this folder, so it is one swap.
|
||||
|
||||
## `hero-wide-*`, `hero-band-*`
|
||||
|
||||
The landing hero illustration: a path climbing through hills to a schoolhouse,
|
||||
with an empty cream area on the left reserved for the headline.
|
||||
|
||||
- **Source:** supplied by the project owner
|
||||
- **Master:** `nextjs-app/assets/hero-source.png` (2000×1125 PNG), committed so
|
||||
the derivatives can be regenerated
|
||||
- **Derivatives:** `node scripts/build-hero-images.js` — never hand-edit these
|
||||
- **Licence:** **to be confirmed by the project owner**
|
||||
|
||||
> ⚠️ The licence line above is the one thing here that is not verified. If this
|
||||
> artwork was bought, generated, or commissioned, record which — and keep the
|
||||
> receipt or licence key alongside it. It is the most prominent image on the
|
||||
> site.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
@@ -1,114 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Derivatives for the landing hero artwork.
|
||||
*
|
||||
* node scripts/build-hero-images.js
|
||||
*
|
||||
* Source of truth is assets/hero-source.png (1672×941). It is committed so
|
||||
* these can be regenerated: never hand-edit anything in public/brand/hero-*,
|
||||
* change the source or the numbers here and re-run.
|
||||
*
|
||||
* TWO CROPS, ON PURPOSE
|
||||
* ---------------------
|
||||
* The hero slot is not one shape. On desktop the artwork sits behind the whole
|
||||
* panel at roughly 2.1:1 → 2.7:1; below the one-column breakpoint it collapses
|
||||
* to a band between 2.6:1 and 4.9:1. A single file under `object-fit: cover`
|
||||
* centre-crops, which at the extremes slices a strip through the middle of the
|
||||
* scene and loses the schoolhouse — the same failure the previous SVG hero had.
|
||||
*
|
||||
* So:
|
||||
* wide the full frame, including the empty cream area the artwork reserves
|
||||
* on the left for the headline. Used behind the desktop panel.
|
||||
* band a crop around the schoolhouse and the path, already near 2.6:1, so
|
||||
* the narrow band barely crops it at all. The school sits at ~65%
|
||||
* across, which is why the CSS pairs this with object-position: 65%:
|
||||
* squeezing further toward 4.9:1 crops the empty sides, not the subject.
|
||||
*
|
||||
* AVIF and WebP are both emitted. This is flat-shaded vector-style artwork, so
|
||||
* AVIF lands roughly an order of magnitude under the source PNG. Both crops
|
||||
* also get a JPEG: the wide one backs the <img src>, and the band one backs a
|
||||
* <source media> — without it a browser taking neither modern format would
|
||||
* fall through to the desktop frame on a phone, since <img src> cannot vary by
|
||||
* viewport.
|
||||
*
|
||||
* sharp is declared in devDependencies rather than leaned on as a transitive
|
||||
* dependency of next. It does currently arrive that way, but relying on that
|
||||
* means a Next upgrade can silently break this script — the same reasoning as
|
||||
* the outputFileTracingIncludes note in next.config.js.
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const sharp = require('sharp');
|
||||
|
||||
const SRC = path.join(__dirname, '..', 'assets', 'hero-source.png');
|
||||
const OUT = path.join(__dirname, '..', 'public', 'brand');
|
||||
|
||||
/*
|
||||
* Band crop, in source pixels, measured against the artwork rather than
|
||||
* guessed: the schoolhouse spans roughly x 1420–1860, y 420–660, with its flag
|
||||
* up at y 330.
|
||||
*
|
||||
* The crop is flush to the right edge because it has to be. The school sits at
|
||||
* about 82% across the frame, so there is only ~140px of artwork to its right
|
||||
* — not enough to centre it. Anchoring right and taking 1050px back puts the
|
||||
* school at ~66% across the crop, which is what BAND_FOCUS_X below reports to
|
||||
* the CSS so the narrowest band crops the empty left side rather than the
|
||||
* subject.
|
||||
*/
|
||||
const BAND = { left: 656, top: 300, width: 1344, height: 420 };
|
||||
|
||||
/** Where the schoolhouse lands in the band crop, for CSS object-position. */
|
||||
const BAND_FOCUS_X = Math.round(((1420 + 1860) / 2 - BAND.left) / BAND.width * 100);
|
||||
|
||||
const WIDE_WIDTHS = [2000, 1400, 1000];
|
||||
const BAND_WIDTHS = [1344, 900, 600];
|
||||
|
||||
async function emit(pipeline, name, width) {
|
||||
const base = pipeline.clone().resize({ width, withoutEnlargement: true });
|
||||
await base.clone().avif({ quality: 62, effort: 6 }).toFile(path.join(OUT, `${name}-${width}.avif`));
|
||||
await base.clone().webp({ quality: 80, effort: 6 }).toFile(path.join(OUT, `${name}-${width}.webp`));
|
||||
return width;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
if (!fs.existsSync(SRC)) throw new Error(`missing source: ${SRC}`);
|
||||
fs.mkdirSync(OUT, { recursive: true });
|
||||
|
||||
const meta = await sharp(SRC).metadata();
|
||||
console.log(`source ${meta.width}×${meta.height}`);
|
||||
console.log(`band focus x: ${BAND_FOCUS_X}% (keep .heroArt object-position in step)`);
|
||||
|
||||
const wide = sharp(SRC);
|
||||
for (const w of WIDE_WIDTHS) await emit(wide, 'hero-wide', w);
|
||||
// Fallback for the <img> itself. Flattened onto the artwork's own cream so a
|
||||
// JPEG (no alpha) can never composite against black.
|
||||
await sharp(SRC)
|
||||
.resize({ width: 1400 })
|
||||
.flatten({ background: '#FEF2E1' })
|
||||
.jpeg({ quality: 82, mozjpeg: true })
|
||||
.toFile(path.join(OUT, 'hero-wide-1400.jpg'));
|
||||
|
||||
const band = sharp(SRC).extract(BAND);
|
||||
for (const w of BAND_WIDTHS) await emit(band, 'hero-band', w);
|
||||
await sharp(SRC)
|
||||
.extract(BAND)
|
||||
.resize({ width: 900 })
|
||||
.flatten({ background: '#FEF2E1' })
|
||||
.jpeg({ quality: 82, mozjpeg: true })
|
||||
.toFile(path.join(OUT, 'hero-band-900.jpg'));
|
||||
|
||||
const files = fs.readdirSync(OUT).filter(f => f.startsWith('hero-')).sort();
|
||||
let total = 0;
|
||||
for (const f of files) {
|
||||
const { size } = fs.statSync(path.join(OUT, f));
|
||||
total += size;
|
||||
console.log(` ${f.padEnd(24)} ${(size / 1024).toFixed(1)} kB`);
|
||||
}
|
||||
console.log(`total ${(total / 1024).toFixed(1)} kB across ${files.length} files`);
|
||||
}
|
||||
|
||||
main().catch(err => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -224,68 +224,3 @@ with DAG(
|
||||
)
|
||||
|
||||
extract_idaci >> dbt_build_idaci >> invalidate_cache_idaci
|
||||
|
||||
|
||||
# ── Annual DAG (Last distance offered) ────────────────────────────────
|
||||
|
||||
with DAG(
|
||||
dag_id="school_data_annual_distance",
|
||||
default_args=default_args,
|
||||
description="Last distance offered (LA admission cut-offs) extraction and transform",
|
||||
# Councils publish on allocation day (March for secondary, April for
|
||||
# primary) and each one on its own timetable, so there is no date worth
|
||||
# scheduling against. Triggered manually after a collection run refreshes
|
||||
# the CSV.
|
||||
schedule=None,
|
||||
start_date=datetime(2025, 1, 1),
|
||||
catchup=False,
|
||||
tags=["school-compare", "annual"],
|
||||
) as annual_distance_dag:
|
||||
|
||||
extract_distance = BashOperator(
|
||||
task_id="extract_distance",
|
||||
bash_command=f"cd {PIPELINE_DIR} && {MELTANO_BIN} run tap-uk-school-distance target-postgres",
|
||||
)
|
||||
|
||||
# Coverage is the thing that silently rots here: the CSV is assembled by
|
||||
# hand from council publications, so a collection run that half-failed
|
||||
# produces a valid file with a fraction of the schools in it. A row count
|
||||
# alone would not catch that — losing an entire local authority leaves the
|
||||
# total looking healthy — so the floor is checked on distinct LAs too.
|
||||
validate_distance = BashOperator(
|
||||
task_id="validate_distance",
|
||||
bash_command=f"""
|
||||
cd {PIPELINE_DIR} && python -c "
|
||||
import psycopg2, os, sys
|
||||
conn = psycopg2.connect(
|
||||
host=os.environ.get('PG_HOST', 'localhost'),
|
||||
port=os.environ.get('PG_PORT', '5432'),
|
||||
user=os.environ.get('PG_USER', 'postgres'),
|
||||
password=os.environ.get('PG_PASSWORD', 'postgres'),
|
||||
dbname=os.environ.get('PG_DATABASE', 'school_compare'),
|
||||
)
|
||||
cur = conn.cursor()
|
||||
cur.execute('SELECT count(*), count(distinct urn), count(distinct la_code) FROM raw.school_distance_offered')
|
||||
rows, urns, las = cur.fetchone()
|
||||
conn.close()
|
||||
print(f'Loaded {{rows}} rows, {{urns}} schools, {{las}} local authorities')
|
||||
if rows < 7000 or urns < 3000 or las < 45:
|
||||
print('ERROR: distance extract is short of expected coverage '
|
||||
'(baseline 2026-08: 9128 rows / 3726 schools / 57 LAs)', file=sys.stderr)
|
||||
sys.exit(1)
|
||||
print('Validation passed')
|
||||
"
|
||||
""",
|
||||
)
|
||||
|
||||
dbt_build_distance = BashOperator(
|
||||
task_id="dbt_build",
|
||||
bash_command=f"cd {PIPELINE_DIR}/transform && {DBT_BIN} build --profiles-dir . --target production --select stg_school_distance+ fact_admission_distance+",
|
||||
)
|
||||
|
||||
invalidate_cache_distance = BashOperator(
|
||||
task_id="invalidate_cache",
|
||||
bash_command=INVALIDATE_CACHE_CMD,
|
||||
)
|
||||
|
||||
extract_distance >> validate_distance >> dbt_build_distance >> invalidate_cache_distance
|
||||
@@ -67,21 +67,6 @@ plugins:
|
||||
pip_url: ./plugins/extractors/tap-uk-idaci
|
||||
executable: tap-uk-idaci
|
||||
|
||||
# Last distance offered — admission cut-offs collected from LA
|
||||
# publications. There is no national source for this, so the URL points at
|
||||
# the collected CSV rather than at a government endpoint (same pattern as
|
||||
# the legacy KS2/KS4 URLs above).
|
||||
- name: tap-uk-school-distance
|
||||
namespace: uk_school_distance
|
||||
pip_url: ./plugins/extractors/tap-uk-school-distance
|
||||
executable: tap-uk-school-distance
|
||||
settings:
|
||||
- name: download_url
|
||||
kind: string
|
||||
description: URL of the collected last-distance-offered CSV
|
||||
config:
|
||||
download_url: http://10.0.1.224:8081/filebrowser/api/public/dl/UU_oEqVr?inline=true
|
||||
|
||||
loaders:
|
||||
- name: target-postgres
|
||||
variant: meltanolabs
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
[build-system]
|
||||
requires = ["setuptools>=68", "wheel"]
|
||||
build-backend = "setuptools.build_meta"
|
||||
|
||||
[project]
|
||||
name = "tap-uk-school-distance"
|
||||
version = "0.1.0"
|
||||
description = "Singer tap for last-distance-offered admission cut-offs collected from LA admissions publications"
|
||||
requires-python = ">=3.10"
|
||||
dependencies = [
|
||||
"singer-sdk~=0.53",
|
||||
"requests>=2.31",
|
||||
]
|
||||
|
||||
[project.scripts]
|
||||
tap-uk-school-distance = "tap_uk_school_distance.tap:TapUKSchoolDistance.cli"
|
||||
@@ -1 +0,0 @@
|
||||
"""tap-uk-school-distance: Singer tap for LA "last distance offered" admission cut-offs."""
|
||||
@@ -1,135 +0,0 @@
|
||||
"""Singer tap for "last distance offered" school admission cut-offs.
|
||||
|
||||
Unlike every other tap in this project, the upstream here is not a single
|
||||
government endpoint. There is no national dataset of admission cut-off
|
||||
distances: each local authority publishes its own, in its own format
|
||||
(PDF booklets, XLSX allocation tables, HTML pages), and only some publish
|
||||
at all. The CSV this tap reads is the output of that collection work —
|
||||
one row per school per year per admission route, already normalised to
|
||||
metres in `distance_m`.
|
||||
|
||||
The tap deliberately does no cleaning. Implausible values (0.0 miles,
|
||||
1-metre cut-offs, a 533-mile outlier) are loaded verbatim into `raw` and
|
||||
filtered in `stg_school_distance`, so the raw table stays a faithful
|
||||
record of what the councils published and the plausibility rules live in
|
||||
one reviewable place.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import csv
|
||||
import io
|
||||
|
||||
import requests
|
||||
from singer_sdk import Stream, Tap
|
||||
from singer_sdk import typing as th
|
||||
|
||||
REQUEST_TIMEOUT = 300
|
||||
|
||||
|
||||
class SchoolDistanceStream(Stream):
|
||||
"""Stream: last distance offered, one row per school × year × admission route."""
|
||||
|
||||
name = "school_distance_offered"
|
||||
# school_name is part of the key, not decoration: where a school admits
|
||||
# through several routes the route is encoded in the name ("… Band 1",
|
||||
# "… Band 2"), and (urn, year) alone is not unique. Verified against the
|
||||
# source: (urn, year) collides on 118 keys, (urn, year, school_name) on
|
||||
# none. Without school_name in the key a reload would silently drop the
|
||||
# other bands.
|
||||
primary_keys = ["urn", "year", "school_name"]
|
||||
replication_key = None
|
||||
|
||||
schema = th.PropertiesList(
|
||||
th.Property("urn", th.IntegerType, required=True),
|
||||
th.Property("year", th.IntegerType, required=True),
|
||||
th.Property("school_name", th.StringType, required=True),
|
||||
th.Property("la_code", th.IntegerType),
|
||||
th.Property("la_name", th.StringType),
|
||||
# The figure as the council published it, before unit conversion —
|
||||
# kept so a surprising metre value can be traced back to "0.31 miles"
|
||||
# without reopening the source PDF.
|
||||
th.Property("distance_value_raw", th.NumberType),
|
||||
th.Property("distance_unit_raw", th.StringType),
|
||||
th.Property("distance_m", th.NumberType),
|
||||
# Path of the council publication the row was read from. This is the
|
||||
# provenance trail for a figure we cannot re-derive from an API.
|
||||
th.Property("source_file", th.StringType),
|
||||
).to_dict()
|
||||
|
||||
@staticmethod
|
||||
def _num(value: str) -> float | None:
|
||||
try:
|
||||
return float(value)
|
||||
except (TypeError, ValueError):
|
||||
return None
|
||||
|
||||
@staticmethod
|
||||
def _int(value: str) -> int | None:
|
||||
try:
|
||||
return int(float(value))
|
||||
except (TypeError, ValueError):
|
||||
return None
|
||||
|
||||
def get_records(self, context):
|
||||
url = self.config["download_url"]
|
||||
self.logger.info("Downloading school distance data from %s", url)
|
||||
|
||||
resp = requests.get(url, timeout=REQUEST_TIMEOUT)
|
||||
resp.raise_for_status()
|
||||
|
||||
reader = csv.DictReader(io.StringIO(resp.text))
|
||||
|
||||
yielded = 0
|
||||
skipped = 0
|
||||
for row in reader:
|
||||
urn = self._int(row.get("urn"))
|
||||
year = self._int(row.get("year"))
|
||||
name = (row.get("school_name") or "").strip()
|
||||
|
||||
# Every part of the primary key must be present, or the load is
|
||||
# not idempotent. One row in the source has a blank year.
|
||||
if urn is None or year is None or not name:
|
||||
skipped += 1
|
||||
continue
|
||||
|
||||
yield {
|
||||
"urn": urn,
|
||||
"year": year,
|
||||
"school_name": name,
|
||||
"la_code": self._int(row.get("la_code")),
|
||||
"la_name": (row.get("la_name") or "").strip() or None,
|
||||
"distance_value_raw": self._num(row.get("distance_value_raw")),
|
||||
"distance_unit_raw": (row.get("distance_unit_raw") or "").strip() or None,
|
||||
"distance_m": self._num(row.get("distance_m")),
|
||||
"source_file": (row.get("source_file") or "").strip() or None,
|
||||
}
|
||||
yielded += 1
|
||||
|
||||
self.logger.info(
|
||||
"Yielded %d distance records (%d skipped: missing urn, year or school name)",
|
||||
yielded,
|
||||
skipped,
|
||||
)
|
||||
|
||||
|
||||
class TapUKSchoolDistance(Tap):
|
||||
"""Singer tap for LA-published admission cut-off distances."""
|
||||
|
||||
name = "tap-uk-school-distance"
|
||||
|
||||
config_jsonschema = th.PropertiesList(
|
||||
th.Property(
|
||||
"download_url",
|
||||
th.StringType,
|
||||
required=True,
|
||||
description="URL of the collected last-distance-offered CSV",
|
||||
),
|
||||
).to_dict()
|
||||
|
||||
def discover_streams(self):
|
||||
return [SchoolDistanceStream(self)]
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
TapUKSchoolDistance.cli()
|
||||
@@ -156,22 +156,6 @@ models:
|
||||
- name: cross_la_offers
|
||||
- name: total_offers
|
||||
|
||||
- name: fact_admission_distance
|
||||
description: >
|
||||
Last distance offered — one row per URN per year. Where a school admits
|
||||
through several routes (ability bands, separate reception/junior
|
||||
intakes) the figure is the furthest of them and route_count says how
|
||||
many were collapsed.
|
||||
columns:
|
||||
- name: urn
|
||||
tests: [not_null]
|
||||
- name: year
|
||||
tests: [not_null]
|
||||
- name: distance_m
|
||||
tests: [not_null]
|
||||
- name: route_count
|
||||
tests: [not_null]
|
||||
|
||||
- name: fact_finance
|
||||
description: School financial data — one row per URN per year
|
||||
columns:
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
-- Mart: last distance offered — one row per URN per year.
|
||||
--
|
||||
-- Collapses the per-route grain of stg_school_distance to the grain the site
|
||||
-- serves. Where a school admits through several routes the figure shown is the
|
||||
-- FURTHEST of them, which is what "last distance offered" literally means: the
|
||||
-- distance of the last place the school gave out that year.
|
||||
--
|
||||
-- route_count travels with it so the page can say so. A parent looking at a
|
||||
-- banded secondary needs to know that 2.4 miles is the widest of four bands
|
||||
-- and not the number that applies to their own child — the count is what makes
|
||||
-- that sentence possible, and dropping it would make the figure quietly
|
||||
-- optimistic.
|
||||
--
|
||||
-- Kept separate from fact_admissions rather than joined into it. That mart is
|
||||
-- EES-derived and near-complete for England; this one comes from 57 local
|
||||
-- authorities that publish cut-offs at all, so folding it in would add mostly
|
||||
-- null columns to every school in the country and tie two very different
|
||||
-- refresh cadences together.
|
||||
|
||||
with routes as (
|
||||
select * from {{ ref('stg_school_distance') }}
|
||||
),
|
||||
|
||||
per_year as (
|
||||
select
|
||||
urn,
|
||||
year,
|
||||
max(distance_m) as distance_m,
|
||||
count(*) as route_count,
|
||||
min(la_code) as la_code,
|
||||
min(la_name) as la_name,
|
||||
-- The unit the council actually published in. Where routes disagree
|
||||
-- (they do not in the current data) the alphabetically first is taken
|
||||
-- rather than an arbitrary row, so the mart is deterministic.
|
||||
min(distance_unit_raw) as distance_unit_raw,
|
||||
min(source_file) as source_file
|
||||
from routes
|
||||
group by urn, year
|
||||
)
|
||||
|
||||
select
|
||||
urn,
|
||||
year,
|
||||
distance_m,
|
||||
route_count,
|
||||
la_code,
|
||||
la_name,
|
||||
distance_unit_raw,
|
||||
source_file
|
||||
from per_year
|
||||
@@ -61,11 +61,3 @@ sources:
|
||||
|
||||
- name: idaci
|
||||
description: Income Deprivation Affecting Children Index lookups
|
||||
|
||||
- name: school_distance_offered
|
||||
description: >
|
||||
Last distance offered (admission cut-offs) transcribed from local
|
||||
authority admissions publications. One row per school × year ×
|
||||
admission route; no national source exists, so coverage is limited to
|
||||
the LAs that publish. Loaded verbatim — implausible values are
|
||||
filtered in stg_school_distance, not here.
|
||||
@@ -1,55 +0,0 @@
|
||||
-- Staging model: "last distance offered" admission cut-offs.
|
||||
--
|
||||
-- One row per school × year × admission route. A school admits through
|
||||
-- several routes when it bands by ability (Islington publishes four bands per
|
||||
-- secondary) or takes more than one intake (Gloucestershire publishes
|
||||
-- reception, junior and secondary allocations separately). The route is
|
||||
-- carried in school_name, which is why it forms part of the grain here and is
|
||||
-- collapsed only in fact_admission_distance.
|
||||
--
|
||||
-- PLAUSIBILITY BAND (25 m – 25 km)
|
||||
--
|
||||
-- The source is transcribed from council PDFs, spreadsheets and web pages, and
|
||||
-- a minority of rows are transcription or unit errors rather than real
|
||||
-- cut-offs. Three failure modes, all present:
|
||||
--
|
||||
-- * 0.0 miles (34 rows, mostly Staffordshire). Published where a school
|
||||
-- filled on a higher criterion so distance was never reached — a real
|
||||
-- fact, but "0 metres" read as a cut-off would tell a parent the opposite
|
||||
-- of the truth.
|
||||
-- * 1–10 metre values (72 rows, e.g. Hillingdon). A cut-off inside the
|
||||
-- school gate is not physically possible; these are unit slips.
|
||||
-- * Values above 25 km (~240 rows), topping out at 533 miles. Genuine rural
|
||||
-- secondary cut-offs reach roughly 12–15 miles, so the ceiling keeps those
|
||||
-- while cutting figures that are visibly wrong.
|
||||
--
|
||||
-- Together these are ~4% of rows. They are loaded verbatim into raw and
|
||||
-- excluded here, so the rule is reviewable in one place and the raw table
|
||||
-- stays a faithful record of what each council published.
|
||||
|
||||
{% set min_plausible_m = 25 %}
|
||||
{% set max_plausible_m = 25000 %}
|
||||
|
||||
with source as (
|
||||
select * from {{ source('raw', 'school_distance_offered') }}
|
||||
),
|
||||
|
||||
renamed as (
|
||||
select
|
||||
cast(urn as integer) as urn,
|
||||
cast(year as integer) as year,
|
||||
trim(school_name) as admission_route,
|
||||
cast(la_code as integer) as la_code,
|
||||
la_name,
|
||||
cast(distance_value_raw as numeric) as distance_value_raw,
|
||||
distance_unit_raw,
|
||||
cast(distance_m as numeric) as distance_m,
|
||||
source_file
|
||||
from source
|
||||
where urn is not null
|
||||
and year is not null
|
||||
and distance_m is not null
|
||||
and cast(distance_m as numeric) between {{ min_plausible_m }} and {{ max_plausible_m }}
|
||||
)
|
||||
|
||||
select * from renamed
|
||||
@@ -1,27 +0,0 @@
|
||||
-- Custom test: every published cut-off distance is inside the plausibility
|
||||
-- band, and there is exactly one row per school per year.
|
||||
--
|
||||
-- The band is enforced in stg_school_distance; this asserts it survived the
|
||||
-- max() collapse in the mart. A failure means either the staging filter was
|
||||
-- edited without updating this test, or the grain broke — both of which put a
|
||||
-- visibly wrong number ("533 miles") on a live school page, which is the one
|
||||
-- outcome this feature cannot afford.
|
||||
|
||||
with out_of_band as (
|
||||
select urn, year, distance_m, 'out of plausibility band' as problem
|
||||
from {{ ref('fact_admission_distance') }}
|
||||
where distance_m is null
|
||||
or distance_m < 25
|
||||
or distance_m > 25000
|
||||
),
|
||||
|
||||
duplicated as (
|
||||
select urn, year, max(distance_m) as distance_m, 'duplicate urn/year' as problem
|
||||
from {{ ref('fact_admission_distance') }}
|
||||
group by urn, year
|
||||
having count(*) > 1
|
||||
)
|
||||
|
||||
select * from out_of_band
|
||||
union all
|
||||
select * from duplicated
|
||||
Reference in new issue
Block a user