plotly
diff --git a/‎README.md
Lines changed: 3 additions & 25 deletions b/‎README.md
Lines changed: 3 additions & 25 deletions
diff --git a/‎dev/favicon.ico
3.78 KB b/‎dev/favicon.ico
3.78 KB
diff --git a/‎dev/index.html
Lines changed: 36 additions & 0 deletions b/‎dev/index.html
Lines changed: 36 additions & 0 deletions
diff --git a/‎dev/index.js
Lines changed: 70 additions & 0 deletions b/‎dev/index.js
Lines changed: 70 additions & 0 deletions
@@ -13,7 +13,7 @@ Check out the [live demo here](https://plotly.github.io/react-plotly.js-editor/)
 
 ## Quick start
 
-Check out the demo of the `DefaultEditor` at https://plotly.github.io/react-plotly.js-editor/ or run it locally with:
+Check out the demo of the latest release of the `DefaultEditor` at https://plotly.github.io/react-plotly.js-editor/ or run it locally with:
 
 ```
 git clone [this repo]
@@ -86,32 +86,10 @@ class App extends Component {
 
 ## Development Setup
 
-You can use `npm link` to link your local copy of the `react-plotly.js-editor` to your test repo.
-
-With `npm link` you can get some errors related to
-[multiple copies of react being loaded](https://github.com/facebookincubator/create-react-app/issues/1107).
-To get around this, you can create an
-[alias](https://github.com/facebookincubator/create-react-app/issues/393) that
-points your project to the copy of react that it should be using or you can
-simply remove `react` and `react-dom` from `react-plotly.js-editor`.
-
-### Using the `simple` example for development
-
-In one terminal:
-
-```
-npm link       # registers react-plotly.js-editor for subsequent npm link calls
-npm run watch  # keep this running
 ```
-
-In another terminal:
-
-```
-cd examples/simple # or any other application directory
 npm install
-rm -rf node_modules/react node_modules/react-dom node_modules/react-plotly.js-edit
-npm link react-plotly.js-edit
-npm start # keep this running
+npm start
+# start hacking
 ```
 
 ## Built-in Components
 
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <title>Editor Dev</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+
+      .app{
+        display: flex;
+        /*
+           We are defining the max height of the app so that the editor knows how big to be
+           currently the editor will take up whatever space it can if it is not constrained in its parent
+         */
+        min-height: 100vh;
+        max-height: 100vh;
+        width: 100%;
+      }
+      .app__main {
+        max-width: 100%;
+        max-height: 100vh;
+        overflow: auto;
+        flex-grow: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="bundle.js" type="text/javascript"></script>
+  </body>
+</html>
@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import plotly from 'plotly.js/dist/plotly-basic';
+import createPlotComponent from 'react-plotly.js/factory';
+import PlotlyEditor from '../src';
+import '../src/styles/main.scss';
+
+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
+};
+const dataSourceOptions = Object.keys(dataSources).map(name => ({
+  value: name,
+  label: name,
+}));
+
+const Plot = createPlotComponent(plotly);
+
+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: {},
+      editorRevision: 0,
+      plotRevision: 0,
+    };
+  }
+
+  handlePlotUpdate(graphDiv) {
+    this.setState(({editorRevision: x}) => ({editorRevision: x + 1, graphDiv}));
+  }
+
+  handleEditorUpdate() {
+    this.setState(({plotRevision: x}) => ({plotRevision: x + 1}));
+  }
+
+  render() {
+    return (
+      <div className="app">
+        <PlotlyEditor
+          graphDiv={this.state.graphDiv}
+          onUpdate={this.handleEditorUpdate.bind(this)}
+          revision={this.state.editorRevision}
+          dataSources={dataSources}
+          dataSourceOptions={dataSourceOptions}
+          plotly={plotly}
+        />
+        <div className="app__main" style={{width: '100%', height: '100%'}}>
+          <Plot
+            debug
+            useResizeHandler
+            data={this.state.graphDiv.data}
+            layout={this.state.graphDiv.layout}
+            onUpdate={this.handlePlotUpdate.bind(this)}
+            onInitialized={this.handlePlotUpdate.bind(this)}
+            revision={this.state.plotRevision}
+            style={{width: '100%', height: '100%'}}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));