Feature/improve chart calculation (#1226)

* Improve chart calculation

* Update changelog

CHANGELOG.md

@@ -5,6 +5,13 @@ 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
+
+### Added
+
+- Supported units in the line chart component
+- Added a new chart calculation engine (experimental)
+
 ## 1.186.2 - 03.09.2022
 
 ### Changed

apps/api/src/app/portfolio/portfolio-calculator.ts

@@ -172,15 +172,12 @@ export class PortfolioCalculator {
     start: Date,
     end = new Date(Date.now())
   ): Promise<CurrentPositions> {
-    const transactionPointsInRange =
+    const transactionPointsBeforeEndDate =
       this.transactionPoints?.filter((transactionPoint) => {
-        return isWithinInterval(parseDate(transactionPoint.date), {
+        return isBefore(parseDate(transactionPoint.date), end);
-          start,
-          end
-        });
       }) ?? [];
 
-    if (!transactionPointsInRange.length) {
+    if (!transactionPointsBeforeEndDate.length) {
       return {
         currentValue: new Big(0),
         grossPerformance: new Big(0),
@@ -194,32 +191,34 @@ export class PortfolioCalculator {
     }
 
     const lastTransactionPoint =
-      transactionPointsInRange[transactionPointsInRange.length - 1];
+      transactionPointsBeforeEndDate[transactionPointsBeforeEndDate.length - 1];
 
     let firstTransactionPoint: TransactionPoint = null;
-    let firstIndex = transactionPointsInRange.length;
+    let firstIndex = transactionPointsBeforeEndDate.length;
     const dates = [];
     const dataGatheringItems: IDataGatheringItem[] = [];
     const currencies: { [symbol: string]: string } = {};
 
     dates.push(resetHours(start));
-    for (const item of transactionPointsInRange[firstIndex - 1].items) {
+    for (const item of transactionPointsBeforeEndDate[firstIndex - 1].items) {
       dataGatheringItems.push({
         dataSource: item.dataSource,
         symbol: item.symbol
       });
       currencies[item.symbol] = item.currency;
     }
-    for (let i = 0; i < transactionPointsInRange.length; i++) {
+    for (let i = 0; i < transactionPointsBeforeEndDate.length; i++) {
       if (
-        !isBefore(parseDate(transactionPointsInRange[i].date), start) &&
+        !isBefore(parseDate(transactionPointsBeforeEndDate[i].date), start) &&
         firstTransactionPoint === null
       ) {
-        firstTransactionPoint = transactionPointsInRange[i];
+        firstTransactionPoint = transactionPointsBeforeEndDate[i];
         firstIndex = i;
       }
       if (firstTransactionPoint !== null) {
-        dates.push(resetHours(parseDate(transactionPointsInRange[i].date)));
+        dates.push(
+          resetHours(parseDate(transactionPointsBeforeEndDate[i].date))
+        );
       }
     }
 

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -35,7 +35,8 @@ import {
   Param,
   Query,
   UseGuards,
-  UseInterceptors
+  UseInterceptors,
+  Version
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
@@ -110,6 +111,26 @@ export class PortfolioController {
     };
   }
 
+  @Get('chart')
+  @UseGuards(AuthGuard('jwt'))
+  @Version('2')
+  public async getChartV2(
+    @Headers('impersonation-id') impersonationId: string,
+    @Query('range') range
+  ): Promise<PortfolioChart> {
+    const historicalDataContainer = await this.portfolioService.getChartV2(
+      impersonationId,
+      range
+    );
+
+    return {
+      chart: historicalDataContainer.items,
+      hasError: false,
+      isAllTimeHigh: false,
+      isAllTimeLow: false
+    };
+  }
+
   @Get('details')
   @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(RedactValuesInResponseInterceptor)

apps/api/src/app/portfolio/portfolio.service.ts

@@ -57,6 +57,7 @@ import {
 } from '@prisma/client';
 import Big from 'big.js';
 import {
+  addDays,
   differenceInDays,
   endOfToday,
   format,
@@ -71,7 +72,7 @@ import {
   subDays,
   subYears
 } from 'date-fns';
-import { isEmpty, sortBy, uniq, uniqBy } from 'lodash';
+import { isEmpty, last, sortBy, uniq, uniqBy } from 'lodash';
 
 import {
   HistoricalDataContainer,
@@ -85,6 +86,7 @@ const emergingMarkets = require('../../assets/countries/emerging-markets.json');
 
 @Injectable()
 export class PortfolioService {
+  private static readonly MAX_CHART_ITEMS = 250;
   private baseCurrency: string;
 
   public constructor(
@@ -354,6 +356,78 @@ export class PortfolioService {
     };
   }
 
+  public async getChartV2(
+    aImpersonationId: string,
+    aDateRange: DateRange = 'max'
+  ): Promise<HistoricalDataContainer> {
+    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+
+    const { portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
+        userId
+      });
+
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: this.request.user.Settings.currency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
+
+    portfolioCalculator.setTransactionPoints(transactionPoints);
+    if (transactionPoints.length === 0) {
+      return {
+        isAllTimeHigh: false,
+        isAllTimeLow: false,
+        items: []
+      };
+    }
+    const endDate = new Date();
+
+    const portfolioStart = parseDate(transactionPoints[0].date);
+    const startDate = this.getStartDate(aDateRange, portfolioStart);
+
+    const daysInMarket = differenceInDays(new Date(), startDate);
+    const step = Math.round(
+      daysInMarket / Math.min(daysInMarket, PortfolioService.MAX_CHART_ITEMS)
+    );
+
+    const items: HistoricalDataItem[] = [];
+
+    let currentEndDate = startDate;
+
+    while (isBefore(currentEndDate, endDate)) {
+      const currentPositions = await portfolioCalculator.getCurrentPositions(
+        startDate,
+        currentEndDate
+      );
+
+      items.push({
+        date: format(currentEndDate, DATE_FORMAT),
+        value: currentPositions.netPerformancePercentage.toNumber() * 100
+      });
+
+      currentEndDate = addDays(currentEndDate, step);
+    }
+
+    const today = new Date();
+
+    if (last(items)?.date !== format(today, DATE_FORMAT)) {
+      // Add today
+      const { netPerformancePercentage } =
+        await portfolioCalculator.getCurrentPositions(startDate, today);
+      items.push({
+        date: format(today, DATE_FORMAT),
+        value: netPerformancePercentage.toNumber() * 100
+      });
+    }
+
+    return {
+      isAllTimeHigh: false,
+      isAllTimeLow: false,
+      items: items
+    };
+  }
+
   public async getDetails(
     aImpersonationId: string,
     aUserId: string,

apps/api/src/app/user/update-user-setting.dto.ts

@@ -5,6 +5,10 @@ export class UpdateUserSettingDto {
   @IsOptional()
   emergencyFund?: number;
 
+  @IsBoolean()
+  @IsOptional()
+  isExperimentalFeatures?: boolean;
+
   @IsBoolean()
   @IsOptional()
   isRestrictedView?: boolean;

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -106,7 +106,10 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
     this.isLoadingPerformance = true;
 
     this.dataService
-      .fetchChart({ range: this.dateRange })
+      .fetchChart({
+        range: this.dateRange,
+        version: this.user?.settings?.isExperimentalFeatures ? 2 : 1
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((chartData) => {
         this.historicalDataItems = chartData.chart.map((chartDataItem) => {

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

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

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

@@ -249,10 +249,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
 
   private getTooltipPluginConfiguration() {
     return {
-      ...getTooltipOptions(
+      ...getTooltipOptions({
-        this.isInPercent ? undefined : this.currency,
+        locale: this.isInPercent ? undefined : this.locale,
-        this.isInPercent ? undefined : this.locale
+        unit: this.isInPercent ? undefined : this.currency
-      ),
+      }),
       mode: 'index',
       position: <unknown>'top',
       xAlign: 'center',

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">

apps/client/src/app/pages/account/account-page.component.ts

@@ -226,6 +226,24 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onExperimentalFeaturesChange(aEvent: MatSlideToggleChange) {
+    this.dataService
+      .putUserSetting({ isExperimentalFeatures: aEvent.checked })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
   public onRedeemCoupon() {
     let couponCode = prompt($localize`Please enter your coupon code:`);
     couponCode = couponCode?.trim();

apps/client/src/app/pages/account/account-page.html

@@ -188,6 +188,22 @@
               ></mat-slide-toggle>
             </div>
           </div>
+          <div
+            *ngIf="hasPermissionToUpdateUserSettings && user?.subscription"
+            class="align-items-center d-flex mt-4 py-1"
+          >
+            <div class="pr-1 w-50">
+              <div i18n>Experimental Features</div>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-slide-toggle
+                color="primary"
+                [checked]="user.settings.isExperimentalFeatures"
+                [disabled]="!hasPermissionToUpdateUserSettings"
+                (change)="onExperimentalFeaturesChange($event)"
+              ></mat-slide-toggle>
+            </div>
+          </div>
           <div class="align-items-center d-flex mt-4 py-1">
             <div class="pr-1 w-50" i18n>User ID</div>
             <div class="pl-1 w-50">{{ user?.id }}</div>

apps/client/src/app/services/data.service.ts

@@ -185,8 +185,8 @@ export class DataService {
     return this.http.get<BenchmarkResponse>('/api/v1/benchmark');
   }
 
-  public fetchChart({ range }: { range: DateRange }) {
+  public fetchChart({ range, version }: { range: DateRange; version: number }) {
-    return this.http.get<PortfolioChart>('/api/v1/portfolio/chart', {
+    return this.http.get<PortfolioChart>(`/api/v${version}/portfolio/chart`, {
       params: { range }
     });
   }

apps/client/src/locales/messages.de.xlf

@@ -642,7 +642,7 @@
         <target state="translated">Aktuelle Marktstimmung</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.html</context>
-          <context context-type="linenumber">11</context>
+          <context context-type="linenumber">12</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e95ae009d0bdb45fcc656e8b65248cf7396080d5" datatype="html">
@@ -1058,7 +1058,7 @@
         <target state="translated">Bitte gib den Betrag deines Notfallfonds ein:</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts</context>
-          <context context-type="linenumber">48</context>
+          <context context-type="linenumber">52</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fc61416d48adb7af122b8697e806077eb251fb57" datatype="html">
@@ -1262,7 +1262,7 @@
         <target state="translated">Bitte gebe deinen Gutscheincode ein:</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">230</context>
+          <context context-type="linenumber">248</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4420880039966769543" datatype="html">
@@ -1270,7 +1270,7 @@
         <target state="translated">Gutscheincode konnte nicht eingelöst werden</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">240</context>
+          <context context-type="linenumber">258</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4819099731531004979" datatype="html">
@@ -1278,7 +1278,7 @@
         <target state="translated">Gutscheincode wurde eingelöst</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">252</context>
+          <context context-type="linenumber">270</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7967484035994732534" datatype="html">
@@ -1286,7 +1286,7 @@
         <target state="translated">Neu laden</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">253</context>
+          <context context-type="linenumber">271</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7963559562180316948" datatype="html">
@@ -1294,7 +1294,7 @@
         <target state="translated">Möchtest du diese Anmeldemethode wirklich löschen?</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">299</context>
+          <context context-type="linenumber">317</context>
         </context-group>
       </trans-unit>
       <trans-unit id="29881a45dafbe5aa05cd9d0441a4c0c2fb06df92" datatype="html">
@@ -1382,7 +1382,7 @@
         <target state="new">Locale</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">135</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4402006eb2c97591dd8c87a5bd8f721fe9e4dc00" datatype="html">
@@ -1390,7 +1390,7 @@
         <target state="translated">Datums- und Zahlenformat</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">137</context>
         </context-group>
       </trans-unit>
       <trans-unit id="234d001ccf20d47ac6a2846bb029eebb61444d15" datatype="html">
@@ -1398,7 +1398,7 @@
         <target state="translated">Ansicht</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">159</context>
+          <context context-type="linenumber">160</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9ae348ee3a7319c2fc4794fa8bc425999d355f8f" datatype="html">
@@ -1406,7 +1406,7 @@
         <target state="translated">Einloggen mit Fingerabdruck</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">180</context>
+          <context context-type="linenumber">181</context>
         </context-group>
       </trans-unit>
       <trans-unit id="83c4d4d764d2e2725ab8e919ec16ac400e1f290a" datatype="html">
@@ -1414,7 +1414,7 @@
         <target state="translated">Benutzer ID</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">191</context>
+          <context context-type="linenumber">208</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9021c579c084e68d9db06a569d76f024111c6c54" datatype="html">
@@ -1422,7 +1422,7 @@
         <target state="translated">Zugangsberechtigung</target>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">200</context>
+          <context context-type="linenumber">217</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5e41f1b4c46ad9e0a9bc83fa36445483aa5cc324" datatype="html">
@@ -2641,6 +2641,14 @@
           <context context-type="linenumber">4,7</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="03b120b05e0922e5e830c3466fda9ee0bfbf59e9" datatype="html">
+        <source>Experimental Features</source>
+        <target state="translated">Experimentelle Funktionen</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
+          <context context-type="linenumber">196</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>

apps/client/src/locales/messages.xlf

@@ -583,7 +583,7 @@
         <source>Current Market Mood</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.html</context>
-          <context context-type="linenumber">11</context>
+          <context context-type="linenumber">12</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e95ae009d0bdb45fcc656e8b65248cf7396080d5" datatype="html">
@@ -957,7 +957,7 @@
         <source>Please enter the amount of your emergency fund:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts</context>
-          <context context-type="linenumber">48</context>
+          <context context-type="linenumber">52</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fc61416d48adb7af122b8697e806077eb251fb57" datatype="html">
@@ -1137,35 +1137,35 @@
         <source>Please enter your coupon code:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">230</context>
+          <context context-type="linenumber">248</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4420880039966769543" datatype="html">
         <source>Could not redeem coupon code</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">240</context>
+          <context context-type="linenumber">258</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4819099731531004979" datatype="html">
         <source>Coupon code has been redeemed</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">252</context>
+          <context context-type="linenumber">270</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7967484035994732534" datatype="html">
         <source>Reload</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">253</context>
+          <context context-type="linenumber">271</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7963559562180316948" datatype="html">
         <source>Do you really want to remove this sign in method?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.component.ts</context>
-          <context context-type="linenumber">299</context>
+          <context context-type="linenumber">317</context>
         </context-group>
       </trans-unit>
       <trans-unit id="29881a45dafbe5aa05cd9d0441a4c0c2fb06df92" datatype="html">
@@ -1243,42 +1243,42 @@
         <source>Locale</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">135</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4402006eb2c97591dd8c87a5bd8f721fe9e4dc00" datatype="html">
         <source>Date and number format</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">137</context>
         </context-group>
       </trans-unit>
       <trans-unit id="234d001ccf20d47ac6a2846bb029eebb61444d15" datatype="html">
         <source>View Mode</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">159</context>
+          <context context-type="linenumber">160</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9ae348ee3a7319c2fc4794fa8bc425999d355f8f" datatype="html">
         <source>Sign in with fingerprint</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">180</context>
+          <context context-type="linenumber">181</context>
         </context-group>
       </trans-unit>
       <trans-unit id="83c4d4d764d2e2725ab8e919ec16ac400e1f290a" datatype="html">
         <source>User ID</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">191</context>
+          <context context-type="linenumber">208</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9021c579c084e68d9db06a569d76f024111c6c54" datatype="html">
         <source>Granted Access</source>
         <context-group purpose="location">
           <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
-          <context context-type="linenumber">200</context>
+          <context context-type="linenumber">217</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5e41f1b4c46ad9e0a9bc83fa36445483aa5cc324" datatype="html">
@@ -2359,6 +2359,13 @@
           <context context-type="linenumber">6</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="03b120b05e0922e5e830c3466fda9ee0bfbf59e9" datatype="html">
+        <source>Experimental Features</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">apps/client/src/app/pages/account/account-page.html</context>
+          <context context-type="linenumber">196</context>
+        </context-group>
+      </trans-unit>
     </body>
   </file>
 </xliff>

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

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

libs/common/src/lib/interfaces/user-settings.interface.ts

@@ -2,6 +2,7 @@ import { ViewMode } from '@prisma/client';
 
 export interface UserSettings {
   baseCurrency?: string;
+  isExperimentalFeatures?: boolean;
   isRestrictedView?: boolean;
   language?: string;
   locale: string;

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

@@ -47,7 +47,6 @@ import { LineChartItem } from './interfaces/line-chart.interface';
 export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarkLabel = '';
-  @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
   @Input() locale: string;
   @Input() showGradient = false;
@@ -56,6 +55,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() showXAxis = false;
   @Input() showYAxis = false;
   @Input() symbol: string;
+  @Input() unit: string;
   @Input() yMax: number;
   @Input() yMaxLabel: string;
   @Input() yMin: number;
@@ -259,7 +259,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   private getTooltipPluginConfiguration() {
     return {
-      ...getTooltipOptions(this.currency, this.locale),
+      ...getTooltipOptions({ 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,7 @@ export class PortfolioProportionChartComponent
 
   private getTooltipPluginConfiguration(data: ChartConfiguration['data']) {
     return {
-      ...getTooltipOptions(this.baseCurrency, this.locale),
+      ...getTooltipOptions({ locale: this.locale, unit: this.baseCurrency }),
       callbacks: {
         label: (context) => {
           const labelIndex =