diff --git a/projects/plotly/src/lib/plotly.component.spec.ts b/projects/plotly/src/lib/plotly.component.spec.ts index 52568ef..5db422b 100644 --- a/projects/plotly/src/lib/plotly.component.spec.ts +++ b/projects/plotly/src/lib/plotly.component.spec.ts @@ -229,6 +229,27 @@ describe('PlotlyComponent', () => { expect(component.plotlyInstance).toBeUndefined(); }); + it('should apply data changes made while the plot is initializing', async () => { + const instance = document.createElement('div') as any; + instance.on = () => undefined; + let resolvePlot!: (value: any) => void; + spyOn(component.plotly, 'newPlot').and.returnValue(new Promise(resolve => resolvePlot = resolve)); + spyOn(component, 'updatePlot'); + + componentRef.setInput('data', [{ y: [10, 15, 13, 17], type: 'box' }]); + component.ngDoCheck(); + const pendingPlot = component.createPlot(); + + componentRef.setInput('data', [{ y: [11, 15, 13, 17], type: 'box' }]); + component.ngDoCheck(); + expect(component.updatePlot).not.toHaveBeenCalled(); + + resolvePlot(instance); + await pendingPlot; + + expect(component.updatePlot).toHaveBeenCalledTimes(1); + }); + it('should fail when plotlyInstance is undefined', () => { component.plotlyInstance = undefined; diff --git a/projects/plotly/src/lib/plotly.component.ts b/projects/plotly/src/lib/plotly.component.ts index 232b23d..9e132d6 100644 --- a/projects/plotly/src/lib/plotly.component.ts +++ b/projects/plotly/src/lib/plotly.component.ts @@ -42,6 +42,7 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck { public layoutDiffer?: KeyValueDiffer; public dataDiffer?: IterableDiffer; private destroyed = false; + private pendingUpdate = false; @ViewChild('plot', { static: true }) plotEl!: ElementRef; @@ -208,8 +209,12 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck { } } - if (shouldUpdate && this.plotlyInstance) { - this.updatePlot(); + if (shouldUpdate) { + if (this.plotlyInstance) { + this.updatePlot(); + } else { + this.pendingUpdate = true; + } } } @@ -263,6 +268,11 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck { }); this.updateWindowResizeHandler(); + + if (this.pendingUpdate) { + this.pendingUpdate = false; + void this.updatePlot(); + } }).catch(err => { console.error('Error while plotting:', err); this.error.emit(err);