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 => {