joyent-portal/spikes/graphs-matrix/chartjs/client/matrix.js

105 lines
1.9 KiB
JavaScript
Raw Normal View History

2016-11-09 15:58:10 +02:00
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 {
2016-11-09 17:00:30 +02:00
windowSize: state.windowSize,
2016-11-09 15:58:10 +02:00
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 {
2016-11-09 17:00:30 +02:00
data = [],
windowSize
2016-11-09 15:58:10 +02:00
} = this.props;
2016-11-09 17:00:30 +02:00
const _data = buildArray(windowSize).map((v, i) => {
return data[i] ? data[i] : {
cpu: 0,
when: new Date().getTime()
};
});
2016-11-09 15:58:10 +02:00
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)';
2016-11-09 17:00:30 +02:00
const border = median > 50
? 'rgba(248, 51, 51, 0.5)'
: 'rgba(54, 73, 205, 0.5)';
2016-11-09 15:58:10 +02:00
return (
<Chart
2016-11-09 17:00:30 +02:00
data={_data}
2016-11-09 15:58:10 +02:00
bg={bg}
2016-11-09 17:00:30 +02:00
border={border}
2016-11-09 15:58:10 +02:00
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>
);
};