70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
|
/**
|
||
|
|
* CutoffDistanceDetail — the full year-by-year cut-off story.
|
||
|
|
*
|
||
|
|
* Chart, table, map and postcode check, in that order: the shape of the trend,
|
||
|
|
* then what happened in each year, then the same numbers over real streets,
|
||
|
|
* then the reader's own address measured against them.
|
||
|
|
*
|
||
|
|
* Shared by both templates because the content is identical, but placed
|
||
|
|
* differently by each. The primary page has a segmented control and gives this
|
||
|
|
* its own "Distance" tab; the secondary page is one flat panel by design, so it
|
||
|
|
* renders inline beneath the metric cards. Extracting it keeps the caveats and
|
||
|
|
* the ordering from drifting apart between the two.
|
||
|
|
*
|
||
|
|
* Server component — the map and postcode form are the only client parts, and
|
||
|
|
* they carry their own boundary.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import type { School } from '@/lib/types';
|
||
|
|
import { sectionStyles as styles } from './sectionShared';
|
||
|
|
import { CutoffTrendChart } from './charts';
|
||
|
|
import { CutoffYearTable } from './CutoffYearTable';
|
||
|
|
import { CutoffMapPanel } from './CutoffMapPanel';
|
||
|
|
import {
|
||
|
|
cutoffTrendSummary, cutoffCoverageNote,
|
||
|
|
CUTOFF_NOTE, CUTOFF_MEASUREMENT_NOTE,
|
||
|
|
type CutoffYearRow,
|
||
|
|
} from './lastDistanceOffered';
|
||
|
|
|
||
|
|
export function CutoffDistanceDetail({
|
||
|
|
rows,
|
||
|
|
schoolInfo,
|
||
|
|
/** Repeat the "not a catchment" caveat here. On the primary page this view is
|
||
|
|
* behind a tab, so a reader can reach it without ever seeing the tile that
|
||
|
|
* carries the caveat; on the secondary page the caveat is already directly
|
||
|
|
* above, and repeating it verbatim reads as a stutter. */
|
||
|
|
showCaveat = true,
|
||
|
|
}: {
|
||
|
|
rows: CutoffYearRow[];
|
||
|
|
schoolInfo: School;
|
||
|
|
showCaveat?: boolean;
|
||
|
|
}) {
|
||
|
|
const publishedYears = rows.filter((r) => r.status === 'published').length;
|
||
|
|
if (publishedYears < 2) return null;
|
||
|
|
|
||
|
|
const trendSummary = cutoffTrendSummary(rows);
|
||
|
|
const coverageNote = cutoffCoverageNote(rows);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className={styles.admissionsChartCap}>Last distance offered, by year</div>
|
||
|
|
<CutoffTrendChart rows={rows} />
|
||
|
|
<p className={styles.cutoffChartKey}>
|
||
|
|
The line breaks where no figure was published — it is never drawn across
|
||
|
|
a gap. The table below says what happened in each of those years.
|
||
|
|
</p>
|
||
|
|
{trendSummary && <p className={styles.admissionsTrendSummary}>{trendSummary}</p>}
|
||
|
|
|
||
|
|
<CutoffYearTable rows={rows} />
|
||
|
|
{coverageNote && <p className={styles.cutoffChartKey}>{coverageNote}</p>}
|
||
|
|
|
||
|
|
<CutoffMapPanel schoolInfo={schoolInfo} rows={rows} />
|
||
|
|
|
||
|
|
{showCaveat && (
|
||
|
|
<p className={styles.admissionsDistanceNote}>
|
||
|
|
{CUTOFF_NOTE} {CUTOFF_MEASUREMENT_NOTE}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|