diff --git a/src/app/demo/demo.component.html b/src/app/demo/demo.component.html index 4c5f948..92c7b42 100644 --- a/src/app/demo/demo.component.html +++ b/src/app/demo/demo.component.html @@ -14,6 +14,7 @@
Angular Plotly
  • Fancy Plot
  • Memory Leak
  • Frames
  • +
  • Timeout Update
  • diff --git a/src/app/demo/demo.module.ts b/src/app/demo/demo.module.ts index b6e0821..b9dec5f 100644 --- a/src/app/demo/demo.module.ts +++ b/src/app/demo/demo.module.ts @@ -20,6 +20,7 @@ import { AjaxComponent } from './ajax/ajax.component'; import { FancyplotComponent } from './fancyplot/fancyplot.component'; import { MemoryLeakComponent } from './memory-leak/memory-leak.component'; import { FramesComponent } from './frames/frames.component'; +import { TimeoutUpdateComponent } from './timeout-update/timeout-update.component'; const demoRoutes: Routes = [ @@ -31,6 +32,7 @@ const demoRoutes: Routes = [ { path: 'fancy-plot', component: FancyplotComponent, data: { title: 'Fancy Plot' } }, { path: 'memory-leak', component: MemoryLeakComponent, data: { title: 'Memory leak' } }, { path: 'frames', component: FramesComponent, data: { title: 'Frames' } }, + { path: 'timeout-update', component: TimeoutUpdateComponent, data: { title: 'Timeout Update' } }, { path: '', redirectTo: '/home', pathMatch: 'full' }, ]; @@ -57,7 +59,8 @@ PlotlyModule.plotlyjs = PlotlyJS; AjaxComponent, FancyplotComponent, MemoryLeakComponent, - FramesComponent + FramesComponent, + TimeoutUpdateComponent ], exports: [DemoComponent], }) diff --git a/src/app/demo/timeout-update/timeout-update.component.css b/src/app/demo/timeout-update/timeout-update.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/demo/timeout-update/timeout-update.component.html b/src/app/demo/timeout-update/timeout-update.component.html new file mode 100644 index 0000000..f71ad57 --- /dev/null +++ b/src/app/demo/timeout-update/timeout-update.component.html @@ -0,0 +1,3 @@ +
    + +
    diff --git a/src/app/demo/timeout-update/timeout-update.component.ts b/src/app/demo/timeout-update/timeout-update.component.ts new file mode 100644 index 0000000..e5d2c46 --- /dev/null +++ b/src/app/demo/timeout-update/timeout-update.component.ts @@ -0,0 +1,62 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; + +@Component({ + selector: 'plotly-timeout-update', + templateUrl: './timeout-update.component.html', + styleUrls: ['./timeout-update.component.css'] +}) +export class TimeoutUpdateComponent implements OnInit, OnDestroy { + + private timestamps: Date[]; + private y1: number[]; + private y2: number[]; + private y3: number[]; + private graph: any; + + private timeoutID: any; + + constructor() { } + + ngOnInit() { + this.timestamps = []; + + this.y1 = []; + this.y2 = []; + this.y3 = []; + + this.graph = { + data: [ + { x: this.timestamps, y: this.y1, type: 'scatter' }, + { x: this.timestamps, y: this.y2, type: 'scatter' }, + { x: this.timestamps, y: this.y3, type: 'scatter' }, + ], + layout: { + autosize: true, + title: 'Live Plot', + font: { family: 'Roboto, "Helvetica Neue", sans-serif' }, + margin: { t: 50, b: 20, l: 40, r: 40 }, + } + }; + + this.updateGraph(); + } + + updateGraph() { + this.timestamps.push(new Date()); + this.y1.push(Math.random()); + this.y2.push(Math.random()); + this.y3.push(Math.random()); + + this.graph.data = [ + { x: this.timestamps, y: this.y1, type: 'scatter' }, + { x: this.timestamps, y: this.y2, type: 'scatter' }, + { x: this.timestamps, y: this.y3, type: 'scatter' }, + ]; + + this.timeoutID = setTimeout(() => this.updateGraph(), 1000); + } + + ngOnDestroy(): void { + clearTimeout(this.timeoutID); + } +} diff --git a/src/app/shared/plot/plot.component.spec.ts b/src/app/shared/plot/plot.component.spec.ts index f03473e..6fa16f1 100644 --- a/src/app/shared/plot/plot.component.spec.ts +++ b/src/app/shared/plot/plot.component.spec.ts @@ -73,20 +73,25 @@ describe('PlotComponent', () => { it('should update the graph when the data changes', (done) => { spyOn(component, 'updatePlot'); component.data = [{ y: [10, 15, 13, 17], type: 'box' }]; + expect(component.datarevision).toEqual(0); component.createPlot().then(() => { component.ngDoCheck(); expect(component.updatePlot).not.toHaveBeenCalled(); + expect(component.datarevision).toEqual(0); component.data = [{ y: [11, 15, 13, 17], type: 'box' }]; component.ngDoCheck(); expect(component.updatePlot).toHaveBeenCalled(); + expect(component.datarevision).toEqual(1); component.ngDoCheck(); expect(component.updatePlot).toHaveBeenCalledTimes(1); + expect(component.datarevision).toEqual(1); component.data[0].y[0] = 12; component.ngDoCheck(); expect(component.updatePlot).toHaveBeenCalledTimes(2); + expect(component.datarevision).toEqual(2); done(); }); }); diff --git a/src/app/shared/plot/plot.component.ts b/src/app/shared/plot/plot.component.ts index 57f9853..fbdf970 100644 --- a/src/app/shared/plot/plot.component.ts +++ b/src/app/shared/plot/plot.component.ts @@ -33,6 +33,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck { public resizeHandler?: (instance: Plotly.PlotlyHTMLElement) => void; public layoutDiffer: KeyValueDiffer; public dataDiffer: IterableDiffer; + public datarevision: number = 0; @ViewChild('plot') plotEl: ElementRef; @@ -156,6 +157,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck { } if (shouldUpdate && this.plotlyInstance) { + this.datarevision += 1; this.updatePlot(); } } @@ -211,7 +213,12 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck { throw error; } - return this.plotly.update(this.plotlyInstance, this.data, this.layout, this.config, this.frames).then(() => { + const layout = { + ...{datarevision: this.datarevision}, + ...this.layout, + }; + + return this.plotly.update(this.plotlyInstance, this.data, layout, this.config, this.frames).then(() => { const figure = this.createFigure(); this.update.emit(figure); }, err => {