Updates 2020

.circleci/config.yml

@@ -3,14 +3,14 @@ version: 2.0
 jobs:
   build:
     docker:
-      - image: circleci/node:10.9.0
+      - image: circleci/node:12.18.3
     working_directory: ~/react-plotly.js
     steps:
       - checkout
       - restore_cache:
           keys:
-            - v{{ .Environment.CIRCLE_CACHE_VERSION }}-deps-{{ .Branch }}-{{ checksum "package-lock.json" }}
-            - v{{ .Environment.CIRCLE_CACHE_VERSION }}-deps-master-{{ checksum "package-lock.json" }}
+            - v{{ .Environment.CIRCLE_CACHE_VERSION }}-deps-{{ .Branch }}-{{ checksum "package.json" }}
+            - v{{ .Environment.CIRCLE_CACHE_VERSION }}-deps-master-{{ checksum "package.json" }}
       - run:
           name: Install dependencies
           command: |
@@ -32,7 +32,7 @@ jobs:
 
   test:
     docker:
-      - image: circleci/node:10.9.0
+      - image: circleci/node:12.18.3
     working_directory: ~/react-plotly.js
     steps:
       - checkout

README.md

@@ -167,6 +167,7 @@ Event handlers for specific [`plotly.js` events](https://plot.ly/javascript/plot
 | `onLegendClick`           | `Function` | `plotly_legendclick`           |
 | `onLegendDoubleClick`     | `Function` | `plotly_legenddoubleclick`     |
 | `onRelayout`              | `Function` | `plotly_relayout`              |
+| `onRelayouting`           | `Function` | `plotly_relayouting`           |
 | `onRestyle`               | `Function` | `plotly_restyle`               |
 | `onRedraw`                | `Function` | `plotly_redraw`                |
 | `onSelected`              | `Function` | `plotly_selected`              |
@@ -243,4 +244,4 @@ $ npm run test
 
 ## License
 
-© 2017 Plotly, Inc. MIT License.
+© 2017-2020 Plotly, Inc. MIT License.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-plotly.js",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "description": "A plotly.js react component from Plotly",
   "author": "Plotly, Inc.",
@@ -21,7 +21,7 @@
     "test": "npm run lint && npm run deps && jest",
     "watch-test": "jest --watch",
     "watch": "nodemon --exec \"npm run make:lib\" -w src",
-    "deps": "./node_modules/.bin/dependency-check package.json --entry src/react-plotly.js --missing"
+    "deps": "./node_modules/.bin/dependency-check src/react-plotly.js --missing"
   },
   "keywords": [
     "graphing",
@@ -31,48 +31,48 @@
     "plotly",
     "react"
   ],
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.3",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.1",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "babel-eslint": "^10.1.0",
     "babelify": "^10.0.0",
     "brfs": "^2.0.2",
-    "browserify": "^16.2.3",
+    "browserify": "^16.5.2",
     "browserify-global-shim": "^1.0.3",
     "cash-mv": "^0.2.0",
-    "dependency-check": "^3.3.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "eslint": "^5.14.1",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-react": "^7.12.4",
+    "dependency-check": "^4.1.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.4",
+    "eslint": "^7.9.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-react": "^7.20.6",
     "event-emitter": "^0.3.5",
-    "jest": "^24.1.0",
-    "mkdirp": "^0.5.1",
-    "nodemon": "^1.18.10",
-    "onetime": "^3.0.0",
+    "jest": "^26.4.2",
+    "mkdirp": "^1.0.4",
+    "nodemon": "^2.0.4",
+    "onetime": "^5.1.2",
     "plotly.js": "^1.35.0",
-    "prettier": "^1.16.4",
-    "react": "^16.8.2",
+    "prettier": "^2.1.1",
+    "react": "^16.13.1",
     "react-addons-test-utils": "^15.6.0",
-    "react-dom": "^16.8.2",
-    "react-test-renderer": "^16.8.2",
-    "rimraf": "^2.6.2",
-    "semver": "^5.4.1",
-    "uglify-js": "^3.0.26"
+    "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "semver": "^7.3.2",
+    "uglify-js": "^3.10.4"
   },
   "peerDependencies": {
     "plotly.js": ">1.34.0",
     "react": ">0.13.0"
   },
   "browserify-global-shim": {
     "react": "React"
-  },
-  "dependencies": {
-    "prop-types": "^15.7.2"
   }
 }

src/__mocks__/plotly.js

@@ -4,35 +4,35 @@ const state = {};
 const ASYNC_DELAY = 1;
 
 export default {
-  plot: jest.fn(gd => {
+  plot: jest.fn((gd) => {
     state.gd = gd;
     setTimeout(() => {
       state.gd.emit('plotly_afterplot');
     }, ASYNC_DELAY);
   }),
-  newPlot: jest.fn(gd => {
+  newPlot: jest.fn((gd) => {
     state.gd = gd;
     EventEmitter(state.gd); // eslint-disable-line new-cap
 
     setTimeout(() => {
       state.gd.emit('plotly_afterplot');
     }, ASYNC_DELAY);
   }),
-  react: jest.fn(gd => {
+  react: jest.fn((gd) => {
     state.gd = gd;
     EventEmitter(state.gd); // eslint-disable-line new-cap
 
     setTimeout(() => {
       state.gd.emit('plotly_afterplot');
     }, ASYNC_DELAY);
   }),
-  relayout: jest.fn(gd => {
+  relayout: jest.fn((gd) => {
     state.gd = gd;
     setTimeout(() => {
       state.gd.emit('plotly_relayout');
     }, ASYNC_DELAY);
   }),
-  restyle: jest.fn(gd => {
+  restyle: jest.fn((gd) => {
     state.gd = gd;
     setTimeout(() => {
       state.gd.emit('plotly_restyle');

src/__tests__/react-plotly.test.js

@@ -33,7 +33,7 @@ describe('<Plotly/>', () => {
 
   describe('with mocked plotly.js', () => {
     beforeEach(() => {
-      Plotly = require.requireMock('../__mocks__/plotly.js').default;
+      Plotly = jest.requireMock('../__mocks__/plotly.js').default;
       PlotComponent = createComponent(Plotly);
 
       // Override the parent element size:
@@ -43,19 +43,19 @@ describe('<Plotly/>', () => {
       });
     });
 
-    describe('initialization', function() {
-      test('calls Plotly.react on instantiation', done => {
+    describe('initialization', function () {
+      test('calls Plotly.react on instantiation', (done) => {
         createPlot({})
           .then(() => {
             expect(Plotly.react).toHaveBeenCalled();
           })
-          .catch(err => {
+          .catch((err) => {
             done.fail(err);
           })
           .then(done);
       });
 
-      test('passes data', done => {
+      test('passes data', (done) => {
         createPlot({
           data: [{x: [1, 2, 3]}],
           layout: {title: 'foo'},
@@ -66,11 +66,11 @@ describe('<Plotly/>', () => {
               layout: {title: 'foo'},
             });
           })
-          .catch(err => done.fail(err))
+          .catch((err) => done.fail(err))
           .then(done);
       });
 
-      test('accepts width and height', done => {
+      test('accepts width and height', (done) => {
         createPlot({
           layout: {width: 320, height: 240},
         })
@@ -79,13 +79,13 @@ describe('<Plotly/>', () => {
               layout: {width: 320, height: 240},
             });
           })
-          .catch(err => done.fail(err))
+          .catch((err) => done.fail(err))
           .then(done);
       });
     });
 
     describe('plot updates', () => {
-      test('updates data', done => {
+      test('updates data', (done) => {
         createPlot({
           layout: {width: 123, height: 456},
           onUpdate: once(() => {
@@ -96,13 +96,13 @@ describe('<Plotly/>', () => {
             done();
           }),
         })
-          .then(plot => {
+          .then((plot) => {
             plot.setProps({data: [{x: [1, 2, 3]}]});
           })
-          .catch(err => done.fail(err));
+          .catch((err) => done.fail(err));
       });
 
-      test('updates data when revision is defined but not changed', done => {
+      test('updates data when revision is defined but not changed', (done) => {
         createPlot({
           revision: 1,
           layout: {width: 123, height: 456},
@@ -114,13 +114,13 @@ describe('<Plotly/>', () => {
             done();
           }),
         })
-          .then(plot => {
+          .then((plot) => {
             plot.setProps({revision: 1, data: [{x: [1, 2, 3]}]});
           })
-          .catch(err => done.fail(err));
+          .catch((err) => done.fail(err));
       });
 
-      test('sets the title', done => {
+      test('sets the title', (done) => {
         createPlot({
           onUpdate: once(() => {
             expectPlotlyAPICall(Plotly.react, {
@@ -129,13 +129,13 @@ describe('<Plotly/>', () => {
             done();
           }),
         })
-          .then(plot => {
+          .then((plot) => {
             plot.setProps({layout: {title: 'test test'}});
           })
-          .catch(err => done.fail(err));
+          .catch((err) => done.fail(err));
       });
 
-      test('revision counter', done => {
+      test('revision counter', (done) => {
         var callCnt = 0;
         createPlot({
           revision: 0,
@@ -153,15 +153,15 @@ describe('<Plotly/>', () => {
             }
           },
         })
-          .then(plot => {
+          .then((plot) => {
             // Update with and without revision bumps:
             /* eslint-disable no-magic-numbers */
             setTimeout(() => plot.setProps({layout: {title: 'test test'}}), 10);
             setTimeout(() => plot.setProps({revision: 1, layout: {title: 'test test'}}), 20);
             setTimeout(() => plot.setProps({revision: 1, layout: {title: 'test test'}}), 30);
             setTimeout(() => plot.setProps({revision: 2, layout: {title: 'test test'}}), 40);
           })
-          .catch(err => done.fail(err));
+          .catch((err) => done.fail(err));
       });
     });
 
@@ -170,7 +170,7 @@ describe('<Plotly/>', () => {
         const onRelayout = () => {};
 
         createPlot({onRelayout}).then((plot) => {
-          const { handlers } = plot.instance();
+          const {handlers} = plot.instance();
 
           expect(plot.prop('onRelayout')).toBe(onRelayout);
           expect(handlers.Relayout).toBe(onRelayout);

src/factory.js

@@ -43,6 +43,7 @@ const updateEvents = [
   'plotly_relayouting',
   'plotly_doubleclick',
   'plotly_animated',
+  'plotly_sunburstclick',
 ];
 
 // Check if a window is available since SSR (server-side rendering)
@@ -95,7 +96,7 @@ export default function plotComponentFactory(Plotly) {
             this.attachUpdateEvents();
           }
         })
-        .catch(err => {
+        .catch((err) => {
           if (this.props.onError) {
             this.props.onError(err);
           }
@@ -153,7 +154,7 @@ export default function plotComponentFactory(Plotly) {
         return;
       }
 
-      updateEvents.forEach(updateEvent => {
+      updateEvents.forEach((updateEvent) => {
         this.el.on(updateEvent, this.handleUpdate);
       });
     }
@@ -163,7 +164,7 @@ export default function plotComponentFactory(Plotly) {
         return;
       }
 
-      updateEvents.forEach(updateEvent => {
+      updateEvents.forEach((updateEvent) => {
         this.el.removeListener(updateEvent, this.handleUpdate);
       });
     }
@@ -208,7 +209,7 @@ export default function plotComponentFactory(Plotly) {
 
     // Attach and remove event handlers as they're added or removed from props:
     syncEventHandlers() {
-      eventNames.forEach(eventName => {
+      eventNames.forEach((eventName) => {
         const prop = this.props['on' + eventName];
         const handler = this.handlers[eventName];
         const hasHandler = Boolean(handler);
@@ -269,7 +270,7 @@ export default function plotComponentFactory(Plotly) {
     divId: PropTypes.string,
   };
 
-  eventNames.forEach(eventName => {
+  eventNames.forEach((eventName) => {
     PlotlyComponent.propTypes['on' + eventName] = PropTypes.func;
   });