#EX-307: Add design for empty statistics layout

frontend/Exence/src/app/private/statistics/statistics.component.html

@@ -1,18 +1,30 @@
-<section class="d-flex flex-column p-2 pb-0 p-sm-3 p-md-4 poisiton-relative" [class.gap-4]="editing()">
-	@if (store.statCards().length) {
-		<ex-stat-card-list [data]="store.statCards()" [editing]="editing()" />
-	}
+@if (isEmpty()) {
+	<section class="d-flex flex-column align-items-center justify-content-center gap-4 h-100">
+		<img src="assets/empty-statistics.svg" />
+		<div class="d-flex flex-column gap-2 align-items-center text-center">
+			<h3 class="fs-2 fw-bold m-0">Your dashboard is empty</h3>
+			<p class="m-0 fs-5">Add charts and stat cards to customize your statistics dashboard.</p>
+		</div>
+	</section>
+} @else {
+	<section class="d-flex flex-column p-2 pb-0 p-sm-3 p-md-4 poisiton-relative" [class.gap-4]="editing()">
+		@if (store.statCards().length) {
+			<ex-stat-card-list [data]="store.statCards()" [editing]="editing()" />
+		}
 
-	<ex-chart-widget-list [data]="store.charts()" [editing]="editing()" />
+		<ex-chart-widget-list [data]="store.charts()" [editing]="editing()" />
+	</section>
+}
 
-	<ng-container [ngTemplateOutlet]="actionButtons" />
-</section>
+<ng-container [ngTemplateOutlet]="actionButtons" />
 
 <mat-menu #actionsMenu>
-	<button mat-menu-item (click)="editing.set(true)">
-		<mat-icon>edit</mat-icon>
-		Edit layout
-	</button>
+	@if (!isEmpty()) {
+		<button mat-menu-item (click)="editing.set(true)">
+			<mat-icon>edit</mat-icon>
+			Edit layout
+		</button>
+	}
 	<button mat-menu-item (click)="openCatalog()">
 		<mat-icon>add</mat-icon>
 		Add widget

frontend/Exence/src/app/private/statistics/statistics.component.scss

@@ -1,3 +1,7 @@
+.empty-state {
+	height: calc(100vh - 64px);
+}
+
 .action-buttons {
 	display: flex;
 	flex-direction: row;

frontend/Exence/src/app/private/statistics/statistics.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, effect, inject, signal, viewChild } from '@angular/core';
+import { Component, computed, effect, inject, signal, viewChild } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { mapToExChartType } from '../../data-model/modules/statistics/widget-config.model';
@@ -39,10 +39,16 @@ export class StatisticsComponent implements HasChangesComponent {
 	private readonly snackbarService = inject(SnackbarService);
 	readonly store = inject(WidgetStore);
 
-	private readonly chartWidgetList = viewChild.required(ChartWidgetListComponent);
+	private readonly chartWidgetList = viewChild(ChartWidgetListComponent);
 	private readonly statCardList = viewChild(StatCardListComponent);
 
 	editing = signal<boolean>(false);
+	isEmpty = computed(
+		() =>
+			!this.store.layoutResource.isLoading() &&
+			this.store.statCards().length === 0 &&
+			this.store.charts().length === 0,
+	);
 
 	constructor() {
 		effect(() => {
@@ -78,8 +84,8 @@ export class StatisticsComponent implements HasChangesComponent {
 
 		const isStatCard = mapToExChartType(result.catalogItem.type) === 'statCard';
 		const nextFreePosition = isStatCard
-			? (this.statCardList()?.getFirstPossiblePosition() ?? { cols: 1, rows: 1, x: 0, y: 0 })
-			: this.chartWidgetList().getFirstPossiblePosition();
+			? (this.statCardList()?.getFirstPossiblePosition() ?? null)
+			: (this.chartWidgetList()?.getFirstPossiblePosition() ?? null);
 
 		await this.store.addWidget(result, nextFreePosition);
 	}