dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,8 +1,3 @@
-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';
@@ -10,72 +5,84 @@ import PivotTableDisplayName from './pivot-table-display-name';
 import { isMobile } from '../../utils';
 import { 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() {
+class OneDimensionTableWithNumericColumns extends PureComponent {
+  constructor() {
     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;
+    super(...arguments);
+    _this = this;
+    this.toggleRecords = function (cell) {
+      let {
+        isColumn = false,
+        isCurrentView = false
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       if (isMobile) return;
       _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
-        isColumn: isColumn,
-        isCurrentView: isCurrentView
+        isColumn,
+        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;
+    this.renderHeader = _ref => {
+      let {
+        table,
+        groupbyColumn
+      } = _ref;
+      const {
+        pivotResult,
+        statItem
+      } = this.props;
+      const {
+        column_groupby_column_key
+      } = statItem;
+      const statisticTableColumns = table.columns;
+      const columnGroupbyColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        name: rowGroupName
+      } = columnGroupbyColumn || {};
+      const {
+        pivot_columns
+      } = pivotResult;
       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;
-        });
+      }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
+        const {
+          key
+        } = item;
+        const column = statisticTableColumns.find(column => 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,
-        groupbyColumn = _ref4.groupbyColumn;
-      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 original_name = rowItem.original_name,
-          total = rowItem.total,
-          rows = rowItem.rows;
+    this.renderRows = _ref2 => {
+      let {
+        table,
+        groupbyColumn
+      } = _ref2;
+      const {
+        pivotResult,
+        statItem,
+        getSummaryValueDisplayString
+      } = this.props;
+      const statisticTableColumns = table.columns;
+      const {
+        display_total = true
+      } = statItem;
+      const {
+        pivot_rows,
+        pivot_columns,
+        pivot_columns_total
+      } = pivotResult;
+      let pivotColumnCells = [];
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          original_name,
+          total,
+          rows
+        } = rowItem;
         if (!Array.isArray(pivot_columns)) {
           pivotColumnCells[rowIdx] = rowItem.rows || [];
         }
@@ -86,85 +93,76 @@ var OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent)
         }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
           value: original_name,
           column: groupbyColumn
-        })), Array.isArray(pivot_columns) && pivot_columns.map(function (columnMap, cellIdx) {
-          var key = columnMap.key,
-            method = columnMap.method;
+        })), Array.isArray(pivot_columns) && pivot_columns.map((columnMap, cellIdx) => {
+          const {
+            key,
+            method
+          } = columnMap;
           if (Array.isArray(rows) && rows.length > 0) {
             if (pivotColumnCells[cellIdx]) {
-              var _pivotColumnCells$cel;
-              (_pivotColumnCells$cel = pivotColumnCells[cellIdx]).push.apply(_pivotColumnCells$cel, _toConsumableArray(rows));
+              pivotColumnCells[cellIdx].push(...rows);
             } else {
-              pivotColumnCells[cellIdx] = _toConsumableArray(rows);
+              pivotColumnCells[cellIdx] = [...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);
+          const column = statisticTableColumns.find(item => item.key === key);
+          const displayValue = getSummaryValueDisplayString(column, total[key + method], 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),
-            onClick: function onClick() {
-              return _this.toggleRecords(rowItem);
-            },
+            onClick: () => 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);
+      }, /*#__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 + c.method];
+        const column = statisticTableColumns.find(column => column.key === c.key);
+        const displayValue = getSummaryValueDisplayString(column, pivotColumnTotal, c.method);
+        const 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
-            });
-          }
+          onClick: () => 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,
-        groupbyColumn: groupbyColumn
-      }));
-    }
-  }]);
-  return OneDimensionTableWithNumericColumns;
-}(PureComponent);
+  render() {
+    const {
+      statItem,
+      isPreview,
+      textColor,
+      getTableById
+    } = this.props;
+    const {
+      table_id,
+      groupby_column_key
+    } = statItem;
+    const table = getTableById(table_id);
+    const 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,
+      groupbyColumn
+    }), this.renderRows({
+      table,
+      groupbyColumn
+    }));
+  }
+}
 export default OneDimensionTableWithNumericColumns;

package/es/stat-view/pivot-table/pivot-table-display-name.js

@@ -1,39 +1,33 @@
-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, { Fragment } from 'react';
 import intl from 'react-intl-universal';
 import { getOption, getCollaborator, CellType, getNumberDisplayString, isNumber, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE } from 'dtable-store';
 import { getClientFormulaDisplayString, getKnownCreatorByEmail, generateDefaultUser, getSelectColumnOptions } from '../../utils';
 import { shallowEqual } from '../../utils/common-utils';
 import { EMPTY_NAME } from '../../constants';
-var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
-  _inherits(PivotTableDisplayName, _React$Component);
-  var _super = _createSuper(PivotTableDisplayName);
-  function PivotTableDisplayName(props) {
-    var _this;
-    _classCallCheck(this, PivotTableDisplayName);
-    _this = _super.call(this, props);
-    _this.updateCreator = function (email) {
+class PivotTableDisplayName extends React.Component {
+  constructor(props) {
+    super(props);
+    this.updateCreator = email => {
       if (!window || !window.app) {
         return;
       }
-      var collaborators = window.app.state.collaborators;
-      var creator = getKnownCreatorByEmail(collaborators, email);
+      let {
+        collaborators
+      } = window.app.state;
+      let creator = getKnownCreatorByEmail(collaborators, email);
       if (creator) {
-        _this.setState({
-          creator: creator
+        this.setState({
+          creator
         });
         return;
       }
-      var dtableCollaborators = window.app.collaboratorsCache;
-      window.app.queryUsers([email], function (emailUserMap) {
+      let dtableCollaborators = window.app.collaboratorsCache;
+      window.app.queryUsers([email], emailUserMap => {
         creator = emailUserMap && emailUserMap[email];
         if (creator) {
           dtableCollaborators[email] = creator;
-          _this.setState({
-            creator: creator
+          this.setState({
+            creator
           });
           return;
         }
@@ -41,25 +35,31 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
         // error handle
         creator = generateDefaultUser(email);
         dtableCollaborators[email] = creator;
-        _this.setState({
-          creator: creator
+        this.setState({
+          creator
         });
       });
     };
-    _this.getDisplayName = function (value, column) {
-      var type = column.type,
-        data = column.data;
-      var collaborators = window.app.state.collaborators;
-      var displayName;
+    this.getDisplayName = (value, column) => {
+      let {
+        type,
+        data
+      } = column;
+      let {
+        collaborators
+      } = window.app.state;
+      let displayName;
       switch (type) {
         case CellType.SINGLE_SELECT:
         case CellType.MULTIPLE_SELECT:
           {
-            var options = getSelectColumnOptions(column);
-            var option = getOption(options, value) || {};
-            var optionName = option.name,
-              color = option.color,
-              textColor = option.textColor;
+            let options = getSelectColumnOptions(column);
+            let option = getOption(options, value) || {};
+            let {
+              name: optionName,
+              color,
+              textColor
+            } = option;
             displayName = /*#__PURE__*/React.createElement("div", {
               style: {
                 color: textColor,
@@ -73,7 +73,7 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
           }
         case CellType.COLLABORATOR:
           {
-            var collaborator = getCollaborator(collaborators, value) || {};
+            let collaborator = getCollaborator(collaborators, value) || {};
             displayName = /*#__PURE__*/React.createElement(Collaborator, {
               collaborator: collaborator
             });
@@ -82,7 +82,9 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
         case CellType.CREATOR:
         case CellType.LAST_MODIFIER:
           {
-            var creator = _this.state.creator;
+            let {
+              creator
+            } = this.state;
             displayName = /*#__PURE__*/React.createElement(Collaborator, {
               collaborator: creator
             });
@@ -90,7 +92,7 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
           }
         case CellType.NUMBER:
           {
-            var displayValue = isNumber(value) ? getNumberDisplayString(value, data) : value;
+            const displayValue = isNumber(value) ? getNumberDisplayString(value, data) : value;
             displayName = /*#__PURE__*/React.createElement("div", {
               title: displayValue,
               "aria-label": displayValue
@@ -99,101 +101,100 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
           }
         case CellType.LINK:
           {
-            var _displayValue = getClientFormulaDisplayString(Array.isArray(value) ? value : [value], data, {
-              collaborators: collaborators
+            const displayValue = getClientFormulaDisplayString(Array.isArray(value) ? value : [value], data, {
+              collaborators
             }) || null;
-            if (!_displayValue) {
+            if (!displayValue) {
               break;
             }
             displayName = /*#__PURE__*/React.createElement("div", {
-              title: _displayValue,
-              "aria-label": _displayValue
-            }, _displayValue);
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
             break;
           }
         case CellType.FORMULA:
         case CellType.LINK_FORMULA:
           {
-            var _displayValue2 = value;
-            var _ref = data || {},
-              result_type = _ref.result_type,
-              array_type = _ref.array_type;
+            let displayValue = value;
+            let {
+              result_type,
+              array_type
+            } = data || {};
             if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
-              var valueNumber = parseFloat(value);
-              _displayValue2 = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
+              let valueNumber = parseFloat(value);
+              displayValue = isNumber(valueNumber) ? getNumberDisplayString(valueNumber, data) : value;
             } else if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
               if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
-                var currentCollaborators = Array.isArray(value) ? value : [value];
-                _displayValue2 = currentCollaborators.map(function (email) {
-                  var user = array_type === CellType.COLLABORATOR ? getCollaborator(collaborators, email) : getKnownCreatorByEmail(collaborators, email);
+                const currentCollaborators = Array.isArray(value) ? value : [value];
+                displayValue = currentCollaborators.map(email => {
+                  let user = array_type === CellType.COLLABORATOR ? getCollaborator(collaborators, email) : getKnownCreatorByEmail(collaborators, email);
                   return (user || {}).name;
                 });
-                _displayValue2 = _displayValue2 + '';
+                displayValue = displayValue + '';
               }
             }
             displayName = /*#__PURE__*/React.createElement("div", {
-              title: _displayValue2,
-              "aria-label": _displayValue2
-            }, _displayValue2);
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
             break;
           }
         default:
           {
-            var _displayValue3 = typeof value !== 'string' ? String(value) : value;
+            const displayValue = typeof value !== 'string' ? String(value) : value;
             displayName = /*#__PURE__*/React.createElement("div", {
-              title: _displayValue3,
-              "aria-label": _displayValue3
-            }, _displayValue3);
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
             break;
           }
       }
       return displayName;
     };
-    _this.state = {
+    this.state = {
       creator: {}
     };
-    return _this;
   }
-  _createClass(PivotTableDisplayName, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-        column = _this$props.column,
-        value = _this$props.value;
-      if (column.type !== CellType.CREATOR && column.type !== CellType.LAST_MODIFIER) return;
+  componentDidMount() {
+    let {
+      column,
+      value
+    } = this.props;
+    if (column.type !== CellType.CREATOR && column.type !== CellType.LAST_MODIFIER) return;
+    this.updateCreator(value);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    let {
+      column,
+      value
+    } = nextProps;
+    let {
+      type
+    } = column;
+    if (type !== CellType.CREATOR && type !== CellType.LAST_MODIFIER) return;
+    if (value !== this.props.value || shallowEqual(nextProps.column, this.props.column)) {
       this.updateCreator(value);
     }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var column = nextProps.column,
-        value = nextProps.value;
-      var type = column.type;
-      if (type !== CellType.CREATOR && type !== CellType.LAST_MODIFIER) return;
-      if (value !== this.props.value || shallowEqual(nextProps.column, this.props.column)) {
-        this.updateCreator(value);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        value = _this$props2.value,
-        column = _this$props2.column;
-      var displayName = value && this.getDisplayName(value, column);
-      if (!displayName) {
-        return /*#__PURE__*/React.createElement("div", null, "(".concat(intl.get(EMPTY_NAME), ")"));
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, displayName);
+  }
+  render() {
+    const {
+      value,
+      column
+    } = this.props;
+    const displayName = value && this.getDisplayName(value, column);
+    if (!displayName) {
+      return /*#__PURE__*/React.createElement("div", null, "(".concat(intl.get(EMPTY_NAME), ")"));
     }
-  }]);
-  return PivotTableDisplayName;
-}(React.Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, displayName);
+  }
+}
 export default PivotTableDisplayName;
 function Collaborator(props) {
-  var _ref2 = props.collaborator || {},
-    avatar_url = _ref2.avatar_url,
-    name = _ref2.name;
+  let {
+    avatar_url,
+    name
+  } = props.collaborator || {};
   return /*#__PURE__*/React.createElement("div", {
     className: "collaborators-formatter"
   }, /*#__PURE__*/React.createElement("div", {