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

90 lines
1.5 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);
}
}
};
2016-11-11 19:56:42 +02:00
const Row = connect(
2016-11-09 15:58:10 +02:00
mapStateToProps,
mapDispatchToProps,
)(React.createClass({
componentWillMount: function() {
this.props.subscribe();
},
componentWillUnmount: function() {
this.props.unsubscribe();
},
render: function() {
const {
2016-11-11 19:56:42 +02:00
data = {},
2016-11-09 17:00:30 +02:00
windowSize
2016-11-09 15:58:10 +02:00
} = this.props;
2016-11-11 19:56:42 +02:00
const charts = Object.keys(data).map((key, i, arr) => {
if (!Chart[key]) {
return null;
}
2016-11-09 15:58:10 +02:00
2016-11-11 19:56:42 +02:00
const chart = React.createElement(Chart[key], {
data: data[key],
windowSize
});
2016-11-09 15:58:10 +02:00
2016-11-11 19:56:42 +02:00
return (
<div key={key} className={`col-xs-${12/arr.length}`}>
{chart}
</div>
);
});
2016-11-09 15:58:10 +02:00
return (
2016-11-11 19:56:42 +02:00
<div className='row'>
{charts}
</div>
2016-11-09 15:58:10 +02:00
);
}
}));
module.exports = ({
2016-11-11 19:56:42 +02:00
rows
2016-11-09 15:58:10 +02:00
}) => {
2016-11-11 19:56:42 +02:00
const _rows = buildArray(rows).map((v, i) => {
2016-11-09 15:58:10 +02:00
return (
2016-11-11 19:56:42 +02:00
<Row id={i} key={i} />
2016-11-09 15:58:10 +02:00
);
});
return (
<div>
2016-11-11 19:56:42 +02:00
{_rows}
2016-11-09 15:58:10 +02:00
</div>
);
};