joyent-portal/legacy/spikes/graphs-matrix/chartjs/client/matrix.js
Sérgio Ramos 8295bd6882 chore: initial lerna setup
this shall be a progressive process
2017-05-25 10:56:50 +01:00

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