Creating methods getPlotly and getInstanceByDivId on PlotlyService

Author: andrefarzat

src/app/plotly/plot/plot.component.ts

@@ -106,6 +106,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
 
         const figure = this.createFigure();
         this.purge.emit(figure);
+        this.plotly.remove(this.plotlyInstance);
     }
 
     ngOnChanges(changes: SimpleChanges) {
@@ -229,7 +230,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
         }
     }
 
-    dataDifferTrackBy(index: number, item: any): any {
+    dataDifferTrackBy(_: number, item: any): any {
         const obj = Object.assign({}, item, { uid: '' });
         return JSON.stringify(obj);
     }

src/app/plotly/plotly.service.spec.ts

@@ -1,4 +1,5 @@
 import { TestBed, inject } from '@angular/core/testing';
+import * as Plotlyjs from 'plotly.js/dist/plotly.min.js';
 
 import { PlotlyService } from './plotly.service';
 
@@ -12,4 +13,8 @@ describe('PlotlyService', () => {
     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);
+    }));
 });

src/app/plotly/plotly.service.ts

@@ -23,6 +23,7 @@ export namespace Plotly {
 
 @Injectable()
 export class PlotlyService {
+    protected static instances: Plotly.PlotlyHTMLElement[] = [];
     protected plotly = Plotlyjs;
 
     constructor() {
@@ -32,7 +33,7 @@ export class PlotlyService {
     }
 
     public newPlot(div: HTMLDivElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
-        return this.plotly.newPlot(div, data, layout, config);
+        return this.plotly.newPlot(div, data, layout, config).then(this.insert.bind(this));
     }
 
     public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>) {
@@ -47,4 +48,32 @@ export class PlotlyService {
         return this.plotly.Plots.resize(div);
     }
 
+    public getPlotly() {
+        return this.plotly;
+    }
+
+    public getInstanceByDivId(id: string): Plotly.PlotlyHTMLElement | undefined {
+        for (const instance of PlotlyService.instances) {
+            if (instance.id === id) {
+                return instance;
+            }
+        }
+        return undefined;
+    }
+
+    public insert(instance: Plotly.PlotlyHTMLElement) {
+        const index = PlotlyService.instances.indexOf(instance);
+        if (index === -1) {
+            PlotlyService.instances.push(instance);
+        }
+        return instance;
+    }
+
+    public remove(div: Plotly.PlotlyHTMLElement) {
+        const index = PlotlyService.instances.indexOf(div);
+        if (index >= 0) {
+            PlotlyService.instances.splice(index, 1);
+        }
+    }
+
 }