Bugfix/improve x axis scale of dividend and investment timeline (#3010)

* Improve X-axis scale

* Update changelog

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

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 = <unknown>(
           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: {