diff --git a/README.md b/README.md index 4233932..a37c26f 100644 --- a/README.md +++ b/README.md @@ -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 `
` 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/ diff --git a/package.json b/package.json index b038ba0..71ec419 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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" } } diff --git a/src/factory.js b/src/factory.js index c704f47..0e2c3df 100644 --- a/src/factory.js +++ b/src/factory.js @@ -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()` @@ -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 = {}; @@ -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)) @@ -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); @@ -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; @@ -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; @@ -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 (