fix(admissions): render trend with Chart.js instead of scaled SVG

The hand-rolled SVG sparkline used px font sizes inside a 520-wide viewBox
that stretched to the full card width, so labels ballooned ~4x and collided —
and with 10+ years of real data the per-point labels and year ticks
overlapped badly, while the oversized chart stretched the "this year" view.

Replace it with a Chart.js line chart (AdmissionsTrendChart) in a fixed
200px wrapper, matching PerformanceChart: responsive px fonts, auto-skipping
x ticks, auto-scaled y-axis clamped to 0-100, emphasised latest point.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-06-19 18:59:57 +01:00
co-authored by Claude Opus 4.8
parent 4de7e559e9
commit 368b9f2b59
5 changed files with 172 additions and 100 deletions
@@ -0,0 +1,10 @@
.wrapper {
width: 100%;
height: 200px;
}
@media (max-width: 640px) {
.wrapper {
height: 180px;
}
}