105 lines
1.9 KiB
JavaScript
105 lines
1.9 KiB
JavaScript
const React = require('react');
|
|
const buildArray = require('build-array');
|
|
const ReactRedux = require('react-redux');
|
|
const Chart = require('./chart');
|
|
const actions = require('./actions');
|
|
|
|
const {
|
|
connect
|
|
} = ReactRedux;
|
|
|
|
const {
|
|
subscribe,
|
|
unsubscribe
|
|
} = actions;
|
|
|
|
const mapStateToProps = (state, ownProps) => {
|
|
return {
|
|
windowSize: state.windowSize,
|
|
data: state[ownProps.id]
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch, ownProps) => {
|
|
return {
|
|
subscribe: () => {
|
|
return dispatch(subscribe(ownProps.id));
|
|
},
|
|
unsubscribe: () => {
|
|
return unsubscribe(ownProps.id);
|
|
}
|
|
}
|
|
};
|
|
|
|
const Graph = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps,
|
|
)(React.createClass({
|
|
componentWillMount: function() {
|
|
this.props.subscribe();
|
|
},
|
|
componentWillUnmount: function() {
|
|
this.props.unsubscribe();
|
|
},
|
|
render: function() {
|
|
const {
|
|
data = [],
|
|
windowSize
|
|
} = this.props;
|
|
|
|
const _data = buildArray(windowSize).map((v, i) => {
|
|
return data[i] ? data[i] : {
|
|
cpu: 0,
|
|
when: new Date().getTime()
|
|
};
|
|
});
|
|
|
|
const median = data.reduce((sum, v) => (sum + v.cpu), 0) / data.length;
|
|
|
|
const bg = median > 50
|
|
? 'rgba(205, 54, 54, 0.3)'
|
|
: 'rgba(54, 74, 205, 0.3)';
|
|
|
|
const border = median > 50
|
|
? 'rgba(248, 51, 51, 0.5)'
|
|
: 'rgba(54, 73, 205, 0.5)';
|
|
|
|
return (
|
|
<Chart
|
|
data={_data}
|
|
bg={bg}
|
|
border={border}
|
|
median={median}
|
|
/>
|
|
);
|
|
}
|
|
}));
|
|
|
|
module.exports = ({
|
|
x,
|
|
y
|
|
}) => {
|
|
const m = buildArray(y).map((v, i) => {
|
|
const m = buildArray(x).map((v, y) => {
|
|
const id = `${i}${y}`;
|
|
return (
|
|
<div className={`col-xs-${12/x}`}>
|
|
<Graph key={id} id={id} />
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className='row'>
|
|
{m}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
{m}
|
|
</div>
|
|
);
|
|
};
|