Bugfix/fix benchmark chart (#1236)

* Fix benchmark chart

* Distinguish between currency and unit in tooltip

* Update changelog

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

@@ -19,7 +19,8 @@ import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
 import {
   getBackgroundColor,
   getDateFormatString,
-  getTextColor
+  getTextColor,
+  parseDate
 } from '@ghostfolio/common/helper';
 import {
   LineChartItem,
@@ -56,7 +57,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @ViewChild('chartCanvas') chartCanvas;
 
   public benchmark: UniqueAsset;
-  public chart: Chart;
+  public chart: Chart<any>;
   public isLoading = true;
 
   public constructor() {
@@ -92,16 +93,13 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
     this.isLoading = true;
 
     const data = {
-      labels: this.performanceDataItems.map(({ date }) => {
-        return date;
-      }),
       datasets: [
         {
           backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
           borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
           borderWidth: 2,
-          data: this.performanceDataItems.map(({ value }) => {
-            return value;
+          data: this.performanceDataItems.map(({ date, value }) => {
+            return { x: parseDate(date), y: value };
           }),
           label: $localize`Portfolio`
         },
@@ -109,8 +107,8 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
           backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
           borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
           borderWidth: 2,
-          data: this.benchmarkDataItems.map(({ value }) => {
-            return value;
+          data: this.benchmarkDataItems.map(({ date, value }) => {
+            return { x: parseDate(date), y: value };
           }),
           label: $localize`Benchmark`
         }

apps/client/src/app/components/home-overview/home-overview.html

@@ -15,6 +15,7 @@
         <gf-line-chart
           class="position-absolute"
           symbol="Performance"
+          [currency]="user?.settings?.isExperimentalFeatures ? undefined : user?.settings?.baseCurrency"
           [historicalDataItems]="historicalDataItems"
           [hidden]="historicalDataItems?.length === 0"
           [locale]="user?.settings?.locale"
@@ -23,7 +24,7 @@
           [showLoader]="false"
           [showXAxis]="false"
           [showYAxis]="false"
-          [unit]="user?.settings?.isExperimentalFeatures ? '%' : user?.settings?.baseCurrency"
+          [unit]="user?.settings?.isExperimentalFeatures ? '%' : undefined"
         ></gf-line-chart>
       </div>
     </div>

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -125,7 +125,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
           borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
           borderWidth: this.groupBy ? 0 : 2,
           data: this.data.map((position) => {
-            return position.investment;
+            return this.isInPercent
+              ? position.investment * 100
+              : position.investment;
           }),
           label: $localize`Deposit`,
           segment: {
@@ -255,8 +257,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   private getTooltipPluginConfiguration() {
     return {
       ...getTooltipOptions({
+        currency: this.isInPercent ? undefined : this.currency,
         locale: this.isInPercent ? undefined : this.locale,
-        unit: this.isInPercent ? undefined : this.currency
+        unit: this.isInPercent ? '%' : undefined
       }),
       mode: 'index',
       position: <unknown>'top',

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

@@ -23,13 +23,13 @@
       class="mb-4"
       benchmarkLabel="Average Unit Price"
       [benchmarkDataItems]="benchmarkDataItems"
+      [currency]="SymbolProfile?.currency"
       [historicalDataItems]="historicalDataItems"
       [locale]="data.locale"
       [showGradient]="true"
       [showXAxis]="true"
       [showYAxis]="true"
       [symbol]="data.symbol"
-      [unit]="SymbolProfile?.currency"
     ></gf-line-chart>
 
     <div class="row">