react-matrix-viz/lib/Matrix.js

A react component for creating quick matrix/grid visualizations.

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _lodash = require('lodash');

var _Styles = require('./Styles.js');

var _Util = require('./Util.js');

var _Column = require('./Column.js');

var _Column2 = _interopRequireDefault(_Column);

var _Cell = require('./Cell.js');

var _Cell2 = _interopRequireDefault(_Cell);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Matrix = function (_Component) {
	_inherits(Matrix, _Component);

	function Matrix() {
		_classCallCheck(this, Matrix);

		return _possibleConstructorReturn(this, Object.getPrototypeOf(Matrix).apply(this, arguments));
	}

	_createClass(Matrix, [{
		key: 'getCellStyle',
		value: function getCellStyle(data) {
			var _props = this.props;
			var setStyle = _props.setStyle;
			var setHoverStyle = _props.setHoverStyle;

			var style = (0, _lodash.extend)({}, _Styles.cellStyle);
			if (setStyle) style = (0, _lodash.extend)(style, setStyle(data));
			if (setHoverStyle) style = (0, _lodash.extend)(style, setHoverStyle(data));
			return style;
		}
	}, {
		key: 'generateCells',
		value: function generateCells(data) {
			var _this2 = this;

			var _props2 = this.props;
			var cellData = _props2.cellData;
			var cellClass = _props2.cellClass;
			var onClick = _props2.onClick;
			var onMouseOver = _props2.onMouseOver;
			var onMouseOut = _props2.onMouseOut;

			return data.map(function (col, i) {
				return col.map(function (cell, j) {
					var curData = cellData(cell, i, j); // Using i and j to denote col and row respectively
					var style = _this2.getCellStyle(curData);
					return _react2.default.createElement(_Cell2.default, {
						key: 'col' + i + 'row' + j,
						className: cellClass,
						data: curData,
						style: style,
						onClick: onClick,
						onMouseOver: onMouseOver,
						onMouseOut: onMouseOut });
				});
			});
		}
	}, {
		key: 'render',
		value: function render() {
			var _props3 = this.props;
			var columnClass = _props3.columnClass;
			var matrixClass = _props3.matrixClass;
			var data = _props3.data;
			var random = _props3.random;
			// If data exists, use it. Otherwise, use our random prop.

			var cells = this.generateCells(data || (0, _Util.randomData)(random[0], random[1]));
			return _react2.default.createElement(
				'div',
				{ className: matrixClass, style: _Styles.matrixStyle },
				cells.map(function (col, i) {
					return _react2.default.createElement(_Column2.default, { key: 'col' + i, className: columnClass, cells: col });
				})
			);
		}
	}]);

	return Matrix;
}(_react.Component);

exports.default = Matrix;


Matrix.propTypes = {
	data: _react.PropTypes.array, // A 2d array of values or objects
	cellData: _react.PropTypes.func, // A function that determines what the cell's value will be
	setStyle: _react.PropTypes.func, // A function that determines the cell's style
	setHoverStyle: _react.PropTypes.func, // A function that determines the cell's style
	onClick: _react.PropTypes.func, // An event handler, triggered when cell is clicked
	onMouseOver: _react.PropTypes.func, // An event handler, triggered when mouse enters cell
	onMouseOut: _react.PropTypes.func, // An event handler, triggered when mouse exits cell,
	random: _react.PropTypes.array, // [10, 5] would result in a 10 column, 5 row grid with random values between 1-100
	cellClass: _react.PropTypes.string,
	columnClass: _react.PropTypes.string,
	matrixClass: _react.PropTypes.string
};

Matrix.defaultProps = {
	cellData: function cellData(cell, col, row) {
		return cell;
	}, // Returns the value at data[col][row]
	cellClass: 'rm-cell', // Default cell class name to 'rm-cell'
	columnClass: 'rm-column', // Default column class name to 'rm-column'
	matrixClass: 'rm-matrix' };