Files
school_compare/nextjs-app/app/rankings/page.tsx
T
TudorandClaude Fable 5 29f79fe948
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 48s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 13s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
feat(rankings,metrics): score visible on phones; definitions usable everywhere (P2.2, P2.3)
Rankings mobile: the metric value — the point of the page — sat behind
a sideways swipe at 390px. The Area column now folds into a subline
under the school name, leaving Rank | School | Value to fit the
viewport with no horizontal scroll.

Rankings default metric becomes 'expected standard' (rwm_expected_pct);
'higher standard' stays available but no longer frames every school's
headline number in the terms parents least understand.

MetricTooltip was hover-only and display:none on phones — the mobile-
primary audience had zero access to the Attainment 8 / Progress 8 /
EBacc definitions. It is now a real button: tap/click/keyboard
toggleable with outside-click and Escape dismissal, 24px target,
shown at all viewports.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 21:34:07 +01:00

80 lines
2.4 KiB
TypeScript

/**
* Rankings Page (SSR)
* Display top-ranked schools by various metrics
*/
import { fetchRankings, fetchFilters, fetchMetrics } from '@/lib/api';
import { RankingsView } from '@/components/RankingsView';
import type { Metadata } from 'next';
interface RankingsPageProps {
searchParams: Promise<{
metric?: string;
local_authority?: string;
year?: string;
phase?: string;
}>;
}
export const metadata: Metadata = {
title: 'School Rankings',
description: 'Top-ranked schools by SATs and GCSE performance across England',
keywords: 'school rankings, top schools, best schools, KS2 rankings, KS4 rankings, school league tables',
};
// Dynamic via searchParams; remove force-dynamic so internal data fetches
// can still use Next.js's per-call revalidate cache.
export default async function RankingsPage({ searchParams }: RankingsPageProps) {
const { metric: metricParam, local_authority, year: yearParam, phase: phaseParam } = await searchParams;
const phase = phaseParam || 'primary';
const metric = metricParam || (phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct');
const year = yearParam ? parseInt(yearParam) : undefined;
// Fetch rankings data with error handling
try {
const [rankingsResponse, filtersResponse, metricsResponse] = await Promise.all([
fetchRankings({
metric,
local_authority,
year,
limit: 100,
phase,
}),
fetchFilters(),
fetchMetrics(),
]);
// Metrics is already an array
const metricsArray = metricsResponse?.metrics || [];
return (
<RankingsView
rankings={rankingsResponse?.rankings || []}
filters={filtersResponse || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
metrics={metricsArray}
selectedMetric={metric}
selectedArea={local_authority}
selectedYear={year}
selectedPhase={phase}
/>
);
} catch (error) {
console.error('Error fetching data for rankings page:', error);
// Return error state with empty data
return (
<RankingsView
rankings={[]}
filters={{ local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
metrics={[]}
selectedMetric={metric}
selectedArea={local_authority}
selectedYear={year}
selectedPhase={phase}
/>
);
}
}