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

Making adjustments to compare view

Browse Source
This commit is contained in:
Tudor Sitaru
2026-01-06 15:37:07 +00:00
parent 1433b6e727
commit a26d91426c
2 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/.DS_Store vendored
View File

Binary file not shown.

40
frontend/app.js
View File

@@ -468,12 +468,21 @@ async function updateComparisonChart() {
} }
function updateComparisonTable(comparison, metric, years) { function updateComparisonTable(comparison, metric, years) {
// Build header const firstYear = years[0];
const lastYear = years[years.length - 1];
const prevYear = years.length > 1 ? years[years.length - 2] : null;
// Build header with explicit year ranges
let headerHtml = '<th>School</th>'; let headerHtml = '<th>School</th>';
years.forEach(year => { years.forEach(year => {
headerHtml += `<th>${year}</th>`; headerHtml += `<th>${year}</th>`;
}); });
headerHtml += '<th>Change</th>'; if (prevYear && prevYear !== firstYear) {
headerHtml += `<th title="Change from ${prevYear} to ${lastYear}">Δ 1yr</th>`;
}
if (years.length > 1) {
headerHtml += `<th title="Change from ${firstYear} to ${lastYear}">Δ ${firstYear}→${lastYear}</th>`;
}
elements.tableHeader.innerHTML = headerHtml; elements.tableHeader.innerHTML = headerHtml;
// Build body - iterate in same order as selectedSchools for color consistency // Build body - iterate in same order as selectedSchools for color consistency
@@ -487,19 +496,34 @@ function updateComparisonTable(comparison, metric, years) {
yearlyMap[d.year] = d[metric]; yearlyMap[d.year] = d[metric];
}); });
const firstValue = yearlyMap[years[0]]; const firstValue = yearlyMap[firstYear];
const lastValue = yearlyMap[years[years.length - 1]]; const lastValue = yearlyMap[lastYear];
const change = firstValue && lastValue ? (lastValue - firstValue).toFixed(2) : 'N/A'; const prevValue = prevYear ? yearlyMap[prevYear] : null;
const changeClass = parseFloat(change) >= 0 ? 'positive' : 'negative';
// Calculate 1-year change
const oneYearChange = prevValue != null && lastValue != null ? (lastValue - prevValue) : null;
const oneYearChangeStr = oneYearChange !== null ? oneYearChange.toFixed(1) : 'N/A';
const oneYearClass = oneYearChange !== null ? (oneYearChange >= 0 ? 'positive' : 'negative') : '';
// Calculate total change
const totalChange = firstValue != null && lastValue != null ? (lastValue - firstValue) : null;
const totalChangeStr = totalChange !== null ? totalChange.toFixed(1) : 'N/A';
const totalChangeClass = totalChange !== null ? (totalChange >= 0 ? 'positive' : 'negative') : '';
const color = CHART_COLORS[index % CHART_COLORS.length]; const color = CHART_COLORS[index % CHART_COLORS.length];
bodyHtml += `<tr>`; bodyHtml += `<tr>`;
bodyHtml += `<td><strong style="border-left: 3px solid ${color}; padding-left: 8px;">${escapeHtml(schoolData.school_info.school_name)}</strong></td>`; bodyHtml += `<td><strong style="border-left: 3px solid ${color}; padding-left: 8px;">${escapeHtml(schoolData.school_info.school_name)}</strong></td>`;
years.forEach(year => { years.forEach(year => {
const value = yearlyMap[year]; const value = yearlyMap[year];
bodyHtml += `<td>${value !== undefined ? formatMetricValue(value, metric) : '-'}</td>`; bodyHtml += `<td>${value != null ? formatMetricValue(value, metric) : '-'}</td>`;
}); });
bodyHtml += `<td class="${changeClass}">${change !== 'N/A' ? (parseFloat(change) >= 0 ? '+' : '') + change : change}</td>`; if (prevYear && prevYear !== firstYear) {
bodyHtml += `<td class="${oneYearClass}">${oneYearChangeStr !== 'N/A' ? (oneYearChange >= 0 ? '+' : '') + oneYearChangeStr : oneYearChangeStr}</td>`;
}
if (years.length > 1) {
bodyHtml += `<td class="${totalChangeClass}">${totalChangeStr !== 'N/A' ? (totalChange >= 0 ? '+' : '') + totalChangeStr : totalChangeStr}</td>`;
}
bodyHtml += `</tr>`; bodyHtml += `</tr>`;
}); });
elements.tableBody.innerHTML = bodyHtml; elements.tableBody.innerHTML = bodyHtml;