dtable-statistic 4.0.5 → 4.0.7

package/es/assets/css/dashboard.css

@@ -43,6 +43,7 @@
 
 .statistic-header .add-stat {
   height: 26px;
+  margin-right: 8px;
   padding: 0 10px;
   font-weight: 400;
   border-radius: 3px;
@@ -76,11 +77,18 @@
 .statistic-header .op-item-icon-wrapper {
   display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
+  width: 24px;
   line-height: 24px;
+  margin-right: 4px;
   color: var(--dashboard-header-icon-color);
 }
 
+.statistic-header .op-item-icon-wrapper:last-child {
+  margin-right: 0;
+}
+
 .statistic-header .op-item-icon-wrapper:hover,
 .statistic-header .add-stat:hover {
   color: var(--dashboard-header-icon-hover-color);
@@ -90,6 +98,10 @@
   color: var(--op-item-icon-hover-color);
 }
 
+.statistic-header .op-item-icon.btn-close {
+  font-weight: 700;
+}
+
 .statistic-main {
   flex: 1 1;
   display: flex;
@@ -559,3 +571,13 @@
 .statistic-panel .seatable-radio .seatable-radio-description {
   line-height: 16px;
 }
+
+/* column-formatter */
+.statistic-chart-container .single-select-option,
+.statistic-chart-container .multiple-select-option {
+  margin: 0 !important;
+}
+
+.statistic-chart-container .collaborators-formatter .collaborator {
+  margin-right: 0 !important;
+}

package/es/calculator/pivot-table-calculator.js

@@ -356,13 +356,16 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
         sqlRows.forEach(function (row) {
           var total = row[sqlSummaryColumnKey] || 0;
           _allTotal += total;
+          var originalLabel = _this3.getOriginalLabel(groupbyColumn, _sqlGroupbyColumnKey, row, groupby_geolocation_granularity, groupby_date_granularity);
+          var name = _this3.getLabel(groupbyColumn, originalLabel);
+          var original_name = _this3.getOriginalName(groupbyColumn, originalLabel);
           pivot_rows.push({
-            name: _this3.getLabel(groupbyColumn, _sqlGroupbyColumnKey, row, groupby_geolocation_granularity, groupby_date_granularity),
+            name: name,
+            original_name: original_name,
             rows: [],
             total: {
               total: total
-            },
-            original_name: row[groupbyColumn.key]
+            }
           });
         });
         return {
@@ -406,11 +409,14 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
             rowTotal[columnKey + summaryMethod] = rowTotal[columnKey + summaryMethod] + value;
           }
         });
+        var originalLabel = _this3.getOriginalLabel(groupbyColumn, sqlGroupbyColumnKey, row, groupby_geolocation_granularity, groupby_date_granularity);
+        var name = _this3.getLabel(groupbyColumn, originalLabel);
+        var original_name = _this3.getOriginalName(groupbyColumn, originalLabel);
         pivot_rows.push({
-          name: _this3.getLabel(groupbyColumn, sqlGroupbyColumnKey, row, groupby_geolocation_granularity, groupby_date_granularity),
+          name: name,
+          original_name: original_name,
           rows: [row],
-          total: rowTotal,
-          original_name: row[groupbyColumn.key]
+          total: rowTotal
         });
       });
       if (pivot_columns.length < 2) {
@@ -459,12 +465,16 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
       var isRowGroupbyColumnDataAsAnArray = !!MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP[columnGroupbyColumn.type];
       sqlRows.forEach(function (row) {
         var groupbyColumnCellValue = row[sqlGroupbyColumnKey];
-        var groupbyColumnCellValueKey = _this4.getLabel(groupbyColumn, sqlGroupbyColumnKey, row, groupby_geolocation_granularity, groupby_date_granularity);
+        var groupbyColumnOriginalLabel = _this4.getOriginalLabel(groupbyColumn, sqlGroupbyColumnKey, row, groupby_geolocation_granularity, groupby_date_granularity);
+        var groupbyColumnCellValueKey = _this4.getLabel(groupbyColumn, groupbyColumnOriginalLabel);
+        var groupbyColumnOriginalCellValueKey = _this4.getOriginalName(groupbyColumn, groupbyColumnOriginalLabel);
         var columnGroupbyColumnCellValue = row[sqlColumnGroupbyColumnKey];
-        var columnGroupbyColumnCellValueKey = _this4.getLabel(columnGroupbyColumn, sqlColumnGroupbyColumnKey, row, column_groupby_geolocation_granularity, column_groupby_date_granularity);
+        var columnGroupbyColumnOriginalLabel = _this4.getOriginalLabel(columnGroupbyColumn, sqlColumnGroupbyColumnKey, row, column_groupby_geolocation_granularity, column_groupby_date_granularity);
+        var columnGroupbyColumnCellValueKey = _this4.getLabel(columnGroupbyColumn, columnGroupbyColumnOriginalLabel);
+        var columnGroupbyColumnOriginalCellValueKey = _this4.getOriginalName(columnGroupbyColumn, columnGroupbyColumnOriginalLabel);
         var count = row[sqlSummaryColumnKey];
         if (_this4.isValidCellValue(columnGroupbyColumnCellValue, groupby_include_empty_cells)) {
-          _this4.updateTwoDimensionColumns(pivot_columns, columnGroupbyColumnCellValueKey, columnGroupbyColumnCellValue, {
+          _this4.updateTwoDimensionColumns(pivot_columns, columnGroupbyColumnCellValueKey, columnGroupbyColumnOriginalCellValueKey, {
             isIncludeEmpty: groupby_include_empty_cells,
             isCellValueAsAnArray: isRowGroupbyColumnDataAsAnArray
           });
@@ -474,7 +484,7 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
             var resName = r.name;
             return resName === null && groupbyColumnCellValueKey === null || resName === undefined && groupbyColumnCellValueKey === undefined || resName === 0 && groupbyColumnCellValueKey === 0 || resName === groupbyColumnCellValueKey;
           });
-          _this4.updateTwoDimensionRows(pivot_rows, pivot_columns, pivotRowIndex, groupbyColumnCellValueKey, count, row, isRowGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey, groupbyColumnCellValue, {
+          _this4.updateTwoDimensionRows(pivot_rows, pivot_columns, pivotRowIndex, groupbyColumnCellValueKey, groupbyColumnOriginalCellValueKey, count, row, isRowGroupbyColumnDataAsAnArray, columnGroupbyColumnCellValueKey, {
             summaryMethod: summaryMethod,
             summaryColumn: summaryColumn
           });
@@ -611,19 +621,37 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
         key: getSummaryColumnMethod(DTABLE_DB_SUMMARY_METHOD[summaryMethod], columnName)
       };
     }
+  }, {
+    key: "getOriginalLabel",
+    value: function getOriginalLabel(groupColumn, groupName, statRow, groupby_date_granularity, groupby_geolocation_granularity) {
+      var isTimeColumn = TIME_COLUMN_LIST.includes(groupColumn.type);
+      if (isTimeColumn || groupColumn.type === CellType.GEOLOCATION) {
+        return statRow[groupName];
+      }
+      var currentGroupLabel = statRow[groupColumn.key];
+      return StatUtils.getGroupLabel(currentGroupLabel, {}, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
+    }
+  }, {
+    key: "getOriginalName",
+    value: function getOriginalName(groupColumn, originalLabel) {
+      var isTimeColumn = TIME_COLUMN_LIST.includes(groupColumn.type);
+      if (isTimeColumn || groupColumn.type === CellType.GEOLOCATION) {
+        return originalLabel;
+      }
+      var columnType = groupColumn.type;
+      if (columnType === CellType.MULTIPLE_SELECT || columnType === CellType.COLLABORATOR || columnType === CellType.LINK) {
+        return Array.isArray(originalLabel) ? originalLabel[0] : null;
+      }
+      return originalLabel;
+    }
   }, {
     key: "getLabel",
-    value: function getLabel(groupColumn, groupName, statRow, groupby_date_granularity, groupby_geolocation_granularity) {
+    value: function getLabel(groupColumn, originalLabel) {
       var isTimeColumn = TIME_COLUMN_LIST.includes(groupColumn.type);
-      var label;
       if (isTimeColumn || groupColumn.type === CellType.GEOLOCATION) {
-        label = statRow[groupName];
-      } else {
-        var currentGroupLabel = statRow[groupColumn.key];
-        label = StatUtils.getGroupLabel(currentGroupLabel, {}, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
-        label = getFormattedLabel(groupColumn, label, this.value.collaborators);
+        return originalLabel;
       }
-      return label;
+      return getFormattedLabel(groupColumn, originalLabel, this.value.collaborators);
     }
   }, {
     key: "initTotal",
@@ -672,17 +700,18 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
     }
   }, {
     key: "updateTwoDimensionColumns",
-    value: function updateTwoDimensionColumns(pivot_columns, key, columnCellValue, _ref5) {
+    value: function updateTwoDimensionColumns(pivot_columns, key, original_key, _ref5) {
       var isIncludeEmpty = _ref5.isIncludeEmpty,
         isCellValueAsAnArray = _ref5.isCellValueAsAnArray;
-      if (isCellValueAsAnArray) {
+      if (isCellValueAsAnArray && Array.isArray(key)) {
         if (key.length === 0 && isIncludeEmpty) {
           var _pivotColumnIndex = pivot_columns.findIndex(function (r) {
             return !r.key;
           });
           if (_pivotColumnIndex < 0) {
             pivot_columns.unshift({
-              key: null
+              key: null,
+              original_key: null
             });
           }
           return;
@@ -694,7 +723,7 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
           if (pivotColumnIndex < 0) {
             pivot_columns.push({
               key: k,
-              original_name: k
+              original_key: k
             });
           }
         });
@@ -707,13 +736,13 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
       if (pivotColumnIndex < 0) {
         pivot_columns.push({
           key: key,
-          original_name: columnCellValue
+          original_key: original_key
         });
       }
     }
   }, {
     key: "updateTwoDimensionRows",
-    value: function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, count, row, isColumnDataAsAnArray, cellValue, format_cell_value, _ref6) {
+    value: function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, original_name, count, row, isColumnDataAsAnArray, cellValue, _ref6) {
       var _this5 = this;
       var summaryMethod = _ref6.summaryMethod,
         summaryColumn = _ref6.summaryColumn;
@@ -764,7 +793,7 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
           name: name,
           cells: _cells,
           total: _total,
-          original_name: format_cell_value
+          original_name: original_name
         });
       }
     }

package/es/calculator/workers/pivot-table-calculator-worker.js

@@ -93,6 +93,7 @@ function calculateOneDimensionTable(chart, value, username, userId) {
     return TableUtils.getTableColumnByKey(table, item.key);
   });
   pivot_rows.forEach(function (row) {
+    row.original_name = row.name;
     row.name = getFormattedLabel(column, row.name, value.collaborators);
   });
   return {
@@ -109,6 +110,7 @@ function updateOneDimensionRows(pivot_rows, index, name, row) {
   } else {
     var _updatedPivotRow = {
       name: name,
+      original_name: name,
       rows: [row]
     };
     pivot_rows.push(_updatedPivotRow);
@@ -221,6 +223,7 @@ function calculateTwoDimensionTable(chart, value, username, userId) {
       pivot_summary_multiple_columns.push({
         key: item.key,
         type: column.type,
+        data: column.data,
         method: item.method,
         column_name: column.name
       });
@@ -319,7 +322,8 @@ function updateTwoDimensionColumns(value, pivot_columns, column, row, formulaRow
       });
       if (pivotColumnIndex < 0) {
         pivot_columns.unshift({
-          key: null
+          key: null,
+          original_key: null
         });
       }
     } else {
@@ -329,7 +333,8 @@ function updateTwoDimensionColumns(value, pivot_columns, column, row, formulaRow
         });
         if (pivotColumnIndex < 0) {
           pivot_columns.push({
-            key: k
+            key: k,
+            original_key: k
           });
         }
       });
@@ -341,7 +346,8 @@ function updateTwoDimensionColumns(value, pivot_columns, column, row, formulaRow
     });
     if (pivotColumnIndex < 0) {
       pivot_columns.push({
-        key: key
+        key: key,
+        original_key: key
       });
     }
   }
@@ -376,6 +382,7 @@ function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, row, isC
     });
     pivot_rows.push({
       name: name,
+      original_name: name,
       cells: _cells
     });
   }

package/es/components/dialog/statistic-record-dialog/index.css

@@ -98,6 +98,8 @@
   padding: 0;
   overflow-y: hidden;
   background-color: #f8f8f8;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 
 .statistic-records-dialog.statistic-records-container .records-list {

package/es/components/dialog/statistic-record-dialog/index.js

@@ -66,11 +66,13 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     _this.toggle = function () {
       _this.props.toggleStatisticRecordsDialog();
     };
-    _this.renderRowsCards = function (_ref) {
-      var table = _ref.table,
-        renderedColumns = _ref.renderedColumns,
-        searchRows = _ref.searchRows,
-        unShowColumnKeyList = _ref.unShowColumnKeyList;
+    _this.renderRowsCards = function () {
+      var searchRows = _this.state.searchRows;
+      var unShowColumnKeyList = ['0000'];
+      var table = _this.getStatisticTable();
+      var renderedColumns = table.columns.filter(function (column) {
+        return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
+      });
       if (!window.app || !window.app.renderRowsCards) return;
       return window.app.renderRowsCards({
         table: table,
@@ -109,25 +111,24 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
       var _this$props3 = this.props,
         isLoading = _this$props3.isLoading,
         currentDate = _this$props3.currentDate;
-      var searchRows = this.state.searchRows;
-      var unShowColumnKeyList = ['0000'];
-      var table;
-      var renderedColumns = [];
-      if (!isLoading) {
-        table = this.getStatisticTable();
-        renderedColumns = table.columns.filter(function (column) {
-          return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
-        });
-      }
+      // const { searchRows } = this.state;
+      // const unShowColumnKeyList = ['0000'];
+      // let table;
+      // let renderedColumns = [];
+      // if (!isLoading) {
+      //   table = this.getStatisticTable();
+      //   renderedColumns = table.columns.filter(column => {
+      //     return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
+      //   });
+      // }
+
       return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
         autoFocus: false,
         toggle: this.toggle,
-        isOpen: true,
         className: "statistic-records-dialog",
         zIndex: 1048
-      }, isLoading && /*#__PURE__*/React.createElement("div", {
-        className: "py-8"
-      }, /*#__PURE__*/React.createElement(Loading, null)), !isLoading && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "search-header"
       }, /*#__PURE__*/React.createElement("span", null, currentDate), /*#__PURE__*/React.createElement("button", {
         type: "button",
@@ -161,12 +162,9 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
         }
       })), /*#__PURE__*/React.createElement(ModalBody, {
         className: "statistic-records-container"
-      }, this.renderRowsCards({
-        table: table,
-        renderedColumns: renderedColumns,
-        searchRows: searchRows,
-        unShowColumnKeyList: unShowColumnKeyList
-      }))));
+      }, isLoading ? /*#__PURE__*/React.createElement("div", {
+        className: "py-8"
+      }, /*#__PURE__*/React.createElement(Loading, null)) : this.renderRowsCards())));
     }
   }]);
   return StatisticRecordDialog;

package/es/desktop-dashboard.js

@@ -213,19 +213,19 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-header-operators d-flex align-items-center"
       }, !isTableReadOnly && /*#__PURE__*/React.createElement("button", {
-        className: "btn btn-secondary op-item add-stat mr-4",
+        className: "btn btn-secondary op-item add-stat",
         onClick: this.onToggleChartAddition
       }, /*#__PURE__*/React.createElement("i", {
         className: "op-item-icon add-chart-icon dtable-font dtable-icon-add-table"
       }), /*#__PURE__*/React.createElement("span", {
         className: "add-new-option"
       }, intl.get('New_chart'))), /*#__PURE__*/React.createElement("div", {
-        className: "op-item op-item-icon-wrapper mr-4",
+        className: "op-item op-item-icon-wrapper",
         onClick: this.onToggleColorThemeDialog
       }, /*#__PURE__*/React.createElement("span", {
         className: "op-item-icon dtable-font dtable-icon-set-up"
       })), /*#__PURE__*/React.createElement("div", {
-        className: "op-item op-item-icon-wrapper mr-4",
+        className: "op-item op-item-icon-wrapper",
         id: "btn-statistic-full-screen",
         onClick: this.onToggleFullScreen
       }, /*#__PURE__*/React.createElement("span", {
@@ -234,7 +234,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         placement: "bottom",
         target: "btn-statistic-full-screen"
       }, isFullScreen ? intl.get('Cancel_full_screen') : intl.get('Full_screen'))), /*#__PURE__*/React.createElement("div", {
-        className: "op-item op-item-icon-wrapper mr-4",
+        className: "op-item op-item-icon-wrapper",
         id: "btn-statistic-theme-setting"
       }, /*#__PURE__*/React.createElement("span", {
         className: "op-item-icon dtable-font ".concat(theme === 'dark' ? 'dtable-icon-day-mode' : 'dtable-icon-night-mode'),
@@ -247,7 +247,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         className: "op-item op-item-icon-wrapper"
       }, /*#__PURE__*/React.createElement("span", {
         title: intl.get('Close'),
-        className: "op-item-icon dtable-font dtable-icon-fork-number"
+        className: "op-item-icon btn-close dtable-font dtable-icon-x"
       })))), /*#__PURE__*/React.createElement("main", {
         className: "statistic-main"
       }, /*#__PURE__*/React.createElement(StatList, {

package/es/locale/lang/de.js

@@ -51,7 +51,7 @@ var de = {
   'Untitled': 'Ohne Titel',
   'Settings': 'Einstellungen',
   'Table': 'Tabelle',
-  'Views': 'Views',
+  'Views': 'Ansichten',
   'Display_title': 'Anzeigetitel',
   'X-axis': 'X-Achse',
   'Y-axis': 'Y-Achse',
@@ -233,7 +233,9 @@ var de = {
   'Line_color': 'Linienfarbe',
   'Stack': 'Stapel',
   'Add_new_stack': 'Neuen Stapel hinzufügen',
-  'Chart_type': 'Chart type',
-  'Edit_type': 'Edit type'
+  'Chart_type': 'Diagrammtyp',
+  'Edit_type': 'Typ ändern',
+  'Update_to_a_table': 'Update to a table',
+  'Export_to_a_new_table': 'In neue Tabelle exportieren'
 };
 export default de;

package/es/locale/lang/en.js

@@ -234,6 +234,8 @@ var en = {
   'Stack': 'Stack',
   'Add_new_stack': 'Add new stack',
   'Chart_type': 'Chart type',
-  'Edit_type': 'Edit type'
+  'Edit_type': 'Edit type',
+  'Update_to_a_table': 'Update to a table',
+  'Export_to_a_new_table': 'Export to a new table'
 };
 export default en;

package/es/locale/lang/fr.js

@@ -51,7 +51,7 @@ var fr = {
   'Untitled': 'Sans titre',
   'Settings': 'Paramètres',
   'Table': 'Tableau',
-  'Views': 'Views',
+  'Views': 'Vues',
   'Display_title': 'Titre à afficher',
   'X-axis': 'Axe des x',
   'Y-axis': 'Axe des y',
@@ -233,7 +233,9 @@ var fr = {
   'Line_color': 'Couleur de courbe',
   'Stack': 'Pile',
   'Add_new_stack': 'Ajouter une nouvelle pile',
-  'Chart_type': 'Chart type',
-  'Edit_type': 'Edit type'
+  'Chart_type': 'Type de diagramme',
+  'Edit_type': 'Modifier le type',
+  'Update_to_a_table': 'Update to a table',
+  'Export_to_a_new_table': 'Exporter dans un nouveau tableau'
 };
 export default fr;

package/es/locale/lang/zh_CN.js

@@ -234,6 +234,8 @@ var zh_CN = {
   'Stack': '堆叠',
   'Add_new_stack': '添加新的堆叠',
   'Chart_type': '图表类型',
-  'Edit_type': '编辑类型'
+  'Edit_type': '编辑类型',
+  'Update_to_a_table': '更新到子表',
+  'Export_to_a_new_table': '导出到新的子表'
 };
 export default zh_CN;

package/es/service/dashboard-service.js

@@ -68,7 +68,7 @@ var DashBoardService = /*#__PURE__*/function () {
             }
           case STAT_TYPE.PIE:
             {
-              return _this.chartService.generatorStatistic(_objectSpread(_objectSpread({}, chart), {}, {
+              return _this.chartService.generatorChart(_objectSpread(_objectSpread({}, chart), {}, {
                 type: STAT_TYPE.RING
               }));
             }
@@ -93,7 +93,7 @@ var DashBoardService = /*#__PURE__*/function () {
       if (summary_type === SUMMARY_TYPE.ADVANCED && summary_columns_option && summary_columns_option.length > 0) {
         convertedChart.column_groupby_multiple_numeric_column = true;
       }
-      return this.chartService.generatorStatistic(convertedChart);
+      return this.chartService.generatorChart(convertedChart);
     }
   }, {
     key: "convertChartBar",
@@ -121,7 +121,7 @@ var DashBoardService = /*#__PURE__*/function () {
           }).filter(Boolean);
         }
       }
-      return this.chartService.generatorStatistic(convertedChart);
+      return this.chartService.generatorChart(convertedChart);
     }
   }, {
     key: "convertChartLine",
@@ -145,7 +145,7 @@ var DashBoardService = /*#__PURE__*/function () {
           }).filter(Boolean);
         }
       }
-      return this.chartService.generatorStatistic(convertedChart);
+      return this.chartService.generatorChart(convertedChart);
     }
   }, {
     key: "mergeAdvancedStatistics",

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

@@ -5,8 +5,9 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { PureComponent } from 'react';
 import intl from 'react-intl-universal';
 import { 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 OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
   _inherits(OneDimensionTableNoNumericColumns, _PureComponent);
@@ -44,12 +45,10 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
       });
     };
     _this.renderHeader = function (_ref2) {
-      var table = _ref2.table;
+      var groupByColumn = _ref2.groupByColumn;
       var statItem = _this.props.statItem;
-      var groupby_column_key = statItem.groupby_column_key,
-        _statItem$display_tot = statItem.display_total,
+      var _statItem$display_tot = statItem.display_total,
         display_total = _statItem$display_tot === void 0 ? true : _statItem$display_tot;
-      var groupByColumn = TableUtils.getTableColumnByKey(table, groupby_column_key);
       var _ref3 = groupByColumn || {},
         groupName = _ref3.name;
       return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
@@ -59,7 +58,8 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL)))));
     };
     _this.renderRows = function (_ref4) {
-      var table = _ref4.table;
+      var table = _ref4.table,
+        groupByColumn = _ref4.groupByColumn;
       var _this$props2 = _this.props,
         pivotResult = _this$props2.pivotResult,
         statItem = _this$props2.statItem,
@@ -75,7 +75,7 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
       var isValidTColumnTotal = _this.props.isValidValue(columnTotal);
       var pivotColumnCells = [];
       return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map(function (rowItem, rowIdx) {
-        var name = rowItem.name,
+        var original_name = rowItem.original_name,
           total = rowItem.total,
           rows = rowItem.rows;
         var totalDisplayValue = getSummaryValueDisplayString(summaryColumn, total.total, summary_method);
@@ -85,7 +85,10 @@ var OneDimensionTableNoNumericColumns = /*#__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)), display_total && /*#__PURE__*/React.createElement("td", {
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: original_name,
+          column: groupByColumn
+        })), display_total && /*#__PURE__*/React.createElement("td", {
           className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
           title: isValidTotalDisplayValue ? totalDisplayValue : '',
           onClick: function onClick() {
@@ -114,17 +117,20 @@ var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
         textColor = _this$props3.textColor,
         statItem = _this$props3.statItem,
         getTableById = _this$props3.getTableById;
-      var table_id = statItem.table_id;
+      var table_id = statItem.table_id,
+        groupby_column_key = statItem.groupby_column_key;
       var table = getTableById(table_id);
+      var groupByColumn = groupby_column_key && TableUtils.getTableColumnByKey(table, 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'])
       }, this.renderHeader({
-        table: table
+        groupByColumn: groupByColumn
       }), this.renderRows({
-        table: table
+        table: table,
+        groupByColumn: groupByColumn
       }));
     }
   }]);

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

@@ -6,8 +6,9 @@ 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 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 OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent) {
   _inherits(OneDimensionTableWithNumericColumns, _PureComponent);
@@ -58,7 +59,8 @@ var OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent)
       })));
     };
     _this.renderRows = function (_ref4) {
-      var table = _ref4.table;
+      var table = _ref4.table,
+        groupbyColumn = _ref4.groupbyColumn;
       var _this$props2 = _this.props,
         pivotResult = _this$props2.pivotResult,
         statItem = _this$props2.statItem,
@@ -71,7 +73,7 @@ var OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent)
         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,
+        var original_name = rowItem.original_name,
           total = rowItem.total,
           rows = rowItem.rows;
         if (!Array.isArray(pivot_columns)) {
@@ -81,7 +83,10 @@ var OneDimensionTableWithNumericColumns = /*#__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(pivot_columns) && pivot_columns.map(function (columnMap, cellIdx) {
+        }, /*#__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;
           if (Array.isArray(rows) && rows.length > 0) {
@@ -155,7 +160,8 @@ var OneDimensionTableWithNumericColumns = /*#__PURE__*/function (_PureComponent)
         table: table,
         groupbyColumn: groupbyColumn
       }), this.renderRows({
-        table: table
+        table: table,
+        groupbyColumn: groupbyColumn
       }));
     }
   }]);

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
       }));
     }
   }]);

package/es/utils/collaborator.js

@@ -28,4 +28,13 @@ export var getKnownCreatorByEmail = function getKnownCreatorByEmail(collaborator
   creator = dtableCollaborators[email];
   if (creator) return creator;
   return null;
+};
+export var generateDefaultUser = function generateDefaultUser(name) {
+  if (!window || window.dtable) return {};
+  var mediaUrl = window.dtable.mediaUrl;
+  var defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  return {
+    name: name,
+    avatar_url: defaultAvatarUrl
+  };
 };

package/es/utils/index.js

@@ -20,7 +20,7 @@ export var isMobile = typeof window !== 'undefined' && (window.innerWidth < 768
 export { getClientCellValueDisplayString, getClientFormulaDisplayString } from './cell-format';
 export { hasOwnProperty, isEmptyObject, isSameObject } from './object';
 export { isCellValueChanged } from './cell-value';
-export { getKnownCreatorByEmail } from './collaborator';
+export { getKnownCreatorByEmail, generateDefaultUser } from './collaborator';
 export { getDateColumnFormat, getSelectColumnOptions } from './column';
 export { translateCalendar, getTodayDate } from './date-format';
 export { searchRows } from './search';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.0.5",
+  "version": "4.0.7",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",