tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add higher standard display and trend indicators to school cards
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 57s
Details

Browse Source 
- Display RWM Higher % alongside RWM Expected % on school cards
- Add trend indicators (up/down/stable arrows) showing year-over-year change
- Backend calculates previous year's RWM for trend comparison
- Trend appears on cards and in school detail modal

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-01-09 14:36:01 +00:00
parent e3fc031ecf
commit 79cf16d6b3
3 changed files with 79 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/app.js
View File

@@ -519,9 +519,16 @@ function renderFeaturedSchools(schools) {
${ageRange ? `<div class="school-details">${ageRange}</div>` : ""}
<div class="school-stats">
<div class="stat">
<div class="stat-value">${formatMetricValue(school.rwm_expected_pct, "rwm_expected_pct")}</div>
<div class="stat-value">
${formatMetricValue(school.rwm_expected_pct, "rwm_expected_pct")}
${getTrendIndicator(school.rwm_expected_pct, school.prev_rwm_expected_pct)}
</div>
<div class="stat-label">RWM Expected</div>
</div>
<div class="stat">
<div class="stat-value">${formatMetricValue(school.rwm_high_pct, "rwm_high_pct")}</div>
<div class="stat-label">RWM Higher</div>
</div>
<div class="stat">
<div class="stat-value">${school.total_pupils || "-"}</div>
<div class="stat-label">Pupils</div>
@@ -617,6 +624,28 @@ function formatMetricValue(value, metric) {
return value.toFixed(1);
}
/**
* Calculate trend indicator based on current and previous year values
* Returns HTML for trend arrow with class
*/
function getTrendIndicator(current, previous) {
if (current === null || current === undefined ||
previous === null || previous === undefined) {
return "";
}
const diff = current - previous;
const threshold = 2; // Minimum % change to show trend
if (diff >= threshold) {
return `<span class="trend-indicator trend-up" title="Up ${diff.toFixed(0)}% from last year">&#9650;</span>`;
} else if (diff <= -threshold) {
return `<span class="trend-indicator trend-down" title="Down ${Math.abs(diff).toFixed(0)}% from last year">&#9660;</span>`;
} else {
return `<span class="trend-indicator trend-stable" title="Stable (${diff >= 0 ? '+' : ''}${diff.toFixed(0)}%)">&#9644;</span>`;
}
}
// =============================================================================
// MAP FUNCTIONS
// =============================================================================
@@ -806,9 +835,16 @@ function renderSchools(schools) {
${ageRange ? `<div class="school-details">${ageRange}</div>` : ""}
<div class="school-stats">
<div class="stat">
<div class="stat-value">${formatMetricValue(school.rwm_expected_pct, "rwm_expected_pct")}</div>
<div class="stat-value">
${formatMetricValue(school.rwm_expected_pct, "rwm_expected_pct")}
${getTrendIndicator(school.rwm_expected_pct, school.prev_rwm_expected_pct)}
</div>
<div class="stat-label">RWM Expected</div>
</div>
<div class="stat">
<div class="stat-value">${formatMetricValue(school.rwm_high_pct, "rwm_high_pct")}</div>
<div class="stat-label">RWM Higher</div>
</div>
<div class="stat">
<div class="stat-value">${school.total_pupils || "-"}</div>
<div class="stat-label">Pupils</div>
@@ -1212,12 +1248,17 @@ async function openSchoolModal(urn) {
const latest =
sortedData.find((d) => d.rwm_expected_pct !== null) || sortedData[0];
// Get previous year for trend calculation
const latestIndex = sortedData.indexOf(latest);
const previous = sortedData[latestIndex + 1] || null;
const prevRwm = previous?.rwm_expected_pct;
elements.modalStats.innerHTML = `
<div class="modal-stats-section">
<h4>KS2 Results (${latest.year})</h4>
<div class="modal-stats-grid">
<div class="modal-stat">
<div class="modal-stat-value">${formatMetricValue(latest.rwm_expected_pct, "rwm_expected_pct")}</div>
<div class="modal-stat-value">${formatMetricValue(latest.rwm_expected_pct, "rwm_expected_pct")} ${getTrendIndicator(latest.rwm_expected_pct, prevRwm)}</div>
<div class="modal-stat-label">RWM Expected</div>
</div>
<div class="modal-stat">