Feature: Implemented Feedback -> Refactor X-ray module and update routing structure

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

@@ -1,12 +1,7 @@
-import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import {
+import { PortfolioReportRule, User } from '@ghostfolio/common/interfaces';
-  PortfolioReport,
-  PortfolioReportRule,
-  User
-} from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
@@ -21,12 +16,8 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './fire-page.html'
 })
 export class FirePageComponent implements OnDestroy, OnInit {
-  public accountClusterRiskRules: PortfolioReportRule[];
-  public currencyClusterRiskRules: PortfolioReportRule[];
   public deviceType: string;
   public economicMarketClusterRiskRules: PortfolioReportRule[];
-  public emergencyFundRules: PortfolioReportRule[];
-  public feeRules: PortfolioReportRule[];
   public fireWealth: Big;
   public hasImpersonationId: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
@@ -133,21 +124,6 @@ export class FirePageComponent implements OnDestroy, OnInit {
           });
       });
   }
-
-  public onRulesUpdated(event: UpdateUserSettingDto) {
-    this.dataService
-      .putUserSetting(event)
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.userService
-          .get(true)
-          .pipe(takeUntil(this.unsubscribeSubject))
-          .subscribe();
-
-        this.initializePortfolioReport();
-      });
-  }
-
   public onSavingsRateChange(savingsRate: number) {
     this.dataService
       .putUserSetting({ savingsRate })
@@ -190,63 +166,5 @@ export class FirePageComponent implements OnDestroy, OnInit {
 
   private initializePortfolioReport() {
     this.isLoadingPortfolioReport = true;
-
-    this.dataService
-      .fetchPortfolioReport()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((portfolioReport) => {
-        this.inactiveRules = this.mergeInactiveRules(portfolioReport);
-
-        this.accountClusterRiskRules =
-          portfolioReport.rules['accountClusterRisk']?.filter(
-            ({ isActive }) => {
-              return isActive;
-            }
-          ) ?? null;
-
-        this.currencyClusterRiskRules =
-          portfolioReport.rules['currencyClusterRisk']?.filter(
-            ({ isActive }) => {
-              return isActive;
-            }
-          ) ?? null;
-
-        this.economicMarketClusterRiskRules =
-          portfolioReport.rules['economicMarketClusterRisk']?.filter(
-            ({ isActive }) => {
-              return isActive;
-            }
-          ) ?? null;
-
-        this.emergencyFundRules =
-          portfolioReport.rules['emergencyFund']?.filter(({ isActive }) => {
-            return isActive;
-          }) ?? null;
-
-        this.feeRules =
-          portfolioReport.rules['fees']?.filter(({ isActive }) => {
-            return isActive;
-          }) ?? null;
-
-        this.isLoadingPortfolioReport = false;
-
-        this.changeDetectorRef.markForCheck();
-      });
-  }
-
-  private mergeInactiveRules(report: PortfolioReport): PortfolioReportRule[] {
-    let inactiveRules: PortfolioReportRule[] = [];
-
-    for (const category in report.rules) {
-      const rulesArray = report.rules[category];
-
-      inactiveRules = inactiveRules.concat(
-        rulesArray.filter(({ isActive }) => {
-          return !isActive;
-        })
-      );
-    }
-
-    return inactiveRules;
   }
 }

apps/client/src/app/pages/portfolio/portfolio-page-routing.module.ts

@@ -38,7 +38,7 @@ const routes: Routes = [
       {
         path: 'x-ray',
         loadChildren: () =>
-          import('./x-ray/x-ray.module').then((m) => m.XRayModule)
+          import('./x-ray/x-ray-page.module').then((m) => m.XRayPageModule)
       }
     ],
     component: PortfolioPageComponent,

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

@@ -50,7 +50,7 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
               path: ['/portfolio', 'fire']
             },
             {
-              iconName: 'calculator-outline',
+              iconName: 'scan-outline',
               label: 'X-ray',
               path: ['/portfolio', 'x-ray']
             }

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

@@ -0,0 +1,21 @@
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { XRayPageComponent } from './x-ray-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: XRayPageComponent,
+    path: '',
+    title: $localize`X-ray`
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class XRayPageRoutingModule {}

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

@@ -1,16 +1,15 @@
 <div class="container mt-5">
   <div class="row">
     <div class="col">
-      <h2 class="h3 mb-3 text-center">X-ray</h2>
+      <h2 class="d-none d-sm-block h3 mb-3 text-center">X-ray</h2>
       <p class="mb-4">
         <span i18n
           >Ghostfolio X-ray uses static analysis to identify potential issues
           and risks in your portfolio.</span
         >
-        <span class="d-none"
+        <span class="d-none" i18n
-          >It will be highly configurable in the future: activate / deactivate
+          >Activate / deactivate rules and customize the thresholds to match
-          rules and customize the thresholds to match your personal investment
+          your personal investment style.</span
-          style.</span
         >
       </p>
       <div class="mb-4">

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

@@ -13,11 +13,11 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-  selector: 'gf-xray-page',
+  selector: 'gf-x-ray-page',
-  templateUrl: './x-ray.component.html',
+  templateUrl: './x-ray-page.component.html',
-  styleUrl: './x-ray.component.scss'
+  styleUrl: './x-ray-page.component.scss'
 })
-export class XRayComponent {
+export class XRayPageComponent {
   public accountClusterRiskRules: PortfolioReportRule[];
   public currencyClusterRiskRules: PortfolioReportRule[];
   public economicMarketClusterRiskRules: PortfolioReportRule[];

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

@@ -1,26 +1,22 @@
 import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module';
-import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { XRayComponent } from './x-ray.component';
+import { XRayPageRoutingModule } from './x-ray-page-routing.module';
+import { XRayPageComponent } from './x-ray-page.component';
 
 @NgModule({
-  declarations: [XRayComponent],
+  declarations: [XRayPageComponent],
   imports: [
     CommonModule,
-    GfFireCalculatorComponent,
     GfPremiumIndicatorComponent,
     GfRulesModule,
-    GfValueComponent,
     NgxSkeletonLoaderModule,
-    RouterModule.forChild([{ path: '', component: XRayComponent }])
+    XRayPageRoutingModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class XRayModule {}
+export class XRayPageModule {}