Task/align chart data array types with LineChartItem and make groupBy optional (#7996)

Align chart data array types with LineChartItem and make groupBy optional

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -10,7 +10,7 @@ import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import {
   AccountBalancesResponse,
   Activity,
-  HistoricalDataItem,
+  LineChartItem,
   PortfolioPosition,
   User
 } from '@ghostfolio/common/interfaces';
@@ -99,7 +99,7 @@ export class GfAccountDetailDialogComponent implements OnInit {
   protected equity: number | null;
   protected equityPrecision = 2;
   protected hasPermissionToDeleteAccountBalance: boolean;
-  protected historicalDataItems: HistoricalDataItem[];
+  protected historicalDataItems: LineChartItem[];
   protected holdings: PortfolioPosition[];
   protected interestInBaseCurrency: number;
   protected interestInBaseCurrencyPrecision = 2;
@@ -364,12 +364,16 @@ export class GfAccountDetailDialogComponent implements OnInit {
           portfolioPerformance.chart &&
           portfolioPerformance.chart.length > 0
         ) {
-          this.historicalDataItems = portfolioPerformance.chart.map(
-            ({ date, netWorth, netWorthInPercentage }) => ({
+          this.historicalDataItems = portfolioPerformance.chart
+            .map(({ date, netWorth, netWorthInPercentage }) => {
+              return {
                 date,
                 value: isNumber(netWorth) ? netWorth : netWorthInPercentage
+              };
             })
-          );
+            .filter((item): item is LineChartItem => {
+              return isNumber(item.value);
+            });
         } else {
           this.historicalDataItems = this.accountBalances.map(
             ({ date, valueInBaseCurrency }) => {

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

@@ -59,7 +59,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() public benchmarkDataLabel = '';
   @Input() public colorScheme?: ColorScheme;
   @Input() public currency?: string;
-  @Input() public groupBy: GroupBy;
+  @Input() public groupBy?: GroupBy;
   @Input() public historicalDataItems: LineChartItem[] = [];
   @Input() public isInPercentage?: boolean = false;
   @Input() public isLoading = false;

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -7,8 +7,8 @@ import {
 } from '@ghostfolio/common/config';
 import { canOpenHoldingDetail } from '@ghostfolio/common/helper';
 import {
-  HistoricalDataItem,
   InvestmentItem,
+  LineChartItem,
   PortfolioInvestmentsResponse,
   PortfolioPerformance,
   PortfolioPosition,
@@ -79,7 +79,7 @@ import { forkJoin } from 'rxjs';
 })
 export class GfAnalysisPageComponent implements OnInit {
   protected benchmark?: Partial<SymbolProfile>;
-  protected benchmarkDataItems: HistoricalDataItem[] = [];
+  protected benchmarkDataItems: LineChartItem[] = [];
   protected readonly benchmarks: Partial<SymbolProfile>[];
   protected bottom3: PortfolioPosition[];
   protected dividendsByGroup: InvestmentItem[];
@@ -101,8 +101,8 @@ export class GfAnalysisPageComponent implements OnInit {
   ];
   protected performance: PortfolioPerformance;
   protected readonly PerformanceCalculationType = PerformanceCalculationType;
-  protected performanceDataItems: HistoricalDataItem[];
-  protected performanceDataItemsInPercentage: HistoricalDataItem[];
+  protected performanceDataItems: LineChartItem[];
+  protected performanceDataItemsInPercentage: LineChartItem[];
   protected readonly portfolioEvolutionDataLabel = $localize`Investment`;
   protected precision = 2;
   protected savingsRatePerMonth: number | undefined;
@@ -378,19 +378,25 @@ export class GfAnalysisPageComponent implements OnInit {
               });
             }
 
+            const value = isNumber(valueWithCurrencyEffect)
+              ? valueWithCurrencyEffect
+              : valueInPercentage;
+
+            if (isNumber(value)) {
               this.performanceDataItems.push({
                 date,
-              value: isNumber(valueWithCurrencyEffect)
-                ? valueWithCurrencyEffect
-                : valueInPercentage
+                value
               });
             }
+          }
 
+          if (isNumber(netPerformanceInPercentageWithCurrencyEffect)) {
             this.performanceDataItemsInPercentage.push({
               date,
               value: netPerformanceInPercentageWithCurrencyEffect
             });
           }
+        }
 
         if (
           this.deviceType() === 'mobile' &&