dtable-statistic 4.0.2-test-2

package/es/stat-view/pivot-table/one-dimension-table-with-numeric-columns.js

@@ -0,0 +1,164 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { PureComponent } from 'react';
+import intl from 'react-intl-universal';
+import { TableUtils } from 'dtable-store';
+import { isMobile } from '../../utils';
+import { EMPTY_NAME, TITLE_TOTAL } from '../../constants';
+import styles from './statistic-pivot-table.module.css';
+var OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent) {
+  _inherits(OneDimensionTableWithNumericColumns, _PureComponent);
+  var _super = _createSuper(OneDimensionTableWithNumericColumns);
+  function OneDimensionTableWithNumericColumns() {
+    var _this;
+    _classCallCheck(this, OneDimensionTableWithNumericColumns);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.toggleRecords = function (cell) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref$isColumn = _ref.isColumn,
+        isColumn = _ref$isColumn === void 0 ? false : _ref$isColumn,
+        _ref$isCurrentView = _ref.isCurrentView,
+        isCurrentView = _ref$isCurrentView === void 0 ? false : _ref$isCurrentView;
+      if (isMobile) return;
+      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
+        isColumn: isColumn,
+        isCurrentView: isCurrentView
+      });
+    };
+    _this.renderHeader = function (_ref2) {
+      var table = _ref2.table,
+        groupbyColumn = _ref2.groupbyColumn;
+      var _this$props = _this.props,
+        pivotResult = _this$props.pivotResult,
+        statItem = _this$props.statItem;
+      var column_groupby_column_key = statItem.column_groupby_column_key;
+      var statisticTableColumns = table.columns;
+      var columnGroupbyColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+      var groupName = groupbyColumn.name;
+      var _ref3 = columnGroupbyColumn || {},
+        rowGroupName = _ref3.name;
+      var pivot_columns = pivotResult.pivot_columns;
+      return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map(function (item, index) {
+        var key = item.key;
+        var column = statisticTableColumns.find(function (column) {
+          return column.key === key;
+        });
+        return /*#__PURE__*/React.createElement("th", {
+          className: 'pivot-table-header',
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/React.createElement("div", null, column.name));
+      })));
+    };
+    _this.renderRows = function (_ref4) {
+      var table = _ref4.table;
+      var _this$props2 = _this.props,
+        pivotResult = _this$props2.pivotResult,
+        statItem = _this$props2.statItem,
+        getSummaryValueDisplayString = _this$props2.getSummaryValueDisplayString;
+      var statisticTableColumns = table.columns;
+      var _statItem$display_tot = statItem.display_total,
+        display_total = _statItem$display_tot === void 0 ? true : _statItem$display_tot;
+      var pivot_rows = pivotResult.pivot_rows,
+        pivot_columns = pivotResult.pivot_columns,
+        pivot_columns_total = pivotResult.pivot_columns_total;
+      var pivotColumnCells = [];
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map(function (rowItem, rowIdx) {
+        var name = rowItem.name,
+          total = rowItem.total,
+          rows = rowItem.rows;
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: 'pivot-row-name'
+        }, /*#__PURE__*/React.createElement("div", null, !name || name === 0 ? intl.get(EMPTY_NAME) : name)), Array.isArray(pivot_columns) && pivot_columns.map(function (columnMap, cellIdx) {
+          var key = columnMap.key,
+            method = columnMap.method;
+          if (Array.isArray(rows) && rows.length > 0) {
+            if (pivotColumnCells[cellIdx]) {
+              var _pivotColumnCells$cel;
+              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(rows));
+            } else {
+              pivotColumnCells[cellIdx] = _toConsumableArray(rows);
+            }
+          }
+          var column = statisticTableColumns.find(function (item) {
+            return item.key === key;
+          });
+          var displayValue = getSummaryValueDisplayString(column, total[key + method], method);
+          var isValidDisplayValue = _this.props.isValidValue(displayValue);
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(styles['pivot-cell'], " ").concat(isValidDisplayValue ? '' : styles['pivot-empty-cell']),
+            key: "table-cell-".concat(cellIdx),
+            onClick: function onClick() {
+              return _this.toggleRecords(rowItem);
+            },
+            title: isValidDisplayValue ? displayValue : ''
+          }, isValidDisplayValue ? /*#__PURE__*/React.createElement("div", null, displayValue) : /*#__PURE__*/React.createElement("i", null));
+        }));
+      }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: 'pivot-column-total'
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map(function (c, index) {
+        var pivotColumnCell = pivotColumnCells[index];
+        var pivotColumnTotal = pivot_columns_total[c.key + c.method];
+        var column = statisticTableColumns.find(function (column) {
+          return column.key === c.key;
+        });
+        var displayValue = getSummaryValueDisplayString(column, pivotColumnTotal, c.method);
+        var isValidDisplayValue = _this.props.isValidValue(displayValue);
+        return /*#__PURE__*/React.createElement("td", {
+          className: "".concat(styles['pivot-cell'], " ").concat(isValidDisplayValue ? '' : styles['pivot-empty-cell']),
+          key: "total-cell-".concat(index),
+          title: isValidDisplayValue ? displayValue : '',
+          onClick: function onClick() {
+            return _this.toggleRecords({
+              name: c.key,
+              rows: pivotColumnCell
+            }, {
+              isCurrentView: true
+            });
+          }
+        }, isValidDisplayValue ? /*#__PURE__*/React.createElement("div", null, displayValue) : /*#__PURE__*/React.createElement("i", null));
+      })));
+    };
+    return _this;
+  }
+  _createClass(OneDimensionTableWithNumericColumns, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        isPreview = _this$props3.isPreview,
+        textColor = _this$props3.textColor,
+        getTableById = _this$props3.getTableById;
+      var table_id = statItem.table_id,
+        groupby_column_key = statItem.groupby_column_key;
+      var table = getTableById(table_id);
+      var groupbyColumn = TableUtils.getTableColumnByKey(table, groupby_column_key);
+      if (!groupbyColumn) return '';
+      return /*#__PURE__*/React.createElement("table", {
+        style: {
+          color: textColor
+        },
+        className: "".concat(isPreview ? styles['preview-pivot-table'] : styles['large-pivot-table'], " ").concat(styles['pivot-table'])
+      }, this.renderHeader({
+        table: table,
+        groupbyColumn: groupbyColumn
+      }), this.renderRows({
+        table: table
+      }));
+    }
+  }]);
+  return OneDimensionTableWithNumericColumns;
+}(PureComponent);
+export default OneDimensionTableWithNumericColumns;

package/es/stat-view/pivot-table/statistic-pivot-table.module.css

@@ -0,0 +1,132 @@
+.pivot-table-container {
+  height: 100%;
+  width: 100%;
+  padding: 15px 20px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.pivot-table {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+  table-layout: fixed;
+}
+
+.pivot-table tr {
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+}
+
+.pivot-table thead {
+  border-top: 1px solid #ccc;
+  font-size: 13px;
+}
+
+.large-pivot-table td {
+  padding: 10px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  overflow: hidden;
+  min-width: 100px;
+  width: 150px;
+  max-width: 150px;
+  font-weight: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.large-pivot-table th {
+  padding: 10px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  overflow: hidden;
+  min-width: 100px;
+  width: 150px;
+  max-width: 150px;
+  font-weight: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-pivot-table td,
+.preview-pivot-table th {
+  padding: 5px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  overflow: hidden;
+  font-weight: normal;
+}
+
+.pivot-table td>div, .pivot-table th>div {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 13px;
+  max-width: 100%;
+}
+
+.pivot-table .column-title {
+  caption-side: top;
+  text-align: center;
+  color: inherit;
+  padding: 0;
+}
+
+.pivot-table .row-title {
+  position: absolute;
+  padding: 0;
+  transform: rotate(-90deg);
+  width: 100px;
+  left: -60px;
+  top: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: inherit;
+}
+
+.pivot-table .pivot-empty-cell i {
+  display: inline-block;
+  height: 6px;
+  width: 16px;
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.pivot-summary-multiple-columns-th {
+  width: 100%;
+  min-width: 100%;
+  border: 0px;
+  padding: 0px !important;
+}
+
+.pivot-summary-multiple-columns-td {
+  padding: 0px !important
+}
+
+.pivot-summary-multiple-columns-div {
+  display: flex;
+}
+
+.pivot-summary-multiple-columns-div div {
+  padding: 10px;
+  flex: 1;
+}
+
+.pivot-summary-multiple-columns-div :not(:last-child) {
+  border-right: 1px solid #ccc;
+}
+
+.multiple-pivot-empty-cell {
+  display: inline-block;
+  height: 6px;
+  width: 16px;
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.pivot-cell:hover {
+  cursor: pointer;
+}

package/es/stat-view/pivot-table/two-dimension-table.js

@@ -0,0 +1,344 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { PureComponent } from 'react';
+import intl from 'react-intl-universal';
+import { CellType, isNumber, TableUtils, Views } from 'dtable-store';
+import { isMobile } from '../../utils';
+import { EMPTY_NAME, TITLE_TOTAL } from '../../constants';
+import styles from './statistic-pivot-table.module.css';
+var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
+  _inherits(TwoDimensionTable, _PureComponent);
+  var _super = _createSuper(TwoDimensionTable);
+  function TwoDimensionTable() {
+    var _this;
+    _classCallCheck(this, TwoDimensionTable);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.toggleRecords = function (cell) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref$isColumn = _ref.isColumn,
+        isColumn = _ref$isColumn === void 0 ? false : _ref$isColumn,
+        _ref$isRow = _ref.isRow,
+        isRow = _ref$isRow === void 0 ? false : _ref$isRow;
+      if (isMobile) return;
+      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
+        isColumn: isColumn,
+        isRow: isRow
+      });
+    };
+    _this.onClickTotals = function (recordsList, _ref2) {
+      var isCurrentView = _ref2.isCurrentView;
+      if (isMobile) return;
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        statItem = _this$props.statItem;
+      var table_id = statItem.table_id,
+        view_id = statItem.view_id;
+      var table = getTableById(table_id);
+      var view = Views.getViewById(table.views, view_id);
+      var rows = [];
+      if (!Views.isArchiveView(view)) {
+        rows = recordsList.flat();
+      }
+      _this.props.toggleStatisticRecordsDialog({
+        rows: rows
+      }, statItem, {
+        isCurrentView: isCurrentView
+      });
+    };
+    _this.getNumberValue = function (val) {
+      if (isNumber(val)) {
+        return val;
+      }
+      return 0;
+    };
+    _this.getCells = function (row, summaryColumn) {
+      var pivotResult = _this.props.pivotResult;
+      var pivot_columns = pivotResult.pivot_columns,
+        pivot_summary_multiple_columns = pivotResult.pivot_summary_multiple_columns,
+        formulaRows = pivotResult.formulaRows,
+        _pivotResult$isSqlQue = pivotResult.isSqlQuery,
+        isSqlQuery = _pivotResult$isSqlQue === void 0 ? false : _pivotResult$isSqlQue;
+      var cells = row.cells;
+      if (!Array.isArray(pivot_columns)) {
+        return [];
+      }
+      return pivot_columns.map(function (item) {
+        var cell = cells[item.key];
+        var rowData = cell && cell.rows;
+        var summary_multiple_columns = pivot_summary_multiple_columns.map(function (columns) {
+          if (Array.isArray(rowData)) {
+            var sum = 0;
+            rowData.forEach(function (rowDataItem) {
+              if (!isSqlQuery) {
+                if (columns.type === CellType.FORMULA) {
+                  var formulaRow = formulaRows[rowDataItem._id];
+                  sum += _this.getNumberValue(formulaRow[columns.key]);
+                  return;
+                }
+                sum += _this.getNumberValue(rowDataItem[columns.key]);
+                return;
+              }
+              sum += _this.getNumberValue(rowDataItem[columns.sqlKey]);
+            });
+            return sum;
+          }
+          return 0;
+        });
+        return _objectSpread(_objectSpread({}, cells[item.key]), {}, {
+          group_original_name: item.original_name,
+          group_name: item.key,
+          column: summaryColumn,
+          summary_multiple_columns: summary_multiple_columns
+        });
+      });
+    };
+    _this.renderHeader = function (_ref3) {
+      var groupbyColumn = _ref3.groupbyColumn,
+        columnGroupbyColumn = _ref3.columnGroupbyColumn;
+      var _this$props2 = _this.props,
+        pivotResult = _this$props2.pivotResult,
+        statItem = _this$props2.statItem;
+      var column_groupby_column_key = statItem.column_groupby_column_key,
+        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
+        _statItem$display_tot = statItem.display_total,
+        display_total = _statItem$display_tot === void 0 ? true : _statItem$display_tot;
+      var groupName = groupbyColumn.name;
+      var _ref4 = columnGroupbyColumn || {},
+        rowGroupName = _ref4.name;
+      var pivot_columns = pivotResult.pivot_columns,
+        pivot_summary_multiple_columns = pivotResult.pivot_summary_multiple_columns;
+      var isMultipleColumnHeader = column_groupby_multiple_numeric_column && column_groupby_column_key && pivot_summary_multiple_columns.length !== 0;
+      return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map(function (item, index) {
+        var key = item.key;
+        return /*#__PURE__*/React.createElement("th", {
+          className: 'pivot-table-header',
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/React.createElement("div", null, !key || key === 0 ? intl.get(EMPTY_NAME) : key));
+      }), display_total && /*#__PURE__*/React.createElement("th", {
+        className: 'pivot-table-header'
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL)))), isMultipleColumnHeader && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }), Array.isArray(pivot_columns) && pivot_columns.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("th", {
+          className: "pivot-table-header ".concat(styles['pivot-summary-multiple-columns-th']),
+          key: "pivot-column-".concat(index)
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles['pivot-summary-multiple-columns-div']
+        }, pivot_summary_multiple_columns.map(function (item, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: index
+          }, item.column_name);
+        })));
+      }), display_total && /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header ".concat(styles['pivot-empty-cell'])
+      })));
+    };
+    _this.renderRows = function (_ref5) {
+      var table = _ref5.table;
+      var _this$props3 = _this.props,
+        pivotResult = _this$props3.pivotResult,
+        statItem = _this$props3.statItem,
+        getSummaryValueDisplayString = _this$props3.getSummaryValueDisplayString;
+      var summary_column_key = statItem.summary_column_key,
+        summary_method = statItem.summary_method,
+        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
+        _statItem$display_tot2 = statItem.display_total,
+        display_total = _statItem$display_tot2 === void 0 ? true : _statItem$display_tot2;
+      var pivot_rows = pivotResult.pivot_rows,
+        pivot_columns = pivotResult.pivot_columns,
+        pivot_columns_total = pivotResult.pivot_columns_total,
+        pivot_table_total = pivotResult.pivot_table_total,
+        pivot_summary_multiple_columns = pivotResult.pivot_summary_multiple_columns,
+        formulaRows = pivotResult.formulaRows,
+        _pivotResult$isSqlQue2 = pivotResult.isSqlQuery,
+        isSqlQuery = _pivotResult$isSqlQue2 === void 0 ? false : _pivotResult$isSqlQue2;
+      var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      var allTotalDisplay = column_groupby_multiple_numeric_column ? 0 : getSummaryValueDisplayString(summaryColumn, pivot_table_total, summary_method);
+      var isValidAllTotalDisplay = _this.props.isValidValue(allTotalDisplay);
+      var pivotColumnCells = [];
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map(function (rowItem, rowIdx) {
+        var name = rowItem.name,
+          total = rowItem.total;
+        var cells = _this.getCells(rowItem, summaryColumn);
+        var pivotRowCells = [];
+        if (!Array.isArray(pivot_columns)) {
+          pivotColumnCells[rowIdx] = rowItem.rows || [];
+        }
+        var summaryDisplayValue = getSummaryValueDisplayString(summaryColumn, total, summary_method);
+        if (column_groupby_multiple_numeric_column) {
+          summaryDisplayValue = 0;
+        }
+        var isValidSummaryDisplayValue = _this.props.isValidValue(summaryDisplayValue);
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: 'pivot-row-name'
+        }, /*#__PURE__*/React.createElement("div", null, !name || name === 0 ? intl.get(EMPTY_NAME) : name)), Array.isArray(cells) && cells.map(function (c, cellIdx) {
+          if (c && Array.isArray(c.rows) && c.rows.length > 0) {
+            pivotRowCells.push.apply(pivotRowCells, _toConsumableArray(c.rows));
+            if (pivotColumnCells[cellIdx]) {
+              var _pivotColumnCells$cel;
+              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(c.rows));
+            } else {
+              pivotColumnCells[cellIdx] = _toConsumableArray(c.rows);
+            }
+          }
+          if (column_groupby_multiple_numeric_column) {
+            var summary_multiple_columns = c.summary_multiple_columns;
+            summary_multiple_columns.forEach(function (item) {
+              summaryDisplayValue += _this.getNumberValue(item);
+            });
+            return /*#__PURE__*/React.createElement("td", {
+              className: "".concat(styles['pivot-cell'], " ").concat(styles['pivot-summary-multiple-columns-td']),
+              key: "table-cell-".concat(cellIdx),
+              onClick: function onClick() {
+                return _this.toggleRecords({
+                  rows: c.rows,
+                  name: name,
+                  rowItem: rowItem,
+                  group_name: c.group_name,
+                  group_original_name: c.group_original_name,
+                  original_name: rowItem.original_name
+                });
+              }
+            }, /*#__PURE__*/React.createElement("div", {
+              className: styles['pivot-summary-multiple-columns-div']
+            }, summary_multiple_columns.map(function (label, index) {
+              return /*#__PURE__*/React.createElement("div", {
+                key: index
+              }, label === 0 ? /*#__PURE__*/React.createElement("i", {
+                className: styles['multiple-pivot-empty-cell']
+              }) : label);
+            })), /*#__PURE__*/React.createElement("span", null));
+          }
+          var displayValue = getSummaryValueDisplayString(c.column, c.total, summary_method);
+          var isValidDisplayValue = _this.props.isValidValue(displayValue);
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(styles['pivot-cell'], " ").concat(isValidDisplayValue ? '' : styles['pivot-empty-cell']),
+            key: "table-cell-".concat(cellIdx),
+            title: isValidDisplayValue ? displayValue : '',
+            onClick: function onClick() {
+              return _this.toggleRecords({
+                rows: c.rows,
+                name: name,
+                rowItem: rowItem,
+                group_name: c.group_name,
+                group_original_name: c.group_original_name,
+                original_name: rowItem.original_name
+              });
+            }
+          }, isValidDisplayValue ? /*#__PURE__*/React.createElement("div", null, displayValue) : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", null));
+        }), display_total && /*#__PURE__*/React.createElement("td", {
+          className: "".concat(styles['pivot-cell'], " ").concat(isValidSummaryDisplayValue ? '' : styles['pivot-empty-cell']),
+          title: isValidSummaryDisplayValue ? summaryDisplayValue : '',
+          onClick: function onClick() {
+            return _this.toggleRecords({
+              rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
+              name: name,
+              rowItem: rowItem,
+              original_name: rowItem.original_name
+            }, {
+              isRow: true
+            });
+          }
+        }, isValidSummaryDisplayValue ? /*#__PURE__*/React.createElement("div", null, summaryDisplayValue) : /*#__PURE__*/React.createElement("i", null)));
+      }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: 'pivot-column-total'
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map(function (c, index) {
+        var pivotColumnCell = pivotColumnCells[index] || [];
+        var pivotColumnTotal = pivot_columns_total[c.key];
+        var totalDisplayValue = getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summary_method);
+        var isValidTotalDisplayValue = _this.props.isValidValue(totalDisplayValue);
+        if (column_groupby_multiple_numeric_column) {
+          var total = 0;
+          pivotColumnCell.forEach(function (item) {
+            pivot_summary_multiple_columns.forEach(function (jtem) {
+              var type = jtem.type,
+                key = jtem.key,
+                sqlKey = jtem.sqlKey;
+              if (!isSqlQuery) {
+                if (type === CellType.FORMULA) {
+                  var formulaRow = formulaRows[item._id];
+                  total += _this.getNumberValue(formulaRow[key]);
+                  return;
+                }
+                total += _this.getNumberValue(item[key]);
+                return;
+              }
+              total += _this.getNumberValue(item[sqlKey]);
+            });
+          });
+          totalDisplayValue = total;
+          allTotalDisplay += total;
+        }
+        return /*#__PURE__*/React.createElement("td", {
+          className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
+          key: "total-cell-".concat(index),
+          title: isValidTotalDisplayValue ? totalDisplayValue : '',
+          onClick: function onClick() {
+            return _this.toggleRecords({
+              group_name: c.key,
+              rows: pivotColumnCell,
+              group_original_name: c.original_name
+            }, {
+              isColumn: true
+            });
+          }
+        }, isValidTotalDisplayValue ? /*#__PURE__*/React.createElement("div", null, totalDisplayValue) : /*#__PURE__*/React.createElement("i", null));
+      }), /*#__PURE__*/React.createElement("td", {
+        className: "".concat(styles['pivot-cell'], " pivot-table-total ").concat(isValidAllTotalDisplay ? '' : styles['pivot-empty-cell']),
+        onClick: function onClick() {
+          return _this.onClickTotals(pivotColumnCells, {
+            isCurrentView: true
+          });
+        },
+        title: isValidAllTotalDisplay ? allTotalDisplay : ''
+      }, isValidAllTotalDisplay ? /*#__PURE__*/React.createElement("div", null, allTotalDisplay) : /*#__PURE__*/React.createElement("i", null))));
+    };
+    return _this;
+  }
+  _createClass(TwoDimensionTable, [{
+    key: "render",
+    value: function render() {
+      var _this$props4 = this.props,
+        pivotResult = _this$props4.pivotResult,
+        statItem = _this$props4.statItem,
+        isPreview = _this$props4.isPreview,
+        textColor = _this$props4.textColor,
+        getTableById = _this$props4.getTableById;
+      if (!pivotResult) return '';
+      var table_id = statItem.table_id,
+        groupby_column_key = statItem.groupby_column_key,
+        column_groupby_column_key = statItem.column_groupby_column_key;
+      var table = getTableById(table_id);
+      var groupbyColumn = TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
+      var columnGroupbyColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key) || {};
+      return /*#__PURE__*/React.createElement("table", {
+        style: {
+          color: textColor
+        },
+        className: "".concat(isPreview ? styles['preview-pivot-table'] : styles['large-pivot-table'], " ").concat(styles['pivot-table'])
+      }, /*#__PURE__*/React.createElement("caption", {
+        className: styles['column-title']
+      }, columnGroupbyColumn.name), /*#__PURE__*/React.createElement("caption", {
+        className: styles['row-title']
+      }, groupbyColumn.name), this.renderHeader({
+        groupbyColumn: groupbyColumn,
+        columnGroupbyColumn: columnGroupbyColumn
+      }), this.renderRows({
+        table: table
+      }));
+    }
+  }]);
+  return TwoDimensionTable;
+}(PureComponent);
+export default TwoDimensionTable;