From 36d0ceeec5804e163755cd05a93eea78142dec55 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 30 Jul 2025 20:03:04 +0200
Subject: [PATCH] Feature/improve Top 3 and Bottom 3 performers (#5289)

* Improve Top 3 and Bottom 3 performers

* Update changelog
---
 CHANGELOG.md                                  |  2 ++
 .../analysis/analysis-page.component.ts       | 25 +++++++++++++------
 .../portfolio/analysis/analysis-page.html     | 10 ++++----
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95280bf3d..a8b6e9ea4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the _Top 3_ and _Bottom 3_ performers on the analysis page by removing items without performance
 - Improved the usability of the toggle component
 - Restructured the response of the portfolio report endpoint (_X-ray_)
 - Refreshed the cryptocurrencies list
@@ -25,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Fixed the links of the _Top 3_ and _Bottom 3_ performers on the analysis page
 - Excluded the holdings originated of `FEE`, `INTEREST` and `LIABILITY` activities from the closed holdings on the portfolio holdings page
 - Fixed an issue with serving _Storybook_ related to missing styles
 
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index 02be40250..0fd9037bf 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -32,6 +32,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { SymbolProfile } from '@prisma/client';
 import { addIcons } from 'ionicons';
@@ -55,7 +56,8 @@ import { takeUntil } from 'rxjs/operators';
     MatCardModule,
     MatMenuModule,
     MatProgressSpinnerModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    RouterModule
   ],
   selector: 'gf-analysis-page',
   styleUrls: ['./analysis-page.scss'],
@@ -342,13 +344,20 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit {
           'netPerformancePercentWithCurrencyEffect'
         ).reverse();
 
-        this.top3 = holdingsSorted.slice(0, 3);
-
-        if (holdings?.length > 3) {
-          this.bottom3 = holdingsSorted.slice(-3).reverse();
-        } else {
-          this.bottom3 = [];
-        }
+        this.top3 = holdingsSorted
+          .filter(
+            ({ netPerformancePercentWithCurrencyEffect }) =>
+              netPerformancePercentWithCurrencyEffect > 0
+          )
+          .slice(0, 3);
+
+        this.bottom3 = holdingsSorted
+          .filter(
+            ({ netPerformancePercentWithCurrencyEffect }) =>
+              netPerformancePercentWithCurrencyEffect < 0
+          )
+          .slice(-3)
+          .reverse();
 
         this.changeDetectorRef.markForCheck();
       });
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index 477d47b40..d33d5e570 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -93,7 +93,7 @@
 
   <div class="mb-5 row">
     <div class="col">
-      <mat-card appearance="outlined" class="mb-3">
+      <mat-card appearance="outlined">
         <mat-card-content>
           <div class="d-flex py-1">
             <div
@@ -232,8 +232,8 @@
   </div>
 
   <div class="mb-5 row">
-    <div class="col-md-6">
-      <mat-card appearance="outlined" class="mb-3">
+    <div class="col-md-6 mb-3">
+      <mat-card appearance="outlined" class="h-100">
         <mat-card-header>
           <mat-card-title class="align-items-center d-flex" i18n
             >Top</mat-card-title
@@ -281,8 +281,8 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
-      <mat-card appearance="outlined" class="mb-3">
+    <div class="col-md-6 mb-3">
+      <mat-card appearance="outlined" class="h-100">
         <mat-card-header>
           <mat-card-title class="align-items-center d-flex" i18n
             >Bottom</mat-card-title