From a26d91426c13d80fbf40d922f02984556a2bc713 Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 6 Jan 2026 15:37:07 +0000
Subject: [PATCH] Making adjustments to compare view

---
 data/.DS_Store  | Bin 10244 -> 10244 bytes
 frontend/app.js |  40 ++++++++++++++++++++++++++++++++--------
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/data/.DS_Store b/data/.DS_Store
index 5670e834970d0a8f365ad65668b4679f68eee559..17b803438b757cdc00811e1a474ff983ef7df7fe 100644
GIT binary patch
delta 709
zcmXYvOK1~89LDEcqwG3pCh5awx{YAem^KuPkJkEVVjH2<nph)NTdPTTi;H>GY-+7a
zgVK|)%N`V^Aov1B5sHd}Xb*yT@Kn*BL~nu@K?~|ZC)u6D!1w)U=9~HbXDTt3c&z%s
ztp?wWtE!q(YmGNllC~?#oSS*Pbw1Af$I`}$F{3!a0<v6j8~mIOYN?{$o7apHL)X|7
z*<QcO&-p;P(pk{OtT`Lj202Zd#%Z0UoP|wcN|VQpoW@KiYJCgk`!lJuo?#_Tv4b{k
zru@K3y<i&o9P4q+_N|on59hO4Jy$e62s?I1g!7?t^zM{djF0L$ajjV=zbnT1A@f+O
zpvT8^dV#%l{BGeNVeU$$ye*~~#e6|tX{Yy!#~du57}d1OQ@qUM=6yVAO;)v8Tl}r1
zH{?B;C!fhT@`Egp-{cSZ3m2Bb4F(T5f(W4zP1uMCqS%QZB+!R_Na8Tk(4b=kd5mEk
zr!ax@xPVKzj4QZ`o4AGBxPwP{iC1`yS-isse8eZr<12pR7Z&huxui%-B`Q@*HPQ;H
z&Z<=hq0X490_%HCxI|aWOjFq6Inl*>HAq9UV91u(GORYsqHRp7NZO)qP(*XsB3p*l
zRz+s8MLXT5h&C~oEjwsb@rWP7NJXn%>MmK3X0jY0&Im*r39%ye-PWkTc3>Tv(S{x9
z5Cl3A!yd%3S8ym(7{XDcFpLbcg2X5aID@m8L<#2vjf;XunZ`9-#|=#5F7Dwz9^fIK
O;u)Uf#mpCfK=}`tq^Z0B

delta 748
zcmXw%OH30{6o%&?dED_XdfQ-gOQBUU5Tr4nLVN^7O2Y!Q6-q!raA1Zw5vI@?P&B4K
z(1lSqvrwZhB__Tl8lx+AMxzTuOibMPh$}am$i{`<nZeE6{QsHr-;?j$`OJLgQAGsY
zsf;WZ(J~r#eyrn#0YlSG+ZZ?Wyb_d~m8_{w>dOHZ4Dkq$5>`d}XGV?b8N;6QTpHu+
z750=2X{xR7%V}<>=Kmk#n+O?n{bXJjU*D!RyjEc<$y&w<KbR)y7KK?#_NZYNR(l)h
zHo`QecS0T2C;Yf3x`VJzrEgZxTSm_G&E2$_1d&ks$8wXCVsOj1TX`E{OJvx+yi2w0
z^ptM?A1lQ>2zx~atRre(PaiY&yx)`JorH9Zuz*)^yHc8A=T@sRo+jj=o3~ffL{x|c
z0|&Y}A7RWeXAN7m#Y{con6cP<LY#)^P~n60N%}7RlzvISr4{K9icpMF5Cl<<C@K*{
z9k!zpO=v?Wy09N<WN`??I1Clz$YBb3SeV0EoWprsz!hA@HQc~W+{Obu#A7_c5?<pC
z-r^lT;tRgw8&>dFmSn7zsaz)4$hGojCtNXv_@Y&zprqF@HT}3#AL0d8>arutJW?Lr
zu#v`Dv0(1Y>KY+S1aDu~CE{@=i#_|Yz9CN88nH#i>upR3iB++47p1I7?9;Ec>=9CO
zpOUYW?IOutj)1f^+UHEg!h_XF2na1`MH1~u2@n}{qsN0WB2bKC3==Q~j%fkpBu=4#
k(>Q~RxP;3dl<OXpTUfvy+{HcI$1^;~3%p$X9II0P0f+CnUjP6A

diff --git a/frontend/app.js b/frontend/app.js
index 7a99e7b..776f0a9 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -468,12 +468,21 @@ async function updateComparisonChart() {
 }
 
 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>';
     years.forEach(year => {
         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;
     
     // 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];
         });
         
-        const firstValue = yearlyMap[years[0]];
-        const lastValue = yearlyMap[years[years.length - 1]];
-        const change = firstValue && lastValue ? (lastValue - firstValue).toFixed(2) : 'N/A';
-        const changeClass = parseFloat(change) >= 0 ? 'positive' : 'negative';
+        const firstValue = yearlyMap[firstYear];
+        const lastValue = yearlyMap[lastYear];
+        const prevValue = prevYear ? yearlyMap[prevYear] : null;
+        
+        // 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];
         
         bodyHtml += `<tr>`;
         bodyHtml += `<td><strong style="border-left: 3px solid ${color}; padding-left: 8px;">${escapeHtml(schoolData.school_info.school_name)}</strong></td>`;
         years.forEach(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>`;
     });
     elements.tableBody.innerHTML = bodyHtml;