52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
|
/**
|
||
|
|
* SchoolLifeSection — absence figures. Primary pages only; the secondary page
|
||
|
|
* carries the equivalent content inside WellbeingSection.
|
||
|
|
*
|
||
|
|
* Server component.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import type { AbsenceData } from '@/lib/types';
|
||
|
|
import { formatPercentage } from '@/lib/utils';
|
||
|
|
import { MetricTooltip } from '../MetricTooltip';
|
||
|
|
import { Section, sectionStyles as styles } from './sectionShared';
|
||
|
|
|
||
|
|
export function SchoolLifeSection({
|
||
|
|
absenceData,
|
||
|
|
primaryAvg,
|
||
|
|
}: {
|
||
|
|
absenceData: AbsenceData | null;
|
||
|
|
primaryAvg: Record<string, number>;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<Section id="school-life">
|
||
|
|
<h2 className={styles.sectionTitle}>School Life</h2>
|
||
|
|
<div className={styles.metricsGrid}>
|
||
|
|
{absenceData?.overall_absence_rate != null && (
|
||
|
|
<div className={styles.metricCard}>
|
||
|
|
<div className={styles.metricLabel}>
|
||
|
|
Days missed (overall absence)
|
||
|
|
<MetricTooltip metricKey="overall_absence_pct" />
|
||
|
|
</div>
|
||
|
|
<div className={styles.metricValue}>{formatPercentage(absenceData.overall_absence_rate)}</div>
|
||
|
|
{primaryAvg.overall_absence_pct != null && (
|
||
|
|
<div className={styles.metricHint}>England avg: ~{primaryAvg.overall_absence_pct.toFixed(1)}%</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{absenceData?.persistent_absence_rate != null && (
|
||
|
|
<div className={styles.metricCard}>
|
||
|
|
<div className={styles.metricLabel}>
|
||
|
|
Regularly missing school
|
||
|
|
<MetricTooltip metricKey="persistent_absence_pct" />
|
||
|
|
</div>
|
||
|
|
<div className={styles.metricValue}>{formatPercentage(absenceData.persistent_absence_rate)}</div>
|
||
|
|
{primaryAvg.persistent_absence_pct != null && (
|
||
|
|
<div className={styles.metricHint}>England avg: ~{primaryAvg.persistent_absence_pct.toFixed(0)}%</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Section>
|
||
|
|
);
|
||
|
|
}
|