Bugfix/fix benchmark chart (#1236)

* Fix benchmark chart

* Distinguish between currency and unit in tooltip

* Update changelog

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Distinguished between currency and unit in the chart tooltip
+
+### Fixed
+
+- Fixed the benchmark chart in the benchmark comparator (experimental)
+
 ## 1.188.0 - 06.09.2022
 
 ### Added

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 }) => {
+          data: this.performanceDataItems.map(({ date, value }) => {
-            return 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 }) => {
+          data: this.benchmarkDataItems.map(({ date, value }) => {
-            return 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">

libs/common/src/lib/chart-helper.ts

@@ -3,9 +3,11 @@ import { Chart, TooltipPosition } from 'chart.js';
 import { getBackgroundColor, getTextColor } from './helper';
 
 export function getTooltipOptions({
+  currency = '',
   locale = '',
   unit = ''
 }: {
+  currency?: string;
   locale?: string;
   unit?: string;
 } = {}) {
@@ -21,11 +23,13 @@ export function getTooltipOptions({
           label += ': ';
         }
         if (context.parsed.y !== null) {
-          if (unit) {
+          if (currency) {
             label += `${context.parsed.y.toLocaleString(locale, {
               maximumFractionDigits: 2,
               minimumFractionDigits: 2
-            })} ${unit}`;
+            })} ${currency}`;
+          } else if (unit) {
+            label += `${context.parsed.y.toFixed(2)} ${unit}`;
           } else {
             label += context.parsed.y.toFixed(2);
           }

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -46,6 +46,7 @@ import {
 export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarkLabel = '';
+  @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
   @Input() locale: string;
   @Input() showGradient = false;
@@ -258,7 +259,11 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   private getTooltipPluginConfiguration() {
     return {
-      ...getTooltipOptions({ locale: this.locale, unit: this.unit }),
+      ...getTooltipOptions({
+        currency: this.currency,
+        locale: this.locale,
+        unit: this.unit
+      }),
       mode: 'index',
       position: <unknown>'top',
       xAlign: 'center',

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -349,7 +349,10 @@ export class PortfolioProportionChartComponent
 
   private getTooltipPluginConfiguration(data: ChartConfiguration['data']) {
     return {
-      ...getTooltipOptions({ locale: this.locale, unit: this.baseCurrency }),
+      ...getTooltipOptions({
+        currency: this.baseCurrency,
+        locale: this.locale
+      }),
       callbacks: {
         label: (context) => {
           const labelIndex =