Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

working epoch

Browse Source
This commit is contained in:
Sérgio Ramos 2016-11-08 12:15:38 +00:00
parent 669c36ec67
commit 90d06aee93
3 changed files with 186 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
spikes/graphs-fe/epoch/client/epoch.js
View File

@ -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 (
// <Plotly
// key={i}
// layout={layout}
// data={[data]}
// />
// );
// });
//
// return (
// <div>
// {graphs}
// </div>
// )
return (
<div
style={style}
className='epoch epoch-theme-default category20'
ref={this.ref('component')}
/>
);
}
});

8
spikes/graphs-fe/epoch/readme.md
View File

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

3
spikes/graphs-fe/epoch/static/index.html
View File

@ -3,9 +3,10 @@
<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>
<script src='/static/bundle.js'></script>
</body>
</html>
</html>