working epoch

spikes/graphs-fe/epoch/client/epoch.js

@@ -5,6 +5,9 @@ const ReactRedux = require('react-redux');
 const React = require('react');
 
 const {
+  // Chart: {
+  //   Bar
+  // }
   Time: {
     Bar
   }
@@ -14,56 +17,187 @@ const {
   connect
 } = ReactRedux;
 
+const style = {
+  height: '220px'
+};
+
 const EpochGraph = React.createClass({
-  componentWillMount: function() {
+  ref: function(name) {
-    const bar = new Bar({
+    this._refs = this._refs || {};
+
+    return (el) => {
+      this._refs[name] = el;
+    };
+  },
+  fromData: function(data) {
+    return (data || []).map((d) => {
+      return {
+        y: d.cpu,
+        time: d.when
+      };
+    });
+  },
+  componentDidMount: function() {
+    this.chart = new Bar({
       el: this._refs.component,
-      data
-    })
       type: 'time.bar',
-    data: barChartData
+      data: [{
+        label: 'A',
+        values: []
+      }]
+    });
+
+
+    // {
+    //   time: 1478605670,
+    //   y: 2
+    // }, {
+    //   time: 1478605671,
+    //   y: 1.9876883405951378
+    // }, {
+    //   time: 1478605672,
+    //   y: 1.9510565162951536
+    // }, {
+    //   time: 1478605673,
+    //   y: 1.8910065241883678
+    // }, {
+    //   time: 1478605674,
+    //   y: 1.8090169943749475
+    // }, {
+    //   time: 1478605675,
+    //   y: 1.7071067811865475
+    // }, {
+    //   time: 1478605676,
+    //   y: 1.5877852522924731
+    // }, {
+    //   time: 1478605677,
+    //   y: 1.4539904997395467
+    // }, {
+    //   time: 1478605678,
+    //   y: 1.3090169943749475
+    // }, {
+    //   time: 1478605679,
+    //   y: 1.156434465040231
+    // }, {
+    //   time: 1478605680,
+    //   y: 1
+    // }, {
+    //   time: 1478605681,
+    //   y: 0.8435655349597694
+    // }, {
+    //   time: 1478605682,
+    //   y: 0.6909830056250527
+    // }, {
+    //   time: 1478605683,
+    //   y: 0.5460095002604533
+    // }, {
+    //   time: 1478605684,
+    //   y: 0.412214747707527
+    // }, {
+    //   time: 1478605685,
+    //   y: 0.29289321881345254
+    // }, {
+    //   time: 1478605686,
+    //   y: 0.19098300562505266
+    // }, {
+    //   time: 1478605687,
+    //   y: 0.10899347581163221
+    // }, {
+    //   time: 1478605688,
+    //   y: 0.04894348370484647
+    // }, {
+    //   time: 1478605689,
+    //   y: 0.01231165940486234
+    // }, {
+    //   time: 1478605690,
+    //   y: 0
+    // }, {
+    //   time: 1478605691,
+    //   y: 0.01231165940486223
+    // }, {
+    //   time: 1478605692,
+    //   y: 0.04894348370484625
+    // }, {
+    //   time: 1478605693,
+    //   y: 0.1089934758116321
+    // }, {
+    //   time: 1478605694,
+    //   y: 0.19098300562505255
+    // }, {
+    //   time: 1478605695,
+    //   y: 0.2928932188134523
+    // }, {
+    //   time: 1478605696,
+    //   y: 0.41221474770752675
+    // }, {
+    //   time: 1478605697,
+    //   y: 0.546009500260453
+    // }, {
+    //   time: 1478605698,
+    //   y: 0.6909830056250524
+    // }, {
+    //   time: 1478605699,
+    //   y: 0.8435655349597689
+    // }, {
+    //   time: 1478605700,
+    //   y: 0.9999999999999998
+    // }, {
+    //   time: 1478605701,
+    //   y: 1.1564344650402307
+    // }, {
+    //   time: 1478605702,
+    //   y: 1.3090169943749472
+    // }, {
+    //   time: 1478605703,
+    //   y: 1.4539904997395467
+    // }, {
+    //   time: 1478605704,
+    //   y: 1.587785252292473
+    // }, {
+    //   time: 1478605705,
+    //   y: 1.7071067811865475
+    // }, {
+    //   time: 1478605706,
+    //   y: 1.8090169943749475
+    // }, {
+    //   time: 1478605707,
+    //   y: 1.8910065241883678
+    // }, {
+    //   time: 1478605708,
+    //   y: 1.9510565162951536
+    // }, {
+    //   time: 1478605709,
+    //   y: 1.9876883405951378
+    // }
+
+
+    // this.chart = new Bar({
+    //   el: this._refs.component,
+    //   data: [{
+    //     values: [{
+    //       x: 'A',
+    //       y: 20
+    //     }, {
+    //       x: 'B',
+    //       y: 39
+    //     }, {
+    //       x: 'C',
+    //       y: 8
+    //     }, ]
+    //   }]
+    // });
+  },
+  componentWillReceiveProps: function(nextProps) {
+    this.fromData(this.props.data).forEach((r) => this.chart.push([r]));
   },
   render: function() {
-    // const {
+    return (
-    //   data = []
+      <div
-    // } = this.props;
+        style={style}
-    //
+        className='epoch epoch-theme-default category20'
-    // const cpu = data.map((d) => Math.floor(d.cpu));
+        ref={this.ref('component')}
-    // const datatime = data.map((d, i) => i);
+      />
-    //
+    );
-    // const graphTypes = [{
-    //   type: 'scatter',
-    //   mode: 'lines+markers'
-    // }, {
-    //   type: 'bar'
-    // }];
-    //
-    // const graphs = graphTypes.map((graphType, i) => {
-    //   const data = {
-    //     type: graphType.type,
-    //     mode: graphType.mode,
-    //     x: datatime,
-    //     y: cpu
-    //   };
-    //
-    //   const layout = {
-    //     barmode: graphType.mode
-    //   }
-    //
-    //   return (
-    //     <Plotly
-    //       key={i}
-    //       layout={layout}
-    //       data={[data]}
-    //     />
-    //   );
-    // });
-    //
-    // return (
-    //   <div>
-    //     {graphs}
-    //   </div>
-    // )
   }
 });
 

spikes/graphs-fe/epoch/readme.md

@@ -1,6 +1,6 @@
-# Graphing Spikes
+# Epoch
 
-## Plotly
+![](http://g.recordit.co/4LVH7PlAJP.gif)
+
+## summary
 
-Adding plotly through npm and created a plotly graph components
-Running three different graph types of the same data on the same page

spikes/graphs-fe/epoch/static/index.html

@@ -3,6 +3,7 @@
   <head>
     <title>React Boilerplate</title>
     <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
   </head>
   <body>
     <div id='root'></div>