feat(admin): integrate K10 trend chart + E2E coverage + seed extension

ConformiteStatsPage gets a second section below the K8 tile: three
filters (De / À / Segmenter par), the multi-year line chart, the DSFR
checkbox toggle legend (shown only when there is more than one
series), and the accessible alternative table.

Range filters keep yearFrom <= yearTo via cross-field state sync.
Switching the segmentation mode resets the hidden-series set because
the segment names no longer match.

Seed script + E2E seed helper gain an `averageGap` field so local
exploration of the trend chart has plausible numbers. Playwright
coverage adds four K10 scenarios (figure visible, workforce
segmentation spawns the checkbox group, unchecking hides the series,
accessible table renders year column headers).

Author: LucasCharrier

packages/app/scripts/seed-conformite-stats.mjs

@@ -75,9 +75,9 @@ function pseudoRandom(n) {
  * @param {string} nafCode
  */
 function shouldHaveAlertGap(companyIndex, yearsBeforeCurrent, nafCode) {
-	// Gentle downward drift: the oldest seeded year (2019) sits around 54%,
-	// the current year at ~40% — the points-delta badge between any two
-	// adjacent years should show a visible ~2pt swing.
+	// Gentle downward drift: older years sit around 50%, the current year at
+	// ~40% — the K8 points-delta badge between any two adjacent years should
+	// show a visible ~2pt swing.
 	const baseRate = 0.4 + 0.02 * yearsBeforeCurrent;
 	const sectorBias = nafCode.startsWith("K")
 		? 0.12
@@ -88,6 +88,25 @@ function shouldHaveAlertGap(companyIndex, yearsBeforeCurrent, nafCode) {
 	return pseudoRandom(companyIndex * 101 + yearsBeforeCurrent * 17) < threshold;
 }
 
+/**
+ * Build a plausible average gap (0..12%) for a seed row so K10 has something
+ * to plot. Same shape as `shouldHaveAlertGap`: slightly improving over time,
+ * with a sector bias (K finance skewed up, M services skewed down). Clamped
+ * to [0.5, 12] so the chart's Y-axis stays readable.
+ */
+function pseudoAverageGap(companyIndex, yearsBeforeCurrent, nafCode) {
+	const baseGap = 4 + 0.6 * yearsBeforeCurrent;
+	const sectorShift = nafCode.startsWith("K")
+		? 2.5
+		: nafCode.startsWith("M")
+			? -1.5
+			: 0;
+	const jitter =
+		(pseudoRandom(companyIndex * 211 + yearsBeforeCurrent) - 0.5) * 3;
+	const value = baseGap + sectorShift + jitter;
+	return Math.max(0.5, Math.min(12, Math.round(value * 10) / 10));
+}
+
 function sirenFor(index) {
 	return `${SIREN_PREFIX}${String(index).padStart(6, "0")}`;
 }
@@ -143,12 +162,14 @@ async function seed(sql) {
 		insertedCompanies++;
 	}
 
-	for (let yearsBack = 0; yearsBack < CAMPAIGN_YEARS_BACK; yearsBack++) {
+	const totalYears = currentYear - FIRST_SEED_YEAR + 1;
+	for (let yearsBack = 0; yearsBack < totalYears; yearsBack++) {
 		const year = currentYear - yearsBack;
 		let companyIndex = 0;
 		for (const { siren, nafCode } of catalog) {
 			companyIndex++;
 			const hasAlertGap = shouldHaveAlertGap(companyIndex, yearsBack, nafCode);
+			const averageGap = pseudoAverageGap(companyIndex, yearsBack, nafCode);
 			// Spread submissions over January-February so the rows look realistic
 			// (even though the campaign progression chart is not what we exercise
 			// here, keeping a plausible date avoids surprises elsewhere).
@@ -158,7 +179,7 @@ async function seed(sql) {
 			await sql`
 				INSERT INTO app_declaration (
 					id, siren, year, declarant_id, current_step, status,
-					submitted_at, has_alert_gap, created_at, updated_at
+					submitted_at, has_alert_gap, average_gap, created_at, updated_at
 				)
 				VALUES (
 					gen_random_uuid(),
@@ -169,13 +190,15 @@ async function seed(sql) {
 					'submitted',
 					${submittedAt},
 					${hasAlertGap},
+					${averageGap},
 					NOW(),
 					NOW()
 				)
 				ON CONFLICT ON CONSTRAINT declaration_siren_year_idx DO UPDATE SET
 					status = 'submitted',
 					submitted_at = EXCLUDED.submitted_at,
 					has_alert_gap = EXCLUDED.has_alert_gap,
+					average_gap = EXCLUDED.average_gap,
 					updated_at = NOW()
 			`;
 			insertedDeclarations++;
@@ -225,7 +248,7 @@ async function main() {
 		}
 		const result = await seed(sql);
 		console.log(
-			`[seed-conformite] upserted ${result.insertedCompanies} companies and ${result.insertedDeclarations} submitted declarations across ${CAMPAIGN_YEARS_BACK} campaign years.`,
+			`[seed-conformite] upserted ${result.insertedCompanies} companies and ${result.insertedDeclarations} submitted declarations from ${FIRST_SEED_YEAR} to the current year.`,
 		);
 		console.log(
 			`[seed-conformite] open http://localhost:3000/admin/stats/conformite to browse the tile.`,

packages/app/src/e2e/admin-stats-conformite.e2e.ts

@@ -7,7 +7,8 @@ import {
 	seedSubmittedDeclarationsForStats,
 } from "./helpers/db";
 
-// Reserved SIRENs — outside any real range, scoped to the K8 conformity test.
+// Reserved SIRENs — outside any real range, scoped to the K8/K10 conformity
+// test. averageGap values double as K10 fixture data.
 const SIRENS = {
 	currentAlert: "999400001", // year N, alert, small
 	currentSafe: "999400002", // year N, no alert, small
@@ -30,6 +31,7 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 				workforce: 30,
 				hasAlertGap: true,
 				nafCode: "A01.11Z",
+				averageGap: 6.5,
 			},
 			{
 				siren: SIRENS.currentSafe,
@@ -38,6 +40,7 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 				workforce: 30,
 				hasAlertGap: false,
 				nafCode: "A01.11Z",
+				averageGap: 2.1,
 			},
 			{
 				siren: SIRENS.currentLargeAlert,
@@ -46,6 +49,7 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 				workforce: 300,
 				hasAlertGap: true,
 				nafCode: "C10.11Z",
+				averageGap: 7.2,
 			},
 			{
 				siren: SIRENS.currentFinance,
@@ -54,6 +58,7 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 				workforce: 50,
 				hasAlertGap: true,
 				nafCode: "K64.19Z",
+				averageGap: 8.4,
 			},
 			{
 				siren: SIRENS.previousAlert,
@@ -62,6 +67,7 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 				workforce: 30,
 				hasAlertGap: true,
 				nafCode: "A01.11Z",
+				averageGap: 6.8,
 			},
 			{
 				siren: SIRENS.previousSafe,
@@ -70,6 +76,7 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 				workforce: 30,
 				hasAlertGap: false,
 				nafCode: "A01.11Z",
+				averageGap: 2.3,
 			},
 		]);
 	});
@@ -158,6 +165,90 @@ test.describe("admin conformity stats (K8 — gap alert rate)", () => {
 	});
 });
 
+test.describe("admin conformity stats (K10 — multi-year gap trend)", () => {
+	test("admin sees the trend section, chart figure and toggle legend", async ({
+		page,
+	}) => {
+		await page.goto("/admin/stats/conformite");
+
+		await expect(
+			page.getByRole("heading", {
+				name: "Évolution annuelle des écarts",
+				level: 2,
+			}),
+		).toBeVisible();
+		await expect(
+			page.getByRole("figure", {
+				name: /courbe d'évolution annuelle de l'écart moyen/i,
+			}),
+		).toBeVisible();
+	});
+
+	test("switching to workforce segmentation swaps the legend series", async ({
+		page,
+	}) => {
+		await page.goto("/admin/stats/conformite");
+
+		await expect(
+			page.getByRole("heading", {
+				name: "Évolution annuelle des écarts",
+				level: 2,
+			}),
+		).toBeVisible();
+
+		await page.getByLabel("Segmenter par").selectOption("workforce");
+
+		// Checkbox group appears when there is more than one series.
+		await expect(
+			page.getByRole("group", { name: /séries affichées/i }),
+		).toBeVisible();
+	});
+
+	test("a checkbox in the toggle legend hides its series from the chart", async ({
+		page,
+	}) => {
+		await page.goto("/admin/stats/conformite");
+		await page.getByLabel("Segmenter par").selectOption("workforce");
+		await expect(
+			page.getByRole("group", { name: /séries affichées/i }),
+		).toBeVisible();
+
+		const firstCheckbox = page
+			.getByRole("group", { name: /séries affichées/i })
+			.getByRole("checkbox")
+			.first();
+		await expect(firstCheckbox).toBeChecked();
+		await firstCheckbox.uncheck();
+		await expect(firstCheckbox).not.toBeChecked();
+	});
+
+	test("accessible alternative table lists segments and years", async ({
+		page,
+	}) => {
+		await page.goto("/admin/stats/conformite");
+
+		await expect(
+			page.getByRole("figure", {
+				name: /courbe d'évolution annuelle de l'écart moyen/i,
+			}),
+		).toBeVisible();
+
+		// The trend section uses the same <details> pattern as K2 — open the
+		// second disclosure on the page (the first belongs to the K8 tile if
+		// any ever lands; here K8 has no table, so the first details is K10).
+		await page
+			.locator("summary", {
+				hasText: /consulter les données du graphique sous forme de tableau/i,
+			})
+			.first()
+			.click();
+
+		await expect(
+			page.getByRole("columnheader", { name: String(CURRENT_YEAR) }),
+		).toBeVisible();
+	});
+});
+
 test("non-admin users are redirected away from the conformity stats page", async ({
 	browser,
 }) => {

packages/app/src/e2e/helpers/db.ts

@@ -444,6 +444,12 @@ type SeededCampaignDeclaration = {
 	 * K8 tests set it to exercise the sector filter, K2 tests leave it null.
 	 */
 	nafCode?: string | null;
+	/**
+	 * Denormalized average gap (%) used by the K10 multi-year trend chart.
+	 * Optional — null means "no exploitable salary pair", which the chart
+	 * filters out.
+	 */
+	averageGap?: number | null;
 };
 
 /**
@@ -470,6 +476,10 @@ export async function seedSubmittedDeclarationsForStats(
 		for (const row of rows) {
 			const nafCode = row.nafCode ?? null;
 			const hasAlertGap = row.hasAlertGap ?? false;
+			const averageGap =
+				row.averageGap === undefined || row.averageGap === null
+					? null
+					: row.averageGap.toString();
 			await sql`
 				INSERT INTO app_company (siren, name, workforce, naf_code, created_at, updated_at)
 				VALUES (${row.siren}, ${`E2E Stats Co. ${row.siren}`}, ${row.workforce}, ${nafCode}, NOW(), NOW())
@@ -480,16 +490,18 @@ export async function seedSubmittedDeclarationsForStats(
 			await sql`
 				INSERT INTO app_declaration (
 					id, siren, year, declarant_id, current_step, status,
-					submitted_at, has_alert_gap, created_at, updated_at
+					submitted_at, has_alert_gap, average_gap, created_at, updated_at
 				)
 				VALUES (
 					gen_random_uuid(), ${row.siren}, ${row.year}, ${declarantId}, 6,
-					'submitted', ${row.submittedAt}, ${hasAlertGap}, NOW(), NOW()
+					'submitted', ${row.submittedAt}, ${hasAlertGap}, ${averageGap},
+					NOW(), NOW()
 				)
 				ON CONFLICT ON CONSTRAINT declaration_siren_year_idx DO UPDATE SET
 					status = 'submitted',
 					submitted_at = EXCLUDED.submitted_at,
-					has_alert_gap = EXCLUDED.has_alert_gap
+					has_alert_gap = EXCLUDED.has_alert_gap,
+					average_gap = EXCLUDED.average_gap
 			`;
 		}
 	} finally {