fixing up examples

nicolaskruchten · nicolaskruchten · commit cc3c1dab08a7 · 2018-03-08T15:01:16.000-05:00
diff --git a/examples/custom/src/App.js b/examples/custom/src/App.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
-import createPlotComponent from 'react-plotly.js/factory';
 import PlotlyEditor from 'react-chart-editor';
 import CustomEditor from './CustomEditor';
 import 'react-chart-editor/lib/react-chart-editor.css';
@@ -15,63 +14,40 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
   label: name,
 }));
 
-const Plot = createPlotComponent(plotly);
+const config = {editable: true};
 
 class App extends Component {
   constructor() {
     super();
-
-    // The graphDiv object is passed to Plotly.js, which then causes it to be
-    // overwritten with a full DOM node that contains data, layout, _fullData,
-    // _fullLayout etc in handlePlotUpdate()
     this.state = {
-      graphDiv: {
-        data: [
-          {
-            type: 'scatter',
-            x: dataSources.col1,
-            y: dataSources.col2,
-            marker: {color: dataSources.col3},
-          },
-        ],
-      },
-      plotRevision: 0,
+      data: [
+        {
+          type: 'scatter',
+          x: dataSources.col1,
+          y: dataSources.col2,
+          marker: {color: dataSources.col3},
+        },
+      ],
+      layout: {},
     };
   }
 
-  handlePlotUpdate(graphDiv) {
-    this.setState({graphDiv});
-  }
-
-  handleEditorUpdate() {
-    this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
-  }
-
   render() {
     return (
-      <div className="app">
-        <PlotlyEditor
-          locale="en"
-          graphDiv={this.state.graphDiv}
-          onUpdate={this.handleEditorUpdate.bind(this)}
-          plotly={plotly}
-          dataSources={dataSources}
-          dataSourceOptions={dataSourceOptions}
-        >
-          <CustomEditor />
-        </PlotlyEditor>
-        <div className="app__main">
-          <Plot
-            debug
-            data={this.state.graphDiv.data}
-            layout={this.state.graphDiv.layout}
-            config={{editable: true}}
-            onUpdate={this.handlePlotUpdate.bind(this)}
-            onInitialized={this.handlePlotUpdate.bind(this)}
-            revision={this.state.plotRevision}
-          />
-        </div>
-      </div>
+      <PlotlyEditor
+        data={this.state.data}
+        layout={this.state.layout}
+        config={config}
+        dataSources={dataSources}
+        dataSourceOptions={dataSourceOptions}
+        plotly={plotly}
+        onUpdate={(data, layout) => this.setState({data, layout})}
+        useResizeHandler
+        debug
+        advancedTraceTypeSelector
+      >
+        <CustomEditor />
+      </PlotlyEditor>
     );
   }
 }
diff --git a/examples/demo/src/App.js b/examples/demo/src/App.js
@@ -1,32 +1,31 @@
 import React, {Component} from 'react';
 import plotly from 'plotly.js/dist/plotly';
-import createPlotComponent from 'react-plotly.js/factory';
 import PlotlyEditor from 'react-chart-editor';
 import 'react-chart-editor/lib/react-chart-editor.css';
 import Nav from './Nav';
 
 const dataSources = {
-  col1: [1, 2, 3], // eslint-disable-line no-magic-numbers
-  col2: [4, 3, 2], // eslint-disable-line no-magic-numbers
-  col3: [17, 13, 9], // eslint-disable-line no-magic-numbers
+  col1: ['Jan', 'Feb', 'Mar'], // eslint-disable-line no-magic-numbers
+  col2: [1, 2, 3],
+  col3: [4, 3, 2], // eslint-disable-line no-magic-numbers
+  col4: [17, 13, 9], // eslint-disable-line no-magic-numbers
+  col5: ['blue'],
+  col6: ['yellow', 'green', 'yellow'],
 };
 const dataSourceOptions = Object.keys(dataSources).map(name => ({
   value: name,
   label: name,
 }));
 
-const Plot = createPlotComponent(plotly);
+const config = {editable: true};
 
 class App extends Component {
   constructor() {
     super();
 
-    // The graphDiv object is passed to Plotly.js, which then causes it to be
-    // overwritten with a full DOM node that contains data, layout, _fullData,
-    // _fullLayout etc in handlePlotUpdate()
     this.state = {
-      graphDiv: {},
-      plotRevision: 0,
+      data: [],
+      layout: {},
       currentMockIndex: -1,
       mocks: [],
     };
@@ -42,61 +41,36 @@ class App extends Component {
       .then(mocks => this.setState({mocks}));
   }
 
-  handlePlotUpdate(graphDiv) {
-    this.setState({graphDiv});
-  }
-
-  handleEditorUpdate() {
-    this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
-  }
-
   loadMock(mockIndex) {
     const mock = this.state.mocks[mockIndex];
     fetch(mock.url, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
       .then(response => response.json())
       .then(figure => {
-        const graphDiv = this.state.graphDiv;
-        graphDiv.layout = figure.layout;
-        graphDiv.data = figure.data;
-        this.setState(({plotRevision: x}) => ({
+        this.setState({
           currentMockIndex: mockIndex,
-          plotRevision: x + 1,
-        }));
+          data: figure.data,
+          layout: figure.layout,
+        });
       });
   }
 
   render() {
     return (
       <div className="app__container plotly-editor--theme-provider">
-        <div className="app">
-          <PlotlyEditor
-            config={{editable: true}}
-            graphDiv={this.state.graphDiv}
-            onUpdate={this.handleEditorUpdate.bind(this)}
-            dataSources={dataSources}
-            dataSourceOptions={dataSourceOptions}
-            plotly={plotly}
-            advancedTraceTypeSelector
-          />
-          <div className="app__main" style={{width: '100%', height: '100%'}}>
-            <Plot
-              data={this.state.graphDiv.data}
-              debug
-              layout={this.state.graphDiv.layout}
-              onInitialized={this.handlePlotUpdate.bind(this)}
-              onUpdate={this.handlePlotUpdate.bind(this)}
-              revision={this.state.plotRevision}
-              useResizeHandler
-              style={{
-                width: '100%',
-                height: '100%',
-                minHeight: 'calc(100vh - 50px)',
-              }}
-            />
-          </div>
-        </div>
+        <PlotlyEditor
+          data={this.state.data}
+          layout={this.state.layout}
+          config={config}
+          dataSources={dataSources}
+          dataSourceOptions={dataSourceOptions}
+          plotly={plotly}
+          onUpdate={(data, layout) => this.setState({data, layout})}
+          useResizeHandler
+          debug
+          advancedTraceTypeSelector
+        />
         <Nav
           currentMockIndex={this.state.currentMockIndex}
           loadMock={this.loadMock}
diff --git a/examples/redux/src/App.js b/examples/redux/src/App.js
@@ -2,7 +2,6 @@ import 'react-chart-editor/lib/react-chart-editor.css';
 import PlotlyEditor from 'react-chart-editor';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import createPlotComponent from 'react-plotly.js/factory';
 import plotly from 'plotly.js/dist/plotly';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
@@ -18,53 +17,33 @@ const dataSourceOptions = Object.keys(dataSources).map(name => ({
   label: name,
 }));
 
-const Plot = createPlotComponent(plotly);
+const config = {editable: true};
 
 class App extends Component {
   constructor(props) {
     super(props);
     const {actions} = props;
 
-    const graphDiv = {data: [], layout: {}};
-
     actions.sourcesUpdate(dataSources);
     actions.dataSourceOptionsUpdate(dataSourceOptions);
-    actions.initializePlot({data: graphDiv.data, layout: graphDiv.layout});
   }
 
   render() {
-    const {
-      actions,
-      dataSources,
-      dataSourceOptions,
-      graphDiv,
-      plotRevision,
-    } = this.props;
+    const {actions, dataSources, dataSourceOptions, data, layout} = this.props;
 
     return (
-      <div className="app">
-        <aside className="app__aside">
-          <PlotlyEditor
-            locale="en"
-            dataSources={dataSources}
-            dataSourceOptions={dataSourceOptions}
-            graphDiv={graphDiv}
-            onUpdate={actions.editorUpdate}
-            plotly={plotly}
-          />
-        </aside>
-        <div className="app__main">
-          <Plot
-            debug
-            data={graphDiv.data}
-            layout={graphDiv.layout}
-            config={{editable: true}}
-            onUpdate={actions.plotUpdate}
-            onInitialized={actions.plotUpdate}
-            revision={plotRevision}
-          />
-        </div>
-      </div>
+      <PlotlyEditor
+        data={data}
+        layout={layout}
+        config={config}
+        dataSources={dataSources}
+        dataSourceOptions={dataSourceOptions}
+        plotly={plotly}
+        onUpdate={actions.editorUpdate}
+        useResizeHandler
+        debug
+        advancedTraceTypeSelector
+      />
     );
   }
 }
@@ -73,17 +52,15 @@ App.propTypes = {
   actions: PropTypes.object,
   dataSourceOptions: PropTypes.array,
   dataSources: PropTypes.object,
-  editorRevision: PropTypes.number,
-  graphDiv: PropTypes.object,
-  plotRevision: PropTypes.number,
+  data: PropTypes.array,
+  layout: PropTypes.object,
 };
 
 const mapStateToProps = state => ({
   dataSourceOptions: state.dataSourceOptions,
   dataSources: state.dataSources,
-  editorRevision: state.editorRevision,
-  graphDiv: state.graphDiv,
-  plotRevision: state.plotRevision,
+  data: state.data,
+  layout: state.layout,
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/examples/redux/src/actions.js b/examples/redux/src/actions.js
@@ -14,22 +14,9 @@ export function dataSourceOptionsUpdate(payload) {
   };
 }
 
-export function editorUpdate() {
+export function editorUpdate(data, layout) {
   return {
     type: ACTIONS.EDITOR_UPDATE,
-  };
-}
-
-export function plotUpdate(payload) {
-  return {
-    type: ACTIONS.PLOT_UPDATE,
-    payload,
-  };
-}
-
-export function initializePlot(payload) {
-  return {
-    type: ACTIONS.INITIALIZE_PLOT,
-    payload,
+    payload: {data, layout},
   };
 }
diff --git a/examples/redux/src/reducer.js b/examples/redux/src/reducer.js
@@ -3,8 +3,8 @@ import ACTIONS from './constants';
 const initialState = {
   dataSources: {},
   dataSourceOptions: [],
-  graphDiv: {},
-  plotRevision: 0,
+  data: [],
+  layout: {},
 };
 
 export default (state = initialState, action) => {
@@ -16,17 +16,8 @@ export default (state = initialState, action) => {
     case ACTIONS.EDITOR_UPDATE:
       return {
         ...state,
-        plotRevision: state.plotRevision + 1,
-      };
-    case ACTIONS.PLOT_UPDATE:
-      return {
-        ...state,
-        graphDiv: action.payload,
-      };
-    case ACTIONS.INITIALIZE_PLOT:
-      return {
-        ...state,
-        graphDiv: action.payload,
+        data: action.payload.data,
+        layout: action.payload.layout,
       };
     default:
       return state;
diff --git a/examples/simple/src/App.js b/examples/simple/src/App.js
diff --git a/src/PlotlyEditor.js b/src/PlotlyEditor.js
