@6thquake/react-material
Version:
React components that implement Google's Material Design.
420 lines (355 loc) • 14.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CrossTabulationUtilities = require("./CrossTabulationUtilities");
var _ = _interopRequireDefault(require(".."));
var _TableBody = _interopRequireDefault(require("../../TableBody"));
var _TableCell = _interopRequireDefault(require("../../TableCell"));
var _TableHead = _interopRequireDefault(require("../../TableHead"));
var _TableRow = _interopRequireDefault(require("../../TableRow"));
var _styles = require("../../styles");
/**
* @ignore - do not document.
*/
var styles = function styles(theme) {
return {
table: {
fontSize: '8pt',
textAlign: 'left',
borderCollapse: 'collapse',
marginTop: '3px',
marginLeft: '3px',
fontFamily: theme.typography.fontFamily
},
th: {
backgroundColor: '#ebf0f8',
border: '1px solid #c8d4e3',
fontSize: '8pt',
padding: '5px !important'
},
td: {
color: '#2a3f5f',
padding: '5px !important',
backgroundColor: '#fff',
border: '1px solid #c8d4e3',
verticalAlign: 'top',
textAlign: 'right'
},
tf: {
backgroundColor: '#ebf0f8',
border: '1px solid #c8d4e3',
fontSize: '8pt',
padding: '5px !important'
}
};
}; // helper function for setting row/col-span in CrossTabulationRenderer
var spanSize = function spanSize(arr, i, j) {
var x;
if (i !== 0) {
var asc;
var end;
var noDraw = true;
for (x = 0, end = j, asc = end >= 0; asc ? x <= end : x >= end; asc ? x++ : x--) {
if (arr[i - 1][x] !== arr[i][x]) {
noDraw = false;
}
}
if (noDraw) {
return -1;
}
}
var len = 0;
while (i + len < arr.length) {
var asc1 = void 0;
var end1 = void 0;
var stop = false;
for (x = 0, end1 = j, asc1 = end1 >= 0; asc1 ? x <= end1 : x >= end1; asc1 ? x++ : x--) {
if (arr[i][x] !== arr[i + len][x]) {
stop = true;
}
}
if (stop) {
break;
}
len++;
}
return len;
};
function redColorScaleGenerator(values) {
var min = Math.min.apply(Math, (0, _toConsumableArray2.default)(values));
var max = Math.max.apply(Math, (0, _toConsumableArray2.default)(values));
return function (x) {
// eslint-disable-next-line no-magic-numbers
var nonRed = 255 - Math.round(255 * (x - min) / (max - min));
return {
backgroundColor: "rgb(255,".concat(nonRed, ",").concat(nonRed, ")")
};
};
}
function makeRenderer() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var TableRenderer =
/*#__PURE__*/
function (_React$PureComponent) {
(0, _inherits2.default)(TableRenderer, _React$PureComponent);
function TableRenderer() {
(0, _classCallCheck2.default)(this, TableRenderer);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TableRenderer).apply(this, arguments));
}
(0, _createClass2.default)(TableRenderer, [{
key: "render",
value: function render() {
var _this = this;
var classes = this.props.classes;
var crossTableData = new _CrossTabulationUtilities.CrossTabulationData(this.props);
var colAttrs = crossTableData.props.cols;
var rowAttrs = crossTableData.props.rows;
var rowKeys = crossTableData.getRowKeys();
var colKeys = crossTableData.getColKeys();
var grandTotalAggregator = crossTableData.getAggregator([], []);
var valueCellColors = function valueCellColors() {};
var rowTotalColors = function rowTotalColors() {};
var colTotalColors = function colTotalColors() {};
if (opts.heatmapMode) {
var colorScaleGenerator = this.props.tableColorScaleGenerator;
var rowTotalValues = colKeys.map(function (x) {
return crossTableData.getAggregator([], x).value();
});
rowTotalColors = colorScaleGenerator(rowTotalValues);
var colTotalValues = rowKeys.map(function (x) {
return crossTableData.getAggregator(x, []).value();
});
colTotalColors = colorScaleGenerator(colTotalValues);
if (opts.heatmapMode === 'full') {
var allValues = [];
rowKeys.map(function (r) {
return colKeys.map(function (c) {
return allValues.push(crossTableData.getAggregator(r, c).value());
});
});
var colorScale = colorScaleGenerator(allValues);
valueCellColors = function valueCellColors(r, c, v) {
return colorScale(v);
};
} else if (opts.heatmapMode === 'row') {
var rowColorScales = {};
rowKeys.map(function (r) {
var rowValues = colKeys.map(function (x) {
return crossTableData.getAggregator(r, x).value();
});
rowColorScales[r] = colorScaleGenerator(rowValues);
});
valueCellColors = function valueCellColors(r, c, v) {
return rowColorScales[r](v);
};
} else if (opts.heatmapMode === 'col') {
var colColorScales = {};
colKeys.map(function (c) {
var colValues = rowKeys.map(function (x) {
return crossTableData.getAggregator(x, c).value();
});
colColorScales[c] = colorScaleGenerator(colValues);
});
valueCellColors = function valueCellColors(r, c, v) {
return colColorScales[c](v);
};
}
}
var getClickHandler = this.props.tableOptions && this.props.tableOptions.clickCallback ? function (value, rowValues, colValues) {
var filters = {};
for (var _i = 0, _Object$keys = Object.keys(colAttrs || {}); _i < _Object$keys.length; _i++) {
var i = _Object$keys[_i];
var attr = colAttrs[i];
if (colValues[i] !== null) {
filters[attr] = colValues[i];
}
}
for (var _i2 = 0, _Object$keys2 = Object.keys(rowAttrs || {}); _i2 < _Object$keys2.length; _i2++) {
var _i3 = _Object$keys2[_i2];
var _attr = rowAttrs[_i3];
if (rowValues[_i3] !== null) {
filters[_attr] = rowValues[_i3];
}
}
return function (e) {
return _this.props.tableOptions.clickCallback(e, value, filters, crossTableData);
};
} : null;
return _react.default.createElement(_.default, {
className: classes.table
}, _react.default.createElement(_TableHead.default, null, colAttrs.map(function (c, j) {
return _react.default.createElement(_TableRow.default, {
key: "colAttr".concat(j)
}, j === 0 && rowAttrs.length !== 0 && _react.default.createElement(_TableCell.default, {
className: classes.th,
colSpan: rowAttrs.length,
rowSpan: colAttrs.length
}), _react.default.createElement(_TableCell.default, {
className: classes.th
}, c), colKeys.map(function (colKey, i) {
var x = spanSize(colKeys, i, j);
if (x === -1) {
return null;
}
return _react.default.createElement(_TableCell.default, {
className: classes.th,
key: "colKey".concat(i),
colSpan: x,
rowSpan: j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1
}, colKey[j]);
}), j === 0 && _react.default.createElement(_TableCell.default, {
className: classes.th,
rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
}, "Totals"));
}), rowAttrs.length !== 0 && _react.default.createElement(_TableRow.default, null, rowAttrs.map(function (r, i) {
return _react.default.createElement(_TableCell.default, {
className: classes.th,
key: "rowAttr".concat(i)
}, r);
}), _react.default.createElement(_TableCell.default, {
className: classes.th
}, colAttrs.length === 0 ? 'Totals' : null))), _react.default.createElement(_TableBody.default, null, rowKeys.map(function (rowKey, i) {
var totalAggregator = crossTableData.getAggregator(rowKey, []);
return _react.default.createElement(_TableRow.default, {
key: "rowKeyRow".concat(i)
}, rowKey.map(function (txt, j) {
var x = spanSize(rowKeys, i, j);
if (x === -1) {
return null;
}
return _react.default.createElement(_TableCell.default, {
key: "rowKeyLabel".concat(i, "-").concat(j),
className: classes.td,
rowSpan: x,
colSpan: j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1
}, txt);
}), colKeys.map(function (colKey, j) {
var aggregator = crossTableData.getAggregator(rowKey, colKey);
return _react.default.createElement(_TableCell.default, {
className: classes.td,
key: "rm-ct-td-".concat(i, "-").concat(j),
onClick: getClickHandler && getClickHandler(aggregator.value(), rowKey, colKey),
style: valueCellColors(rowKey, colKey, aggregator.value())
}, aggregator.format(aggregator.value()));
}), _react.default.createElement(_TableCell.default, {
className: classes.td,
onClick: getClickHandler && getClickHandler(totalAggregator.value(), rowKey, [null]),
style: colTotalColors(totalAggregator.value())
}, totalAggregator.format(totalAggregator.value())));
}), _react.default.createElement(_TableRow.default, null, _react.default.createElement(_TableCell.default, {
className: classes.tf,
colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
}, "Totals"), colKeys.map(function (colKey, i) {
var totalAggregator = crossTableData.getAggregator([], colKey);
return _react.default.createElement(_TableCell.default, {
className: classes.tf,
key: "total".concat(i),
onClick: getClickHandler && getClickHandler(totalAggregator.value(), [null], colKey),
style: rowTotalColors(totalAggregator.value())
}, totalAggregator.format(totalAggregator.value()));
}), _react.default.createElement(_TableCell.default, {
onClick: getClickHandler && getClickHandler(grandTotalAggregator.value(), [null], [null]),
className: classes.tf
}, grandTotalAggregator.format(grandTotalAggregator.value())))));
}
}]);
return TableRenderer;
}(_react.default.PureComponent);
TableRenderer.defaultProps = (0, _extends2.default)({}, _CrossTabulationUtilities.CrossTabulationData.defaultProps, {
tableColorScaleGenerator: redColorScaleGenerator,
tableOptions: {}
});
TableRenderer.propTypes = (0, _extends2.default)({}, _CrossTabulationUtilities.CrossTabulationData.defaultProps, {
tableColorScaleGenerator: _propTypes.default.func,
tableOptions: _propTypes.default.object
});
return (0, _styles.withStyles)(styles, {
name: 'AwesomeTableRenderer'
})(TableRenderer);
}
/**
* @ignore - internal component.
*/
var TSVExportRenderer =
/*#__PURE__*/
function (_React$PureComponent2) {
(0, _inherits2.default)(TSVExportRenderer, _React$PureComponent2);
function TSVExportRenderer() {
(0, _classCallCheck2.default)(this, TSVExportRenderer);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TSVExportRenderer).apply(this, arguments));
}
(0, _createClass2.default)(TSVExportRenderer, [{
key: "render",
value: function render() {
var crossTableData = new _CrossTabulationUtilities.CrossTabulationData(this.props);
var rowKeys = crossTableData.getRowKeys();
var colKeys = crossTableData.getColKeys();
if (rowKeys.length === 0) {
rowKeys.push([]);
}
if (colKeys.length === 0) {
colKeys.push([]);
}
var headerRow = crossTableData.props.rows.map(function (r) {
return r;
});
if (colKeys.length === 1 && colKeys[0].length === 0) {
headerRow.push(this.props.aggregatorName);
} else {
colKeys.map(function (c) {
return headerRow.push(c.join('-'));
});
}
var result = rowKeys.map(function (r) {
var row = r.map(function (x) {
return x;
});
colKeys.map(function (c) {
var v = crossTableData.getAggregator(r, c).value();
row.push(v || '');
});
return row;
});
result.unshift(headerRow);
return _react.default.createElement("textarea", {
value: result.map(function (r) {
return r.join('\t');
}).join('\n'),
style: {
width: window.innerWidth / 2,
height: window.innerHeight / 2
},
readOnly: true
});
}
}]);
return TSVExportRenderer;
}(_react.default.PureComponent);
TSVExportRenderer.defaultProps = _CrossTabulationUtilities.CrossTabulationData.defaultProps;
TSVExportRenderer.propTypes = _CrossTabulationUtilities.CrossTabulationData.propTypes;
var _default = {
Table: makeRenderer(),
'Table Heatmap': makeRenderer({
heatmapMode: 'full'
}),
'Table Col Heatmap': makeRenderer({
heatmapMode: 'col'
}),
'Table Row Heatmap': makeRenderer({
heatmapMode: 'row'
}),
'Exportable TSV': TSVExportRenderer
};
exports.default = _default;