Ensure internal apex chart is ready before attempting to update its o…

…ptions.
ScottLogic · Sep 10, 2024 · e414322 · e414322
1 parent ee9443b
commit e414322
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html b/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.html
@@ -8,5 +8,6 @@
     [legend]="chartOptions().legend"
     [states]="chartOptions().states"
     [dataLabels]="chartOptions().dataLabels"
-    [tooltip]="chartOptions().tooltip"></apx-chart>
+    [tooltip]="chartOptions().tooltip"
+    (chartReady)="onChartReady()"></apx-chart>
 </figure>
diff --git a/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.ts b/src/app/carbon-estimation-treemap/carbon-estimation-treemap.component.ts
@@ -34,8 +34,9 @@ export class CarbonEstimationTreemapComponent {
 
   public chartOptions = computed(() => this.getChartOptions(!this.carbonEstimation()));
   private tooltipFormatter = tooltipFormatter;
+  private chartReady = false;
 
-  @ViewChild('chart') chart: ChartComponent | undefined;
+  @ViewChild('chart') private chart: ChartComponent | undefined;
 
   constructor(private carbonEstimationUtilService: CarbonEstimationUtilService) {
     effect(() => {
@@ -46,6 +47,18 @@ export class CarbonEstimationTreemapComponent {
     });
   }
 
+  public onChartReady() {
+    this.chartReady = true;
+  }
+
+  public readyChart(): ChartComponent | undefined {
+    if (this.chartReady) {
+      return this.chart;
+    }
+
+    return undefined;
+  }
+
   private getChartOptions(isPlaceholder: boolean) {
     const chartOptions = getBaseChartOptions(isPlaceholder);
     chartOptions.chart.height = this.chartHeight();

diff --git a/src/app/carbon-estimation/carbon-estimation.component.ts b/src/app/carbon-estimation/carbon-estimation.component.ts
@@ -72,7 +72,7 @@ export class CarbonEstimationComponent implements OnInit, OnDestroy {
       this.hasResized = false;
       this.hasEstimationUpdated = false;
       this.changeDetectorRef.detectChanges();
-      this.treemap.chart?.updateOptions({});
+      this.treemap.readyChart()?.updateOptions({});
     }
   }