From 4fb435d6cb80572203511ef6cdf004b0605654a9 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 14 Jul 2026 09:50:38 +0700
Subject: [PATCH] feat(ui): implement viewChild signal

---
 .../src/lib/treemap-chart/treemap-chart.component.ts   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
index c1c05e006..0b01d6973 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -20,7 +20,7 @@ import {
   OnChanges,
   OnDestroy,
   Output,
-  ViewChild
+  viewChild
 } from '@angular/core';
 import { DataSource } from '@prisma/client';
 import { Big } from 'big.js';
@@ -61,11 +61,11 @@ export class GfTreemapChartComponent
 
   @Output() treemapChartClicked = new EventEmitter<AssetProfileIdentifier>();
 
-  @ViewChild('chartCanvas') private chartCanvas: ElementRef<HTMLCanvasElement>;
-
   protected isLoading = true;
 
   private chart: Chart<'treemap'>;
+  private readonly chartCanvas =
+    viewChild.required<ElementRef<HTMLCanvasElement>>('chartCanvas');
 
   public constructor() {
     Chart.register(LinearScale, Tooltip, TreemapController, TreemapElement);
@@ -307,7 +307,7 @@ export class GfTreemapChartComponent
       ]
     };
 
-    if (this.chartCanvas) {
+    if (this.chartCanvas()) {
       if (this.chart) {
         this.chart.data = data;
         this.chart.options.plugins ??= {};
@@ -316,7 +316,7 @@ export class GfTreemapChartComponent
 
         this.chart.update();
       } else {
-        this.chart = new Chart<'treemap'>(this.chartCanvas.nativeElement, {
+        this.chart = new Chart<'treemap'>(this.chartCanvas().nativeElement, {
           data,
           options: {
             animation: false,