Feature/add benchmark name to tooltip of benchmark comparator (#3177)

* Add benchmark name to chart tooltip

* 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 chart tooltip of the benchmark comparator by adding the benchmark name
 - Upgraded `angular` from version `17.1.3` to `17.2.4`
 - Upgraded `Nx` from version `18.0.4` to `18.1.2`
 

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

@@ -20,7 +20,7 @@
       <mat-select
         name="benchmark"
         [disabled]="user?.subscription?.type === 'Basic'"
-        [value]="benchmark"
+        [value]="benchmark?.id"
         (selectionChange)="onChangeBenchmark($event.value)"
       >
         <mat-option [value]="null" />

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

@@ -46,8 +46,8 @@ import annotationPlugin from 'chartjs-plugin-annotation';
   styleUrls: ['./benchmark-comparator.component.scss']
 })
 export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
+  @Input() benchmark: Partial<SymbolProfile>;
   @Input() benchmarkDataItems: LineChartItem[] = [];
-  @Input() benchmark: string;
   @Input() benchmarks: Partial<SymbolProfile>[];
   @Input() colorScheme: ColorScheme;
   @Input() daysInMarket: number;
@@ -116,7 +116,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
           data: this.benchmarkDataItems.map(({ date, value }) => {
             return { x: parseDate(date).getTime(), y: value };
           }),
-          label: $localize`Benchmark`
+          label: this.benchmark?.name ?? $localize`Benchmark`
         }
       ]
     };

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

@@ -32,6 +32,7 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './analysis-page.html'
 })
 export class AnalysisPageComponent implements OnDestroy, OnInit {
+  public benchmark: Partial<SymbolProfile>;
   public benchmarkDataItems: HistoricalDataItem[] = [];
   public benchmarks: Partial<SymbolProfile>[];
   public bottom3: Position[];
@@ -122,6 +123,10 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.benchmark = this.benchmarks.find(({ id }) => {
+            return id === this.user.settings?.benchmark;
+          });
+
           this.update();
         }
       });

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

@@ -4,7 +4,7 @@
     <div class="col-lg">
       <gf-benchmark-comparator
         class="h-100"
-        [benchmark]="user?.settings?.benchmark"
+        [benchmark]="benchmark"
         [benchmarkDataItems]="benchmarkDataItems"
         [benchmarks]="benchmarks"
         [colorScheme]="user?.settings?.colorScheme"