adding in graphs and looping ability

spikes/graphs-fe/plotly/lib/data.js

@@ -1,18 +1,408 @@
-const data = [
+module.exports = {
-  {
+	"cols": [
-    type: 'scatter',  // all "scatter" attributes: https://plot.ly/javascript/reference/#scatter
+		"Datetime",
-    x: [1, 2, 3],     // more about "x": #scatter-x
+		"CPU"
-    y: [6, 2, 3],     // #scatter-y
+	],
-    marker: {         // marker is an object, valid marker keys: #scatter-marker
+	"data": [
-      color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
+		[
-    }
+			"13-04-17",
-  },
+			26
-  {
+		],
-    type: 'bar',      // all "bar" chart attributes: #bar
+		[
-    x: [1, 2, 3],     // more about "x": #bar-x
+			"17-06-16",
-    y: [6, 2, 3],     // #bar-y
+			10
-    name: 'bar chart example' // #bar-name
+		],
-  }
+		[
-];
+			"28-04-16",
-
+			63
-module.exports = data;
+		],
+		[
+			"01-01-16",
+			7
+		],
+		[
+			"03-03-17",
+			42
+		],
+		[
+			"09-03-16",
+			8
+		],
+		[
+			"31-03-17",
+			57
+		],
+		[
+			"19-03-16",
+			51
+		],
+		[
+			"25-07-17",
+			82
+		],
+		[
+			"18-03-16",
+			23
+		],
+		[
+			"17-06-17",
+			71
+		],
+		[
+			"15-06-17",
+			64
+		],
+		[
+			"25-09-16",
+			70
+		],
+		[
+			"11-06-16",
+			75
+		],
+		[
+			"12-05-16",
+			24
+		],
+		[
+			"09-05-17",
+			48
+		],
+		[
+			"04-01-17",
+			58
+		],
+		[
+			"15-04-17",
+			74
+		],
+		[
+			"31-12-15",
+			46
+		],
+		[
+			"20-06-16",
+			2
+		],
+		[
+			"25-01-16",
+			85
+		],
+		[
+			"25-12-16",
+			96
+		],
+		[
+			"29-11-15",
+			11
+		],
+		[
+			"22-10-17",
+			66
+		],
+		[
+			"19-05-17",
+			79
+		],
+		[
+			"16-03-16",
+			3
+		],
+		[
+			"24-01-17",
+			76
+		],
+		[
+			"19-05-16",
+			59
+		],
+		[
+			"05-03-17",
+			42
+		],
+		[
+			"08-10-16",
+			14
+		],
+		[
+			"04-05-17",
+			83
+		],
+		[
+			"15-06-16",
+			8
+		],
+		[
+			"30-12-16",
+			25
+		],
+		[
+			"10-12-15",
+			90
+		],
+		[
+			"09-12-16",
+			81
+		],
+		[
+			"23-04-16",
+			77
+		],
+		[
+			"14-04-16",
+			12
+		],
+		[
+			"20-05-16",
+			62
+		],
+		[
+			"24-07-16",
+			33
+		],
+		[
+			"21-06-17",
+			41
+		],
+		[
+			"08-04-17",
+			93
+		],
+		[
+			"25-07-16",
+			22
+		],
+		[
+			"24-03-17",
+			27
+		],
+		[
+			"21-03-16",
+			57
+		],
+		[
+			"25-08-16",
+			75
+		],
+		[
+			"06-07-17",
+			96
+		],
+		[
+			"30-11-16",
+			63
+		],
+		[
+			"27-10-16",
+			16
+		],
+		[
+			"27-03-16",
+			23
+		],
+		[
+			"13-09-17",
+			92
+		],
+		[
+			"25-10-17",
+			81
+		],
+		[
+			"07-11-16",
+			71
+		],
+		[
+			"14-10-17",
+			96
+		],
+		[
+			"27-10-17",
+			22
+		],
+		[
+			"13-03-17",
+			86
+		],
+		[
+			"03-11-16",
+			91
+		],
+		[
+			"11-09-16",
+			25
+		],
+		[
+			"14-01-17",
+			19
+		],
+		[
+			"04-06-16",
+			68
+		],
+		[
+			"30-07-17",
+			24
+		],
+		[
+			"15-04-17",
+			60
+		],
+		[
+			"20-03-17",
+			46
+		],
+		[
+			"07-02-17",
+			3
+		],
+		[
+			"02-11-17",
+			68
+		],
+		[
+			"14-08-16",
+			53
+		],
+		[
+			"06-09-17",
+			69
+		],
+		[
+			"12-09-17",
+			51
+		],
+		[
+			"01-05-16",
+			14
+		],
+		[
+			"26-03-17",
+			75
+		],
+		[
+			"05-11-15",
+			86
+		],
+		[
+			"01-02-17",
+			73
+		],
+		[
+			"20-03-17",
+			14
+		],
+		[
+			"20-03-16",
+			81
+		],
+		[
+			"01-06-16",
+			35
+		],
+		[
+			"28-11-16",
+			33
+		],
+		[
+			"20-08-17",
+			50
+		],
+		[
+			"18-05-17",
+			31
+		],
+		[
+			"15-06-16",
+			93
+		],
+		[
+			"17-10-17",
+			81
+		],
+		[
+			"26-08-16",
+			60
+		],
+		[
+			"11-05-17",
+			34
+		],
+		[
+			"11-04-16",
+			12
+		],
+		[
+			"21-07-16",
+			59
+		],
+		[
+			"11-07-17",
+			21
+		],
+		[
+			"20-08-17",
+			13
+		],
+		[
+			"07-05-16",
+			14
+		],
+		[
+			"03-11-16",
+			45
+		],
+		[
+			"23-02-16",
+			30
+		],
+		[
+			"22-03-16",
+			56
+		],
+		[
+			"15-11-15",
+			62
+		],
+		[
+			"26-10-16",
+			26
+		],
+		[
+			"10-12-16",
+			71
+		],
+		[
+			"21-06-17",
+			78
+		],
+		[
+			"25-01-16",
+			26
+		],
+		[
+			"04-06-17",
+			23
+		],
+		[
+			"29-10-17",
+			31
+		],
+		[
+			"17-03-17",
+			50
+		],
+		[
+			"01-02-16",
+			25
+		],
+		[
+			"23-06-16",
+			34
+		],
+		[
+			"18-04-17",
+			55
+		]
+	]
+}

spikes/graphs-fe/plotly/package.json

@@ -25,6 +25,7 @@
     "babel-preset-react-hmre": "^1.1.1",
     "babel-runtime": "^6.11.6",
     "css-loader": "^0.25.0",
+    "plotly.js": "^1.1.0",
     "postcss-loader": "^1.0.0",
     "postcss-modules-values": "^1.2.2",
     "postcss-nested": "^1.0.0",
@@ -47,6 +48,7 @@
     "eslint-plugin-promise": "^3.3.0",
     "eslint-plugin-react": "^6.4.1",
     "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4",
     "nyc": "^8.3.1",
     "react-addons-test-utils": "^15.3.2"
   },

spikes/graphs-fe/plotly/src/components/graph/index.js

@@ -0,0 +1,63 @@
+const React = require('react');
+const Plot = require('./plot');
+const localData = require('../../../lib/data');
+
+const Graph = React.createClass({
+
+  getInitialState: function() {
+    return this.fetchData(this.props)
+  },
+
+  fetchData: function(data = localData) {
+    let datetime = [];
+    let cpu = [];
+
+    localData.data.forEach( d => {
+      datetime.push(d[0]);
+      cpu.push(d[1]);
+    })
+
+    return {
+      data: localData,
+      cpu,
+      datetime
+    }
+  },
+
+  render: function() {
+
+    const graphTypes = [
+      {
+        type: 'scatter',
+        mode: 'markers'
+      },
+      {
+        type: 'scatter',
+        mode: 'line'
+      },
+      {
+        type: 'bar'
+      }
+    ]
+
+    const graphs = graphTypes.map( (graphType, i) => {
+      return (
+        <Plot
+          name={`plot-${i}`}
+          xData={this.state.datatime}
+          yData={this.state.cpu}
+          type={graphType.type}
+          mode={graphType.mode}
+        />
+      );
+    });
+
+    return (
+      <div>
+        {graphs}
+      </div>
+    )
+  }
+})
+
+module.exports = Graph;

spikes/graphs-fe/plotly/src/components/graph/plot.js

@@ -0,0 +1,51 @@
+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}></div>
+    );
+  }
+});
+
+module.exports = Plot;

spikes/graphs-fe/plotly/src/components/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   Button: require('./button'),
   Container: require('./container'),
-  Base: require('./base')
+  Base: require('./base'),
+  Graph: require('./graph'),
 };

spikes/graphs-fe/plotly/src/showcase/root.js

@@ -4,7 +4,8 @@ const ReactHotLoader = require('react-hot-loader');
 const {
   Button,
   Container,
-  Base
+  Base,
+  Graph
 } = require('../');
 
 const {
@@ -17,7 +18,7 @@ module.exports = () => {
       <Base>
         <Container>
           <p>Hello</p>
-          <Button>Hello</Button>
+          <Graph />
         </Container>
       </Base>
     </AppContainer>