Skip to content

remove fit, require Plotly.react, auto-invoke resize #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 15, 2018
Merged

remove fit, require Plotly.react, auto-invoke resize #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@ In short, this means that simply adding data points to a trace in `data` or chan
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
| `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` |

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

Expand Down
6 changes: 2 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"mkdirp": "^0.5.1",
"nodemon": "^1.11.0",
"onetime": "^1.1.0",
"plotly.js": "^1.31.1",
"plotly.js": "^1.35.0",
"prettier": "^1.5.3",
"react": "^15.6.1",
"react-addons-test-utils": "^15.6.0",
Expand All @@ -62,15 +62,13 @@
"uglify-js": "^3.0.26"
},
"peerDependencies": {
"plotly.js": ">1.0.0",
"plotly.js": ">1.34.0",
"react": ">12.0.0"
},
"browserify-global-shim": {
"react": "React"
},
"dependencies": {
"fast-isnumeric": "^1.1.1",
"object-assign": "^4.1.1",
"prop-types": "^15.5.10"
}
}
80 changes: 11 additions & 69 deletions src/factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import isNumeric from 'fast-isnumeric';
import objectAssign from 'object-assign';

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

export default function plotComponentFactory(Plotly) {
const hasReactAPIMethod = !!Plotly.react;

class PlotlyComponent extends Component {
constructor(props) {
super(props);

this.p = Promise.resolve();
this.fitHandler = null;
this.resizeHandler = null;
this.handlers = {};

Expand All @@ -71,12 +66,12 @@ export default function plotComponentFactory(Plotly) {
.then(() => {
return Plotly.newPlot(this.el, {
data: this.props.data,
layout: this.resizedLayoutIfFit(this.props.layout),
layout: this.props.layout,
config: this.props.config,
frames: this.props.frames,
});
})
.then(() => this.syncWindowResize(null, false))
.then(() => this.syncWindowResize(null, true))
.then(this.syncEventHandlers)
.then(this.attachUpdateEvents)
.then(() => this.figureCallback(this.props.onInitialized))
Expand All @@ -100,28 +95,15 @@ export default function plotComponentFactory(Plotly) {

this.p = this.p
.then(() => {
if (hasReactAPIMethod) {
return Plotly.react(this.el, {
data: nextProps.data,
layout: this.resizedLayoutIfFit(nextProps.layout),
config: nextProps.config,
frames: nextProps.frames,
});
} else {
this.handlers = {};
return Plotly.newPlot(this.el, {
data: nextProps.data,
layout: this.resizedLayoutIfFit(nextProps.layout),
config: nextProps.config,
frames: nextProps.frames,
});
}
return Plotly.react(this.el, {
data: nextProps.data,
layout: nextProps.layout,
config: nextProps.config,
frames: nextProps.frames,
});
})
.then(() => this.syncEventHandlers(nextProps))
.then(() => this.syncWindowResize(nextProps))
.then(() => {
if (!hasReactAPIMethod) this.attachUpdateEvents();
})
.then(() => this.figureCallback(nextProps.onUpdate))
.catch(err => {
console.error('Error while plotting:', err);
Expand All @@ -132,10 +114,6 @@ export default function plotComponentFactory(Plotly) {
componentWillUnmount() {
this.figureCallback(this.props.onPurge);

if (this.fitHandler && isBrowser) {
window.removeEventListener('resize', this.fitHandler);
this.fitHandler = null;
}
if (this.resizeHandler && isBrowser) {
window.removeEventListener('resize', this.resizeHandler);
this.resizeHandler = null;
Expand Down Expand Up @@ -178,23 +156,14 @@ export default function plotComponentFactory(Plotly) {
const props = propsIn || this.props;
if (!isBrowser) return;

if (props.fit && !this.fitHandler) {
this.fitHandler = () => {
return Plotly.relayout(this.el, this.getSize());
};
window.addEventListener('resize', this.fitHandler);

if (invoke) return this.fitHandler();
} else if (!props.fit && this.fitHandler) {
window.removeEventListener('resize', this.fitHandler);
this.fitHandler = null;
}

if (props.useResizeHandler && !this.resizeHandler) {
this.resizeHandler = () => {
return Plotly.Plots.resize(this.el);
};
window.addEventListener('resize', this.resizeHandler);
if (invoke) {
this.resizeHandler();
}
} else if (!props.useResizeHandler && this.resizeHandler) {
window.removeEventListener('resize', this.resizeHandler);
this.resizeHandler = null;
Expand Down Expand Up @@ -236,31 +205,6 @@ export default function plotComponentFactory(Plotly) {
}
}

resizedLayoutIfFit(layout) {
if (!this.props.fit) {
return layout;
}
return objectAssign({}, layout, this.getSize(layout));
}

getSize(layoutIn) {
let rect;
const layout = layoutIn || this.props.layout;
const layoutWidth = layout ? layout.width : null;
const layoutHeight = layout ? layout.height : null;
const hasWidth = isNumeric(layoutWidth);
const hasHeight = isNumeric(layoutHeight);

if (!hasWidth || !hasHeight) {
rect = this.el.parentElement.getBoundingClientRect();
}

return {
width: hasWidth ? parseInt(layoutWidth) : rect.width,
height: hasHeight ? parseInt(layoutHeight) : rect.height,
};
}

render() {
return (
<div
Expand All @@ -274,7 +218,6 @@ export default function plotComponentFactory(Plotly) {
}

PlotlyComponent.propTypes = {
fit: PropTypes.bool,
data: PropTypes.arrayOf(PropTypes.object),
config: PropTypes.object,
layout: PropTypes.object,
Expand All @@ -297,7 +240,6 @@ export default function plotComponentFactory(Plotly) {

PlotlyComponent.defaultProps = {
debug: false,
fit: false,
useResizeHandler: false,
data: [],
style: {position: 'relative', display: 'inline-block'},
Expand Down