Creating methods getPlotly and getInstanceByDivId on PlotlyService

andrefarzat · andrefarzat · commit ee86cccfe191 · 2018-09-21T18:31:24.000-03:00
diff --git a/src/app/plotly/plot/plot.component.ts b/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);
     }
diff --git a/src/app/plotly/plotly.service.spec.ts b/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);
+    }));
 });
diff --git a/src/app/plotly/plotly.service.ts b/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);
+        }
+    }
+
 }

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {`
`106`	`106`
`107`	`107`	`const figure = this.createFigure();`
`108`	`108`	`this.purge.emit(figure);`
	`109`	`+ this.plotly.remove(this.plotlyInstance);`
`109`	`110`	`}`
`110`	`111`
`111`	`112`	`ngOnChanges(changes: SimpleChanges) {`
`@@ -229,7 +230,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {`
`229`	`230`	`}`
`230`	`231`	`}`
`231`	`232`
`232`		`- dataDifferTrackBy(index: number, item: any): any {`
	`233`	`+ dataDifferTrackBy(_: number, item: any): any {`
`233`	`234`	`const obj = Object.assign({}, item, { uid: '' });`
`234`	`235`	`return JSON.stringify(obj);`
`235`	`236`	`}`