feat(client): use viewChild signals

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,
@@ -66,7 +66,8 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
   @Input() public locale = getLocale();
   @Input() public savingsRate = 0;
 
-  @ViewChild('chartCanvas') private chartCanvas: ElementRef<HTMLCanvasElement>;
+  private readonly chartCanvas =
+    viewChild.required<ElementRef<HTMLCanvasElement>>('chartCanvas');
 
   private chart: Chart<'bar' | 'line'>;
   private investments: InvestmentItem[];
@@ -172,116 +173,119 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
 
         this.chart.update();
       } else {
-        this.chart = new Chart<'bar' | 'line'>(this.chartCanvas.nativeElement, {
-          data: chartData,
-          options: {
-            animation: false,
-            elements: {
-              line: {
-                tension: 0
+        this.chart = new Chart<'bar' | 'line'>(
+          this.chartCanvas().nativeElement,
+          {
+            data: chartData,
+            options: {
+              animation: false,
+              elements: {
+                line: {
+                  tension: 0
+                },
+                point: {
+                  hoverBackgroundColor: getBackgroundColor(this.colorScheme),
+                  hoverRadius: 2,
+                  radius: 0
+                }
               },
-              point: {
-                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
-                hoverRadius: 2,
-                radius: 0
-              }
-            },
-            interaction: { intersect: false, mode: 'index' },
-            maintainAspectRatio: true,
-            plugins: {
-              annotation: {
-                annotations: {
-                  savingsRate: this.savingsRate
-                    ? {
-                        borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`,
-                        borderWidth: 1,
-                        label: {
-                          backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
-                          borderRadius: 2,
-                          color: 'white',
-                          content: $localize`Savings Rate`,
-                          display: true,
-                          font: { size: 10, weight: 'normal' },
-                          padding: {
-                            x: 4,
-                            y: 2
+              interaction: { intersect: false, mode: 'index' },
+              maintainAspectRatio: true,
+              plugins: {
+                annotation: {
+                  annotations: {
+                    savingsRate: this.savingsRate
+                      ? {
+                          borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`,
+                          borderWidth: 1,
+                          label: {
+                            backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+                            borderRadius: 2,
+                            color: 'white',
+                            content: $localize`Savings Rate`,
+                            display: true,
+                            font: { size: 10, weight: 'normal' },
+                            padding: {
+                              x: 4,
+                              y: 2
+                            },
+                            position: 'start'
                           },
-                          position: 'start'
-                        },
-                        scaleID: 'y',
-                        type: 'line',
-                        value: this.savingsRate
-                      }
-                    : undefined,
-                  yAxis: {
-                    borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                    borderWidth: 1,
-                    scaleID: 'y',
-                    type: 'line',
-                    value: 0
+                          scaleID: 'y',
+                          type: 'line',
+                          value: this.savingsRate
+                        }
+                      : undefined,
+                    yAxis: {
+                      borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                      borderWidth: 1,
+                      scaleID: 'y',
+                      type: 'line',
+                      value: 0
+                    }
                   }
-                }
-              },
-              legend: {
-                display: false
-              },
-              tooltip: this.getTooltipPluginConfiguration(),
-              verticalHoverLine: {
-                color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
-              }
-            },
-            responsive: true,
-            scales: {
-              x: {
-                border: {
-                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  width: this.groupBy ? 0 : 1
                 },
-                display: true,
-                grid: {
+                legend: {
                   display: false
                 },
-                type: 'time',
-                time: {
-                  tooltipFormat: getDateFormatString(this.locale),
-                  unit: 'year'
+                tooltip: this.getTooltipPluginConfiguration(),
+                verticalHoverLine: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
                 }
               },
-              y: {
-                border: {
-                  display: false
-                },
-                display: !this.isInPercentage,
-                grid: {
-                  color: ({ scale, tick }) => {
-                    if (
-                      tick.value === 0 ||
-                      tick.value === scale.max ||
-                      tick.value === scale.min
-                    ) {
-                      return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
-                    }
-
-                    return 'transparent';
+              responsive: true,
+              scales: {
+                x: {
+                  border: {
+                    color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                    width: this.groupBy ? 0 : 1
+                  },
+                  display: true,
+                  grid: {
+                    display: false
+                  },
+                  type: 'time',
+                  time: {
+                    tooltipFormat: getDateFormatString(this.locale),
+                    unit: 'year'
                   }
                 },
-                position: 'right',
-                ticks: {
-                  callback: (value: number) => {
-                    return transformTickToAbbreviation(value);
+                y: {
+                  border: {
+                    display: false
                   },
-                  display: true,
-                  mirror: true,
-                  z: 1
+                  display: !this.isInPercentage,
+                  grid: {
+                    color: ({ scale, tick }) => {
+                      if (
+                        tick.value === 0 ||
+                        tick.value === scale.max ||
+                        tick.value === scale.min
+                      ) {
+                        return `rgba(${getTextColor(this.colorScheme)}, 0.1)`;
+                      }
+
+                      return 'transparent';
+                    }
+                  },
+                  position: 'right',
+                  ticks: {
+                    callback: (value: number) => {
+                      return transformTickToAbbreviation(value);
+                    },
+                    display: true,
+                    mirror: true,
+                    z: 1
+                  }
                 }
               }
-            }
-          },
-          plugins: [
-            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
-          ],
-          type: this.groupBy ? 'bar' : 'line'
-        });
+            },
+            plugins: [
+              getVerticalHoverLinePlugin(this.chartCanvas(), this.colorScheme)
+            ],
+            type: this.groupBy ? 'bar' : 'line'
+          }
+        );
       }
     }
   }