From 3baab79b54cd65e6e8cbd8b7979baa7108b227b9 Mon Sep 17 00:00:00 2001 From: Amandee Manushika <47607256+amandee27@users.noreply.github.com> Date: Thu, 24 Oct 2024 19:18:16 +0100 Subject: [PATCH] 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 | 8 ++++++++ .../benchmark-comparator.component.ts | 1 - .../investment-chart.component.ts | 17 +---------------- .../analysis/analysis-page.component.ts | 3 --- .../pages/portfolio/analysis/analysis-page.html | 4 ---- 5 files changed, 9 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b6860c922..9800f9251 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts index dc80b4058..2035d06a9 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts +++ b/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[]; @Input() colorScheme: ColorScheme; - @Input() daysInMarket: number; @Input() isLoading: boolean; @Input() locale = getLocale(); @Input() performanceDataItems: LineChartItem[]; diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts index e84032060..7c97ff3e2 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts +++ b/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 { first } from 'lodash'; +import { isAfter } from 'date-fns'; @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 = ( 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), diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts index 2fd048887..4cd75c7ad 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts +++ b/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[]; 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; diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html index 73817bdcb..087b3bd54 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html +++ b/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"