feat(stats): open calculated plan statistics (#65)

src/app/components/calendar-year/calendar-year.ts

@@ -22,7 +22,14 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButton } from '@angular/material/button';
 import { DAY_FIRST_DATE_PROVIDERS } from '../../shared/day-first-date-adapter';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { MatDialog, MatDialogContent, MatDialogRef } from '@angular/material/dialog';
+import {
+	MatDialog,
+	MatDialogActions,
+	MatDialogClose,
+	MatDialogContent,
+	MatDialogRef,
+	MatDialogTitle,
+} from '@angular/material/dialog';
 import {
 	CalendarMonth,
 	CalendarDayStatus,
@@ -72,7 +79,10 @@ type TraceTransition = Readonly<{ before: PlanningTraceState; after: PlanningTra
 	imports: [
 		JsonPipe,
 		NgTemplateOutlet,
+		MatDialogActions,
+		MatDialogClose,
 		MatDialogContent,
+		MatDialogTitle,
 		MatDatepickerModule,
 		MatFormFieldModule,
 		MatInputModule,
@@ -99,6 +109,9 @@ export class CalendarYear {
 	private readonly comparisonTemplate =
 		viewChild.required<TemplateRef<unknown>>('dateComparisonDialog');
 	private comparisonDialog: MatDialogRef<unknown> | null = null;
+	private readonly statisticsTemplate =
+		viewChild.required<TemplateRef<unknown>>('planStatisticsDialog');
+	private statisticsDialog: MatDialogRef<unknown> | null = null;
 	protected readonly translationService = inject(TranslationService);
 
 	protected readonly isLoading = signal(false);
@@ -496,6 +509,7 @@ export class CalendarYear {
 	constructor() {
 		effect(() => this.dateAdapter.setLocale(this.translationService.locale()));
 		this.destroyRef.onDestroy(() => {
+			this.closeStatistics();
 			this.clearCounterfactual();
 			this.cancelDeclarationRange();
 		});
@@ -630,6 +644,7 @@ export class CalendarYear {
 	}
 
 	private resetCalculationState(horizon: { start: string; end: string }): void {
+		this.closeStatistics();
 		this.activeCalculation = null;
 		this.userInput.planningSnapshotSignal.set(null);
 		this.planningOutcome.set(null);
@@ -747,6 +762,35 @@ export class CalendarYear {
 		this.userInput.remainingVacationDaysSignal.set([]);
 	}
 
+	protected openStatistics(): void {
+		if (!this.displayedPlan() || this.statisticsDialog) return;
+		const dialog = this.dialog.open(this.statisticsTemplate(), {
+			width: '40rem',
+			maxWidth: 'calc(100vw - 2rem)',
+			maxHeight: 'calc(100dvh - 2rem)',
+			autoFocus: 'first-heading',
+			ariaLabelledBy: 'plan-statistics-title',
+			ariaDescribedBy: 'plan-statistics-help',
+		});
+		this.statisticsDialog = dialog;
+		dialog.beforeClosed().subscribe(() => {
+			if (this.statisticsDialog === dialog) this.statisticsDialog = null;
+		});
+		dialog.afterClosed().subscribe(() => {
+			if (
+				!this.destroyRef.destroyed &&
+				!this.displayedPlan() &&
+				document.activeElement === document.body
+			)
+				this.resultsTitle()?.nativeElement.focus();
+		});
+	}
+
+	private closeStatistics(): void {
+		this.statisticsDialog?.close();
+		this.statisticsDialog = null;
+	}
+
 	protected selectPlacement(index: number, announce = true): void {
 		const explanation = this.planExplanation();
 		if (!explanation?.placements.length) return;