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

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

@@ -62,6 +62,17 @@
 				</p>
 			}
 		</div>
+		@if (displayedPlan()) {
+			<button
+				type="button"
+				class="statistics-button"
+				aria-haspopup="dialog"
+				(click)="openStatistics()"
+			>
+				<mat-icon aria-hidden="true">bar_chart</mat-icon>
+				{{ tr().planning.statistics.open }}
+			</button>
+		}
 	</header>
 
 	@if (planningOutcome(); as outcome) {
@@ -1233,6 +1244,27 @@
 	</details>
 </ng-template>
 
+<ng-template #planStatisticsDialog>
+	<h2 mat-dialog-title id="plan-statistics-title">{{ tr().planning.statistics.title }}</h2>
+	<mat-dialog-content class="statistics-content">
+		@if (displayedPlan(); as plan) {
+			@if (planningOutcome()?.kind === 'PlanningIncomplete') {
+				<p class="incomplete-incumbent">{{ tr().planning.statistics.partialPlan }}</p>
+			}
+			<p id="plan-statistics-help">{{ tr().planning.statistics.help }}</p>
+			<dl class="plan-summary statistics-summary">
+				<div>
+					<dt>{{ tr().planning.statistics.leaveDays }}</dt>
+					<dd>{{ plan.placements.length }}</dd>
+				</div>
+			</dl>
+		}
+	</mat-dialog-content>
+	<mat-dialog-actions align="end">
+		<button type="button" mat-dialog-close>{{ tr().settings.close }}</button>
+	</mat-dialog-actions>
+</ng-template>
+
 <ng-template #dateComparisonDialog>
 	<section class="counterfactual-panel">
 		<header class="comparison-heading">