From c505745ace1c7ab73096f0a496380245f49abb08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Wed, 25 Mar 2026 22:30:26 +0100
Subject: [PATCH] #EX-307: Add empty screen for statistics.component

---
 .../statistics/statistics.component.html      | 34 +++++++++++++------
 .../statistics/statistics.component.scss      |  4 +++
 .../statistics/statistics.component.ts        | 14 +++++---
 .../Exence/src/assets/empty-statistics.svg    | 26 ++++++++++++++
 4 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 frontend/Exence/src/assets/empty-statistics.svg

diff --git a/frontend/Exence/src/app/private/statistics/statistics.component.html b/frontend/Exence/src/app/private/statistics/statistics.component.html
index 950b5dd8..094ab3c3 100644
--- a/frontend/Exence/src/app/private/statistics/statistics.component.html
+++ b/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
diff --git a/frontend/Exence/src/app/private/statistics/statistics.component.scss b/frontend/Exence/src/app/private/statistics/statistics.component.scss
index 6a977c28..b6b018a1 100644
--- a/frontend/Exence/src/app/private/statistics/statistics.component.scss
+++ b/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;
diff --git a/frontend/Exence/src/app/private/statistics/statistics.component.ts b/frontend/Exence/src/app/private/statistics/statistics.component.ts
index 94345d28..0f36745d 100644
--- a/frontend/Exence/src/app/private/statistics/statistics.component.ts
+++ b/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);
 	}
diff --git a/frontend/Exence/src/assets/empty-statistics.svg b/frontend/Exence/src/assets/empty-statistics.svg
new file mode 100644
index 00000000..a3325b99
--- /dev/null
+++ b/frontend/Exence/src/assets/empty-statistics.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="240" height="200" viewBox="0 0 240 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Dashboard frame -->
+  <rect x="30" y="20" width="180" height="140" rx="12" stroke="rgb(180,180,220)" stroke-width="2" fill="none"/>
+  <!-- Top bar -->
+  <rect x="30" y="20" width="180" height="24" rx="12" fill="rgb(200,200,242)" opacity="0.4"/>
+  <circle cx="48" cy="32" r="4" fill="rgb(200,200,242)"/>
+  <circle cx="62" cy="32" r="4" fill="rgb(200,200,242)"/>
+  <circle cx="76" cy="32" r="4" fill="rgb(200,200,242)"/>
+  <!-- Bar chart -->
+  <rect x="55" y="100" width="16" height="40" rx="3" fill="rgb(200,200,242)" opacity="0.6"/>
+  <rect x="80" y="80" width="16" height="60" rx="3" fill="rgb(200,200,242)" opacity="0.8"/>
+  <rect x="105" y="90" width="16" height="50" rx="3" fill="rgb(200,200,242)" opacity="0.5"/>
+  <rect x="130" y="70" width="16" height="70" rx="3" fill="rgb(200,200,242)" opacity="0.7"/>
+  <rect x="155" y="85" width="16" height="55" rx="3" fill="rgb(200,200,242)" opacity="0.6"/>
+  <!-- Trend line -->
+  <polyline points="63,95 88,75 113,82 138,62 163,78" stroke="rgb(160,160,210)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Stat card placeholders -->
+  <rect x="50" y="52" width="40" height="20" rx="4" stroke="rgb(200,200,242)" stroke-width="1.5" fill="none" stroke-dasharray="4 3"/>
+  <rect x="100" y="52" width="40" height="20" rx="4" stroke="rgb(200,200,242)" stroke-width="1.5" fill="none" stroke-dasharray="4 3"/>
+  <rect x="150" y="52" width="40" height="20" rx="4" stroke="rgb(200,200,242)" stroke-width="1.5" fill="none" stroke-dasharray="4 3"/>
+  <!-- Plus icon -->
+  <circle cx="195" cy="170" r="18" fill="rgb(200,200,242)" opacity="0.5"/>
+  <line x1="195" y1="162" x2="195" y2="178" stroke="rgb(140,140,200)" stroke-width="2.5" stroke-linecap="round"/>
+  <line x1="187" y1="170" x2="203" y2="170" stroke="rgb(140,140,200)" stroke-width="2.5" stroke-linecap="round"/>
+</svg>