diff --git a/CHANGELOG.md b/CHANGELOG.md index 9446e3ca0..d373411b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Divided the content of the Frequently Asked Questions (FAQ) page into three sections: _General_, _Cloud (SaaS)_ and _Self-Hosting_ +### 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 + ## 2.51.0 - 2024-02-12 ### Changed 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 0acda8481..b8fa4663f 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 @@ -38,8 +38,16 @@ import { } from 'chart.js'; import 'chartjs-adapter-date-fns'; import annotationPlugin from 'chartjs-plugin-annotation'; -import { addDays, format, isAfter, parseISO, subDays } from 'date-fns'; -import { last } from 'lodash'; +import { + addDays, + format, + isAfter, + isValid, + min, + parseISO, + subDays +} from 'date-fns'; +import { first, last } from 'lodash'; @Component({ selector: 'gf-investment-chart', @@ -143,7 +151,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { }); } - const chartData: ChartData<'line'> = { + const chartData: ChartData<'bar' | 'line'> = { labels: this.historicalDataItems.map(({ date }) => { return parseDate(date); }), @@ -194,17 +202,23 @@ 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 = this.daysInMarket - ? subDays( - new Date().setHours(0, 0, 0, 0), - this.daysInMarket - ).toISOString() - : undefined; + this.chart.options.scales.x.min = scaleXMin; if ( this.savingsRate && @@ -287,9 +301,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy { grid: { display: false }, - min: this.daysInMarket - ? subDays(new Date(), this.daysInMarket).toISOString() - : undefined, + min: scaleXMin, suggestedMax: new Date().toISOString(), type: 'time', time: {