TudorandClaude Fable 5
9447b80bc6
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
643 lines
43 KiB
HTML
643 lines
43 KiB
HTML
<title>Compare screen — proposed redesign</title>
|
||
<style>
|
||
:root {
|
||
--bg: #faf7f2;
|
||
--bg-2: #f3ede4;
|
||
--card: #ffffff;
|
||
--ink: #1a1612;
|
||
--ink-2: #5c564d;
|
||
--ink-3: #6d685f;
|
||
--border: #e5dfd5;
|
||
--accent: #b04a2e;
|
||
--accent-bg: rgba(224, 114, 86, 0.12);
|
||
/* Validated series palette (passes lightness / chroma / CVD / contrast) */
|
||
--s1: #e07256; --s1-text: #b04a2e;
|
||
--s2: #00949b; --s2-text: #006a70;
|
||
--s3: #8664c9; --s3-text: #6a4bab;
|
||
--eng: #6d685f;
|
||
--good-bg: #e3efe6; --good-text: #1a6b34;
|
||
--warn-bg: #f6ecd4; --warn-text: #7a5d00;
|
||
--bad-bg: #f7e3de; --bad-text: #a03a20;
|
||
--neutral-bg: #efeae1; --neutral-text: #5c564d;
|
||
--shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
|
||
--display: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||
--body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #16130f; --bg-2: #201c16; --card: #241f19;
|
||
--ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
|
||
--border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
|
||
--s1: #f08b6e; --s1-text: #f4a58e;
|
||
--s2: #2fb8ae; --s2-text: #5fd0c8;
|
||
--s3: #a98fe0; --s3-text: #c0abec;
|
||
--eng: #9a927f;
|
||
--good-bg: #1e3325; --good-text: #7fd39a;
|
||
--warn-bg: #38301a; --warn-text: #e4c268;
|
||
--bad-bg: #3d221b; --bad-text: #f0977f;
|
||
--neutral-bg: #2b2620; --neutral-text: #bdb5a8;
|
||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||
}
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--bg: #16130f; --bg-2: #201c16; --card: #241f19;
|
||
--ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
|
||
--border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
|
||
--s1: #f08b6e; --s1-text: #f4a58e;
|
||
--s2: #2fb8ae; --s2-text: #5fd0c8;
|
||
--s3: #a98fe0; --s3-text: #c0abec;
|
||
--eng: #9a927f;
|
||
--good-bg: #1e3325; --good-text: #7fd39a;
|
||
--warn-bg: #38301a; --warn-text: #e4c268;
|
||
--bad-bg: #3d221b; --bad-text: #f0977f;
|
||
--neutral-bg: #2b2620; --neutral-text: #bdb5a8;
|
||
--shadow: 0 2px 8px rgba(0,0,0,0.35);
|
||
}
|
||
:root[data-theme="light"] {
|
||
--bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
|
||
--ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
|
||
--border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
|
||
--s1: #e07256; --s1-text: #b04a2e;
|
||
--s2: #00949b; --s2-text: #006a70;
|
||
--s3: #8664c9; --s3-text: #6a4bab;
|
||
--eng: #6d685f;
|
||
--good-bg: #e3efe6; --good-text: #1a6b34;
|
||
--warn-bg: #f6ecd4; --warn-text: #7a5d00;
|
||
--bad-bg: #f7e3de; --bad-text: #a03a20;
|
||
--neutral-bg: #efeae1; --neutral-text: #5c564d;
|
||
--shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
|
||
}
|
||
|
||
body { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.5; }
|
||
.wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
|
||
|
||
.mock-note {
|
||
background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
|
||
padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 2rem;
|
||
}
|
||
.mock-note strong { color: var(--accent); }
|
||
|
||
h1 { font-family: var(--display); font-size: 2.4rem; font-weight: 700; margin: 0 0 0.25rem; text-wrap: balance; }
|
||
.sub { color: var(--ink-2); margin: 0 0 2rem; max-width: 60ch; }
|
||
|
||
h2.section-title {
|
||
font-family: var(--display); font-size: 1.45rem; font-weight: 700;
|
||
margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--accent);
|
||
}
|
||
.how { font-size: 0.85rem; color: var(--ink-3); margin: 0.35rem 0 0 0.95rem; max-width: 70ch; }
|
||
section.block { margin-top: 3rem; }
|
||
|
||
/* ---- Sticky school header ---- */
|
||
.school-bar {
|
||
position: sticky; top: 0; z-index: 10;
|
||
background: var(--bg); padding: 0.75rem 0; border-bottom: 1px solid var(--border);
|
||
display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 0.75rem; align-items: stretch;
|
||
}
|
||
.school-chip {
|
||
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
|
||
box-shadow: var(--shadow); padding: 0.55rem 0.75rem; display: flex; gap: 0.55rem; align-items: center;
|
||
border-top: 3px solid var(--chip);
|
||
}
|
||
.school-chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--chip); flex: none; }
|
||
.school-chip .nm { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
|
||
.school-chip .la { font-size: 0.78rem; color: var(--ink-3); }
|
||
.school-chip .x {
|
||
margin-left: auto; border: none; background: var(--bg-2); color: var(--ink-3);
|
||
border-radius: 50%; width: 22px; height: 22px; cursor: pointer; flex: none; font-size: 0.9rem;
|
||
}
|
||
.add-school {
|
||
border: 1.5px dashed var(--border); border-radius: 8px; background: none;
|
||
color: var(--accent); font-weight: 600; padding: 0 1rem; cursor: pointer; font-family: inherit; font-size: 0.9rem;
|
||
}
|
||
|
||
/* ---- Comparison grid rows ---- */
|
||
.grid { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 0 0.75rem; margin-top: 1.25rem; }
|
||
.grid .rowlabel {
|
||
font-size: 0.85rem; font-weight: 600; color: var(--ink-2); padding: 0.85rem 0.5rem 0.85rem 0;
|
||
border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.35rem;
|
||
}
|
||
.grid .cell { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
|
||
.grid .cell .big { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||
.grid .cell .small { display: block; font-size: 0.8rem; color: var(--ink-3); margin-top: 0.1rem; }
|
||
|
||
.help {
|
||
display: inline-flex; width: 15px; height: 15px; border-radius: 50%;
|
||
border: 1px solid var(--ink-3); color: var(--ink-3); font-size: 0.65rem;
|
||
align-items: center; justify-content: center; cursor: help; flex: none;
|
||
}
|
||
|
||
.chip {
|
||
display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px;
|
||
padding: 0.15rem 0.6rem; white-space: nowrap;
|
||
}
|
||
.chip.good { background: var(--good-bg); color: var(--good-text); }
|
||
.chip.warn { background: var(--warn-bg); color: var(--warn-text); }
|
||
.chip.bad { background: var(--bad-bg); color: var(--bad-text); }
|
||
.chip.neutral { background: var(--neutral-bg); color: var(--neutral-text); }
|
||
|
||
.ofsted-badge {
|
||
display: inline-block; font-weight: 700; border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.9rem;
|
||
}
|
||
/* New-framework report card */
|
||
.rc-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.2rem; }
|
||
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
|
||
.rc-row .a { color: var(--ink-2); }
|
||
.illus {
|
||
display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
|
||
color: var(--accent); border: 1px dashed var(--accent); border-radius: 4px; padding: 0.05rem 0.4rem;
|
||
}
|
||
.ofsted-1 { background: var(--good-bg); color: var(--good-text); }
|
||
.ofsted-2 { background: #e7f0e3; color: #3c6b2f; }
|
||
:root[data-theme="dark"] .ofsted-2 { background:#25321f; color:#a5cf94; }
|
||
@media (prefers-color-scheme: dark) { .ofsted-2 { background:#25321f; color:#a5cf94; } }
|
||
|
||
/* ---- Dot strips (signature element) ---- */
|
||
.strip-row { margin: 1.1rem 0 1.6rem; }
|
||
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
|
||
.strip-head .t { font-weight: 600; font-size: 0.95rem; }
|
||
.strip-head .eng-note { font-size: 0.8rem; color: var(--ink-3); }
|
||
.strip { position: relative; height: 34px; margin-top: 0.45rem; }
|
||
.strip .track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--bg-2); }
|
||
.strip .eng-tick { position: absolute; top: 4px; width: 2px; height: 26px; background: var(--eng); }
|
||
.strip .eng-lbl { position: absolute; top: -14px; transform: translateX(-50%); font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }
|
||
.strip .pt {
|
||
position: absolute; top: 9px; width: 16px; height: 16px; border-radius: 50%;
|
||
transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
|
||
}
|
||
.strip .pt-lbl { position: absolute; top: 27px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
|
||
|
||
details.more-measures { margin-top: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
|
||
details.more-measures summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--accent); }
|
||
.strip-note { font-size: 0.78rem; color: var(--ink-3); margin: 0.5rem 0 0; }
|
||
.metric-picker { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
|
||
.metric-picker label { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
|
||
.metric-picker select {
|
||
font-family: inherit; font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 8px;
|
||
border: 1px solid var(--border); background: var(--card); color: var(--ink); max-width: 100%;
|
||
}
|
||
.picker-note { font-size: 0.78rem; color: var(--ink-3); }
|
||
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-2); margin: 0.75rem 0 0; }
|
||
.legend .li { display: inline-flex; align-items: center; gap: 0.4rem; }
|
||
.legend .sw { width: 10px; height: 10px; border-radius: 50%; }
|
||
.legend .engsw { width: 2px; height: 12px; background: var(--eng); }
|
||
|
||
.card {
|
||
background: var(--card); border: 1px solid var(--border); border-radius: 16px;
|
||
box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-top: 1rem;
|
||
}
|
||
|
||
/* ---- Sparklines & chart ---- */
|
||
.spark { display: block; }
|
||
.chart-wrap { overflow-x: auto; }
|
||
.covid { fill: var(--bg-2); }
|
||
.covid-lbl { font-size: 0.7rem; fill: var(--ink-3); }
|
||
|
||
.barmini { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: 0.3rem; max-width: 140px; }
|
||
.barmini > i { display: block; height: 100%; border-radius: 4px; }
|
||
|
||
details.explore { margin-top: 1rem; }
|
||
details.explore summary {
|
||
cursor: pointer; font-weight: 600; color: var(--accent);
|
||
padding: 0.85rem 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px;
|
||
}
|
||
details.explore[open] summary { border-radius: 8px 8px 0 0; }
|
||
details.explore .inner { border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; background: var(--card); padding: 1.25rem 1.5rem; }
|
||
|
||
.footnote { font-size: 0.78rem; color: var(--ink-3); margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; max-width: 75ch; }
|
||
|
||
@media (max-width: 760px) {
|
||
.school-bar { grid-template-columns: 1fr; }
|
||
.grid { grid-template-columns: 1fr; }
|
||
.grid .rowlabel { border-bottom: none; padding-bottom: 0.15rem; background: var(--bg-2); border-radius: 6px; padding: 0.4rem 0.6rem; margin-top: 0.8rem; }
|
||
.grid .cell { border-bottom: none; padding: 0.4rem 0.6rem; }
|
||
.grid .cell::before { content: attr(data-school); display: block; font-size: 0.72rem; font-weight: 600; color: var(--sc, var(--ink-3)); }
|
||
}
|
||
</style>
|
||
|
||
<div class="wrap">
|
||
<p class="mock-note"><strong>Mockup — proposed redesign of /compare.</strong> All figures are live production data for three real schools (2024/25 results, 2026/27 admissions round). England averages for test results are official DfE figures; other benchmarks are state-school averages computed from our dataset.</p>
|
||
|
||
<h1>Compare schools</h1>
|
||
<p class="sub">Three schools side by side — inspection results, academics, admissions and community, each anchored against the England average so you can tell at a glance what's typical and what stands out.</p>
|
||
|
||
<div class="school-bar" aria-label="Schools in this comparison">
|
||
<div class="school-chip" style="--chip: var(--s1)">
|
||
<span class="dot"></span>
|
||
<span><span class="nm">Barclay Primary School</span><br><span class="la">Waltham Forest · Academy</span></span>
|
||
<button class="x" aria-label="Remove Barclay Primary School">×</button>
|
||
</div>
|
||
<div class="school-chip" style="--chip: var(--s2)">
|
||
<span class="dot"></span>
|
||
<span><span class="nm">Elmhurst Primary School</span><br><span class="la">Newham · Academy</span></span>
|
||
<button class="x" aria-label="Remove Elmhurst Primary School">×</button>
|
||
</div>
|
||
<div class="school-chip" style="--chip: var(--s3)">
|
||
<span class="dot"></span>
|
||
<span><span class="nm">Plumcroft Primary School</span><br><span class="la">Greenwich · Community school</span></span>
|
||
<button class="x" aria-label="Remove Plumcroft Primary School">×</button>
|
||
</div>
|
||
<button class="add-school">+ Add school</button>
|
||
</div>
|
||
|
||
<!-- ============ AT A GLANCE ============ -->
|
||
<section class="block" style="margin-top:2rem">
|
||
<h2 class="section-title">At a glance</h2>
|
||
<p class="how">The short version — each row below is explained in its own section further down.</p>
|
||
<div class="grid">
|
||
<div class="rowlabel">Latest Ofsted inspection</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Inspected Oct 2021</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Inspected Oct 2021</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">
|
||
<strong style="font-size:0.9rem">Report card</strong> <span class="illus">illustrative</span>
|
||
<div style="display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.3rem">
|
||
<span class="chip good">4 areas Strong standard</span>
|
||
<span class="chip neutral">2 areas Expected standard</span>
|
||
<span class="chip warn">Attendance & behaviour: Attention needed</span>
|
||
</div>
|
||
<span class="small">Safeguarding met · Nov 2025</span>
|
||
</div>
|
||
|
||
<div class="rowlabel">Children reaching the expected standard <span class="help" title="% of Year 6 pupils reaching the expected standard in reading, writing and maths (2024/25). England average: 62%.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="big" style="color:var(--s1-text)">87%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="big" style="color:var(--s2-text)">92%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="big" style="color:var(--s3-text)">79%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
|
||
|
||
<div class="rowlabel">Getting a place</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="chip good">97% of first choices offered</span><span class="small">Named on 457 forms · 180 places</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="chip warn">73% of first choices offered</span><span class="small">Named on 342 forms · 120 places</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="chip good">All first choices offered</span><span class="small">Named on 185 forms · 80 places</span></div>
|
||
|
||
<div class="rowlabel">Size</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">1,273 pupils<span class="small">Much larger than average</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">980 pupils<span class="small">Much larger than average</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">1,056 pupils<span class="small">Much larger than average</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ OFSTED ============ -->
|
||
<section class="block">
|
||
<h2 class="section-title">Ofsted inspection</h2>
|
||
<p class="how">Ofsted is the schools inspectorate. It stopped giving a single overall grade in <strong>September 2024</strong>; inspections between then and November 2025 kept the area-by-area judgements without an overall grade, and from <strong>November 2025</strong> new inspections produce a <strong>report card</strong> rating each area of school life on a five-point scale (Exceptional · Strong standard · Expected standard · Attention needed · Urgent improvement). A report card and an older overall grade aren't directly comparable — Plumcroft's report card below is an <em>illustrative example</em> of the new format, as no school in our dataset has one yet. (Ofsted's "Expected standard" rating is unrelated to the KS2 "expected standard" test measure further down this page.)</p>
|
||
<div class="grid">
|
||
<div class="rowlabel">Result</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Overall grade (older-style inspection)</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Overall grade (older-style inspection)</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><strong>Report card</strong> <span class="illus">illustrative</span><span class="small">New-style inspection — no overall grade is given</span></div>
|
||
|
||
<div class="rowlabel">Inspected</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">7 Oct 2021 <span class="chip neutral">4+ years ago</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">6 Oct 2021 <span class="chip neutral">4+ years ago</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">14 Nov 2025</div>
|
||
|
||
<div class="rowlabel">Judgement detail <span class="help" title="Older-style inspections: one rating per judgement area, where published. New-style inspections: the full report card, one rating per area of school life.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="small">We don't hold area-by-area detail for this inspection — see Barclay's Ofsted page for the full report.</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">
|
||
<div class="rc-list">
|
||
<div class="rc-row"><span class="a">Quality of education</span><span class="chip good">Outstanding</span></div>
|
||
<div class="rc-row"><span class="a">Behaviour & attitudes</span><span class="chip good">Outstanding</span></div>
|
||
<div class="rc-row"><span class="a">Personal development</span><span class="chip good">Outstanding</span></div>
|
||
<div class="rc-row"><span class="a">Leadership & management</span><span class="chip good">Outstanding</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">
|
||
<div class="rc-list">
|
||
<div class="rc-row"><span class="a">Achievement</span><span class="chip good">Strong standard</span></div>
|
||
<div class="rc-row"><span class="a">Curriculum & teaching</span><span class="chip good">Strong standard</span></div>
|
||
<div class="rc-row"><span class="a">Attendance & behaviour</span><span class="chip warn">Attention needed</span></div>
|
||
<div class="rc-row"><span class="a">Personal development</span><span class="chip good">Strong standard</span></div>
|
||
<div class="rc-row"><span class="a">Inclusion</span><span class="chip neutral">Expected standard</span></div>
|
||
<div class="rc-row"><span class="a">Leadership & governance</span><span class="chip good">Strong standard</span></div>
|
||
<div class="rc-row"><span class="a">Early years</span><span class="chip neutral">Expected standard</span></div>
|
||
<div class="rc-row"><span class="a">Safeguarding</span><span class="chip good">Met</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rowlabel">Ofsted page <span class="help" title="Links to the school's page on ofsted.gov.uk, where all its inspection reports are listed.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><a href="https://reports.ofsted.gov.uk/provider/21/138690" style="color:var(--accent)">Barclay's Ofsted page →</a></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><a href="https://reports.ofsted.gov.uk/provider/21/145362" style="color:var(--accent)">Elmhurst's Ofsted page →</a></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><a href="https://reports.ofsted.gov.uk/provider/21/100140" style="color:var(--accent)">Plumcroft's Ofsted page →</a></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ACADEMICS ============ -->
|
||
<section class="block">
|
||
<h2 class="section-title">How children do academically</h2>
|
||
<p class="how">Results from national tests and teacher assessments at the end of Year 6 (2024/25) — writing is assessed by teachers, not tested. Each line runs from 0–100%; the grey tick marks the England average, so dots to its right are above average.</p>
|
||
<div class="card">
|
||
<div id="strips"></div>
|
||
<details class="more-measures">
|
||
<summary>More measures — grammar, punctuation & spelling, science, average scaled scores</summary>
|
||
<div id="strips-more"></div>
|
||
<p class="strip-note">The strips show the 100–120 window of the full 80–120 scaled-score range; 100 is the expected standard, and the strip widens if a school averages below it. England ticks for grammar, punctuation & spelling and science aren't in our dataset yet, and the scaled-score England ticks are indicative — official DfE figures for all of these will be loaded before launch.</p>
|
||
</details>
|
||
<div class="legend" id="strip-legend"></div>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="rowlabel">Trend, 2015/16 to 2024/25 <span class="help" title="% reaching the expected standard in reading, writing and maths each year. Tests were cancelled in 2019/20 and 2020/21 (COVID); 2021/22 school figures aren't in our dataset yet — the line breaks over those years.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><svg class="spark" data-series="52,76,65,87,87,75,87" data-color="s1" width="150" height="40" role="img" aria-label="Barclay trend: variable, most recently 87%"></svg><span class="small">Variable, recently 87%</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><svg class="spark" data-series="80,81,86,88,88,88,92" data-color="s2" width="150" height="40" role="img" aria-label="Elmhurst trend: 80% rising to 92%"></svg><span class="small">Consistently high</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><svg class="spark" data-series="58,64,57,69,62,72,79" data-color="s3" width="150" height="40" role="img" aria-label="Plumcroft trend: 58% rising to 79%"></svg><span class="small">Improving since 2022/23</span></div>
|
||
|
||
<div class="rowlabel">Children from lower-income families <span class="help" title="% of disadvantaged pupils (eligible for free school meals in the last 6 years, or looked after by the local authority) reaching the expected standard. State-school average: 46% (computed from our dataset). Based on smaller pupil groups, so a single pupil can move a school's figure noticeably.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="big" style="font-size:1.1rem">86%</span> <span class="chip good">Well above the 46% state-school average</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="big" style="font-size:1.1rem">93%</span> <span class="chip good">Well above the 46% state-school average</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="big" style="font-size:1.1rem">72%</span> <span class="chip good">Above the 46% state-school average</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ADMISSIONS ============ -->
|
||
<section class="block">
|
||
<h2 class="section-title">Getting a place</h2>
|
||
<p class="how">From the most recent admissions round (September 2026 entry). "First choice" means families who ranked the school top of their application form — officially a "first preference". Schools never see your ranking: places are decided only by the school's admission criteria, so listing a school lower down never hurts your chances. These are National Offer Day offers — waiting lists and appeals can change the final intake.</p>
|
||
<div class="grid">
|
||
<div class="rowlabel">Interest in the school <span class="help" title="How many application forms named the school at any preference rank — not the number of families competing head-to-head for a place.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">Named on <span class="big" style="font-size:1.1rem">457</span> forms · <strong>180</strong> places</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">Named on <span class="big" style="font-size:1.1rem">342</span> forms · <strong>120</strong> places</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">Named on <span class="big" style="font-size:1.1rem">185</span> forms · <strong>80</strong> places</div>
|
||
|
||
<div class="rowlabel">First-choice families offered a place</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><strong>97%</strong><span class="barmini"><i style="width:97%;background:var(--s1)"></i></span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><strong>73%</strong> <span class="chip warn">Over 1 in 4 first choices missed out</span><span class="barmini"><i style="width:73%;background:var(--s2)"></i></span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><strong>100%</strong><span class="barmini"><i style="width:100%;background:var(--s3)"></i></span></div>
|
||
|
||
<div class="rowlabel">What this means</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="small">Nearly every family who put Barclay first got a place.</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="small">More first-choice applications than places — check the school's admission criteria (for most non-faith primaries, distance decides).</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="small">Every family who put Plumcroft first got a place.</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ COMMUNITY ============ -->
|
||
<section class="block">
|
||
<h2 class="section-title">Who goes there</h2>
|
||
<p class="how">The school's community, from the latest school census (2025/26). England averages are shown for context — there's no "right" number here.</p>
|
||
<div class="grid">
|
||
<div class="rowlabel">Pupils on roll</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">1,273 <span class="small">1,260 places — at or above capacity</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">980 <span class="small">of 996 places (98% full)</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">1,056 <span class="small">1,050 places — at or above capacity</span></div>
|
||
|
||
<div class="rowlabel">Girls / boys</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">51% / 49%</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">48% / 52%</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">51% / 49%</div>
|
||
|
||
<div class="rowlabel">Free school meals <span class="help" title="% of pupils eligible for free school meals — a common measure of how many pupils come from lower-income families. State-school average: 25% (computed from our dataset).">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">26% <span class="chip neutral">About the state-school average</span></div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">25% <span class="chip neutral">About the state-school average</span></div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">30% <span class="chip neutral">A little above average</span></div>
|
||
|
||
<div class="rowlabel">English as an additional language <span class="help" title="% of pupils whose first language is known or believed to be other than English. State-school average: 22% (computed from our dataset).">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">62%</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">84%</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">20%</div>
|
||
|
||
<div class="rowlabel">Extra learning support (SEN) <span class="help" title="% of pupils receiving SEN support (not including EHC plans). State-school average: 14% (computed from our dataset). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign.">?</span></div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">6%</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">8%</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">28% <span class="chip neutral">Well above average</span></div>
|
||
|
||
<div class="rowlabel">Faith character</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">None</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">None</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">None</div>
|
||
|
||
<div class="rowlabel">Ages · nursery</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">3–11 · has a nursery</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">3–11 · has a nursery</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">3–11 · has a nursery</div>
|
||
|
||
<div class="rowlabel">Run by</div>
|
||
<div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">Lion Academy Trust</div>
|
||
<div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">New Vision Trust</div>
|
||
<div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">Greenwich council</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ EXPLORE TRENDS ============ -->
|
||
<section class="block">
|
||
<h2 class="section-title">Explore trends</h2>
|
||
<p class="how">The full year-by-year explorer — every measure from the current compare page lives on here, grouped, each with its England-average line. Three measures are wired up in this mockup; the rest are shown to convey the catalogue.</p>
|
||
<details class="explore" open>
|
||
<summary>Year-by-year trends, 2015/16 to 2024/25</summary>
|
||
<div class="inner chart-wrap">
|
||
<div class="metric-picker">
|
||
<label for="metric-select">Measure:</label>
|
||
<select id="metric-select">
|
||
<optgroup label="Expected standard">
|
||
<option value="rwm" selected>Reading, writing & maths (combined)</option>
|
||
<option value="reading">Reading</option>
|
||
<option value="maths">Maths</option>
|
||
<option disabled>Writing (teacher assessment)</option>
|
||
<option disabled>Grammar, punctuation & spelling</option>
|
||
<option disabled>Science</option>
|
||
</optgroup>
|
||
<optgroup label="Higher standard">
|
||
<option disabled>Reading, writing & maths (combined)</option>
|
||
<option disabled>Reading · Maths · GPS</option>
|
||
<option disabled>Writing — greater depth (teacher assessment)</option>
|
||
</optgroup>
|
||
<optgroup label="Average scaled scores">
|
||
<option disabled>Reading · Maths · GPS</option>
|
||
</optgroup>
|
||
<optgroup label="Equity">
|
||
<option disabled>Disadvantaged pupils — expected standard</option>
|
||
</optgroup>
|
||
<optgroup label="School context">
|
||
<option disabled>Free school meals % · EAL % · SEN support %</option>
|
||
</optgroup>
|
||
</select>
|
||
<span class="picker-note">School lines break where a year isn't in our dataset.</span>
|
||
</div>
|
||
<svg id="trendchart" width="880" height="300" role="img" aria-label="Line chart: selected measure by year for three schools and England average"></svg>
|
||
<div class="legend" id="trend-legend"></div>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<p class="footnote">
|
||
Sources: DfE Compare School Performance (KS2 results), Ofsted inspection outcomes, DfE school admissions data, school census — all from datasets SchoolCompare already collects. England averages for test results are the official DfE national figures; benchmarks for free school meals, language, SEN, school size and disadvantaged pupils' results are computed across all state schools in our dataset. Following DfE practice, figures based on 5 or fewer pupils are suppressed and shown as "no data". This is a static mockup: tooltips and "Add school" are illustrative, and Plumcroft's Ofsted report card is a made-up example of the November 2025 format (its real latest inspection is Good, June 2023) — no school in our dataset has a report card yet.
|
||
</p>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
|
||
|
||
const schools = [
|
||
{ name: 'Barclay', color: () => css('--s1'), text: () => css('--s1-text') },
|
||
{ name: 'Elmhurst', color: () => css('--s2'), text: () => css('--s2-text') },
|
||
{ name: 'Plumcroft', color: () => css('--s3'), text: () => css('--s3-text') },
|
||
];
|
||
|
||
/* ---- Dot strips ---- */
|
||
const strips = [
|
||
{ label: 'Reading, writing & maths — expected standard', eng: 62, vals: [87, 92, 79] },
|
||
{ label: 'Reading', eng: 75, vals: [91, 92, 87] },
|
||
{ label: 'Writing', eng: 72, vals: [94, 92, 83] },
|
||
{ label: 'Maths', eng: 74, vals: [91, 95, 84] },
|
||
{ label: 'Working at a higher standard than expected', eng: 8, vals: [22, 27, 12], tip: 'A high score in the reading and maths tests plus \u201cgreater depth\u201d in teacher-assessed writing.' },
|
||
];
|
||
|
||
// Generalised strip renderer: any domain (percentages or scaled scores),
|
||
// England tick optional (omitted when the benchmark isn't in our dataset).
|
||
function renderStrips(list, el, firstNote) {
|
||
list.forEach((s, si) => {
|
||
const min = s.min ?? 0, max = s.max ?? 100, unit = s.unit ?? '%';
|
||
const pos = v => (v - min) / (max - min) * 100;
|
||
const row = document.createElement('div');
|
||
row.className = 'strip-row';
|
||
let pts = '';
|
||
const sorted = s.vals.map((v, i) => ({ v, i })).sort((a, b) => a.v - b.v);
|
||
let lastBelow = -Infinity;
|
||
const nudge = (max - min) * 0.04;
|
||
sorted.forEach(({ v, i }) => {
|
||
const above = (v - lastBelow) < nudge;
|
||
if (!above) lastBelow = v;
|
||
pts += `<span class="pt" style="left:${pos(v)}%;background:${schools[i].color()}" title="${schools[i].name}: ${v}${unit}"></span>`
|
||
+ `<span class="pt-lbl" style="left:${pos(v)}%;color:${schools[i].text()};${above ? 'top:-6px' : ''}">${v}</span>`;
|
||
});
|
||
const eng = s.eng != null
|
||
? `<span class="eng-tick" style="left:${pos(s.eng)}%"></span><span class="eng-lbl" style="left:${pos(s.eng)}%">England ${s.eng}${unit}</span>`
|
||
: '';
|
||
row.innerHTML = `
|
||
<div class="strip-head"><span class="t"${s.tip ? ` title="${s.tip}"` : ''}>${s.label}</span>
|
||
${si === 0 && firstNote ? `<span class="eng-note">${firstNote}</span>` : ''}</div>
|
||
<div class="strip" role="img" aria-label="${s.label}: ${s.eng != null ? 'England average ' + s.eng + unit + ', ' : ''}${s.vals.map((v, i) => schools[i].name + ' ' + v + unit).join(', ')}">
|
||
<div class="track"></div>
|
||
${eng}
|
||
${pts}
|
||
</div>`;
|
||
el.appendChild(row);
|
||
});
|
||
}
|
||
renderStrips(strips, document.getElementById('strips'), '│ grey tick = England average');
|
||
renderStrips([
|
||
{ label: 'Grammar, punctuation & spelling — expected standard', eng: null, vals: [86, 94, 82] },
|
||
{ label: 'Science — expected standard (teacher-assessed)', eng: null, vals: [95, 91, 83], tip: 'Teacher-assessed, like writing — there has been no KS2 science test since 2009, so comparisons are indicative.' },
|
||
{ label: 'Average scaled score — reading', eng: 106, vals: [107, 110, 109], min: 100, max: 120, unit: '' },
|
||
{ label: 'Average scaled score — maths', eng: 105, vals: [108, 113, 108], min: 100, max: 120, unit: '' },
|
||
{ label: 'Average scaled score — grammar, punctuation & spelling', eng: 105, vals: [107, 114, 109], min: 100, max: 120, unit: '' },
|
||
], document.getElementById('strips-more'), null);
|
||
document.getElementById('strip-legend').innerHTML =
|
||
schools.map(s => `<span class="li"><span class="sw" style="background:${s.color()}"></span>${s.name}</span>`).join('')
|
||
+ '<span class="li"><span class="engsw"></span>England average</span>';
|
||
|
||
/* ---- Sparklines (x honours real time: values are 15/16–18/19 then 22/23–24/25) ---- */
|
||
document.querySelectorAll('svg.spark').forEach(svg => {
|
||
const vals = svg.dataset.series.split(',').map(Number);
|
||
const color = css('--' + svg.dataset.color);
|
||
const w = +svg.getAttribute('width'), h = +svg.getAttribute('height');
|
||
const min = 40, max = 100;
|
||
const sslots = [0,1,2,3,7,8,9];
|
||
const x = i => 4 + sslots[i] * (w - 8) / 9;
|
||
const y = v => h - 6 - (v - min) * (h - 12) / (max - min);
|
||
const seg = idx => idx.map((i, k) => (k ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(vals[i]).toFixed(1)).join(' ');
|
||
svg.innerHTML = `<path d="${seg([0,1,2,3])}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
|
||
+ `<path d="${seg([4,5,6])}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
|
||
+ `<circle cx="${x(6)}" cy="${y(vals[6])}" r="3.5" fill="${color}"/>`;
|
||
});
|
||
|
||
/* ---- Trend chart (metric-driven) ----
|
||
Tests were cancelled 2019/20-2020/21; lines always break across that band.
|
||
Nulls elsewhere are dataset gaps (no school-level 2021/22 rows; no
|
||
subject-level 2022/23 rows) and break the lines honestly. England figures
|
||
are official DfE (fact_ks2_national_averages); 2015/16 not loaded yet. */
|
||
const years = ['2015/16','2016/17','2017/18','2018/19','2021/22','2022/23','2023/24','2024/25'];
|
||
const METRICS = {
|
||
rwm: {
|
||
label: 'Reading, writing & maths - expected standard',
|
||
school: { Barclay: [52,76,65,87,null,87,75,87], Elmhurst: [80,81,86,88,null,88,88,92], Plumcroft: [58,64,57,69,null,62,72,79] },
|
||
england: [null,61.1,64.3,64.9,58.7,59.5,60.6,62.1],
|
||
},
|
||
reading: {
|
||
label: 'Reading - expected standard',
|
||
school: { Barclay: [57,84,76,87,null,null,79,91], Elmhurst: [88,91,92,91,null,null,92,92], Plumcroft: [59,68,72,79,null,null,82,87] },
|
||
england: [null,71.6,75.3,73.2,74.6,72.8,74.4,75.0],
|
||
},
|
||
maths: {
|
||
label: 'Maths - expected standard',
|
||
school: { Barclay: [81,82,74,90,null,null,88,91], Elmhurst: [96,89,97,97,null,null,96,95], Plumcroft: [80,80,69,90,null,null,84,84] },
|
||
england: [null,74.8,75.5,78.7,71.5,73.0,73.2,74.0],
|
||
},
|
||
};
|
||
const schoolColor = { Barclay: () => css('--s1'), Elmhurst: () => css('--s2'), Plumcroft: () => css('--s3') };
|
||
|
||
const svg = document.getElementById('trendchart');
|
||
const W = 880, H = 300, L = 44, R = 48, T = 18, B = 40;
|
||
// x positions honour real time: 2019/20 and 2020/21 (cancelled tests) sit between slots 3 and 6
|
||
const slots = [0,1,2,3,6,7,8,9]; const maxSlot = 9;
|
||
const X = i => L + slots[i] * (W - L - R) / maxSlot;
|
||
const Y = v => T + (100 - v) * (H - T - B) / 60; // domain 40..100
|
||
|
||
// Contiguous non-null runs, additionally split across the covid band (between indices 3 and 4)
|
||
function runs(vals) {
|
||
const out = []; let cur = [];
|
||
vals.forEach((v, i) => {
|
||
if (v == null) { if (cur.length) out.push(cur); cur = []; return; }
|
||
if (i === 4 && cur.length && cur[cur.length - 1] === 3) { out.push(cur); cur = []; }
|
||
cur.push(i);
|
||
});
|
||
if (cur.length) out.push(cur);
|
||
return out;
|
||
}
|
||
|
||
function renderChart(key) {
|
||
const m = METRICS[key];
|
||
const ink3 = css('--ink-3'), border = css('--border');
|
||
let g = '';
|
||
const bx1 = X(3) + 14, bx2 = X(4) - 14;
|
||
g += `<rect class="covid" x="${bx1}" y="${T}" width="${bx2 - bx1}" height="${H - T - B}" rx="4"/>`;
|
||
g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 16}" text-anchor="middle">tests cancelled</text>`;
|
||
g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 30}" text-anchor="middle">2019/20-2020/21</text>`;
|
||
for (let v = 40; v <= 100; v += 20) {
|
||
g += `<line x1="${L}" y1="${Y(v)}" x2="${W - R}" y2="${Y(v)}" stroke="${border}" stroke-width="1"/>`;
|
||
g += `<text x="${L - 8}" y="${Y(v) + 4}" text-anchor="end" font-size="11" fill="${ink3}">${v}%</text>`;
|
||
}
|
||
years.forEach((yr, i) => {
|
||
g += `<text x="${X(i)}" y="${H - B + 20}" text-anchor="middle" font-size="11" fill="${ink3}">${yr}</text>`;
|
||
});
|
||
const path = (vals, idx) => idx.map((i, k) => (k ? 'L' : 'M') + X(i) + ' ' + Y(vals[i])).join(' ');
|
||
runs(m.england).forEach(idx => {
|
||
if (idx.length > 1) g += `<path d="${path(m.england, idx)}" fill="none" stroke="${ink3}" stroke-width="1.5" stroke-dasharray="5 4"/>`;
|
||
else g += `<circle cx="${X(idx[0])}" cy="${Y(m.england[idx[0]])}" r="2.5" fill="${ink3}"><title>England ${years[idx[0]]}: ${Math.round(m.england[idx[0]])}%</title></circle>`;
|
||
});
|
||
Object.entries(m.school).forEach(([name, vals]) => {
|
||
const color = schoolColor[name]();
|
||
runs(vals).forEach(idx => {
|
||
if (idx.length > 1) g += `<path d="${path(vals, idx)}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`;
|
||
});
|
||
vals.forEach((v, i) => {
|
||
if (v == null) return;
|
||
g += `<circle cx="${X(i)}" cy="${Y(v)}" r="3.5" fill="${color}" stroke="${css('--card')}" stroke-width="1.5"><title>${name} ${years[i]}: ${v}%</title></circle>`;
|
||
});
|
||
});
|
||
// End labels, pushed apart when schools finish close together
|
||
const ends = Object.entries(m.school)
|
||
.map(([name, vals]) => ({ v: vals[vals.length - 1], i: vals.length - 1 }))
|
||
.filter(e => e.v != null)
|
||
.sort((a, b) => a.v - b.v);
|
||
let prevY = Infinity;
|
||
ends.forEach(e => {
|
||
let y = Y(e.v) + 4;
|
||
if (prevY - y < 13) y = prevY - 13;
|
||
prevY = y;
|
||
g += `<text x="${X(e.i) + 8}" y="${y}" font-size="11" font-weight="600" fill="${ink3}">${e.v}%</text>`;
|
||
});
|
||
svg.innerHTML = g;
|
||
svg.setAttribute('aria-label', `Line chart: ${m.label} by year for three schools and England average`);
|
||
document.getElementById('trend-legend').innerHTML =
|
||
Object.keys(m.school).map(name => `<span class="li"><span class="sw" style="background:${schoolColor[name]()}"></span>${name}</span>`).join('')
|
||
+ `<span class="li"><span class="sw" style="background:none;border-top:2px dashed ${ink3};border-radius:0;height:0"></span>England average</span>`;
|
||
}
|
||
renderChart('rwm');
|
||
document.getElementById('metric-select').addEventListener('change', e => renderChart(e.target.value));
|
||
|
||
// Re-render on theme change so series colors pick up dark-mode tokens
|
||
const rerender = () => location.reload();
|
||
new MutationObserver(muts => { if (muts.some(m => m.attributeName === 'data-theme')) rerender(); })
|
||
.observe(document.documentElement, { attributes: true });
|
||
})();
|
||
</script>
|