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

Commit ca8ece2

Browse files
remove fit, require Plotly.react, auto-invoke resize (#65)
1 parent d8c69cf commit ca8ece2

File tree

3 files changed

+13
-74
lines changed

3 files changed

+13
-74
lines changed

β€ŽREADME.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,6 @@ In short, this means that simply adding data points to a trace in `data` or chan
134134
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
135135
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
136136
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
137-
| `fit` | `Boolean` | `false` | _deprecated_ When true, will set `layout.height` and `layout.width` to the component's parent's size if they are unspecified, and will update them on `window.resize` |
138137

139138
**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/
140139

β€Žpackage.json

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"mkdirp": "^0.5.1",
5252
"nodemon": "^1.11.0",
5353
"onetime": "^1.1.0",
54-
"plotly.js": "^1.31.1",
54+
"plotly.js": "^1.35.0",
5555
"prettier": "^1.5.3",
5656
"react": "^15.6.1",
5757
"react-addons-test-utils": "^15.6.0",
@@ -62,15 +62,13 @@
6262
"uglify-js": "^3.0.26"
6363
},
6464
"peerDependencies": {
65-
"plotly.js": ">1.0.0",
65+
"plotly.js": ">1.34.0",
6666
"react": ">12.0.0"
6767
},
6868
"browserify-global-shim": {
6969
"react": "React"
7070
},
7171
"dependencies": {
72-
"fast-isnumeric": "^1.1.1",
73-
"object-assign": "^4.1.1",
7472
"prop-types": "^15.5.10"
7573
}
7674
}

β€Žsrc/factory.js

Lines changed: 11 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
3-
import isNumeric from 'fast-isnumeric';
4-
import objectAssign from 'object-assign';
53

64
// The naming convention is:
75
// - events are attached as `'plotly_' + eventName.toLowerCase()`
@@ -47,14 +45,11 @@ const updateEvents = [
4745
const isBrowser = typeof window !== 'undefined';
4846

4947
export default function plotComponentFactory(Plotly) {
50-
const hasReactAPIMethod = !!Plotly.react;
51-
5248
class PlotlyComponent extends Component {
5349
constructor(props) {
5450
super(props);
5551

5652
this.p = Promise.resolve();
57-
this.fitHandler = null;
5853
this.resizeHandler = null;
5954
this.handlers = {};
6055

@@ -71,12 +66,12 @@ export default function plotComponentFactory(Plotly) {
7166
.then(() => {
7267
return Plotly.newPlot(this.el, {
7368
data: this.props.data,
74-
layout: this.resizedLayoutIfFit(this.props.layout),
69+
layout: this.props.layout,
7570
config: this.props.config,
7671
frames: this.props.frames,
7772
});
7873
})
79-
.then(() => this.syncWindowResize(null, false))
74+
.then(() => this.syncWindowResize(null, true))
8075
.then(this.syncEventHandlers)
8176
.then(this.attachUpdateEvents)
8277
.then(() => this.figureCallback(this.props.onInitialized))
@@ -100,28 +95,15 @@ export default function plotComponentFactory(Plotly) {
10095

10196
this.p = this.p
10297
.then(() => {
103-
if (hasReactAPIMethod) {
104-
return Plotly.react(this.el, {
105-
data: nextProps.data,
106-
layout: this.resizedLayoutIfFit(nextProps.layout),
107-
config: nextProps.config,
108-
frames: nextProps.frames,
109-
});
110-
} else {
111-
this.handlers = {};
112-
return Plotly.newPlot(this.el, {
113-
data: nextProps.data,
114-
layout: this.resizedLayoutIfFit(nextProps.layout),
115-
config: nextProps.config,
116-
frames: nextProps.frames,
117-
});
118-
}
98+
return Plotly.react(this.el, {
99+
data: nextProps.data,
100+
layout: nextProps.layout,
101+
config: nextProps.config,
102+
frames: nextProps.frames,
103+
});
119104
})
120105
.then(() => this.syncEventHandlers(nextProps))
121106
.then(() => this.syncWindowResize(nextProps))
122-
.then(() => {
123-
if (!hasReactAPIMethod) this.attachUpdateEvents();
124-
})
125107
.then(() => this.figureCallback(nextProps.onUpdate))
126108
.catch(err => {
127109
console.error('Error while plotting:', err);
@@ -132,10 +114,6 @@ export default function plotComponentFactory(Plotly) {
132114
componentWillUnmount() {
133115
this.figureCallback(this.props.onPurge);
134116

135-
if (this.fitHandler && isBrowser) {
136-
window.removeEventListener('resize', this.fitHandler);
137-
this.fitHandler = null;
138-
}
139117
if (this.resizeHandler && isBrowser) {
140118
window.removeEventListener('resize', this.resizeHandler);
141119
this.resizeHandler = null;
@@ -178,23 +156,14 @@ export default function plotComponentFactory(Plotly) {
178156
const props = propsIn || this.props;
179157
if (!isBrowser) return;
180158

181-
if (props.fit && !this.fitHandler) {
182-
this.fitHandler = () => {
183-
return Plotly.relayout(this.el, this.getSize());
184-
};
185-
window.addEventListener('resize', this.fitHandler);
186-
187-
if (invoke) return this.fitHandler();
188-
} else if (!props.fit && this.fitHandler) {
189-
window.removeEventListener('resize', this.fitHandler);
190-
this.fitHandler = null;
191-
}
192-
193159
if (props.useResizeHandler && !this.resizeHandler) {
194160
this.resizeHandler = () => {
195161
return Plotly.Plots.resize(this.el);
196162
};
197163
window.addEventListener('resize', this.resizeHandler);
164+
if (invoke) {
165+
this.resizeHandler();
166+
}
198167
} else if (!props.useResizeHandler && this.resizeHandler) {
199168
window.removeEventListener('resize', this.resizeHandler);
200169
this.resizeHandler = null;
@@ -236,31 +205,6 @@ export default function plotComponentFactory(Plotly) {
236205
}
237206
}
238207

239-
resizedLayoutIfFit(layout) {
240-
if (!this.props.fit) {
241-
return layout;
242-
}
243-
return objectAssign({}, layout, this.getSize(layout));
244-
}
245-
246-
getSize(layoutIn) {
247-
let rect;
248-
const layout = layoutIn || this.props.layout;
249-
const layoutWidth = layout ? layout.width : null;
250-
const layoutHeight = layout ? layout.height : null;
251-
const hasWidth = isNumeric(layoutWidth);
252-
const hasHeight = isNumeric(layoutHeight);
253-
254-
if (!hasWidth || !hasHeight) {
255-
rect = this.el.parentElement.getBoundingClientRect();
256-
}
257-
258-
return {
259-
width: hasWidth ? parseInt(layoutWidth) : rect.width,
260-
height: hasHeight ? parseInt(layoutHeight) : rect.height,
261-
};
262-
}
263-
264208
render() {
265209
return (
266210
<div
@@ -274,7 +218,6 @@ export default function plotComponentFactory(Plotly) {
274218
}
275219

276220
PlotlyComponent.propTypes = {
277-
fit: PropTypes.bool,
278221
data: PropTypes.arrayOf(PropTypes.object),
279222
config: PropTypes.object,
280223
layout: PropTypes.object,
@@ -297,7 +240,6 @@ export default function plotComponentFactory(Plotly) {
297240

298241
PlotlyComponent.defaultProps = {
299242
debug: false,
300-
fit: false,
301243
useResizeHandler: false,
302244
data: [],
303245
style: {position: 'relative', display: 'inline-block'},

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /