Implement chart in account detail modal

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.scss

@@ -4,4 +4,8 @@
   .mat-mdc-dialog-content {
     max-height: unset;
   }
+
+  .chart-container {
+    aspect-ratio: 16 / 9;
+  }
 }

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -10,14 +10,15 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { downloadAsFile } from '@ghostfolio/common/helper';
-import { User } from '@ghostfolio/common/interfaces';
+import { User, HistoricalDataItem } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
 import Big from 'big.js';
-import { format, parseISO } from 'date-fns';
+import { format, parseISO, differenceInDays } from 'date-fns';
 import { isNumber } from 'lodash';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 
 import { AccountDetailDialogParams } from './interfaces/interfaces';
 
@@ -31,9 +32,13 @@ import { AccountDetailDialogParams } from './interfaces/interfaces';
 export class AccountDetailDialog implements OnDestroy, OnInit {
   public balance: number;
   public currency: string;
+  public daysInMarket: number;
   public equity: number;
+  public hasImpersonationId: boolean;
+  public isLoadingBenchmarkComparator: boolean;
   public name: string;
   public orders: OrderWithAccount[];
+  public performanceDataItems: HistoricalDataItem[];
   public platformName: string;
   public transactionCount: number;
   public user: User;
@@ -46,6 +51,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
     @Inject(MAT_DIALOG_DATA) public data: AccountDetailDialogParams,
     private dataService: DataService,
     public dialogRef: MatDialogRef<AccountDetailDialog>,
+    private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {
     this.userService.stateChanged
@@ -54,12 +60,21 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.update();
+
           this.changeDetectorRef.markForCheck();
         }
       });
   }
 
   public ngOnInit(): void {
+    this.impersonationStorageService
+      .onChangeHasImpersonation()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((impersonationId) => {
+        this.hasImpersonationId = !!impersonationId;
+      });
+
     this.dataService
       .fetchAccount(this.data.accountId)
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -133,4 +148,35 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
   }
+
+  private update() {
+    this.isLoadingBenchmarkComparator = false;
+
+    this.dataService
+      .fetchPortfolioPerformance({
+        range: this.user?.settings?.dateRange
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ chart, firstOrderDate }) => {
+        this.daysInMarket = differenceInDays(new Date(), firstOrderDate);
+
+        this.performanceDataItems = [];
+
+        for (const [
+          index,
+          { date, value, valueInPercentage }
+        ] of chart.entries()) {
+          if (index > 0 || this.user?.settings?.dateRange === 'max') {
+            // Ignore first item where value is 0
+            this.performanceDataItems.push({
+              date,
+              value: isNumber(value) ? value : valueInPercentage
+            });
+          }
+        }
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.changeDetectorRef.markForCheck();
+  }
 }

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -20,7 +20,20 @@
       </div>
     </div>
 
-    <div class="row">
+    <div class="chart-container">
+      <gf-investment-chart
+        class="h-100"
+        [currency]="user?.settings?.baseCurrency"
+        [daysInMarket]="daysInMarket"
+        [historicalDataItems]="performanceDataItems"
+        [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+        [isLoading]="isLoadingBenchmarkComparator"
+        [locale]="user?.settings?.locale"
+        [range]="user?.settings?.dateRange"
+      ></gf-investment-chart>
+    </div>
+
+    <div class="row mt-4">
       <div class="col-6 mb-3">
         <gf-value
           i18n

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts

@@ -6,6 +6,7 @@ import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-foote
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
+import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AccountDetailDialog } from './account-detail-dialog.component';
@@ -17,6 +18,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     GfActivitiesTableModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
+    GfInvestmentChartModule,
     GfValueModule,
     MatButtonModule,
     MatDialogModule,