dtable-statistic 4.0.6 → 4.0.8

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

@@ -0,0 +1,206 @@
+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) {
+      if (!window || !window.app) {
+        return;
+      }
+      var collaborators = window.app.state.collaborators;
+      var creator = getKnownCreatorByEmail(collaborators, email);
+      if (creator) {
+        _this.setState({
+          creator: creator
+        });
+        return;
+      }
+      var dtableCollaborators = window.app.collaboratorsCache;
+      window.app.queryUsers([email], function (emailUserMap) {
+        creator = emailUserMap && emailUserMap[email];
+        if (creator) {
+          dtableCollaborators[email] = creator;
+          _this.setState({
+            creator: creator
+          });
+          return;
+        }
+
+        // error handle
+        creator = generateDefaultUser(email);
+        dtableCollaborators[email] = creator;
+        _this.setState({
+          creator: creator
+        });
+      });
+    };
+    _this.getDisplayName = function (value, column) {
+      var type = column.type,
+        data = column.data;
+      var collaborators = window.app.state.collaborators;
+      var 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;
+            displayName = /*#__PURE__*/React.createElement("div", {
+              style: {
+                color: textColor,
+                backgroundColor: color
+              },
+              className: "multiple-select-option d-inline-block align-middle mw-100",
+              title: optionName,
+              "aria-label": optionName
+            }, optionName);
+            break;
+          }
+        case CellType.COLLABORATOR:
+          {
+            var collaborator = getCollaborator(collaborators, value) || {};
+            displayName = /*#__PURE__*/React.createElement(Collaborator, {
+              collaborator: collaborator
+            });
+            break;
+          }
+        case CellType.CREATOR:
+        case CellType.LAST_MODIFIER:
+          {
+            var creator = _this.state.creator;
+            displayName = /*#__PURE__*/React.createElement(Collaborator, {
+              collaborator: creator
+            });
+            break;
+          }
+        case CellType.NUMBER:
+          {
+            var displayValue = isNumber(value) ? getNumberDisplayString(value, data) : value;
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: displayValue,
+              "aria-label": displayValue
+            }, displayValue);
+            break;
+          }
+        case CellType.LINK:
+          {
+            var _displayValue = getClientFormulaDisplayString([value], data, {
+              collaborators: collaborators
+            }) || null;
+            displayName = /*#__PURE__*/React.createElement("div", {
+              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;
+            if (result_type === FORMULA_RESULT_TYPE.NUMBER) {
+              var valueNumber = parseFloat(value);
+              _displayValue2 = 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);
+                  return (user || {}).name;
+                });
+                _displayValue2 = _displayValue2 + '';
+              }
+            }
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: _displayValue2,
+              "aria-label": _displayValue2
+            }, _displayValue2);
+            break;
+          }
+        default:
+          {
+            var _displayValue3 = typeof value !== 'string' ? String(value) : value;
+            displayName = /*#__PURE__*/React.createElement("div", {
+              title: _displayValue3,
+              "aria-label": _displayValue3
+            }, _displayValue3);
+            break;
+          }
+      }
+      return displayName;
+    };
+    _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;
+      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) : /*#__PURE__*/React.createElement("div", null, "(".concat(intl.get(EMPTY_NAME), ")"));
+      return /*#__PURE__*/React.createElement(Fragment, null, displayName);
+    }
+  }]);
+  return PivotTableDisplayName;
+}(React.Component);
+export default PivotTableDisplayName;
+function Collaborator(props) {
+  var _ref2 = props.collaborator || {},
+    avatar_url = _ref2.avatar_url,
+    name = _ref2.name;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "collaborators-formatter"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collaborator"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "collaborator-avatar-container"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: avatar_url,
+    alt: name,
+    className: "collaborator-avatar"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "collaborator-name",
+    title: name,
+    "aria-label": name
+  }, name)));
+}

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

@@ -7,8 +7,9 @@ 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 PivotTableDisplayName from './pivot-table-display-name';
 import { isMobile } from '../../utils';
-import { EMPTY_NAME, TITLE_TOTAL } from '../../constants';
+import { TITLE_TOTAL } from '../../constants';
 import styles from './statistic-pivot-table.module.css';
 var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
   _inherits(TwoDimensionTable, _PureComponent);
@@ -59,7 +60,9 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
       return 0;
     };
     _this.getCells = function (row, summaryColumn) {
-      var pivotResult = _this.props.pivotResult;
+      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,
@@ -72,39 +75,49 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
       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) {
+        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;
           if (Array.isArray(rowData)) {
             var sum = 0;
             rowData.forEach(function (rowDataItem) {
               if (!isSqlQuery) {
-                if (columns.type === CellType.FORMULA) {
+                if (type === CellType.FORMULA) {
                   var formulaRow = formulaRows[rowDataItem._id];
-                  sum += _this.getNumberValue(formulaRow[columns.key]);
+                  sum += _this.getNumberValue(formulaRow[key]);
                   return;
                 }
-                sum += _this.getNumberValue(rowDataItem[columns.key]);
+                sum += _this.getNumberValue(rowDataItem[key]);
                 return;
               }
-              sum += _this.getNumberValue(rowDataItem[columns.sqlKey]);
+              sum += _this.getNumberValue(rowDataItem[sqlKey]);
             });
-            return sum;
+            summary_multiple_columns.push(sum);
+            formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, sum, method));
+            return;
           }
-          return 0;
+          summary_multiple_columns.push(0);
+          formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, 0, method));
         });
         return _objectSpread(_objectSpread({}, cells[item.key]), {}, {
           group_original_name: item.original_name,
           group_name: item.key,
           column: summaryColumn,
-          summary_multiple_columns: summary_multiple_columns
+          summary_multiple_columns: summary_multiple_columns,
+          formatted_summary_multiple_columns: formatted_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 _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,
@@ -118,11 +131,14 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
       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 original_key = item.original_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));
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: original_key,
+          column: columnGroupbyColumn
+        }));
       }), 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", {
@@ -142,12 +158,49 @@ 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;
+      if (firstSummaryColumnFromMultiple) {
+        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
+          });
+        }
+      }, 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;
+      if (firstSummaryColumnFromMultiple) {
+        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
+          });
+        },
+        title: isValidAllTotalDisplay ? allTotal : ''
+      }, isValidAllTotalDisplay ? /*#__PURE__*/React.createElement("div", null, allTotal) : /*#__PURE__*/React.createElement("i", null));
+    };
     _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 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,
@@ -163,10 +216,11 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
         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 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 = [];
@@ -182,7 +236,10 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
           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) {
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: original_name,
+          column: groupbyColumn
+        })), 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]) {
@@ -193,7 +250,8 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
             }
           }
           if (column_groupby_multiple_numeric_column) {
-            var summary_multiple_columns = c.summary_multiple_columns;
+            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);
             });
@@ -212,12 +270,11 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
               }
             }, /*#__PURE__*/React.createElement("div", {
               className: styles['pivot-summary-multiple-columns-div']
-            }, summary_multiple_columns.map(function (label, index) {
+            }, formatted_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);
+                key: index,
+                title: label
+              }, label);
             })), /*#__PURE__*/React.createElement("span", null));
           }
           var displayValue = getSummaryValueDisplayString(c.column, c.total, summary_method);
@@ -237,27 +294,14 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
               });
             }
           }, 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 && _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 = getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summary_method);
-        var isValidTotalDisplayValue = _this.props.isValidValue(totalDisplayValue);
+        var totalDisplayValue = 0;
+        var isValidTotalDisplayValue = true;
         if (column_groupby_multiple_numeric_column) {
           var total = 0;
           pivotColumnCell.forEach(function (item) {
@@ -279,6 +323,13 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
           });
           totalDisplayValue = total;
           allTotalDisplay += total;
+          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);
         }
         return /*#__PURE__*/React.createElement("td", {
           className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
@@ -294,27 +345,19 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
             });
           }
         }, 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))));
+      }), _this.renderAllTotal(allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple)));
     };
     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;
+      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,
@@ -335,7 +378,8 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
         groupbyColumn: groupbyColumn,
         columnGroupbyColumn: columnGroupbyColumn
       }), this.renderRows({
-        table: table
+        table: table,
+        groupbyColumn: groupbyColumn
       }));
     }
   }]);