Feature/improve usability of X-ray page by hiding empty rule categories (#4108)

* Hide empty rule categories

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the _X-ray_ page by hiding empty rule categories
 - Improved the language localization for German (`de`)
 
 ## 2.128.0 - 2024-12-12

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -619,9 +619,7 @@ export class PortfolioController {
       this.request.user.subscription.type === 'Basic'
     ) {
       for (const rule in report.rules) {
-        if (report.rules[rule]) {
-          report.rules[rule] = [];
-        }
+        report.rules[rule] = null;
       }
 
       report.statistics = {

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html

@@ -24,7 +24,12 @@
           <ng-container i18n>rules align with your portfolio.</ng-container>
         }
       </p>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': emergencyFundRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Emergency Fund</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -43,7 +48,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': currencyClusterRiskRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Currency Cluster Risks</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -62,7 +72,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': accountClusterRiskRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Account Cluster Risks</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -81,7 +96,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': economicMarketClusterRiskRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Economic Market Cluster Risks</span>
           @if (user?.subscription?.type === 'Basic') {
@@ -100,7 +120,12 @@
           (rulesUpdated)="onRulesUpdated($event)"
         />
       </div>
-      <div class="mb-4">
+      <div
+        class="mb-4"
+        [ngClass]="{
+          'd-none': feeRules?.length === 0
+        }"
+      >
         <h4 class="align-items-center d-flex m-0">
           <span i18n>Fees</span>
           @if (user?.subscription?.type === 'Basic') {

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts

@@ -134,7 +134,7 @@ export class XRayPageComponent {
     let inactiveRules: PortfolioReportRule[] = [];
 
     for (const category in rules) {
-      const rulesArray = rules[category];
+      const rulesArray = rules[category] || [];
 
       inactiveRules = inactiveRules.concat(
         rulesArray.filter(({ isActive }) => {