joyent-portal/legacy/spikes/graphs-fe/epoch/client/epoch.js
Sérgio Ramos 8295bd6882 chore: initial lerna setup
this shall be a progressive process
2017-05-25 10:56:50 +01:00

213 lines
4.2 KiB
JavaScript

// injects into `window` (ikr)
require('epoch-charting');
const ReactRedux = require('react-redux');
const React = require('react');
const {
// Chart: {
// Bar
// }
Time: {
Bar
}
} = window.Epoch;
const {
connect
} = ReactRedux;
const style = {
height: '220px'
};
const EpochGraph = React.createClass({
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,
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() {
return (
<div
style={style}
className='epoch epoch-theme-default category20'
ref={this.ref('component')}
/>
);
}
});
const mapStateToProps = ({
data
}) => {
return {
data
};
};
module.exports = connect(mapStateToProps)(EpochGraph);