Distinguish between currency and unit in tooltip

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 =