From b46c467ce1ac8cdb02d4c7c82843834cd21d1d2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Mon, 7 Nov 2016 15:17:19 +0000
Subject: [PATCH] use react-plotly

---
 .../plotly/client/plotly-graph/plot.js        | 48 -------------------
 .../{plotly-graph/index.js => plotly.js}      | 26 +++++-----
 spikes/graphs-fe/plotly/client/root.js        |  2 +-
 spikes/graphs-fe/plotly/client/store.js       |  2 +-
 spikes/graphs-fe/plotly/package.json          |  2 +-
 spikes/graphs-fe/plotly/server/metric.js      |  2 +-
 6 files changed, 19 insertions(+), 63 deletions(-)
 delete mode 100644 spikes/graphs-fe/plotly/client/plotly-graph/plot.js
 rename spikes/graphs-fe/plotly/client/{plotly-graph/index.js => plotly.js} (71%)

diff --git a/spikes/graphs-fe/plotly/client/plotly-graph/plot.js b/spikes/graphs-fe/plotly/client/plotly-graph/plot.js
deleted file mode 100644
index 3dc0a01c..00000000
--- a/spikes/graphs-fe/plotly/client/plotly-graph/plot.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const React = require('react');
-const Plotly = require('plotly.js');
-
-const Plot = React.createClass({
-  propTypes: {
-    name: React.PropTypes.string.isRequired,
-    xdata: React.PropTypes.object,
-    ydata: React.PropTypes.object,
-    type: React.PropTypes.string,
-    mode: React.PropTypes.string,
-  },
-  componentDidMount: function() {
-    const {
-      name,
-      xData,
-      yData,
-      type = 'scatter',
-      mode = 'markers'
-    } = this.props;
-
-    Plotly.newPlot(name, [{
-      x: xData,
-      y: yData,
-      mode,
-      type
-    }], {
-      margin: {
-        t: 0, r: 0, l: 30
-      },
-      xaxis: {
-        gridcolor: 'transparent'
-      }
-    }, {
-      displayModeBar: false
-    });
-  },
-  render: function() {
-    const {
-      name
-    } = this.props
-
-    return (
-      <div id={name} />
-    );
-  }
-});
-
-module.exports = Plot;
diff --git a/spikes/graphs-fe/plotly/client/plotly-graph/index.js b/spikes/graphs-fe/plotly/client/plotly.js
similarity index 71%
rename from spikes/graphs-fe/plotly/client/plotly-graph/index.js
rename to spikes/graphs-fe/plotly/client/plotly.js
index fcca8076..95df4fe1 100644
--- a/spikes/graphs-fe/plotly/client/plotly-graph/index.js
+++ b/spikes/graphs-fe/plotly/client/plotly.js
@@ -1,6 +1,6 @@
+const Plotly = require('react-plotlyjs');
 const ReactRedux = require('react-redux');
 const React = require('react');
-const Plot = require('./plot');
 
 const {
   connect
@@ -18,23 +18,27 @@ const PlotlyGraph = React.createClass({
     const graphTypes = [{
       type: 'scatter',
       mode: 'lines+markers'
-    }, {
-      type: 'scatter',
-      mode: 'line'
     }, {
       type: 'bar'
     }];
 
     const graphs = graphTypes.map((graphType, i) => {
-      console.log(cpu, datatime);
+      const data = {
+        type: graphType.type,
+        mode: graphType.mode,
+        x: datatime,
+        y: cpu
+      };
+
+      const layout = {
+        barmode: graphType.mode
+      }
+
       return (
-        <Plot
+        <Plotly
           key={i}
-          name={`plot-${i}`}
-          xData={datatime}
-          yData={cpu}
-          type={graphType.type}
-          mode={graphType.mode}
+          layout={layout}
+          data={[data]}
         />
       );
     });
diff --git a/spikes/graphs-fe/plotly/client/root.js b/spikes/graphs-fe/plotly/client/root.js
index 03c853fe..886a55db 100644
--- a/spikes/graphs-fe/plotly/client/root.js
+++ b/spikes/graphs-fe/plotly/client/root.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const ReactHotLoader = require('react-hot-loader');
 const ReactRedux = require('react-redux');
-const PlotlyGraph = require('./plotly-graph');
+const PlotlyGraph = require('./plotly');
 
 
 const {
diff --git a/spikes/graphs-fe/plotly/client/store.js b/spikes/graphs-fe/plotly/client/store.js
index 57963740..b0e8763d 100644
--- a/spikes/graphs-fe/plotly/client/store.js
+++ b/spikes/graphs-fe/plotly/client/store.js
@@ -16,7 +16,7 @@ const reducer = (state, action) => {
 
   return {
     ...state,
-    data: takeRight(data, 10)
+    data: takeRight(data, 50)
   };
 };
 
diff --git a/spikes/graphs-fe/plotly/package.json b/spikes/graphs-fe/plotly/package.json
index dacd4326..e0f4e16f 100644
--- a/spikes/graphs-fe/plotly/package.json
+++ b/spikes/graphs-fe/plotly/package.json
@@ -22,13 +22,13 @@
     "inert": "^4.0.2",
     "lodash.takeright": "^4.1.1",
     "nes": "^6.3.1",
-    "plotly.js": "^1.1.0",
     "postcss-loader": "^1.0.0",
     "postcss-modules-values": "^1.2.2",
     "postcss-nested": "^1.0.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-hot-loader": "^3.0.0-beta.6",
+    "react-plotlyjs": "^0.3.7",
     "react-redux": "^4.4.5",
     "redux": "^3.6.0",
     "require-dir": "^0.3.1",
diff --git a/spikes/graphs-fe/plotly/server/metric.js b/spikes/graphs-fe/plotly/server/metric.js
index cf3f1394..0d64fad2 100644
--- a/spikes/graphs-fe/plotly/server/metric.js
+++ b/spikes/graphs-fe/plotly/server/metric.js
@@ -19,7 +19,7 @@ module.exports = (server) => ({
         when: new Date().getTime(),
         cpu: Math.random() * 100
       });
-    }, 1000);
+    }, 400);
 
     cdm[id] = {
       interval,