From 90d06aee9370f4c2de4aab82738d82b2b4b957bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Tue, 8 Nov 2016 12:15:38 +0000 Subject: [PATCH] working epoch --- spikes/graphs-fe/epoch/client/epoch.js | 226 ++++++++++++++++++----- spikes/graphs-fe/epoch/readme.md | 8 +- spikes/graphs-fe/epoch/static/index.html | 3 +- 3 files changed, 186 insertions(+), 51 deletions(-) diff --git a/spikes/graphs-fe/epoch/client/epoch.js b/spikes/graphs-fe/epoch/client/epoch.js index 23bac107..f17ba7b0 100644 --- a/spikes/graphs-fe/epoch/client/epoch.js +++ b/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() { - const bar = new Bar({ + ref: function(name) { + 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 + type: 'time.bar', + 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 { - // data = [] - // } = this.props; - // - // const cpu = data.map((d) => Math.floor(d.cpu)); - // 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 ( - // - // ); - // }); - // - // return ( - //
- // {graphs} - //
- // ) + return ( +
+ ); } }); diff --git a/spikes/graphs-fe/epoch/readme.md b/spikes/graphs-fe/epoch/readme.md index cd8d1d19..8b475ec5 100644 --- a/spikes/graphs-fe/epoch/readme.md +++ b/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 diff --git a/spikes/graphs-fe/epoch/static/index.html b/spikes/graphs-fe/epoch/static/index.html index c5a61365..86a0d914 100644 --- a/spikes/graphs-fe/epoch/static/index.html +++ b/spikes/graphs-fe/epoch/static/index.html @@ -3,9 +3,10 @@ React Boilerplate +
- + \ No newline at end of file