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

nicolaskruchten · web-flow · commit ca8ece2e597c · 2018-03-15T14:50:02.000-04:00
diff --git 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 `<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/
 
diff --git 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
@@ -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 (
         <div
@@ -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,
@@ -297,7 +240,6 @@ export default function plotComponentFactory(Plotly) {
 
   PlotlyComponent.defaultProps = {
     debug: false,
-    fit: false,
     useResizeHandler: false,
     data: [],
     style: {position: 'relative', display: 'inline-block'},
