plotly · andrefarzat · Apr 29, 2019 · Apr 29, 2019 · Apr 29, 2019
diff --git a/src/app/demo/demo.component.html b/src/app/demo/demo.component.html
@@ -14,6 +14,7 @@ <h5>Angular Plotly</h5>
                     <li><a [routerLink]="['/fancy-plot']">Fancy Plot</a></li>
                     <li><a [routerLink]="['/memory-leak']">Memory Leak</a></li>
                     <li><a [routerLink]="['/frames']">Frames</a></li>
+                    <li><a [routerLink]="['/timeout-update']">Timeout Update</a></li>
                 </ul>
             </div>
         </div>

diff --git 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
diff --git a/src/app/demo/timeout-update/timeout-update.component.html b/src/app/demo/timeout-update/timeout-update.component.html
@@ -0,0 +1,3 @@
+<div>
+    <plotly-plot [data]="graph.data" [layout]="graph.layout" useResizeHandler="true"></plotly-plot>
+</div>
diff --git a/src/app/demo/timeout-update/timeout-update.component.ts 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
@@ -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
@@ -33,6 +33,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     public resizeHandler?: (instance: Plotly.PlotlyHTMLElement) => void;
     public layoutDiffer: KeyValueDiffer<string, any>;
     public dataDiffer: IterableDiffer<Plotly.Data>;
+    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 => {