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

Commit0eba014

Browse files
committed
Creating the updateOnlyWithRevision property
1 parent8c2a889 commit0eba014

File tree

9 files changed

+131
-30
lines changed

9 files changed

+131
-30
lines changed

‎FAQ.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,8 @@ export class AppPlotlyComponent {
3030
}
3131
}
3232
```
33+
34+
35+
##The graph is too slow when interacting, what could I do ?
36+
37+
Angular checks all the data everytime to see if there is a change to be applied, sometimes this brings unexpected slowness when treating a large data to be displayed. To avoid this check, set the property`updateOnlyWithRevision` to`true`. When you need the component to update, you can use the`revision` property (a number) to force it to update. Simply incrementing it (e.g.:`this.revision += 1`) will force the component to be updated.

‎README.md‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -94,24 +94,25 @@ The `plotly.js` is bundled within the angular code. To avoid this, please read [
9494

9595
**Warning**: for the time being, this component may_mutate_ its`layout` and`data` props in response to user input, going against React rules. This behaviour will change in the near future oncehttps://github.com/plotly/plotly.js/issues/2389 is completed.
9696

97-
| Prop| Type| Default| Description|
98-
| ------------------------| ----------------------------| -------------------------------------------------| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
99-
|`[data]`|`Array`|`[]`| list of trace objects (seehttps://plot.ly/javascript/reference/)|
100-
|`[layout]`|`Object`|`undefined`| layout object (seehttps://plot.ly/javascript/reference/#layout)|
101-
|`[frames]`|`Array`|`undefined`| list of frame objects (seehttps://plot.ly/javascript/reference/)|
102-
|`[config]`|`Object`|`undefined`| config object (seehttps://plot.ly/javascript/configuration-options/)|
103-
|`[revision]`|`Number`|`undefined`| When provided, causes the plot to update_only_ when the revision is incremented.|
104-
|`[updateOnLayoutChange]`|`Boolean`|`true`| Flag which determines if this component should watch to changes on`layout` property and update the graph|
105-
|`[updateOnDataChange]`|`Boolean`|`true`| Flag which determines if this component should watch to changes on`data` property and update the graph|
106-
|`(initialized)`|`Function(figure, graphDiv)`|`undefined`| Callback executed after plot is initialized. See below for parameter information.|
107-
|`(update)`|`Function(figure, graphDiv)`|`undefined`| Callback executed when when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information.|
108-
|`(purge)`|`Function(figure, graphDiv)`|`undefined`| Callback executed when component unmounts, before`Plotly.purge` strips the`graphDiv` of all private attributes. See below for parameter information.|
109-
|`(error)`|`Function(err)`|`undefined`| Callback executed when a plotly.js API method rejects|
110-
|`[divId]`|`string`|`undefined`| id assigned to the`<div>` into which the plot is rendered.|
111-
|`[className]`|`string`|`undefined`| applied to the`<div>` into which the plot is rendered|
112-
|`[style]`|`Object`|`{position: 'relative', display: 'inline-block'}`| used to style the`<div>` into which the plot is rendered|
113-
|`[debug]`|`Boolean`|`false`| Assign the graph div to`window.gd` for debugging|
114-
|`[useResizeHandler]`|`Boolean`|`false`| When true, adds a call to`Plotly.Plot.resize()` as a`window.resize` event handler|
97+
| Prop| Type| Default| Description|
98+
| --------------------------| ----------------------------| -------------------------------------------------| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
99+
|`[data]`|`Array`|`[]`| list of trace objects (seehttps://plot.ly/javascript/reference/)|
100+
|`[layout]`|`Object`|`undefined`| layout object (seehttps://plot.ly/javascript/reference/#layout)|
101+
|`[frames]`|`Array`|`undefined`| list of frame objects (seehttps://plot.ly/javascript/reference/)|
102+
|`[config]`|`Object`|`undefined`| config object (seehttps://plot.ly/javascript/configuration-options/)|
103+
|`[revision]`|`Number`|`undefined`| When provided, causes the plot to update_only_ when the revision is incremented.|
104+
|`[updateOnLayoutChange]`|`Boolean`|`true`| Flag which determines if this component should watch to changes on`layout` property and update the graph.|
105+
|`[updateOnDataChange]`|`Boolean`|`true`| Flag which determines if this component should watch to changes on`data` property and update the graph.|
106+
|`[updateOnlyWithRevision]`|`Boolean`|`false`| If`true`, this component will update only when the property`revision` is increased.|
107+
|`(initialized)`|`Function(figure, graphDiv)`|`undefined`| Callback executed after plot is initialized. See below for parameter information.|
108+
|`(update)`|`Function(figure, graphDiv)`|`undefined`| Callback executed when when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information.|
109+
|`(purge)`|`Function(figure, graphDiv)`|`undefined`| Callback executed when component unmounts, before`Plotly.purge` strips the`graphDiv` of all private attributes. See below for parameter information.|
110+
|`(error)`|`Function(err)`|`undefined`| Callback executed when a plotly.js API method rejects|
111+
|`[divId]`|`string`|`undefined`| id assigned to the`<div>` into which the plot is rendered.|
112+
|`[className]`|`string`|`undefined`| applied to the`<div>` into which the plot is rendered|
113+
|`[style]`|`Object`|`{position: 'relative', display: 'inline-block'}`| used to style the`<div>` into which the plot is rendered|
114+
|`[debug]`|`Boolean`|`false`| Assign the graph div to`window.gd` for debugging|
115+
|`[useResizeHandler]`|`Boolean`|`false`| When true, adds a call to`Plotly.Plot.resize()` as a`window.resize` event handler|
115116

116117
**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use`style` or`className` to set the dimensions of the element (i.e. using`width: 100%; height: 100%` or some similar values) and set`useResizeHandler` to`true` while setting`layout.autosize` to`true` and leaving`layout.height` and`layout.width` undefined. This will implement the behaviour documented here:https://plot.ly/javascript/responsive-fluid-layout/
117118

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ <h5>Angular Plotly</h5>
1616
<li><a[routerLink]="['/frames']">Frames</a></li>
1717
<li><a[routerLink]="['/timeout-update']">Timeout Update</a></li>
1818
<li><a[routerLink]="['/huge-memory-usage']">Huge Memory Usage</a></li>
19+
<li><a[routerLink]="['/slow-example']">Slow Example</a></li>
1920
</ul>
2021
</div>
2122
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { MemoryLeakComponent } from './memory-leak/memory-leak.component';
2222
import{FramesComponent}from'./frames/frames.component';
2323
import{TimeoutUpdateComponent}from'./timeout-update/timeout-update.component';
2424
import{HugeMemoryUsageComponent}from'./huge-memory-usage/huge-memory-usage.component';
25+
import{SlowExampleComponent}from'./slow-example/slow-example.component';
2526

2627

2728
constdemoRoutes:Routes=[
@@ -35,6 +36,7 @@ const demoRoutes: Routes = [
3536
{path:'frames',component:FramesComponent,data:{title:'Frames'}},
3637
{path:'timeout-update',component:TimeoutUpdateComponent,data:{title:'Timeout Update'}},
3738
{path:'huge-memory-usage',component:HugeMemoryUsageComponent,data:{title:'Huge Memory Usage'}},
39+
{path:'slow-example',component:SlowExampleComponent,data:{title:'Slow example'}},
3840

3941
{path:'',redirectTo:'/home',pathMatch:'full'},
4042
];
@@ -65,6 +67,7 @@ PlotlyViaCDNModule.plotlyVersion = '1.49.4';
6567
FramesComponent,
6668
TimeoutUpdateComponent,
6769
HugeMemoryUsageComponent,
70+
SlowExampleComponent,
6871
],
6972
exports:[DemoComponent],
7073
})
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div>
2+
<plotly-plot[data]="data"[layout]="layout"[updateOnLayoutChange]="false"[updateOnDataChange]="false"[updateOnlyWithRevision]="false"></plotly-plot>
3+
4+
<divclass="row">
5+
<divclass="col">
6+
<code>[updateOnLayoutChange]="false"</code>
7+
</div>
8+
<divclass="col">
9+
<code>[updateOnDataChange]="false"</code>
10+
</div>
11+
<divclass="col">
12+
<code>[updateOnlyWithRevision]="false"</code>
13+
</div>
14+
</div>
15+
16+
<plotly-plot[data]="data"[layout]="layout"[updateOnLayoutChange]="true"[updateOnDataChange]="true"[updateOnlyWithRevision]="true"></plotly-plot>
17+
18+
<divclass="row">
19+
<divclass="col">
20+
<code>[updateOnLayoutChange]="true"</code>
21+
</div>
22+
<divclass="col">
23+
<code>[updateOnDataChange]="true"</code>
24+
</div>
25+
<divclass="col">
26+
<code>[updateOnlyWithRevision]="true"</code>
27+
</div>
28+
</div>
29+
</div>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
3+
.row {
4+
display:flex;
5+
}
6+
7+
.col {
8+
flex:1;
9+
align-self:center;
10+
justify-content:center;
11+
text-align:center;
12+
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import{Component,OnInit}from'@angular/core';
2+
3+
@Component({
4+
selector:'plotly-slow-example',
5+
templateUrl:'./slow-example.component.html',
6+
styleUrls:['./slow-example.component.scss'],
7+
})
8+
exportclassSlowExampleComponentimplementsOnInit{
9+
data:any;
10+
layout:any;
11+
12+
ngOnInit(){
13+
this.layout={showlegend:false};
14+
this.data=this.getData();
15+
}
16+
17+
getData(){
18+
conststartValue=0;
19+
conststopValue=100000;
20+
constpointNum=10000;
21+
consttraceNum=10;
22+
constcurrValue=startValue;
23+
conststep=(stopValue-startValue)/(pointNum-1);
24+
25+
constdata=[];
26+
27+
for(letj=0;j<traceNum;j++){
28+
constX=[];
29+
constY=[];
30+
for(leti=0;i<pointNum;i++){
31+
X.push(currValue+step*i);
32+
Y.push(this.gaussianRand()*8+j*5);
33+
}
34+
data.push({
35+
type:'scattergl',
36+
mode:'line',
37+
x:X,
38+
y:Y
39+
});
40+
}
41+
42+
returndata;
43+
}
44+
45+
gaussianRand(){
46+
letrand=0;
47+
for(leti=0;i<6;i+=1){
48+
rand+=Math.random();
49+
}
50+
returnrand/6-0.5;
51+
}
52+
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,25 +73,21 @@ 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);
76+
7777
component.createPlot().then(()=>{
7878
component.ngDoCheck();
7979
expect(component.updatePlot).not.toHaveBeenCalled();
80-
expect(component.datarevision).toEqual(0);
8180

8281
component.data=[{y:[11,15,13,17],type:'box'}];
8382
component.ngDoCheck();
8483
expect(component.updatePlot).toHaveBeenCalled();
85-
expect(component.datarevision).toEqual(1);
8684

8785
component.ngDoCheck();
8886
expect(component.updatePlot).toHaveBeenCalledTimes(1);
89-
expect(component.datarevision).toEqual(1);
9087

9188
component.data[0].y[0]=12;
9289
component.ngDoCheck();
9390
expect(component.updatePlot).toHaveBeenCalledTimes(2);
94-
expect(component.datarevision).toEqual(2);
9591
done();
9692
});
9793
});
@@ -107,6 +103,9 @@ describe('PlotComponent', () => {
107103
component.ngDoCheck();
108104
expect(component.updatePlot).toHaveBeenCalled();
109105

106+
component.ngDoCheck();
107+
expect(component.updatePlot).toHaveBeenCalledTimes(1);
108+
110109
component.layout.title='title three ';
111110
component.ngDoCheck();
112111
expect(component.updatePlot).toHaveBeenCalledTimes(2);

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ 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;
3736

3837
@ViewChild('plot',{static:true})plotEl:ElementRef;
3938

@@ -51,6 +50,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
5150

5251
@Input()updateOnLayoutChange=true;
5352
@Input()updateOnDataChange=true;
53+
@Input()updateOnlyWithRevision=false;
5454

5555
@Output()initialized=newEventEmitter<Plotly.Figure>();
5656
@Output()update=newEventEmitter<Plotly.Figure>();
@@ -144,6 +144,10 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
144144
}
145145

146146
ngDoCheck(){
147+
if(this.updateOnlyWithRevision){
148+
returnfalse;
149+
}
150+
147151
letshouldUpdate=false;
148152

149153
if(this.updateOnLayoutChange){
@@ -173,7 +177,6 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
173177
}
174178

175179
if(shouldUpdate&&this.plotlyInstance){
176-
this.datarevision+=1;
177180
this.updatePlot();
178181
}
179182
}
@@ -228,17 +231,13 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
228231
}
229232

230233
updatePlot(){
231-
console.log('updatePlot',this.plotlyInstance);
232234
if(!this.plotlyInstance){
233235
consterror=newError(`Plotly component wasn't initialized`);
234236
this.error.emit(error);
235237
throwerror;
236238
}
237239

238-
constlayout={
239-
...{datarevision:this.datarevision},
240-
...this.layout,
241-
};
240+
constlayout={...this.layout};
242241

243242
returnthis.plotly.update(this.plotlyInstance,this.data,layout,this.config,this.frames).then(()=>{
244243
constfigure=this.createFigure();

0 commit comments

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