66 lines
1.3 KiB
JavaScript
66 lines
1.3 KiB
JavaScript
|
const buildArray = require('build-array');
|
||
|
|
const Chart = require('chart.js');
|
||
|
|
const ReactRedux = require('react-redux');
|
||
|
|
const React = require('react');
|
||
|
|
|
||
|
|
const {
|
||
|
|
connect
|
||
|
|
} = ReactRedux;
|
||
|
|
|
||
|
|
const Component = React.createClass({
|
||
|
|
ref: function(name) {
|
||
|
|
this._refs = this._refs || {};
|
||
|
|
|
||
|
|
return (el) => {
|
||
|
|
this._refs[name] = el;
|
||
|
|
};
|
||
|
|
},
|
||
|
|
fromData: function(data) {
|
||
|
|
return (data || []).map((d) => {
|
||
|
|
return d.cpu;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
componentDidMount: function() {
|
||
|
|
const bars = this.fromData(this.props.data);
|
||
|
|
|
||
|
|
this._chart = new Chart(this._refs.component, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: buildArray(bars.length).map((v, i) => ''),
|
||
|
|
datasets: [{
|
||
|
|
data: bars
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
componentWillReceiveProps: function(nextProps) {
|
||
|
|
const bars = this.fromData(this.props.data);
|
||
|
|
|
||
|
|
this._chart.data.labels = buildArray(bars.length).map((v, i) => '');
|
||
|
|
this._chart.data.datasets[0].data = bars;
|
||
|
|
|
||
|
|
this._chart.update(0);
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
return (
|
||
|
|
<canvas
|
||
|
|
ref={this.ref('component')}
|
||
|
|
width='400'
|
||
|
|
height='400'
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapStateToProps = ({
|
||
|
|
data
|
||
|
|
}) => {
|
||
|
|
return {
|
||
|
|
data
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
module.exports = connect(
|
||
|
|
mapStateToProps
|
||
|
|
)(Component);
|