PlotlyService.getPlotly now returns a Promise

Author: andrefarzat

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [3.2.0] - 2021-05-03
+### Changed
+- PlotlyService.getPlotly now returns a Promise
+
 ## [3.1.0] - 2021-03-17
 ### Changed
 - Updated peerDependency to angular >10.0 (see https://github.com/plotly/angular-plotly.js/issues/154)

projects/plotly/src/lib/plotly.service.spec.ts

@@ -24,16 +24,19 @@ describe('PlotlyService', () => {
 
     it('should check the plotly dependency', inject([PlotlyService], (service: PlotlyService) => {
         (PlotlyService as any).plotly = undefined;
-        expect(() => service.getPlotly()).toThrowError(`Peer dependency plotly.js isn't installed`);
-        PlotlyService.setPlotly(PlotlyJS);
+
+        return service.getPlotly().catch(err => {
+            expect(err.message).toBe(`Peer dependency plotly.js isn't installed`);
+            PlotlyService.setPlotly(PlotlyJS);
+        });
     }));
 
     it('should be created', inject([PlotlyService], (service: PlotlyService) => {
         expect(service).toBeTruthy();
     }));
 
-    it('should return the plotly object', inject([PlotlyService], (service: PlotlyService) => {
-        expect(service.getPlotly()).toBe(PlotlyJS);
+    it('should return the plotly object', inject([PlotlyService], async (service: PlotlyService) => {
+        expect(await service.getPlotly()).toBe(PlotlyJS);
     }));
 
     it('should set the module name', () => {
@@ -47,7 +50,7 @@ describe('PlotlyService', () => {
 
     it('should call plotly.newPlot method', inject([PlotlyService], async (service: PlotlyService) => {
         return new Promise<void>(async (resolve) => {
-            const plotly = service.getPlotly();
+            const plotly = await (service as any).getPlotly();
             PlotlyService.setPlotly('waiting');
 
             setTimeout(() => PlotlyService.setPlotly(PlotlyJS), 100);
@@ -62,8 +65,8 @@ describe('PlotlyService', () => {
         });
     }));
 
-    it('should call plotly.plot method', inject([PlotlyService], (service: PlotlyService) => {
-        const plotly = service.getPlotly();
+    it('should call plotly.plot method', inject([PlotlyService], async (service: PlotlyService) => {
+        const plotly = await service.getPlotly();
 
         spyOn(plotly, 'plot').and.returnValue(new Promise(() => {}));
         service.plot('one' as any, 'two' as any, 'three' as any, 'four' as any);
@@ -73,8 +76,8 @@ describe('PlotlyService', () => {
         expect(plotly.plot).toHaveBeenCalledWith('one', {data: 'two', layout: 'three', config: 'four', frames: 'five'});
     }));
 
-    it('should call plotly.update method', inject([PlotlyService], (service: PlotlyService) => {
-        const plotly = service.getPlotly();
+    it('should call plotly.update method', inject([PlotlyService], async (service: PlotlyService) => {
+        const plotly = await service.getPlotly();
 
         spyOn(plotly, 'react').and.returnValue(new Promise(() => {}));
         service.update('one' as any, 'two' as any, 'three' as any, 'four' as any);
@@ -84,8 +87,8 @@ describe('PlotlyService', () => {
         expect(plotly.react).toHaveBeenCalledWith('one', {data: 'two', layout: 'three', config: 'four', frames: 'five'});
     }));
 
-    it('should call plotly.Plots.resize method', inject([PlotlyService], (service: PlotlyService) => {
-        const plotly = service.getPlotly();
+    it('should call plotly.Plots.resize method', inject([PlotlyService], async (service: PlotlyService) => {
+        const plotly = await service.getPlotly();
 
         spyOn(plotly.Plots, 'resize').and.returnValue(new Promise(() => {}));
         service.resize('one' as any);

projects/plotly/src/lib/plotly.service.ts

@@ -53,7 +53,12 @@ export class PlotlyService {
         return undefined;
     }
 
-    public getPlotly(): any {
+    public async getPlotly(): Promise<any> {
+        await this.waitFor(() => this._getPlotly() !== 'waiting');
+        return this._getPlotly();
+    }
+
+    protected _getPlotly(): any {
         if (typeof PlotlyService.plotly === 'undefined') {
             const msg = PlotlyService.moduleName === 'ViaCDN'
                 ? `Error loading Peer dependency plotly.js from CDN url`
@@ -77,36 +82,36 @@ export class PlotlyService {
 
     // tslint:disable max-line-length
     public async newPlot(div: HTMLDivElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any> {
-        await this.waitFor(() => this.getPlotly() !== 'waiting');
+        await this.waitFor(() => this._getPlotly() !== 'waiting');
 
         if (frames) {
             const obj = {data, layout, config, frames};
-            return this.getPlotly().newPlot(div, obj).then(() => PlotlyService.insert(div as any)) as Promise<any>;
+            return this._getPlotly().newPlot(div, obj).then(() => PlotlyService.insert(div as any)) as Promise<any>;
         }
 
-        return this.getPlotly().newPlot(div, data, layout, config).then(() => PlotlyService.insert(div as any)) as Promise<any>;
+        return this._getPlotly().newPlot(div, data, layout, config).then(() => PlotlyService.insert(div as any)) as Promise<any>;
     }
 
     public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any>  {
         if (frames) {
             const obj = {data, layout, config, frames};
-            return this.getPlotly().plot(div, obj) as Promise<any>;
+            return this._getPlotly().plot(div, obj) as Promise<any>;
         }
 
-        return this.getPlotly().plot(div, data, layout, config) as Promise<any>;
+        return this._getPlotly().plot(div, data, layout, config) as Promise<any>;
     }
 
     public update(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any>  {
         if (frames) {
             const obj = {data, layout, config, frames};
-            return this.getPlotly().react(div, obj) as Promise<any>;
+            return this._getPlotly().react(div, obj) as Promise<any>;
         }
 
-        return this.getPlotly().react(div, data, layout, config) as Promise<any>;
+        return this._getPlotly().react(div, data, layout, config) as Promise<any>;
     }
     // tslint:enable max-line-length
 
     public resize(div: Plotly.PlotlyHTMLElement): void {
-        return this.getPlotly().Plots.resize(div);
+        return this._getPlotly().Plots.resize(div);
     }
 }