Making adjustments to branding to reflect new domain

backend/app.py

@@ -1,6 +1,6 @@
 """
-Primary School Performance Comparison API
+SchoolCompare.co.uk API
-Serves primary school (KS2) performance data for Wandsworth and Merton.
+Serves primary school (KS2) performance data for comparing schools.
 Uses real data from UK Government Compare School Performance downloads.
 """
 
@@ -23,8 +23,8 @@ LA_CODES = {
 ALLOWED_LA_CODES = list(LA_CODES.keys())
 
 app = FastAPI(
-    title="Primary School Performance API - Wandsworth & Merton",
+    title="SchoolCompare API",
-    description="API for comparing primary school (KS2) performance data in Wandsworth and Merton",
+    description="API for comparing primary school (KS2) performance data - schoolcompare.co.uk",
     version="1.0.0"
 )
 

frontend/app.js

@@ -1,6 +1,6 @@
 /**
- * School Performance Compass - Frontend Application
+ * SchoolCompare.co.uk - Frontend Application
- * Interactive UK School Data Visualization
+ * Interactive UK Primary School Performance Comparison
  */
 
 const API_BASE = '';
@@ -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 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];
         
         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;

frontend/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Primary School Compass | Wandsworth & Merton</title>
+    <title>SchoolCompare | Compare Primary School Performance</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
@@ -24,8 +24,8 @@
                     </svg>
                 </div>
                 <div class="logo-text">
-                    <span class="logo-title">Primary School Compass</span>
+                    <span class="logo-title">SchoolCompare</span>
-                    <span class="logo-subtitle">Wandsworth & Merton</span>
+                    <span class="logo-subtitle">schoolcompare.co.uk</span>
                 </div>
             </div>
             <nav class="nav">
@@ -40,8 +40,8 @@
         <!-- Dashboard View -->
         <section id="dashboard-view" class="view active">
             <div class="hero">
-                <h1 class="hero-title">Primary Schools in Wandsworth & Merton</h1>
+                <h1 class="hero-title">Compare Primary School Performance</h1>
-                <p class="hero-subtitle">Compare KS2 performance data from the last 5 years across local primary schools</p>
+                <p class="hero-subtitle">Explore and compare KS2 results across Wandsworth & Merton primary schools</p>
             </div>
 
             <div class="search-section">
@@ -170,7 +170,7 @@
         <section id="rankings-view" class="view">
             <div class="rankings-header">
                 <h2 class="section-title">Primary School Rankings</h2>
-                <p class="section-subtitle">Top performing schools in Wandsworth & Merton by KS2 metric</p>
+                <p class="section-subtitle">Top performing primary schools ranked by KS2 metric</p>
             </div>
 
             <div class="rankings-controls">

frontend/styles.css

@@ -1,5 +1,5 @@
 /* 
- * School Performance Compass
+ * SchoolCompare.co.uk
  * A warm, editorial design inspired by quality publications
  */