Improve chart tooltip of benchmark comparator

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

@@ -4,7 +4,10 @@ import { DataProviderService } from '@ghostfolio/api/services/data-provider/data
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
-import { PROPERTY_BENCHMARKS } from '@ghostfolio/common/config';
+import {
+  MAX_CHART_ITEMS,
+  PROPERTY_BENCHMARKS
+} from '@ghostfolio/common/config';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {
   BenchmarkMarketDataDetails,
@@ -16,7 +19,6 @@ import { SymbolProfile } from '@prisma/client';
 import Big from 'big.js';
 import { format } from 'date-fns';
 import ms from 'ms';
-import { v4 as uuidv4 } from 'uuid';
 
 @Injectable()
 export class BenchmarkService {
@@ -157,16 +159,18 @@ export class BenchmarkService {
       })
     ]);
 
-    marketDataItems.push({
-      ...currentSymbolItem,
-      createdAt: new Date(),
-      date: new Date(),
-      id: uuidv4()
-    });
+    const step = Math.round(
+      marketDataItems.length / Math.min(marketDataItems.length, MAX_CHART_ITEMS)
+    );
 
     const marketPriceAtStartDate = marketDataItems?.[0]?.marketPrice ?? 0;
     return {
-      marketData: marketDataItems.map((marketDataItem) => {
+      marketData: [
+        ...marketDataItems
+          .filter((marketDataItem, index) => {
+            return index % step === 0;
+          })
+          .map((marketDataItem) => {
             return {
               date: format(marketDataItem.date, DATE_FORMAT),
               value:
@@ -177,7 +181,16 @@ export class BenchmarkService {
                       marketDataItem.marketPrice
                     ) * 100
             };
-      })
+          }),
+        {
+          date: format(new Date(), DATE_FORMAT),
+          value:
+            this.calculateChangeInPercentage(
+              marketPriceAtStartDate,
+              currentSymbolItem.marketPrice
+            ) * 100
+        }
+      ]
     };
   }
 

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

@@ -21,6 +21,7 @@ import { ImpersonationService } from '@ghostfolio/api/services/impersonation.ser
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
 import {
   ASSET_SUB_CLASS_EMERGENCY_FUND,
+  MAX_CHART_ITEMS,
   UNKNOWN_KEY
 } from '@ghostfolio/common/config';
 import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
@@ -85,7 +86,6 @@ const emergingMarkets = require('../../assets/countries/emerging-markets.json');
 
 @Injectable()
 export class PortfolioService {
-  private static readonly MAX_CHART_ITEMS = 250;
   private baseCurrency: string;
 
   public constructor(
@@ -387,7 +387,7 @@ export class PortfolioService {
 
     const daysInMarket = differenceInDays(new Date(), startDate);
     const step = Math.round(
-      daysInMarket / Math.min(daysInMarket, PortfolioService.MAX_CHART_ITEMS)
+      daysInMarket / Math.min(daysInMarket, MAX_CHART_ITEMS)
     );
 
     const items = await portfolioCalculator.getChartData(

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

@@ -23,11 +23,7 @@ import {
   getTextColor,
   parseDate
 } from '@ghostfolio/common/helper';
-import {
-  LineChartItem,
-  UniqueAsset,
-  User
-} from '@ghostfolio/common/interfaces';
+import { LineChartItem, User } from '@ghostfolio/common/interfaces';
 import { DateRange } from '@ghostfolio/common/types';
 import {
   Chart,
@@ -215,7 +211,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
         locale: this.locale,
         unit: '%'
       }),
-      mode: 'index',
+      mode: 'x',
       position: <unknown>'top',
       xAlign: 'center',
       yAlign: 'bottom'

libs/common/src/lib/config.ts

@@ -67,6 +67,8 @@ export const GATHER_HISTORICAL_MARKET_DATA_PROCESS_OPTIONS: JobOptions = {
   }
 };
 
+export const MAX_CHART_ITEMS = 365;
+
 export const PROPERTY_BENCHMARKS = 'BENCHMARKS';
 export const PROPERTY_COUPONS = 'COUPONS';
 export const PROPERTY_CURRENCIES = 'CURRENCIES';