Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2e2c30e

Browse files
authored
Merge pull requestplotly#60 from plotly/issue-59
Fixing issue with Plotly.react which wasn't working for missing layout.datarevision
2 parents9c9a4de +c6c9b56 commit2e2c30e

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
constdemoRoutes: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.
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>
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+
exportclassTimeoutUpdateComponentimplementsOnInit,OnDestroy{
9+
10+
privatetimestamps:Date[];
11+
privatey1:number[];
12+
privatey2:number[];
13+
privatey3:number[];
14+
privategraph:any;
15+
16+
privatetimeoutID: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(newDate());
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
publicresizeHandler?:(instance:Plotly.PlotlyHTMLElement)=>void;
3434
publiclayoutDiffer:KeyValueDiffer<string,any>;
3535
publicdataDiffer:IterableDiffer<Plotly.Data>;
36+
publicdatarevision: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
throwerror;
212214
}
213215

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp