Merge pull request #416 from pmoleri/pmoleri/revert-insync-render

fix(): revert insync render

Author: junedchhipa

projects/ng-apexcharts/src/lib/chart/chart.component.spec.ts

@@ -32,6 +32,29 @@ describe('ChartComponent', () => {
       await firstValueFrom(outputToObservable(component.chartReady));
       expect(fixture.debugElement.query(By.css('svg'))).toBeTruthy();
     });
+
+    it('update series does not re-create the chart', async () => {
+      fixture.componentRef.setInput('chart', { type: 'line' });
+      fixture.componentRef.setInput('series', [{ name: 'series1', data: [10, 20, 27] }]);
+      fixture.componentRef.setInput('xaxis', { categories: ['Jan', 'Feb', 'Mar'] });
+      await firstValueFrom(outputToObservable(component.chartReady));
+      const chart1 = component.chartInstance();
+      expect(chart1).toBeTruthy();
+      expect(fixture.debugElement.queryAll(By.css('.apexcharts-series')).length).toBe(1);
+
+      const createElementSpy = spyOn(component as any, 'createElement').and.callThrough();
+
+      // Update the series
+      fixture.componentRef.setInput('series', [{ name: 'series1', data: [10, 20, 30] }, { name: 'series2', data: [15, 25, 47] }]);
+      await fixture.whenStable();
+
+      expect(createElementSpy).not.toHaveBeenCalled();
+      const chart2 = component.chartInstance();
+      expect(chart2).toBeTruthy();
+      expect(chart1).withContext('Chart instances should be the same').toBe(chart2);
+
+      expect(fixture.debugElement.queryAll(By.css('.apexcharts-series')).length).toBe(2);
+    });
   });
 
   describe('when used inside conditional content projection component', () => {
@@ -99,7 +122,7 @@ class MockConditionalWrapperComponent {
   selector: 'mock-conditional-parent',
   template: `
     <mock-conditional-wrapper [show]="show()">
-      <apx-chart [chart]="config" [series]="chartSeries" [xaxis]="xAxisDetails"></apx-chart>
+      <apx-chart [chart]="config" [series]="chartSeries"></apx-chart>
     </mock-conditional-wrapper>
   `,
   imports: [ChartComponent, MockConditionalWrapperComponent],

projects/ng-apexcharts/src/lib/chart/chart.component.ts

@@ -1,8 +1,8 @@
 import { isPlatformBrowser } from "@angular/common";
 import {
   afterEveryRender,
+  afterNextRender,
   AfterRenderRef,
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -56,7 +56,7 @@ declare global {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
 })
-export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
+export class ChartComponent implements OnChanges, OnDestroy {
   readonly chart = input<ApexChart>();
   readonly annotations = input<ApexAnnotations>();
   readonly colors = input<any[]>();
@@ -105,14 +105,7 @@ export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
   ngOnChanges(changes: SimpleChanges): void {
     if (!this.isBrowser) return;
 
-    if (this.chartElement().nativeElement) {
-      this.hydrate(changes);
-    }
-  }
-
-  ngAfterViewInit() {
-    if (!this.isBrowser) return;
-    this.createElement();
+    this.hydrate(changes);
   }
 
   ngOnDestroy() {
@@ -124,7 +117,12 @@ export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
   private get isConnected() {
     return this.chartElement()?.nativeElement.isConnected;
   }
+
   private hydrate(changes: SimpleChanges): void {
+    if (this.waitingForConnectedRef) {
+      return;
+    }
+
     const shouldUpdateSeries =
       this.chartInstance() &&
       this.autoUpdateSeries() &&
@@ -135,11 +133,15 @@ export class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
       return;
     }
 
-    this.createElement();
+    // Create the chart after the layout is finalized and ready to be measured.
+    afterNextRender({
+      read: () => this.createElement(),
+    }, { injector: this._injector });
   }
 
   private async createElement() {
-    window.ApexCharts ||= (await import("apexcharts")).default;
+    const { default: ApexCharts } = await import("apexcharts");
+    window.ApexCharts ||= ApexCharts;
 
     if (this._destroyed) return;
     if (!this.isConnected) {