Feature/add date range component to benchmark comparator (#1240)

* Add date range component

* Update changelog

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@@ -14,16 +14,27 @@
       <mat-label i18n>Compare with...</mat-label>
       <mat-select
         name="benchmark"
+        [compareWith]="compareUniqueAssets"
         [value]="benchmark"
         (selectionChange)="onChangeBenchmark($event.value)"
       >
-        <mat-option *ngFor="let benchmark of benchmarks" [value]="benchmark">{{
-          benchmark.symbol
-        }}</mat-option>
+        <mat-option
+          *ngFor="let currentBenchmark of benchmarks"
+          [value]="currentBenchmark"
+          >{{ currentBenchmark.symbol }}</mat-option
+        >
       </mat-select>
     </mat-form-field>
   </div>
 </div>
+<div *ngIf="user.settings.viewMode !== 'ZEN'" class="mb-3 text-center">
+  <gf-toggle
+    [defaultValue]="user?.settings?.dateRange"
+    [isLoading]="isLoading"
+    [options]="dateRangeOptions"
+    (change)="onChangeDateRange($event.value)"
+  ></gf-toggle>
+</div>
 <div class="chart-container">
   <ngx-skeleton-loader
     *ngIf="isLoading"

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -10,6 +10,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import {
   getTooltipOptions,
   getTooltipPositionerMapTop,
@@ -27,6 +28,7 @@ import {
   UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
+import { DateRange } from '@ghostfolio/common/types';
 import {
   Chart,
   LineController,
@@ -46,6 +48,7 @@ import annotationPlugin from 'chartjs-plugin-annotation';
 })
 export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
+  @Input() benchmark: UniqueAsset;
   @Input() benchmarks: UniqueAsset[];
   @Input() daysInMarket: number;
   @Input() locale: string;
@@ -53,11 +56,12 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() user: User;
 
   @Output() benchmarkChanged = new EventEmitter<UniqueAsset>();
+  @Output() dateRangeChanged = new EventEmitter<DateRange>();
 
   @ViewChild('chartCanvas') chartCanvas;
 
-  public benchmark: UniqueAsset;
   public chart: Chart<any>;
+  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public isLoading = true;
 
   public constructor() {
@@ -81,8 +85,22 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
     }
   }
 
-  public onChangeBenchmark(aBenchmark: UniqueAsset) {
-    this.benchmarkChanged.next(aBenchmark);
+  public compareUniqueAssets(
+    uniqueAsset1: UniqueAsset,
+    uniqueAsset2: UniqueAsset
+  ) {
+    return (
+      uniqueAsset1?.dataSource === uniqueAsset2?.dataSource &&
+      uniqueAsset1?.symbol === uniqueAsset2?.symbol
+    );
+  }
+
+  public onChangeBenchmark(benchmark: UniqueAsset) {
+    this.benchmarkChanged.next(benchmark);
+  }
+
+  public onChangeDateRange(dateRange: DateRange) {
+    this.dateRangeChanged.next(dateRange);
   }
 
   public ngOnDestroy() {

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
+import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
@@ -12,6 +13,7 @@ import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
   imports: [
     CommonModule,
     FormsModule,
+    GfToggleModule,
     MatSelectModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -97,6 +97,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
           .pipe(takeUntil(this.unsubscribeSubject))
           .subscribe((user) => {
             this.user = user;
+
             this.changeDetectorRef.markForCheck();
           });
       });

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

@@ -244,7 +244,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
         )
         .subscribe(() => {
           this.snackBarRef = this.snackBar.open(
-            '✅' + $localize`Coupon code has been redeemed`,
+            '✅ ' + $localize`Coupon code has been redeemed`,
             $localize`Reload`,
             {
               duration: 3000

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

@@ -9,7 +9,7 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import { GroupBy, ToggleOption } from '@ghostfolio/common/types';
+import { DateRange, GroupBy, ToggleOption } from '@ghostfolio/common/types';
 import { differenceInDays } from 'date-fns';
 import { sortBy } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -64,15 +64,76 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         this.hasImpersonationId = !!aId;
       });
 
-    this.dataService
-      .fetchChart({ range: 'max', version: 2 })
+    this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ chart }) => {
-        this.firstOrderDate = new Date(chart?.[0]?.date);
-        this.performanceDataItems = chart;
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
 
-        this.changeDetectorRef.markForCheck();
+          this.update();
+        }
       });
+  }
+
+  public onChangeBenchmark(benchmark: UniqueAsset) {
+    this.dataService
+      .putUserSetting({ benchmark })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
+  public onChangeDateRange(dateRange: DateRange) {
+    this.dataService
+      .putUserSetting({ dateRange })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
+  public onChangeGroupBy(aMode: GroupBy) {
+    this.mode = aMode;
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private update() {
+    if (this.user.settings.isExperimentalFeatures) {
+      this.dataService
+        .fetchChart({ range: this.user?.settings?.dateRange, version: 2 })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ chart }) => {
+          this.firstOrderDate = new Date(chart?.[0]?.date ?? new Date());
+          this.performanceDataItems = chart;
+
+          this.updateBenchmarkDataItems();
+
+          this.changeDetectorRef.markForCheck();
+        });
+    }
 
     this.dataService
       .fetchInvestments()
@@ -113,43 +174,27 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         this.changeDetectorRef.markForCheck();
       });
 
-    this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((state) => {
-        if (state?.user) {
-          this.user = state.user;
+    this.changeDetectorRef.markForCheck();
+  }
+
+  private updateBenchmarkDataItems() {
+    if (this.user.settings.benchmark) {
+      this.dataService
+        .fetchBenchmarkBySymbol({
+          ...this.user.settings.benchmark,
+          startDate: this.firstOrderDate
+        })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ marketData }) => {
+          this.benchmarkDataItems = marketData.map(({ date, value }) => {
+            return {
+              date,
+              value
+            };
+          });
 
           this.changeDetectorRef.markForCheck();
-        }
-      });
-  }
-
-  public onChangeBenchmark({ dataSource, symbol }: UniqueAsset) {
-    this.dataService
-      .fetchBenchmarkBySymbol({
-        dataSource,
-        symbol,
-        startDate: this.firstOrderDate
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ marketData }) => {
-        this.benchmarkDataItems = marketData.map(({ date, value }) => {
-          return {
-            date,
-            value
-          };
         });
-
-        this.changeDetectorRef.markForCheck();
-      });
-  }
-
-  public onChangeGroupBy(aMode: GroupBy) {
-    this.mode = aMode;
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
+    }
   }
 }

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -4,6 +4,7 @@
     <div class="col-lg">
       <gf-benchmark-comparator
         class="h-100"
+        [benchmark]="user?.settings?.benchmark"
         [benchmarkDataItems]="benchmarkDataItems"
         [benchmarks]="benchmarks"
         [daysInMarket]="daysInMarket"
@@ -11,6 +12,7 @@
         [performanceDataItems]="performanceDataItems"
         [user]="user"
         (benchmarkChanged)="onChangeBenchmark($event)"
+        (dateRangeChanged)="onChangeDateRange($event)"
       ></gf-benchmark-comparator>
     </div>
   </div>