diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3f1cec9..3d930e8 100644
--- a/.circleci/config.yml
+++ b/.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
diff --git a/README.md b/README.md
index 266c0ec..b74a3cb 100644
--- a/README.md
+++ b/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.
diff --git a/package.json b/package.json
index cd0e0d8..50f29eb 100644
--- a/package.json
+++ b/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,39 +31,42 @@
"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",
@@ -71,8 +74,5 @@
},
"browserify-global-shim": {
"react": "React"
- },
- "dependencies": {
- "prop-types": "^15.7.2"
}
}
diff --git a/src/__mocks__/plotly.js b/src/__mocks__/plotly.js
index b6f1f38..fe1ad31 100644
--- a/src/__mocks__/plotly.js
+++ b/src/__mocks__/plotly.js
@@ -4,13 +4,13 @@ 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
@@ -18,7 +18,7 @@ export default {
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
@@ -26,13 +26,13 @@ export default {
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');
diff --git a/src/__tests__/react-plotly.test.js b/src/__tests__/react-plotly.test.js
index 11de80d..70b5857 100644
--- a/src/__tests__/react-plotly.test.js
+++ b/src/__tests__/react-plotly.test.js
@@ -33,7 +33,7 @@ describe('', () => {
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('', () => {
});
});
- 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('', () => {
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('', () => {
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('', () => {
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('', () => {
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('', () => {
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,7 +153,7 @@ describe('', () => {
}
},
})
- .then(plot => {
+ .then((plot) => {
// Update with and without revision bumps:
/* eslint-disable no-magic-numbers */
setTimeout(() => plot.setProps({layout: {title: 'test test'}}), 10);
@@ -161,7 +161,7 @@ describe('', () => {
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('', () => {
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);
diff --git a/src/factory.js b/src/factory.js
index fa2ff58..3db9ddf 100644
--- a/src/factory.js
+++ b/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;
});