Merge efe4a845fa into 1cc1e63b3b

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

@@ -24,7 +24,7 @@ import {
   Input,
   OnChanges,
   OnDestroy,
-  ViewChild
+  viewChild
 } from '@angular/core';
 import {
   BarController,
@@ -55,20 +55,21 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   templateUrl: './investment-chart.component.html'
 })
 export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
-  @Input() benchmarkDataItems: InvestmentItem[] = [];
-  @Input() benchmarkDataLabel = '';
-  @Input() colorScheme: ColorScheme;
-  @Input() currency: string;
-  @Input() groupBy: GroupBy;
-  @Input() historicalDataItems: LineChartItem[] = [];
-  @Input() isInPercentage = false;
-  @Input() isLoading = false;
-  @Input() locale = getLocale();
-  @Input() savingsRate = 0;
+  @Input() public readonly benchmarkDataItems: InvestmentItem[] = [];
+  @Input() public readonly benchmarkDataLabel = '';
+  @Input() public readonly colorScheme: ColorScheme;
+  @Input() public readonly currency: string;
+  @Input() public readonly groupBy: GroupBy;
+  @Input() public readonly historicalDataItems: LineChartItem[] = [];
+  @Input() public readonly isInPercentage = false;
+  @Input() public readonly isLoading = false;
+  @Input() public readonly locale = getLocale();
+  @Input() public readonly savingsRate = 0;
 
-  @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
+  private readonly chartCanvas =
+    viewChild.required<ElementRef<HTMLCanvasElement>>('chartCanvas');
 
-  public chart: Chart<'bar' | 'line'>;
+  private chart: Chart<'bar' | 'line'>;
   private investments: InvestmentItem[];
   private values: LineChartItem[];
 
@@ -118,7 +119,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
           borderWidth: this.groupBy ? 0 : 1,
           data: this.investments.map(({ date, investment }) => {
             return {
-              x: parseDate(date).getTime(),
+              x: parseDate(date)?.getTime() ?? null,
               y: this.isInPercentage ? investment * 100 : investment
             };
           }),
@@ -138,7 +139,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
           borderWidth: 2,
           data: this.values.map(({ date, value }) => {
             return {
-              x: parseDate(date).getTime(),
+              x: parseDate(date)?.getTime() ?? null,
               y: this.isInPercentage ? value * 100 : value
             };
           }),
@@ -165,14 +166,16 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
           this.getTooltipPluginConfiguration();
 
         const annotations = this.chart.options.plugins.annotation
-          .annotations as Record<string, AnnotationOptions<'line'>>;
+          ?.annotations as Record<string, AnnotationOptions<'line'>>;
         if (this.savingsRate && annotations.savingsRate) {
           annotations.savingsRate.value = this.savingsRate;
         }
 
         this.chart.update();
       } else {
-        this.chart = new Chart(this.chartCanvas.nativeElement, {
+        this.chart = new Chart<'bar' | 'line'>(
+          this.chartCanvas().nativeElement,
+          {
             data: chartData,
             options: {
               animation: false,
@@ -278,10 +281,11 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
               }
             },
             plugins: [
-            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
+              getVerticalHoverLinePlugin(this.chartCanvas(), this.colorScheme)
             ],
             type: this.groupBy ? 'bar' : 'line'
-        });
+          }
+        );
       }
     }
   }
@@ -305,8 +309,12 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   }
 
   private isInFuture<T>(aContext: ScriptableLineSegmentContext, aValue: T) {
-    return isAfter(new Date(aContext?.p1?.parsed?.x), new Date())
-      ? aValue
-      : undefined;
+    const xValue = aContext?.p1?.parsed?.x;
+
+    if (xValue == null) {
+      return undefined;
+    }
+
+    return isAfter(new Date(xValue), new Date()) ? aValue : undefined;
   }
 }