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

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>
  );
};