Feature/extend benchmark detail dialog by market price (#4565)

* Add current market price

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Extended the benchmark detail dialog by the current market price
 - Added `watchlist` to the `User` database schema as a preparation for watching assets
 
 ### Fixed

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -7,6 +7,7 @@ import {
   LineChartItem
 } from '@ghostfolio/common/interfaces';
 import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -35,6 +36,7 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
     GfDialogFooterModule,
     GfDialogHeaderModule,
     GfLineChartComponent,
+    GfValueComponent,
     MatDialogModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -45,6 +47,7 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
 export class GfBenchmarkDetailDialogComponent implements OnDestroy, OnInit {
   public assetProfile: AdminMarketDataDetails['assetProfile'];
   public historicalDataItems: LineChartItem[];
+  public value: number;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -65,9 +68,18 @@ export class GfBenchmarkDetailDialogComponent implements OnDestroy, OnInit {
       .subscribe(({ assetProfile, marketData }) => {
         this.assetProfile = assetProfile;
 
-        this.historicalDataItems = marketData.map(({ date, marketPrice }) => {
+        this.historicalDataItems = marketData.map(
-          return { date: format(date, DATE_FORMAT), value: marketPrice };
+          ({ date, marketPrice }, index) => {
-        });
+            if (marketData.length - 1 === index) {
+              this.value = marketPrice;
+            }
+
+            return {
+              date: format(date, DATE_FORMAT),
+              value: marketPrice
+            };
+          }
+        );
 
         this.changeDetectorRef.markForCheck();
       });

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -8,6 +8,17 @@
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center mb-3">
+        <gf-value
+          size="large"
+          [locale]="data.locale"
+          [precision]="2"
+          [value]="value"
+        />
+      </div>
+    </div>
+
     <gf-line-chart
       benchmarkLabel="Average Unit Price"
       class="mb-4"