use react-plotly

spikes/graphs-fe/plotly/client/plotly-graph/plot.js

@@ -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;

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]}
         />
       );
     });

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 {

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)
   };
 };
 

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",

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,