dtable-statistic 4.2.1 → 4.3.0

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

@@ -1,9 +1,3 @@
-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 { isNumber, TableUtils, Views } from 'dtable-store';
@@ -12,79 +6,84 @@ import { isMobile } from '../../utils';
 import { getPivotTableSummaryTotal } from '../../utils/pivot-table';
 import { STATISTICS_COUNT_TYPE, 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() {
+class TwoDimensionTable extends PureComponent {
+  constructor() {
     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;
+    super(...arguments);
+    _this = this;
+    this.toggleRecords = function (cell) {
+      let {
+        isColumn = false,
+        isRow = false
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       if (isMobile) return;
       _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
-        isColumn: isColumn,
-        isRow: isRow
+        isColumn,
+        isRow
       });
     };
-    _this.onClickTotals = function (recordsList, _ref2) {
-      var isCurrentView = _ref2.isCurrentView;
+    this.onClickTotals = (recordsList, _ref) => {
+      let {
+        isCurrentView
+      } = _ref;
       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 = [];
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        view_id
+      } = statItem;
+      const table = getTableById(table_id);
+      const view = Views.getViewById(table.views, view_id);
+      let rows = [];
       if (!Views.isArchiveView(view)) {
         rows = recordsList.flat();
       }
-      _this.props.toggleStatisticRecordsDialog({
-        rows: rows
+      this.props.toggleStatisticRecordsDialog({
+        rows
       }, statItem, {
-        isCurrentView: isCurrentView
+        isCurrentView
       });
     };
-    _this.getNumberValue = function (val) {
+    this.getNumberValue = val => {
       if (isNumber(val)) {
         return val;
       }
       return 0;
     };
-    _this.getCells = function (row, summaryColumn) {
-      var _this$props2 = _this.props,
-        pivotResult = _this$props2.pivotResult,
-        getSummaryValueDisplayString = _this$props2.getSummaryValueDisplayString;
-      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;
+    this.getCells = (row, summaryColumn) => {
+      const {
+        pivotResult,
+        getSummaryValueDisplayString
+      } = this.props;
+      const {
+        pivot_columns,
+        pivot_summary_multiple_columns,
+        formulaRows,
+        isSqlQuery = false
+      } = pivotResult;
+      const {
+        cells
+      } = row;
       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 = [];
-        var formatted_summary_multiple_columns = [];
-        pivot_summary_multiple_columns.forEach(function (column) {
-          var key = column.key,
-            type = column.type,
-            sqlKey = column.sqlKey,
-            method = column.method;
+      return pivot_columns.map(item => {
+        const cell = cells[item.key];
+        const rowData = cell && cell.rows;
+        let summary_multiple_columns = [];
+        let formatted_summary_multiple_columns = [];
+        pivot_summary_multiple_columns.forEach(column => {
+          const {
+            key,
+            type,
+            sqlKey,
+            method
+          } = column;
           if (Array.isArray(rowData)) {
-            var sum = getPivotTableSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
+            const sum = getPivotTableSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
             summary_multiple_columns.push(sum);
             formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, sum, method));
             return;
@@ -92,35 +91,47 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
           summary_multiple_columns.push(0);
           formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, 0, method));
         });
-        return _objectSpread(_objectSpread({}, cells[item.key]), {}, {
+        return {
+          ...cells[item.key],
           group_original_name: item.original_name,
           group_name: item.key,
           column: summaryColumn,
-          summary_multiple_columns: summary_multiple_columns,
-          formatted_summary_multiple_columns: formatted_summary_multiple_columns
-        });
+          summary_multiple_columns,
+          formatted_summary_multiple_columns
+        };
       });
     };
-    _this.renderHeader = function (_ref3) {
-      var groupbyColumn = _ref3.groupbyColumn,
-        columnGroupbyColumn = _ref3.columnGroupbyColumn;
-      var _this$props3 = _this.props,
-        pivotResult = _this$props3.pivotResult,
-        statItem = _this$props3.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;
+    this.renderHeader = _ref2 => {
+      let {
+        groupbyColumn,
+        columnGroupbyColumn
+      } = _ref2;
+      const {
+        pivotResult,
+        statItem
+      } = this.props;
+      const {
+        column_groupby_column_key,
+        column_groupby_multiple_numeric_column,
+        display_total = true
+      } = statItem;
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        name: rowGroupName
+      } = columnGroupbyColumn || {};
+      const {
+        pivot_columns,
+        pivot_summary_multiple_columns
+      } = pivotResult;
+      const 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 original_key = item.original_key;
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
+        const {
+          original_key
+        } = item;
         return /*#__PURE__*/React.createElement("th", {
           className: 'pivot-table-header',
           key: "pivot-column-".concat(index)
@@ -132,13 +143,13 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
         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) {
+      }), Array.isArray(pivot_columns) && pivot_columns.map((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) {
+        }, pivot_summary_multiple_columns.map((item, index) => {
           return /*#__PURE__*/React.createElement("div", {
             key: index
           }, item.column_name);
@@ -147,80 +158,83 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
         className: "pivot-table-header ".concat(styles['pivot-empty-cell'])
       })));
     };
-    _this.renderRowTotal = function (isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple) {
-      var rowTotal = summaryDisplayValue;
+    this.renderRowTotal = (isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple) => {
+      let rowTotal = summaryDisplayValue;
       if (firstSummaryColumnFromMultiple) {
-        rowTotal = _this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, summaryDisplayValue, firstSummaryColumnFromMultiple.method);
+        rowTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, summaryDisplayValue, firstSummaryColumnFromMultiple.method);
       }
       return /*#__PURE__*/React.createElement("td", {
         className: "".concat(styles['pivot-cell'], " ").concat(isValidSummaryDisplayValue ? '' : styles['pivot-empty-cell']),
         title: isValidSummaryDisplayValue ? rowTotal : '',
-        onClick: function onClick() {
-          return _this.toggleRecords({
-            rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
-            name: rowItem.name,
-            rowItem: rowItem,
-            original_name: rowItem.original_name
-          }, {
-            isRow: true
-          });
-        }
+        onClick: () => this.toggleRecords({
+          rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
+          name: rowItem.name,
+          rowItem,
+          original_name: rowItem.original_name
+        }, {
+          isRow: true
+        })
       }, isValidSummaryDisplayValue ? /*#__PURE__*/React.createElement("div", null, rowTotal) : /*#__PURE__*/React.createElement("i", null));
     };
-    _this.renderAllTotal = function (allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple) {
-      var isValidAllTotalDisplay = _this.props.isValidValue(allTotalDisplay);
-      var allTotal = allTotalDisplay;
+    this.renderAllTotal = (allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple) => {
+      const isValidAllTotalDisplay = this.props.isValidValue(allTotalDisplay);
+      let allTotal = allTotalDisplay;
       if (firstSummaryColumnFromMultiple) {
-        allTotal = _this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, allTotalDisplay, firstSummaryColumnFromMultiple.method);
+        allTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, allTotalDisplay, firstSummaryColumnFromMultiple.method);
       }
       return /*#__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
-          });
-        },
+        onClick: () => this.onClickTotals(pivotColumnCells, {
+          isCurrentView: true
+        }),
         title: isValidAllTotalDisplay ? allTotal : ''
       }, isValidAllTotalDisplay ? /*#__PURE__*/React.createElement("div", null, allTotal) : /*#__PURE__*/React.createElement("i", null));
     };
-    _this.renderRows = function (_ref5) {
-      var table = _ref5.table,
-        groupbyColumn = _ref5.groupbyColumn;
-      var _this$props4 = _this.props,
-        pivotResult = _this$props4.pivotResult,
-        statItem = _this$props4.statItem,
-        getSummaryValueDisplayString = _this$props4.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 firstSummaryColumnFromMultiple = column_groupby_multiple_numeric_column && pivot_summary_multiple_columns[0] || null;
-      var pivotColumnCells = [];
-      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map(function (rowItem, rowIdx) {
-        var name = rowItem.name,
-          original_name = rowItem.original_name,
-          total = rowItem.total;
-        var cells = _this.getCells(rowItem, summaryColumn);
-        var pivotRowCells = [];
+    this.renderRows = _ref3 => {
+      let {
+        table,
+        groupbyColumn
+      } = _ref3;
+      const {
+        pivotResult,
+        statItem,
+        getSummaryValueDisplayString
+      } = this.props;
+      const {
+        summary_column_key,
+        summary_method,
+        column_groupby_multiple_numeric_column,
+        display_total = true
+      } = statItem;
+      const {
+        pivot_rows,
+        pivot_columns,
+        pivot_columns_total,
+        pivot_table_total,
+        pivot_summary_multiple_columns,
+        formulaRows,
+        isSqlQuery = false
+      } = pivotResult;
+      const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      let allTotalDisplay = column_groupby_multiple_numeric_column ? 0 : getSummaryValueDisplayString(summaryColumn, pivot_table_total, summary_method);
+      let firstSummaryColumnFromMultiple = column_groupby_multiple_numeric_column && pivot_summary_multiple_columns[0] || null;
+      let pivotColumnCells = [];
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          name,
+          original_name,
+          total
+        } = rowItem;
+        const cells = this.getCells(rowItem, summaryColumn);
+        let pivotRowCells = [];
         if (!Array.isArray(pivot_columns)) {
           pivotColumnCells[rowIdx] = rowItem.rows || [];
         }
-        var summaryDisplayValue = getSummaryValueDisplayString(summaryColumn, total, summary_method);
+        let summaryDisplayValue = getSummaryValueDisplayString(summaryColumn, total, summary_method);
         if (column_groupby_multiple_numeric_column) {
           summaryDisplayValue = 0;
         }
-        var isValidSummaryDisplayValue = _this.props.isValidValue(summaryDisplayValue);
+        const isValidSummaryDisplayValue = this.props.isValidValue(summaryDisplayValue);
         return /*#__PURE__*/React.createElement("tr", {
           key: 'table-row' + rowIdx
         }, /*#__PURE__*/React.createElement("td", {
@@ -228,140 +242,135 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
         }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
           value: original_name,
           column: groupbyColumn
-        })), Array.isArray(cells) && cells.map(function (c, cellIdx) {
+        })), Array.isArray(cells) && cells.map((c, cellIdx) => {
           if (c && Array.isArray(c.rows) && c.rows.length > 0) {
-            pivotRowCells.push.apply(pivotRowCells, _toConsumableArray(c.rows));
+            pivotRowCells.push(...c.rows);
             if (pivotColumnCells[cellIdx]) {
-              var _pivotColumnCells$cel;
-              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(c.rows));
+              pivotColumnCells[cellIdx].push(...c.rows);
             } else {
-              pivotColumnCells[cellIdx] = _toConsumableArray(c.rows);
+              pivotColumnCells[cellIdx] = [...c.rows];
             }
           }
           if (column_groupby_multiple_numeric_column) {
-            var summary_multiple_columns = c.summary_multiple_columns,
-              formatted_summary_multiple_columns = c.formatted_summary_multiple_columns;
-            summary_multiple_columns.forEach(function (item) {
-              summaryDisplayValue += _this.getNumberValue(item);
+            const {
+              summary_multiple_columns,
+              formatted_summary_multiple_columns
+            } = c;
+            summary_multiple_columns.forEach(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
-                });
-              }
+              onClick: () => this.toggleRecords({
+                rows: c.rows,
+                name,
+                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']
-            }, formatted_summary_multiple_columns.map(function (label, index) {
+            }, formatted_summary_multiple_columns.map((label, index) => {
               return /*#__PURE__*/React.createElement("div", {
                 key: index,
                 title: label
               }, label);
             })), /*#__PURE__*/React.createElement("span", null));
           }
-          var displayValue = getSummaryValueDisplayString(c.column, c.total, summary_method);
-          var isValidDisplayValue = _this.props.isValidValue(displayValue);
+          const displayValue = getSummaryValueDisplayString(c.column, c.total, summary_method);
+          const 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
-              });
-            }
+            onClick: () => this.toggleRecords({
+              rows: c.rows,
+              name,
+              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 && _this.renderRowTotal(isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple));
+        }), display_total && this.renderRowTotal(isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple));
       }), 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 = 0;
-        var isValidTotalDisplayValue = true;
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
+        const pivotColumnCell = pivotColumnCells[index] || [];
+        const pivotColumnTotal = pivot_columns_total[c.key];
+        let totalDisplayValue = 0;
+        let isValidTotalDisplayValue = true;
         if (column_groupby_multiple_numeric_column) {
-          var total = 0;
-          pivot_summary_multiple_columns.forEach(function (summaryCol) {
-            var type = summaryCol.type,
-              key = summaryCol.key,
-              sqlKey = summaryCol.sqlKey,
-              method = summaryCol.method;
+          let total = 0;
+          pivot_summary_multiple_columns.forEach(summaryCol => {
+            const {
+              type,
+              key,
+              sqlKey,
+              method
+            } = summaryCol;
             total += getPivotTableSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
           });
           totalDisplayValue = total;
           allTotalDisplay += total;
-          isValidTotalDisplayValue = _this.props.isValidValue(totalDisplayValue);
+          isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
           if (firstSummaryColumnFromMultiple) {
             totalDisplayValue = getSummaryValueDisplayString(firstSummaryColumnFromMultiple, totalDisplayValue, firstSummaryColumnFromMultiple.method);
           }
         } else {
           totalDisplayValue = getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summary_method);
-          isValidTotalDisplayValue = _this.props.isValidValue(totalDisplayValue);
+          isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
         }
         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
-            });
-          }
+          onClick: () => 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));
-      }), _this.renderAllTotal(allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple)));
+      }), this.renderAllTotal(allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple)));
     };
-    return _this;
   }
-  _createClass(TwoDimensionTable, [{
-    key: "render",
-    value: function render() {
-      var _this$props5 = this.props,
-        pivotResult = _this$props5.pivotResult,
-        statItem = _this$props5.statItem,
-        isPreview = _this$props5.isPreview,
-        textColor = _this$props5.textColor,
-        getTableById = _this$props5.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,
-        groupbyColumn: groupbyColumn
-      }));
-    }
-  }]);
-  return TwoDimensionTable;
-}(PureComponent);
+  render() {
+    const {
+      pivotResult,
+      statItem,
+      isPreview,
+      textColor,
+      getTableById
+    } = this.props;
+    if (!pivotResult) return '';
+    const {
+      table_id,
+      groupby_column_key,
+      column_groupby_column_key
+    } = statItem;
+    const table = getTableById(table_id);
+    const groupbyColumn = TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
+    const 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,
+      columnGroupbyColumn
+    }), this.renderRows({
+      table,
+      groupbyColumn
+    }));
+  }
+}
 export default TwoDimensionTable;