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

Commitd1dd389

Browse files
committed
Adding updateOnLayoutChange and updateOnDataChange properties
1 parentfb2432d commitd1dd389

File tree

5 files changed

+50
-36
lines changed

5 files changed

+50
-36
lines changed

‎README.md

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -94,22 +94,24 @@ 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-
|`(initialized)`|`Function(figure, graphDiv)`|`undefined`| Callback executed after plot is initialized. See below for parameter information.|
105-
|`(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.|
106-
|`(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.|
107-
|`(error)`|`Function(err)`|`undefined`| Callback executed when a plotly.js API method rejects|
108-
|`[divId]`|`string`|`undefined`| id assigned to the`<div>` into which the plot is rendered.|
109-
|`[className]`|`string`|`undefined`| applied to the`<div>` into which the plot is rendered|
110-
|`[style]`|`Object`|`{position: 'relative', display: 'inline-block'}`| used to style the`<div>` into which the plot is rendered|
111-
|`[debug]`|`Boolean`|`false`| Assign the graph div to`window.gd` for debugging|
112-
|`[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+
|`(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|
113115

114116
**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/
115117

‎src/app/demo/bar-plots/bar-plots.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div>
2-
<plotly-plot[data]="barPlot.data"[layout]="barPlot.layout"[revision]="0"[debug]="debug"[useResizeHandler]="useResizeHandler"></plotly-plot>
2+
<plotly-plot[data]="barPlot.data"[layout]="barPlot.layout"[revision]="0"[debug]="debug"[useResizeHandler]="useResizeHandler"(plotly_click)="onPlotlyClick($event)"></plotly-plot>
33
<p>&nbsp;</p>
44
<plotly-plot[data]="horizontalBarPlot.data"[layout]="horizontalBarPlot.layout"[revision]="0"[debug]="debug"[useResizeHandler]="useResizeHandler"></plotly-plot>
55
<p>&nbsp;</p>

‎src/app/demo/bar-plots/bar-plots.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,8 @@ export class BarPlotComponent {
6363
}
6464
};
6565

66+
publiconPlotlyClick(event:Event){
67+
console.log('Sim sim sim',event);
68+
}
69+
6670
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div>
2-
<plotly-plot[data]="data"[layout]="layout"[config]="config"[frames]="frames"[revision]="0"[debug]="debug"[useResizeHandler]="useResizeHandler"></plotly-plot>
2+
<plotly-plot[data]="data"[layout]="layout"[config]="config"[frames]="frames"[revision]="0"
3+
[updateOnLayoutChange]="false"[updateOnDataChange]="false"></plotly-plot>
34

45
<p>&nbsp;</p>
56
<small>Example got from:<ahref="https://plot.ly/javascript/gapminder-example/"target="_blank">https://plot.ly/javascript/gapminder-example/</a></small>

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

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
4949
@Input()debug:boolean=false;
5050
@Input()useResizeHandler:boolean=false;
5151

52+
@Input()updateOnLayoutChange=true;
53+
@Input()updateOnDataChange=true;
54+
5255
@Output()initialized=newEventEmitter<Plotly.Figure>();
5356
@Output()update=newEventEmitter<Plotly.Figure>();
5457
@Output()purge=newEventEmitter<Plotly.Figure>();
@@ -143,26 +146,30 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
143146
ngDoCheck(){
144147
letshouldUpdate=false;
145148

146-
if(this.layoutDiffer){
147-
constlayoutHasDiff=this.layoutDiffer.diff(this.layout);
148-
if(layoutHasDiff){
149-
shouldUpdate=true;
149+
if(this.updateOnLayoutChange){
150+
if(this.layoutDiffer){
151+
constlayoutHasDiff=this.layoutDiffer.diff(this.layout);
152+
if(layoutHasDiff){
153+
shouldUpdate=true;
154+
}
155+
}elseif(this.layout){
156+
this.layoutDiffer=this.keyValueDiffers.find(this.layout).create();
157+
}else{
158+
this.layoutDiffer=undefined;
150159
}
151-
}elseif(this.layout){
152-
this.layoutDiffer=this.keyValueDiffers.find(this.layout).create();
153-
}else{
154-
this.layoutDiffer=undefined;
155160
}
156161

157-
if(this.dataDiffer){
158-
constdataHasDiff=this.dataDiffer.diff(this.data);
159-
if(dataHasDiff){
160-
shouldUpdate=true;
162+
if(this.updateOnDataChange){
163+
if(this.dataDiffer){
164+
constdataHasDiff=this.dataDiffer.diff(this.data);
165+
if(dataHasDiff){
166+
shouldUpdate=true;
167+
}
168+
}elseif(Array.isArray(this.data)){
169+
this.dataDiffer=this.iterableDiffers.find(this.data).create(this.dataDifferTrackBy);
170+
}else{
171+
this.dataDiffer=undefined;
161172
}
162-
}elseif(Array.isArray(this.data)){
163-
this.dataDiffer=this.iterableDiffers.find(this.data).create(this.dataDifferTrackBy);
164-
}else{
165-
this.dataDiffer=undefined;
166173
}
167174

168175
if(shouldUpdate&&this.plotlyInstance){
@@ -187,7 +194,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
187194
returnclasses.join(' ');
188195
}
189196

190-
createPlot():Promise<void>{
197+
asynccreatePlot():Promise<void>{
191198
returnthis.plotly.newPlot(this.plotEl.nativeElement,this.data,this.layout,this.config,this.frames).then(plotlyInstance=>{
192199
this.plotlyInstance=plotlyInstance;
193200
this.getWindow().gd=this.debug ?plotlyInstance :undefined;
@@ -220,7 +227,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
220227
returnfigure;
221228
}
222229

223-
updatePlot(){
230+
asyncupdatePlot(){
224231
if(!this.plotlyInstance){
225232
consterror=newError(`Plotly component wasn't initialized`);
226233
this.error.emit(error);

0 commit comments

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