Use newPlot to redraw since old method broke

benjeffery · Sep 13, 2016 · e75155e · e75155e
1 parent c2f2d4d
commit e75155e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "url": "https://github.com/benjeffery/react-plotlyjs.git"
   },
   "dependencies": {
-    "console": "^0.5.2",
-    "plotly.js": "^1.16.3"
+    "lodash.clonedeep": "^4.5.0",
+    "plotly.js": "^1.8.0"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",

diff --git a/src/PlotlyComponent.js b/src/PlotlyComponent.js
@@ -1,5 +1,6 @@
 import React  from 'react';
 import Plotly from 'plotly.js';
+import cloneDeep from 'lodash.clonedeep';
 
 var PlotlyComponent = React.createClass({
 
@@ -22,7 +23,7 @@ var PlotlyComponent = React.createClass({
 
   componentDidMount() {
     let {data, layout, config} = this.props;
-    Plotly.plot(this.container, data, layout, config);
+    Plotly.newPlot(this.container, data, cloneDeep(layout), config); //We clone the layout as plotly mutates it.
     if (this.props.onClick)
       this.container.on('plotly_click', this.props.onClick);
     if (this.props.onBeforeHover)
@@ -35,11 +36,11 @@ var PlotlyComponent = React.createClass({
       this.container.on('plotly_selected', this.props.onSelected);
   },
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     //TODO use minimal update for given changes
-    this.container.data = this.props.data;
-    this.container.layout = this.props.layout;
-    Plotly.redraw(this.container);
+    if (prevProps.data !== this.props.data || prevProps.layout !== this.props.layout) {
+      Plotly.newPlot(this.container, this.props.data, this.props.layout);
+    }
   },
 
   componentWillUnmount: function() {