Skip to content

Commit 2e2c30e

Browse files
andrefarzatandrefarzat
authored
Merge pull request #60 from plotly/issue-59
Fixing issue with Plotly.react which wasn't working for missing layout.datarevision
2 parents 9c9a4de + c6c9b56 commit 2e2c30e

File tree

7 files changed

+83
-2
lines changed

7 files changed

+83
-2
lines changed

‎src/app/demo/demo.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ <h5>Angular Plotly</h5>
1414
<li><a [routerLink]="['/fancy-plot']">Fancy Plot</a></li>
1515
<li><a [routerLink]="['/memory-leak']">Memory Leak</a></li>
1616
<li><a [routerLink]="['/frames']">Frames</a></li>
17+
<li><a [routerLink]="['/timeout-update']">Timeout Update</a></li>
1718
</ul>
1819
</div>
1920
</div>

‎src/app/demo/demo.module.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { AjaxComponent } from './ajax/ajax.component';
2020
import { FancyplotComponent } from './fancyplot/fancyplot.component';
2121
import { MemoryLeakComponent } from './memory-leak/memory-leak.component';
2222
import { FramesComponent } from './frames/frames.component';
23+
import { TimeoutUpdateComponent } from './timeout-update/timeout-update.component';
2324

2425

2526
const demoRoutes: Routes = [
@@ -31,6 +32,7 @@ const demoRoutes: Routes = [
3132
{ path: 'fancy-plot', component: FancyplotComponent, data: { title: 'Fancy Plot' } },
3233
{ path: 'memory-leak', component: MemoryLeakComponent, data: { title: 'Memory leak' } },
3334
{ path: 'frames', component: FramesComponent, data: { title: 'Frames' } },
35+
{ path: 'timeout-update', component: TimeoutUpdateComponent, data: { title: 'Timeout Update' } },
3436

3537
{ path: '', redirectTo: '/home', pathMatch: 'full' },
3638
];
@@ -57,7 +59,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
5759
AjaxComponent,
5860
FancyplotComponent,
5961
MemoryLeakComponent,
60-
FramesComponent
62+
FramesComponent,
63+
TimeoutUpdateComponent
6164
],
6265
exports: [DemoComponent],
6366
})

‎src/app/demo/timeout-update/timeout-update.component.css

Whitespace-only changes.

‎src/app/demo/timeout-update/timeout-update.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
<plotly-plot [data]="graph.data" [layout]="graph.layout" useResizeHandler="true"></plotly-plot>
3+
</div>

‎src/app/demo/timeout-update/timeout-update.component.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, OnDestroy, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'plotly-timeout-update',
5+
templateUrl: './timeout-update.component.html',
6+
styleUrls: ['./timeout-update.component.css']
7+
})
8+
export class TimeoutUpdateComponent implements OnInit, OnDestroy {
9+
10+
private timestamps: Date[];
11+
private y1: number[];
12+
private y2: number[];
13+
private y3: number[];
14+
private graph: any;
15+
16+
private timeoutID: any;
17+
18+
constructor() { }
19+
20+
ngOnInit() {
21+
this.timestamps = [];
22+
23+
this.y1 = [];
24+
this.y2 = [];
25+
this.y3 = [];
26+
27+
this.graph = {
28+
data: [
29+
{ x: this.timestamps, y: this.y1, type: 'scatter' },
30+
{ x: this.timestamps, y: this.y2, type: 'scatter' },
31+
{ x: this.timestamps, y: this.y3, type: 'scatter' },
32+
],
33+
layout: {
34+
autosize: true,
35+
title: 'Live Plot',
36+
font: { family: 'Roboto, "Helvetica Neue", sans-serif' },
37+
margin: { t: 50, b: 20, l: 40, r: 40 },
38+
}
39+
};
40+
41+
this.updateGraph();
42+
}
43+
44+
updateGraph() {
45+
this.timestamps.push(new Date());
46+
this.y1.push(Math.random());
47+
this.y2.push(Math.random());
48+
this.y3.push(Math.random());
49+
50+
this.graph.data = [
51+
{ x: this.timestamps, y: this.y1, type: 'scatter' },
52+
{ x: this.timestamps, y: this.y2, type: 'scatter' },
53+
{ x: this.timestamps, y: this.y3, type: 'scatter' },
54+
];
55+
56+
this.timeoutID = setTimeout(() => this.updateGraph(), 1000);
57+
}
58+
59+
ngOnDestroy(): void {
60+
clearTimeout(this.timeoutID);
61+
}
62+
}

‎src/app/shared/plot/plot.component.spec.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,20 +73,25 @@ describe('PlotComponent', () => {
7373
it('should update the graph when the data changes', (done) => {
7474
spyOn(component, 'updatePlot');
7575
component.data = [{ y: [10, 15, 13, 17], type: 'box' }];
76+
expect(component.datarevision).toEqual(0);
7677
component.createPlot().then(() => {
7778
component.ngDoCheck();
7879
expect(component.updatePlot).not.toHaveBeenCalled();
80+
expect(component.datarevision).toEqual(0);
7981

8082
component.data = [{ y: [11, 15, 13, 17], type: 'box' }];
8183
component.ngDoCheck();
8284
expect(component.updatePlot).toHaveBeenCalled();
85+
expect(component.datarevision).toEqual(1);
8386

8487
component.ngDoCheck();
8588
expect(component.updatePlot).toHaveBeenCalledTimes(1);
89+
expect(component.datarevision).toEqual(1);
8690

8791
component.data[0].y[0] = 12;
8892
component.ngDoCheck();
8993
expect(component.updatePlot).toHaveBeenCalledTimes(2);
94+
expect(component.datarevision).toEqual(2);
9095
done();
9196
});
9297
});

‎src/app/shared/plot/plot.component.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
3333
public resizeHandler?: (instance: Plotly.PlotlyHTMLElement) => void;
3434
public layoutDiffer: KeyValueDiffer<string, any>;
3535
public dataDiffer: IterableDiffer<Plotly.Data>;
36+
public datarevision: number = 0;
3637

3738
@ViewChild('plot') plotEl: ElementRef;
3839

@@ -156,6 +157,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
156157
}
157158

158159
if (shouldUpdate && this.plotlyInstance) {
160+
this.datarevision += 1;
159161
this.updatePlot();
160162
}
161163
}
@@ -211,7 +213,12 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
211213
throw error;
212214
}
213215

214-
return this.plotly.update(this.plotlyInstance, this.data, this.layout, this.config, this.frames).then(() => {
216+
const layout = {
217+
...{datarevision: this.datarevision},
218+
...this.layout,
219+
};
220+
221+
return this.plotly.update(this.plotlyInstance, this.data, layout, this.config, this.frames).then(() => {
215222
const figure = this.createFigure();
216223
this.update.emit(figure);
217224
}, err => {

0 commit comments

Comments
 (0)