v-react-pivottable/TableRenderers.js

606 lines
24 KiB
JavaScript

'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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Utilities = require('./Utilities');
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; }
// helper function for setting row/col-span in pivotTableRenderer
var spanSize = function spanSize(arr, i, j) {
var x = void 0;
if (i !== 0) {
var asc = void 0,
end = void 0;
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,
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, values);
var max = Math.max.apply(Math, 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,' + nonRed + ',' + nonRed + ')' };
};
}
function makeRenderer() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var TableRenderer = function (_React$PureComponent) {
_inherits(TableRenderer, _React$PureComponent);
function TableRenderer() {
_classCallCheck(this, TableRenderer);
return _possibleConstructorReturn(this, (TableRenderer.__proto__ || Object.getPrototypeOf(TableRenderer)).apply(this, arguments));
}
_createClass(TableRenderer, [{
key: 'render',
value: function render() {
var _this2 = this;
var pivotData = new _Utilities.PivotData(this.props);
var colAttrs = pivotData.props.cols;
var rowAttrs = pivotData.props.rows;
var rowKeys = pivotData.getRowKeys();
var colKeys = pivotData.getColKeys();
var rowKeysSub = [];
if (this.props.showSubtotales === true && rowAttrs !== null && rowAttrs.length > 1) {
var beforeFirstKey = null;
for (var idx = 0; idx < rowKeys.length; idx++) {
var arrRowKeys = rowKeys[idx];
var emptyElements = arrRowKeys.length - 2;
var arrEmptyElements = [];
for (var idxEmpt = 0; idxEmpt < emptyElements; idxEmpt++) {
arrEmptyElements.push('');
}
var currentFirstKey = arrRowKeys[0];
if (beforeFirstKey === null) {
beforeFirstKey = currentFirstKey;
}
if (beforeFirstKey !== currentFirstKey) {
rowKeysSub.push([beforeFirstKey].concat(arrEmptyElements, ['[:sub-total:]']));
beforeFirstKey = currentFirstKey;
}
rowKeysSub.push(arrRowKeys);
if (idx === rowKeys.length - 1) {
rowKeysSub.push([currentFirstKey].concat(arrEmptyElements, ['[:sub-total:]']));
}
}
} else {
rowKeysSub = pivotData.getRowKeys();
}
var grandTotalAggregator = pivotData.getAggregator([], []);
var getStylesHeaders = function getStylesHeaders() {
return _this2.props.stylesHeaders;
};
var getHeaderClass = function getHeaderClass() {
return _this2.props.headerClass;
};
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 pivotData.getAggregator([], x).value();
});
rowTotalColors = colorScaleGenerator(rowTotalValues);
var colTotalValues = rowKeys.map(function (x) {
return pivotData.getAggregator(x, []).value();
});
colTotalColors = colorScaleGenerator(colTotalValues);
if (opts.heatmapMode === 'full') {
var allValues = [];
rowKeys.map(function (r) {
return colKeys.map(function (c) {
return allValues.push(pivotData.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 pivotData.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 pivotData.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 = {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = Object.keys(colAttrs || {})[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var i = _step.value;
var attr = colAttrs[i];
if (colValues[i] !== null) {
filters[attr] = colValues[i];
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = Object.keys(rowAttrs || {})[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _i = _step2.value;
var attr = rowAttrs[_i];
if (rowValues[_i] !== null) {
filters[attr] = rowValues[_i];
}
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
return function (e) {
return _this2.props.tableOptions.clickCallback(e, value, filters, pivotData);
};
} : null;
var isNotNullish = function isNotNullish(val) {
if (typeof val !== 'undefined' && val !== null) {
return true;
}
return false;
};
var getFinalFormat = function getFinalFormat(objCol) {
if (objCol.type !== 'number' || isNotNullish(objCol.format) && objCol.format.includes('Q')) {
return objCol.format;
}
if (objCol.format.includes('.')) {
if (isNotNullish(objCol.number_decimals)) {
var numberDecimals = parseInt(objCol.number_decimals);
var resultDecimals = '';
if (numberDecimals && !isNaN(numberDecimals) && numberDecimals > 0) {
var counter = 0;
resultDecimals = '.';
while (counter < numberDecimals) {
resultDecimals = resultDecimals + '0';
counter += 1;
}
}
return objCol.format.replace('.00', resultDecimals);
}
return objCol.format;
}
return objCol.format;
};
var getLocaleConfig = function getLocaleConfig(objCol) {
if (objCol.type !== 'number' || isNotNullish(objCol.format) && objCol.format.includes('Q')) {
return null;
}
return {
delimiters: {
thousands: isNotNullish(objCol.delimiter_thousands) ? objCol.delimiter_thousands : ',',
decimal: isNotNullish(objCol.delimiter_decimal) ? objCol.delimiter_decimal : '.'
},
abbreviations: {
thousand: 'k',
million: 'm',
billion: 'b',
trillion: 't'
},
currency: {
symbol: isNotNullish(objCol.currency_symbol) ? objCol.currency_symbol : '$'
}
};
};
var getFormatedValue = function getFormatedValue(aggregator) {
var valToFormat = aggregator.value();
var resultValue = typeof aggregator.format === 'function' ? aggregator.format(valToFormat) : valToFormat;
var keyColumnaCalculo = isNotNullish(_this2.props.vals) && _this2.props.vals.length ? _this2.props.vals[0] : null;
if (_this2.props.aggregatorName === 'Conteo') {
resultValue = isNotNullish(_this2.props.functions) ? _this2.props.functions.formatedValue(valToFormat, '0,0', 'number', false) : resultValue;
} else if (isNotNullish(keyColumnaCalculo) && isNotNullish(_this2.props.headersDefinitions)) {
var _definition = _this2.props.headersDefinitions[keyColumnaCalculo];
if (isNotNullish(_definition) && isNotNullish(_definition.value)) {
if (_definition.value.startsWith('count_') || _definition.value.startsWith('countd_')) {
resultValue = isNotNullish(_this2.props.functions) ? _this2.props.functions.formatedValue(valToFormat, '0,0', 'number', false) : resultValue;
} else if (isNotNullish(_definition.format) && _definition.format !== '') {
resultValue = isNotNullish(_this2.props.chartFunctions) ? _this2.props.chartFunctions.formatedValue(valToFormat, getFinalFormat(_definition), _definition.type, false, null, getLocaleConfig(_definition)) : resultValue;
}
}
}
return resultValue;
};
var getValueClass = function getValueClass(aggregator) {
var valToFormat = aggregator.value();
var keyColumnaCalculo = isNotNullish(_this2.props.vals) && _this2.props.vals.length ? _this2.props.vals[0] : null;
if (isNotNullish(keyColumnaCalculo) && isNotNullish(_this2.props.headersDefinitions)) {
var _definition = _this2.props.headersDefinitions[keyColumnaCalculo];
var objItem = {};
if (isNotNullish(_definition) && isNotNullish(_definition.value) && isNotNullish(_definition.classItem) && typeof _definition.classItem === 'function') {
objItem[_definition.value] = valToFormat;
objItem['rv_' + _definition.value] = valToFormat;
return _definition.classItem(objItem, true);
}
}
return '';
};
var getSubAggregator = function getSubAggregator(rowKey, colKey) {
if (rowKey.includes('[:sub-total:]')) {
var _resultAgg = {};
var _arrRowKeys = rowKeys.filter(function (itmRk) {
return itmRk[0] === rowKey[0];
});
var subTotalBruto = 0;
var subTotalCount = _arrRowKeys.length;
var subTotalMin = null;
var subTotalMax = null;
for (var _idx = 0; _idx < subTotalCount; _idx++) {
var _rowKey = _arrRowKeys[_idx];
var _agg = pivotData.getAggregator(_rowKey, colKey);
var _aggValue = _agg.value();
subTotalBruto = subTotalBruto + _aggValue;
if (_idx === 0) {
subTotalMin = _aggValue;
subTotalMax = _aggValue;
} else {
subTotalMin = _aggValue < subTotalMin ? _aggValue : subTotalMin;
subTotalMax = _aggValue > subTotalMax ? _aggValue : subTotalMax;
}
}
_resultAgg.sum = subTotalBruto;
_resultAgg.count = subTotalCount;
_resultAgg.format = function () {
return 'f';
};
_resultAgg.value = function () {
if (_this2.props.aggregatorName === 'Suma' || _this2.props.aggregatorName === 'Conteo') {
return subTotalBruto;
}
if (_this2.props.aggregatorName === 'Promedio') {
return subTotalBruto / subTotalCount;
}
if (_this2.props.aggregatorName === 'Mínimo') {
return subTotalMin;
}
if (_this2.props.aggregatorName === 'Máximo') {
return subTotalMax;
}
return 0;
};
return _resultAgg;
}
return pivotData.getAggregator(rowKey, colKey);
};
return _react2.default.createElement(
'table',
{ className: 'pvtTable' },
_react2.default.createElement(
'thead',
null,
colAttrs.map(function (c, j) {
return _react2.default.createElement(
'tr',
{ key: 'colAttr' + j },
j === 0 && rowAttrs.length !== 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length, className: getHeaderClass(), style: getStylesHeaders() }),
_react2.default.createElement(
'th',
{ className: getHeaderClass(), style: getStylesHeaders() },
c
),
colKeys.map(function (colKey, i) {
var x = spanSize(colKeys, i, j);
if (x === -1) {
return null;
}
return _react2.default.createElement(
'th',
{
className: getHeaderClass(),
key: 'colKey' + i,
colSpan: x,
style: getStylesHeaders(),
rowSpan: j === colAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1
},
colKey[j]
);
}),
j === 0 && _react2.default.createElement(
'th',
{
className: getHeaderClass(),
style: getStylesHeaders(),
rowSpan: colAttrs.length + (rowAttrs.length === 0 ? 0 : 1)
},
'Total'
)
);
}),
rowAttrs.length !== 0 && _react2.default.createElement(
'tr',
null,
rowAttrs.map(function (r, i) {
return _react2.default.createElement(
'th',
{ className: getHeaderClass(), key: 'rowAttr' + i, style: getStylesHeaders() },
r
);
}),
_react2.default.createElement(
'th',
{ className: getHeaderClass(), style: getStylesHeaders() },
colAttrs.length === 0 ? 'Total' : null
)
)
),
_react2.default.createElement(
'tbody',
null,
rowKeysSub.map(function (rowKey, i) {
var isSubTotal = rowKey.includes('[:sub-total:]');
var totalAggregator = getSubAggregator(rowKey, []);
return _react2.default.createElement(
'tr',
{ key: 'rowKeyRow' + i + ' ' + (isSubTotal ? ' bg-sky-50 ' : '') },
rowKey.map(function (txt, j) {
var x = spanSize(rowKeysSub, i, j);
if (x === -1) {
return null;
}
return _react2.default.createElement(
'th',
{
key: 'rowKeyLabel' + i + '-' + j,
className: getHeaderClass(),
style: getStylesHeaders(),
rowSpan: x,
colSpan: j === rowAttrs.length - 1 && colAttrs.length !== 0 ? 2 : 1
},
isSubTotal ? 'SubTotal' : txt
);
}),
colKeys.map(function (colKey, j) {
var aggregator = getSubAggregator(rowKey, colKey);
return _react2.default.createElement(
'td',
{
className: 'pvtVal ' + (isSubTotal ? '' : getValueClass(aggregator)) + ' ' + (isSubTotal ? 'pvtSubTotal' : ''),
key: 'pvtVal' + i + '-' + j,
onClick: getClickHandler && getClickHandler(aggregator.value(), rowKey, colKey),
style: valueCellColors(rowKey, colKey, aggregator.value())
},
getFormatedValue(aggregator)
);
}),
_react2.default.createElement(
'td',
{
className: ' pvtTotal ' + (isSubTotal ? 'pvtSubTotal' : '') + ' ',
onClick: getClickHandler && getClickHandler(totalAggregator.value(), rowKey, [null]),
style: colTotalColors(totalAggregator.value())
},
getFormatedValue(totalAggregator)
)
);
}),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'th',
{
className: getHeaderClass(),
style: getStylesHeaders(),
colSpan: rowAttrs.length + (colAttrs.length === 0 ? 0 : 1)
},
'Total'
),
colKeys.map(function (colKey, i) {
var totalAggregator = pivotData.getAggregator([], colKey);
return _react2.default.createElement(
'td',
{
className: 'pvtTotal',
key: 'total' + i,
onClick: getClickHandler && getClickHandler(totalAggregator.value(), [null], colKey),
style: rowTotalColors(totalAggregator.value())
},
getFormatedValue(totalAggregator)
);
}),
_react2.default.createElement(
'td',
{
onClick: getClickHandler && getClickHandler(grandTotalAggregator.value(), [null], [null]),
className: 'pvtGrandTotal'
},
getFormatedValue(grandTotalAggregator)
)
)
)
);
}
}]);
return TableRenderer;
}(_react2.default.PureComponent);
TableRenderer.defaultProps = _Utilities.PivotData.defaultProps;
TableRenderer.propTypes = _Utilities.PivotData.propTypes;
TableRenderer.defaultProps.tableColorScaleGenerator = redColorScaleGenerator;
TableRenderer.defaultProps.tableOptions = {};
TableRenderer.propTypes.tableColorScaleGenerator = _propTypes2.default.func;
TableRenderer.propTypes.tableOptions = _propTypes2.default.object;
return TableRenderer;
}
var TSVExportRenderer = function (_React$PureComponent2) {
_inherits(TSVExportRenderer, _React$PureComponent2);
function TSVExportRenderer() {
_classCallCheck(this, TSVExportRenderer);
return _possibleConstructorReturn(this, (TSVExportRenderer.__proto__ || Object.getPrototypeOf(TSVExportRenderer)).apply(this, arguments));
}
_createClass(TSVExportRenderer, [{
key: 'render',
value: function render() {
var pivotData = new _Utilities.PivotData(this.props);
var rowKeys = pivotData.getRowKeys();
var colKeys = pivotData.getColKeys();
if (rowKeys.length === 0) {
rowKeys.push([]);
}
if (colKeys.length === 0) {
colKeys.push([]);
}
var headerRow = pivotData.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 = pivotData.getAggregator(r, c).value();
row.push(v ? v : '');
});
return row;
});
result.unshift(headerRow);
return _react2.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;
}(_react2.default.PureComponent);
TSVExportRenderer.defaultProps = _Utilities.PivotData.defaultProps;
TSVExportRenderer.propTypes = _Utilities.PivotData.propTypes;
exports.default = {
Table: makeRenderer(),
'Table Heatmap': makeRenderer({ heatmapMode: 'full' }),
'Table Col Heatmap': makeRenderer({ heatmapMode: 'col' }),
'Table Row Heatmap': makeRenderer({ heatmapMode: 'row' }),
'Exportable TSV': TSVExportRenderer
};
module.exports = exports['default'];
//# sourceMappingURL=TableRenderers.js.map