75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
|
/**
|
||
|
|
* SecondaryHistorySection — results over time. Secondary pages.
|
||
|
|
* Server component.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import dynamic from 'next/dynamic';
|
||
|
|
import type { School, SchoolResult, NationalAverages } from '@/lib/types';
|
||
|
|
import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
|
||
|
|
import { Section, sectionStyles as styles } from './sectionShared';
|
||
|
|
|
||
|
|
const PerformanceChart = dynamic(
|
||
|
|
() => import('../PerformanceChart').then((m) => m.PerformanceChart),
|
||
|
|
{ ssr: false },
|
||
|
|
);
|
||
|
|
|
||
|
|
export function SecondaryHistorySection({
|
||
|
|
yearlyData, schoolInfo, nationalAvg, secondaryAvg, suppressComparison,
|
||
|
|
}: {
|
||
|
|
yearlyData: SchoolResult[];
|
||
|
|
schoolInfo: School;
|
||
|
|
nationalAvg: NationalAverages | null;
|
||
|
|
secondaryAvg: Record<string, number>;
|
||
|
|
suppressComparison: boolean;
|
||
|
|
}) {
|
||
|
|
// National Attainment 8 baseline for the "Results Over Time" chart.
|
||
|
|
const heroAtt8Nat = secondaryAvg.attainment_8_score ?? null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="history" className={styles.card}>
|
||
|
|
<h2 className={styles.sectionTitle}>Historical Results</h2>
|
||
|
|
{yearlyData.length > 0 && (
|
||
|
|
<>
|
||
|
|
<h3 className={styles.subSectionTitle} style={{ marginTop: '1.25rem' }}>Results Over Time</h3>
|
||
|
|
<div className={styles.chartContainer}>
|
||
|
|
<PerformanceChart
|
||
|
|
data={yearlyData}
|
||
|
|
schoolName={schoolInfo.school_name}
|
||
|
|
isSecondary={true}
|
||
|
|
nationalAtt8Avg={suppressComparison ? null : heroAtt8Nat}
|
||
|
|
nationalByYear={suppressComparison ? undefined : nationalAvg?.by_year}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<details className={styles.historyDisclosure}>
|
||
|
|
<summary className={styles.historyToggle}>View raw year-by-year data</summary>
|
||
|
|
<div className={styles.tableWrapper}>
|
||
|
|
<table className={styles.dataTable}>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Year</th>
|
||
|
|
<th>Attainment 8</th>
|
||
|
|
<th>Progress 8</th>
|
||
|
|
<th>Eng & Maths 4+</th>
|
||
|
|
<th>EBacc entry %</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{yearlyData.map((result) => (
|
||
|
|
<tr key={result.year}>
|
||
|
|
<td className={styles.yearCell}>{formatAcademicYear(result.year)}</td>
|
||
|
|
<td>{result.attainment_8_score != null ? result.attainment_8_score.toFixed(1) : '-'}</td>
|
||
|
|
<td>{result.progress_8_score != null ? formatProgress(result.progress_8_score) : '-'}</td>
|
||
|
|
<td>{result.english_maths_standard_pass_pct != null ? formatPercentage(result.english_maths_standard_pass_pct) : '-'}</td>
|
||
|
|
<td>{result.ebacc_entry_pct != null ? formatPercentage(result.ebacc_entry_pct) : '-'}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|