fix(admissions): stop 100% trend point being clipped at chart top
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 50s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

A first-choice offer rate sitting on the y-max ceiling (100%) was drawn
flush against the top of the plot area, clipping the point marker. Add 8px
top layout padding and clip:false so ceiling values render in full, without
introducing a misleading >100% tick.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-06-19 22:32:09 +01:00
co-authored by Claude Opus 4.8
parent 81f80a01f4
commit 2de1c4e766
2 changed files with 6 additions and 1 deletions
+2 -1
View File
@@ -50,7 +50,7 @@
new Chart(document.getElementById('c'),{ new Chart(document.getElementById('c'),{
type:'line', type:'line',
data:{labels,datasets:[{ data:{labels,datasets:[{
label:'First-choice offer rate',data:values, label:'First-choice offer rate',data:values,clip:false,
borderColor:'#e07256',backgroundColor:'rgba(224,114,86,0.10)', borderColor:'#e07256',backgroundColor:'rgba(224,114,86,0.10)',
borderWidth:2.5,tension:0.3,fill:true, borderWidth:2.5,tension:0.3,fill:true,
pointRadius:values.map((_,i)=>i===lastIdx?5:3), pointRadius:values.map((_,i)=>i===lastIdx?5:3),
@@ -59,6 +59,7 @@
}]}, }]},
options:{ options:{
responsive:true,maintainAspectRatio:false, responsive:true,maintainAspectRatio:false,
layout:{padding:{top:8}},
interaction:{mode:'index',intersect:false}, interaction:{mode:'index',intersect:false},
plugins:{legend:{display:false},title:{display:false}, plugins:{legend:{display:false},title:{display:false},
tooltip:{backgroundColor:'rgba(26,22,18,0.92)',padding:10,callbacks:{label:ctx=>`First-choice offers: ${Math.round(ctx.parsed.y)}%`}}}, tooltip:{backgroundColor:'rgba(26,22,18,0.92)',padding:10,callbacks:{label:ctx=>`First-choice offers: ${Math.round(ctx.parsed.y)}%`}}},
@@ -32,6 +32,9 @@ export default function AdmissionsTrendChart({ history }: { history: SchoolAdmis
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
interaction: { mode: 'index', intersect: false }, interaction: { mode: 'index', intersect: false },
// Headroom so a point sitting on the y-max ceiling (e.g. 100%) isn't
// clipped by the top of the plot area.
layout: { padding: { top: 8 } },
plugins: { plugins: {
legend: { display: false }, legend: { display: false },
title: { display: false }, title: { display: false },
@@ -65,6 +68,7 @@ export default function AdmissionsTrendChart({ history }: { history: SchoolAdmis
{ {
label: 'First-choice offer rate', label: 'First-choice offer rate',
data: values, data: values,
clip: false as const,
borderColor: '#e07256', borderColor: '#e07256',
backgroundColor: 'rgba(224,114,86,0.10)', backgroundColor: 'rgba(224,114,86,0.10)',
borderWidth: 2.5, borderWidth: 2.5,