Bugfix/fix x-axis of investment chart component to adapt on date range change (#3974)

* Fix x-axis of investment chart component to adapt on date range change

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -5,6 +5,14 @@ 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
+
+### Fixed
+
+- Fixed an issue with the X-axis scale of the dividend timeline on the analysis page
+- Fixed an issue with the X-axis scale of the investment timeline on the analysis page
+- Fixed an issue with the X-axis scale of the portfolio evolution chart on the analysis page
+
 ## 2.118.0 - 2024-10-23
 
 ### Added

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

@@ -51,7 +51,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarks: Partial<SymbolProfile>[];
   @Input() colorScheme: ColorScheme;
-  @Input() daysInMarket: number;
   @Input() isLoading: boolean;
   @Input() locale = getLocale();
   @Input() performanceDataItems: LineChartItem[];

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

@@ -39,8 +39,7 @@ import {
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import { isAfter, isValid, min, subDays } from 'date-fns';
+import { isAfter } from 'date-fns';
-import { first } from 'lodash';
 
 @Component({
   selector: 'gf-investment-chart',
@@ -53,7 +52,6 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() benchmarkDataLabel = '';
   @Input() colorScheme: ColorScheme;
   @Input() currency: string;
-  @Input() daysInMarket: number;
   @Input() groupBy: GroupBy;
   @Input() historicalDataItems: LineChartItem[] = [];
   @Input() isInPercent = false;
@@ -154,23 +152,11 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
     };
 
     if (this.chartCanvas) {
-      let scaleXMin: string;
-
-      if (this.daysInMarket) {
-        const minDate = min([
-          parseDate(first(this.investments)?.date),
-          subDays(new Date().setHours(0, 0, 0, 0), this.daysInMarket)
-        ]);
-
-        scaleXMin = isValid(minDate) ? minDate.toISOString() : undefined;
-      }
-
       if (this.chart) {
         this.chart.data = chartData;
         this.chart.options.plugins.tooltip = <unknown>(
           this.getTooltipPluginConfiguration()
         );
-        this.chart.options.scales.x.min = scaleXMin;
 
         if (
           this.savingsRate &&
@@ -253,7 +239,6 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 grid: {
                   display: false
                 },
-                min: scaleXMin,
                 type: 'time',
                 time: {
                   tooltipFormat: getDateFormatString(this.locale),

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

@@ -15,7 +15,6 @@ import { translate } from '@ghostfolio/ui/i18n';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { SymbolProfile } from '@prisma/client';
-import { differenceInDays } from 'date-fns';
 import { isNumber, sortBy } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -32,7 +31,6 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public benchmarks: Partial<SymbolProfile>[];
   public bottom3: PortfolioPosition[];
   public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
-  public daysInMarket: number;
   public deviceType: string;
   public dividendsByGroup: InvestmentItem[];
   public dividendTimelineDataLabel = $localize`Dividend`;
@@ -198,7 +196,6 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ chart, firstOrderDate, performance }) => {
         this.firstOrderDate = firstOrderDate ?? new Date();
-        this.daysInMarket = differenceInDays(new Date(), firstOrderDate);
 
         this.investments = [];
         this.performance = performance;

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -8,7 +8,6 @@
         [benchmarkDataItems]="benchmarkDataItems"
         [benchmarks]="benchmarks"
         [colorScheme]="user?.settings?.colorScheme"
-        [daysInMarket]="daysInMarket"
         [isLoading]="isLoadingBenchmarkComparator || isLoadingInvestmentChart"
         [locale]="user?.settings?.locale"
         [performanceDataItems]="performanceDataItemsInPercentage"
@@ -277,7 +276,6 @@
           [benchmarkDataItems]="investments"
           [benchmarkDataLabel]="portfolioEvolutionDataLabel"
           [currency]="user?.settings?.baseCurrency"
-          [daysInMarket]="daysInMarket"
           [historicalDataItems]="performanceDataItems"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           [isLoading]="isLoadingInvestmentChart"
@@ -334,7 +332,6 @@
           [benchmarkDataItems]="investmentsByGroup"
           [benchmarkDataLabel]="investmentTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
-          [daysInMarket]="daysInMarket"
           [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           [isLoading]="isLoadingInvestmentTimelineChart"
@@ -370,7 +367,6 @@
           [benchmarkDataItems]="dividendsByGroup"
           [benchmarkDataLabel]="dividendTimelineDataLabel"
           [currency]="user?.settings?.baseCurrency"
-          [daysInMarket]="daysInMarket"
           [groupBy]="mode"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           [isLoading]="isLoadingDividendTimelineChart"