dtable-statistic 4.1.5 → 4.1.7

package/es/assets/css/dashboard.css

@@ -161,6 +161,10 @@
   height: 100%;
 }
 
+.statistic-chart-container.map {
+  padding: 20px;
+}
+
 .statistic-chart-loading-container {
   position: absolute;
   width: 100%;

package/es/calculator/basic-chart-calculator.js

@@ -438,7 +438,7 @@ var BasicChartCalculator = /*#__PURE__*/function (_BaseCalculator) {
                   }
                   var color;
                   if (columnGroupbyColumn.type === CellType.SINGLE_SELECT) {
-                    var tempValue = StatUtils.getGroupLabel(item[columnGroupbyColumn.key], {}, columnGroupbyColumn, columnGroupbyDateGranularity, columnGroupbyGeolocationGranularity, _this2.value);
+                    var tempValue = StatUtils.getGroupLabel(item[columnGroupbyColumn.key], item, columnGroupbyColumn, columnGroupbyDateGranularity, columnGroupbyGeolocationGranularity, _this2.value);
                     color = getColorFromSingleSelectColumn(columnGroupbyColumn, tempValue);
                   }
                   var groupLabel = _this2.getLabel(columnGroupbyColumn, columnGroupbyColumnName, item, columnGroupbyDateGranularity, columnGroupbyGeolocationGranularity);
@@ -564,7 +564,7 @@ var BasicChartCalculator = /*#__PURE__*/function (_BaseCalculator) {
         label = item[groupName];
       } else {
         var currentGroupLabel = item[groupColumn.key];
-        label = StatUtils.getGroupLabel(currentGroupLabel, {}, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
+        label = StatUtils.getGroupLabel(currentGroupLabel, item, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
         label = getFormattedLabel(groupColumn, label, this.value.collaborators);
       }
       return label;

package/es/calculator/combination-calculator.js

@@ -310,7 +310,7 @@ var CombinationCalculator = /*#__PURE__*/function (_BaseCalculator) {
         label = item[groupName];
       } else {
         var currentGroupLabel = item[groupColumn.key];
-        label = StatUtils.getGroupLabel(currentGroupLabel, {}, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
+        label = StatUtils.getGroupLabel(currentGroupLabel, item, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
         label = getFormattedLabel(groupColumn, label);
       }
       return label;

package/es/calculator/compare-bar-calculator.js

@@ -147,7 +147,7 @@ var CompareBarCalculator = /*#__PURE__*/function (_BaseCalculator) {
                 valueKey = isAdvanced ? "".concat(method, "(").concat(summaryColumnName, ")") : "".concat(method, "(").concat(selectedColumn.name, ")");
                 result.data.results.forEach(function (item) {
                   var name = item[groupName];
-                  var label = StatUtils.getGroupLabel(name, {}, selectedColumn, x_axis_date_granularity, '', _this.value);
+                  var label = StatUtils.getGroupLabel(name, item, selectedColumn, x_axis_date_granularity, '', _this.value);
                   var value = item[valueKey];
                   if (name >= x_axis_date_range_start && name <= x_axis_date_range_end) {
                     var currentValue = dateRangeResult.get(label);

package/es/calculator/completeness-calculator.js

@@ -150,7 +150,7 @@ var CompletenessCalculator = /*#__PURE__*/function (_BaseCalculator) {
                   var name = item[selectedColumn.key];
                   var label;
                   if (name || Number.isFinite(name)) {
-                    label = StatUtils.getGroupLabel(name, {}, selectedColumn, '', '', _this.value);
+                    label = StatUtils.getGroupLabel(name, item, selectedColumn, '', '', _this.value);
                     if (isColumnDataAsAnArray) {
                       label = label[0];
                     }
@@ -226,7 +226,7 @@ var CompletenessCalculator = /*#__PURE__*/function (_BaseCalculator) {
 
                   // get and format name
                   if (name || Number.isFinite(name)) {
-                    label = StatUtils.getGroupLabel(name, {}, selectedColumn, '', '', _this.value);
+                    label = StatUtils.getGroupLabel(name, item, selectedColumn, '', '', _this.value);
                     if (isColumnDataAsAnArray) {
                       label = label[0];
                     }
@@ -236,7 +236,7 @@ var CompletenessCalculator = /*#__PURE__*/function (_BaseCalculator) {
                   // get and format group name
                   if (!isTimeGroupColumn) {
                     groupLabel = item[groupColumn.key];
-                    groupLabel = StatUtils.getGroupLabel(groupLabel, {}, groupColumn, '', '', _this.value);
+                    groupLabel = StatUtils.getGroupLabel(groupLabel, item, groupColumn, '', '', _this.value);
                     if (groupLabel && isGroupColumnDataAsAnArray) {
                       groupLabel = groupLabel[0];
                     }

package/es/calculator/mirror-calculator.js

@@ -127,7 +127,7 @@ var MirrorCalculator = /*#__PURE__*/function (_BaseCalculator) {
                 _context2.next = 22;
                 break;
               case 21:
-                sqlString = "select `".concat(columnName, "`, `").concat(groupColumnName, "`, ").concat(method, "(").concat(columnName, ") from `").concat(selectedTable.name, "` ").concat(sqlCondition, " group by `").concat(columnName, "`, `").concat(groupColumnName, "` limit 5000");
+                sqlString = "select `".concat(columnName, "`, `").concat(groupColumnName, "`, ").concat(method, "(`").concat(columnName, "`) from `").concat(selectedTable.name, "` ").concat(sqlCondition, " group by `").concat(columnName, "`, `").concat(groupColumnName, "` limit 5000");
               case 22:
                 _context2.next = 24;
                 return this.sqlQuery(sqlString);
@@ -152,7 +152,7 @@ var MirrorCalculator = /*#__PURE__*/function (_BaseCalculator) {
                   groupData0 = groupData[0] || {};
                   groupData1 = groupData[1] || {};
                   data.results.forEach(function (item) {
-                    var label = StatUtils.getGroupLabel(item[column], {}, selectedColumn, '', '', _this.value);
+                    var label = StatUtils.getGroupLabel(item[column], item, selectedColumn, '', '', _this.value);
                     var groupValue = item[group_column];
                     var equal2GroupData0 = groupData0.id === groupValue;
                     var equal2GroupData1 = groupData1.id === groupValue;

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

@@ -369,7 +369,8 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
       var groupbyColumn = columnMap.groupbyColumn;
       var summary_type = chart.summary_type,
         groupby_geolocation_granularity = chart.groupby_geolocation_granularity,
-        groupby_date_granularity = chart.groupby_date_granularity;
+        groupby_date_granularity = chart.groupby_date_granularity,
+        groupby_include_empty_cells = chart.groupby_include_empty_cells;
       var pivot_columns = [];
       var pivot_rows = [];
       var isCount = summary_type === SUMMARY_TYPE.COUNT;
@@ -378,11 +379,14 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
           sqlSummaryColumnKey = statisticSQLMap.sqlSummaryColumnKey;
         var _allTotal = 0;
         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);
+          if (!groupby_include_empty_cells && !name) {
+            return;
+          }
+          var total = row[sqlSummaryColumnKey] || 0;
+          _allTotal += total;
           pivot_rows.push({
             name: name,
             original_name: original_name,
@@ -653,7 +657,7 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
         return statRow[groupName];
       }
       var currentGroupLabel = statRow[groupColumn.key];
-      return StatUtils.getGroupLabel(currentGroupLabel, {}, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
+      return StatUtils.getGroupLabel(currentGroupLabel, statRow, groupColumn, groupby_date_granularity, groupby_geolocation_granularity, this.value);
     }
   }, {
     key: "getOriginalName",
@@ -663,7 +667,7 @@ var PivotTableCalculator = /*#__PURE__*/function (_BaseCalculator) {
         return originalLabel;
       }
       var columnType = groupColumn.type;
-      if (columnType === CellType.MULTIPLE_SELECT || columnType === CellType.COLLABORATOR || columnType === CellType.LINK) {
+      if (columnType === CellType.MULTIPLE_SELECT || columnType === CellType.COLLABORATOR) {
         return Array.isArray(originalLabel) ? originalLabel[0] : null;
       }
       return originalLabel;

package/es/calculator/scatter-calculator.js

@@ -141,7 +141,7 @@ var ScatterCalculator = /*#__PURE__*/function (_BaseCalculator) {
     key: "getColumnValue",
     value: function getColumnValue(data, column) {
       var tempValue = data[column.key];
-      var value = StatUtils.getGroupLabel(tempValue, {}, column, DATE_GRANULARITY.DAY, '', this.value);
+      var value = StatUtils.getGroupLabel(tempValue, data, column, DATE_GRANULARITY.DAY, '', this.value);
       return getFormattedLabel(column, value, this.value.collaborators);
     }
   }]);

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

@@ -114,3 +114,7 @@
 .statistic-records-dialog .statistic-records-container .records-list .records-container {
   height: auto;
 }
+
+.statistic-records-dialog .row-card-item-content .grid-cell-type-button .grid-cell-type-button-inner {
+  justify-content: flex-start;
+}

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

@@ -1,19 +1,19 @@
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 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 { Modal, ModalBody } from 'reactstrap';
-import { CellType, Views } from 'dtable-store';
+import { Views } from 'dtable-store';
 import dtableDbAPI from '../../../api/dtable-db-api';
 import { DtableSearchInput, Loading } from '../../index';
 import { searchRows } from '../../../utils';
 import { getSqlString } from '../../../utils/sql-utils';
 import { CommonEventTypes } from '../../../constants';
 import './index.css';
-export var UNSHOWN_COLUMN_TYPES = [CellType.LINK, CellType.LONG_TEXT, CellType.FORMULA, CellType.LINK_FORMULA];
 var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
   _inherits(StatisticRecordDialog, _React$Component);
   var _super = _createSuper(StatisticRecordDialog);
@@ -37,6 +37,8 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
       _this.table = getTableById(table_id);
       _this.view = Views.getViewById(_this.table.views, view_id);
       _this.isArchiveView = Views.isArchiveView(_this.view);
+      _this.unShowColumnKeyList = _this.getUnShowColumnKeyList(_this.view);
+      _this.renderedColumns = _this.getRenderedColumns(_this.table);
       if (_this.isArchiveView || !records) {
         var sqlString = getSqlString(chart, statisticRecord, {
           isColumn: isColumn,
@@ -60,6 +62,7 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
       drilledRows.forEach(function (row) {
         idRowMap[row._id] = row;
       });
+      _this.initComputedProperties(drilledRows);
       _this.setState({
         loading: false,
         title: name,
@@ -68,6 +71,25 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
         searchedRowsIds: searchedRowsIds
       });
     };
+    _this.initComputedProperties = function (drilledRows) {
+      if (_this.isArchiveView) {
+        var formulaColumns = Views.getFormulaColumnsContainLinks(_this.table);
+        if (formulaColumns.length === 0) return {};
+        var _formulaRows = {};
+        drilledRows.forEach(function (row) {
+          var rowId = row._id;
+          _formulaRows[rowId] = {};
+          formulaColumns.forEach(function (column) {
+            return _formulaRows[rowId][column.key] = row[column.key];
+          });
+        });
+        _this.formulaRows = _formulaRows;
+        return;
+      }
+      var _this$getTableViewFor = _this.getTableViewFormulaRows(),
+        formulaRows = _this$getTableViewFor.formulaRows;
+      _this.formulaRows = formulaRows;
+    };
     _this.onSearch = function (searchVal) {
       var rows = _this.state.rows;
       var searchedRowsIds = _this.getSearchedRows(rows, searchVal);
@@ -176,22 +198,49 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
         searchedRowsIds: updatedSearchedRowsIds
       });
     };
+    _this.getUnShowColumnKeyList = function (view) {
+      var firstColumnKey = '0000';
+      var _view$hidden_columns = view.hidden_columns,
+        hidden_columns = _view$hidden_columns === void 0 ? [] : _view$hidden_columns;
+      return [firstColumnKey].concat(_toConsumableArray(hidden_columns));
+    };
+    _this.getRenderedColumns = function (table) {
+      var columns = table.columns;
+      return columns.filter(function (column) {
+        return !_this.unShowColumnKeyList.includes(column.key);
+      });
+    };
+    _this.getTableViewFormulaRows = function () {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+        table = _assertThisInitialize.table,
+        view = _assertThisInitialize.view;
+      var value = _this.props.getValue();
+      if (view.formula_rows && Object.keys(view.formula_rows).length > 0) {
+        return {
+          formulaRows: view.formula_rows
+        };
+      }
+      Views.cacheFormulaResults(table.rows, {
+        targetViewId: view._id,
+        table: table,
+        value: value
+      });
+      return {
+        formulaRows: view.formula_rows
+      };
+    };
     _this.renderRowsCards = function () {
       var searchedRowsIds = _this.state.searchedRowsIds;
       var searchedRows = _this.getRowsByIds(searchedRowsIds);
       if (searchedRows.length === 0) return null;
-      var unShowColumnKeyList = ['0000'];
-      var allColumns = _this.table.columns;
-      var renderedColumns = allColumns.filter(function (column) {
-        return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
-      });
       if (!window.app || !window.app.renderRowsCards) return null;
       return window.app.renderRowsCards({
         table: _this.table,
-        renderedColumns: renderedColumns,
-        unShowColumnKeyList: unShowColumnKeyList,
+        renderedColumns: _this.renderedColumns,
+        unShowColumnKeyList: _this.unShowColumnKeyList,
         isShowRowCardHeader: true,
-        columns: allColumns,
+        formulaRows: _this.formulaRows,
+        columns: _this.renderedColumns,
         rows: searchedRows,
         rowCardType: 'statistic'
       });
@@ -208,6 +257,9 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     _this.view = null;
     _this.isArchiveView = false;
     _this.valueChanged = false;
+    _this.renderedColumns = [];
+    _this.formulaRows = null;
+    _this.unShowColumnKeyList = null;
     return _this;
   }
   _createClass(StatisticRecordDialog, [{

package/es/custom-g2.js

@@ -1,5 +1,6 @@
 // register theme
 import * as CanvasEngine from '@antv/g-canvas/esm/index';
+// import * as SvgEngine from '@antv/g-svg/esm/index';
 import Area from '@antv/g2/esm/geometry/area';
 import Edge from '@antv/g2/esm/geometry/edge';
 import HeatMap from '@antv/g2/esm/geometry/heatmap';
@@ -96,6 +97,7 @@ export { getRectWithCornerRadius } from '@antv/g2/esm/geometry/shape/interval/ut
 
 // register G renderer
 registerEngine('canvas', CanvasEngine);
+// registerEngine('svg', SvgEngine);
 
 // register internal G2 geometry
 registerGeometry('Polygon', Polygon);

package/es/dashboard.js

@@ -378,6 +378,9 @@ var DashBoard = /*#__PURE__*/function (_Component) {
     _this.getViews = function (table) {
       return table.views;
     };
+    _this.getValue = function () {
+      return _this.value;
+    };
     _this.isTableReadOnly = function () {
       if (window.dtable.modulePermission) {
         return window.dtable.modulePermission.isTableReadOnly;
@@ -484,6 +487,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         getTableById: this.getTableById,
         getTables: this.getTables,
         getViews: this.getViews,
+        getValue: this.getValue,
         queryMapJson: this.queryMapJson,
         getInitChart: this.getInitChart,
         getConvertedChart: this.getConvertedChart,

package/es/desktop-dashboard.js

@@ -145,6 +145,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props4 = this.props,
         getTableById = _this$props4.getTableById,
+        getValue = _this$props4.getValue,
         isTableReadOnly = _this$props4.isTableReadOnly,
         dtableChangedTime = _this$props4.dtableChangedTime,
         colorThemeName = _this$props4.colorThemeName,
@@ -271,6 +272,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         eventBus: this.props.eventBus,
         chartRecordsParams: chartRecordsParams,
         getTableById: getTableById,
+        getValue: getValue,
         toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
       }));
     }

package/es/stat-view/map.js

@@ -34,10 +34,6 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           isCalculatingData: false
         });
         _this.updateStatisticData(_this.fixData(statData));
-        if (_this.props.isPreview) {
-          var canvasSize = _this.getCanvasSize();
-          _this.chart.changeSize(canvasSize.w, canvasSize.h);
-        }
       });
     };
     _this.rerenderChart = function () {
@@ -246,22 +242,24 @@ var Map = /*#__PURE__*/function (_BaseChart) {
       _this.statisticView.interaction('element-active');
       _this.statisticView.render();
     };
-    _this.getCanvasSize = function () {
+    _this.getSize = function () {
       var statItem = _this.props.statItem;
       var map_level = statItem.map_level,
         map_location = statItem.map_location;
-      var maxWidth = _this.container.clientWidth;
-      var maxHeight = _this.container.clientHeight;
+      var containerWidth = _this.container.clientWidth - 40; // 40: padding
+      var containerHeight = _this.container.clientHeight - 40;
       var _getRegionScaleOffset = getRegionScaleOffsets(map_level, map_location),
         scale_w = _getRegionScaleOffset.scale_w,
         scale_h = _getRegionScaleOffset.scale_h;
-      var h = maxHeight;
+      var h = containerHeight;
       var w = h * (scale_w / scale_h);
-      if (w > maxWidth) {
-        w = maxWidth;
+      if (w > containerWidth) {
+        w = containerWidth;
         h = w * (scale_h / scale_w);
       }
       return {
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
         w: w,
         h: h
       };
@@ -269,13 +267,19 @@ var Map = /*#__PURE__*/function (_BaseChart) {
     _this.initStatisticContext = function (geolocation) {
       _this.mapData = geolocation;
       if (!_this.container) return;
+
       // create chart
-      var canvasSize = _this.getCanvasSize();
+      var _this$getSize = _this.getSize(),
+        containerWidth = _this$getSize.containerWidth,
+        containerHeight = _this$getSize.containerHeight,
+        mapWidth = _this$getSize.w;
+      var horizontalPadding = (containerWidth - mapWidth) / 4;
+      var leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
       _this.chart = new Chart({
         container: _this.container,
-        width: canvasSize.w,
-        height: canvasSize.h,
-        padding: [20, 20]
+        width: containerWidth,
+        height: containerHeight,
+        padding: [0, horizontalPadding, 0, leftPadding]
       });
       _this.chart.on('element:click', function (e) {
         var statItem = _this.props.statItem;
@@ -401,10 +405,6 @@ var Map = /*#__PURE__*/function (_BaseChart) {
         }
       } else {
         this.updateStatisticData(this.fixData(this.calculateData));
-        if (this.props.isPreview) {
-          var canvasSize = this.getCanvasSize();
-          this.chart.changeSize(canvasSize.w, canvasSize.h);
-        }
       }
     }
   }, {
@@ -424,7 +424,7 @@ var Map = /*#__PURE__*/function (_BaseChart) {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },
-        className: "statistic-chart-container d-flex justify-content-around align-items-center w-100 h-100"
+        className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
       }));
     }
   }]);

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

@@ -99,9 +99,12 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
           }
         case CellType.LINK:
           {
-            var _displayValue = getClientFormulaDisplayString([value], data, {
+            var _displayValue = getClientFormulaDisplayString(Array.isArray(value) ? value : [value], data, {
               collaborators: collaborators
             }) || null;
+            if (!_displayValue) {
+              break;
+            }
             displayName = /*#__PURE__*/React.createElement("div", {
               title: _displayValue,
               "aria-label": _displayValue
@@ -177,7 +180,10 @@ var PivotTableDisplayName = /*#__PURE__*/function (_React$Component) {
       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), ")"));
+      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);
     }
   }]);

package/es/stat-view/world-map.js

@@ -20,6 +20,11 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
     var _this;
     _classCallCheck(this, WorldMap);
     _this = _super.call(this, props);
+    _this.rerenderChart = function () {
+      if (!_this.chart) return;
+      _this.chart.destroy();
+      _this.initStatisticContext(_this.geoData);
+    };
     _this.fixData = function (statisticData) {
       if (!statisticData) return [];
       var statisticNewData = [];
@@ -225,16 +230,18 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       }
       _this.chart.render();
     };
-    _this.getCanvasSize = function () {
-      var maxWidth = _this.container.clientWidth;
-      var maxHeight = _this.container.clientHeight;
-      var h = maxHeight;
+    _this.getSize = function () {
+      var containerWidth = _this.container.clientWidth - 40; // 40: padding
+      var containerHeight = _this.container.clientHeight - 40;
+      var h = containerHeight;
       var w = h * (WIDTH / HEIGHT);
-      if (w > maxWidth) {
-        w = maxWidth;
+      if (w > containerWidth) {
+        w = containerWidth;
         h = w * (HEIGHT / WIDTH);
       }
       return {
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
         w: w,
         h: h
       };
@@ -246,13 +253,19 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         _this.countryMap.set(item.properties.name_cn, item.properties.name);
       });
       if (!_this.container) return;
+
       // create chart
-      var canvasSize = _this.getCanvasSize();
+      var _this$getSize = _this.getSize(),
+        containerWidth = _this$getSize.containerWidth,
+        containerHeight = _this$getSize.containerHeight,
+        mapWidth = _this$getSize.w;
+      var horizontalPadding = (containerWidth - mapWidth) / 4;
+      var leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
       _this.chart = new Chart({
         container: _this.container,
-        width: canvasSize.w,
-        height: canvasSize.h,
-        padding: [20, 20]
+        width: containerWidth,
+        height: containerHeight,
+        padding: [0, horizontalPadding, 0, leftPadding]
       });
       _this.chart.on('element:click', function (e) {
         var statItem = _this.props.statItem;
@@ -371,28 +384,20 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           isCalculatingData: true
         });
         if (this.container) {
-          if (this.chart) {
-            this.chart.destroy();
-            this.initStatisticContext(this.geoData);
-          }
+          this.rerenderChart();
           chartCalculator.calculate(statItem).then(function (calculation) {
             _this3.setState({
               isCalculatingData: false
             });
             _this3.calculateData = calculation;
             _this3.updateStatisticData(_this3.fixData(calculation));
-            if (_this3.props.isPreview) {
-              var canvasSize = _this3.getCanvasSize();
-              _this3.chart.changeSize(canvasSize.w, canvasSize.h);
-            }
           });
         }
       } else {
-        this.updateStatisticData(this.fixData(this.calculateData));
         if (this.props.isPreview) {
-          var canvasSize = this.getCanvasSize();
-          this.chart.changeSize(canvasSize.w, canvasSize.h);
+          this.rerenderChart();
         }
+        this.updateStatisticData(this.fixData(this.calculateData));
       }
     }
   }, {
@@ -412,7 +417,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },
-        className: "statistic-chart-container d-flex justify-content-around align-items-center w-100 h-100"
+        className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
       }));
     }
   }]);

package/es/utils/column-utils.js

@@ -1,4 +1,4 @@
-import { CellType, isDateColumn, FORMULA_RESULT_TYPE, FORMULA_COLUMN_TYPES } from 'dtable-store';
+import { CellType, isDateColumn, FORMULA_RESULT_TYPE, FORMULA_COLUMN_TYPES, Views } from 'dtable-store';
 import { MIRROR_COLUMN_LIST } from '../constants';
 export function getColorFromSingleSelectColumn(column, target) {
   var columnType = column.type,

package/es/utils/common-utils.js

@@ -220,13 +220,18 @@ var getPieColor = function getPieColor(color_option, column, index, data, curren
       return selectedItem.color || '#dbdbdb';
     }
   } else {
-    var newIndex = String(index).at(-1);
-    return colors[newIndex];
+    var sIndex = String(index);
+    var colorIndex = sIndex.charAt(sIndex.length - 1);
+    return colors[colorIndex];
   }
 };
 export function formatPieChartData(data, statItem, table, currentTheme) {
   var groupby_column_key = statItem.groupby_column_key,
-    color_option = statItem.color_option;
+    color_option = statItem.color_option,
+    summary_column_key = statItem.summary_column_key,
+    summaryMethod = statItem.summary_method,
+    summary_type = statItem.summary_type;
+  var isAdvanced = summary_type === 'advanced';
   var column = TableUtils.getTableColumnByKey(table, groupby_column_key);
   var sum = data.reduce(function (total, currentValue) {
     return total += currentValue.value;
@@ -256,6 +261,11 @@ export function formatPieChartData(data, statItem, table, currentTheme) {
     var filteredSum = filteredItems.reduce(function (total, currentValue) {
       return total += currentValue.value;
     }, 0);
+    var formattedValueSum = filteredSum;
+    if (isAdvanced) {
+      var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
+      formattedValueSum = StatUtils.getFormattedValue(filteredSum, summaryColumn, summaryMethod);
+    }
     var original_name_list = [];
     var name_list = [];
     var rows = [];
@@ -276,6 +286,7 @@ export function formatPieChartData(data, statItem, table, currentTheme) {
       original_name_list: original_name_list,
       name: intl.get('Others'),
       value: filteredSum,
+      formatted_value: formattedValueSum,
       color: '#dbdbdb',
       original_name: 'Others',
       percent: String(Number.parseFloat(filteredSum / sum * 100).toFixed(1)) + '%'

package/es/utils/row-utils.js

@@ -64,7 +64,7 @@ export var getFormattedLabel = function getFormattedLabel(column, name, collabor
       }
     }
   } else if (columnType === CellType.LINK) {
-    return getClientFormulaDisplayString([name], columnData, {
+    return getClientFormulaDisplayString(Array.isArray(name) ? name : [name], columnData, {
       collaborators: collaborators
     });
   } else if (columnType === CellType.CHECKBOX) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.1.5",
+  "version": "4.1.7",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",
@@ -12,7 +12,7 @@
     "@seafile/seafile-calendar": "0.0.24",
     "comlink": "^4.3.1",
     "dayjs": "1.10.7",
-    "dtable-store": "4.1.2",
+    "dtable-store": "4.1.5",
     "dtable-web-api": "4.0.11",
     "glamor": "^2.20.40",
     "html2canvas": "^1.4.1",