joyent-portal/spikes/graphs-matrix/epoch/client/epoch.js
2016-11-09 13:28:26 +00:00

63 lines
1.1 KiB
JavaScript

// injects into `window` (ikr)
require('epoch-charting');
const ReactRedux = require('react-redux');
const React = require('react');
const {
Time: {
Bar
}
} = window.Epoch;
const {
connect
} = ReactRedux;
const style = {
height: '220px'
};
module.exports = 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: []
}]
});
},
componentWillReceiveProps: function(nextProps) {
this.fromData(this.props.data).forEach((r) => this.chart.push([r]));
},
render: function() {
const className = (this.props.median > 50)
? 'red'
: 'blue';
return (
<div
style={style}
className={`epoch epoch-theme-default category20 ${className}`}
ref={this.ref('component')}
/>
);
}
});