dtable-statistic 4.0.6 → 4.0.8

package/es/stat-view/ring-chart.js

@@ -5,17 +5,14 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { formatPieChartData, getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { DEFAULT_ANNOTATION_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_TOTAL } from '../constants';
+import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
+import { DEFAULT_ANNOTATION_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, SUMMARY_TYPE, TITLE_TOTAL } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -61,14 +58,11 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       var _this$props2 = _this.props,
         getTableById = _this$props2.getTableById,
         statItem = _this$props2.statItem,
-        theme = _this$props2.theme,
-        isEnlarge = _this$props2.isEnlarge,
-        isPreview = _this$props2.isPreview,
         colorThemeName = _this$props2.colorThemeName;
-      var currentTheme = getCurrentTheme(colorThemeName);
       var summaryColumn = null;
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       var summary_type = statItem.summary_type,
+        summary_method = statItem.summary_method,
         summary_column_key = statItem.summary_column_key,
         table_id = statItem.table_id,
         show_legend = statItem.show_legend,
@@ -79,16 +73,14 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       var table = getTableById(table_id);
       if (summary_type !== SUMMARY_TYPE.COUNT) {
         summaryColumn = summary_column_key && TableUtils.getTableColumnByKey(table, summary_column_key);
-        columnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       _this.chart.coordinate('theta', {
         radius: isCreating ? 0.75 : 0.95,
         innerRadius: isCreating ? 0.6 : 0.7
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var themeColors = _this.getThemeColors();
       var newData = formatPieChartData(data, statItem, table, currentTheme);
       _this.chart.data(newData, {
         'name': {
@@ -153,10 +145,9 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
           nice: false
         }
       });
-      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', function (value, percent) {
-        var displayedValue = getNumberDisplayString(value, columnData);
+      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('formatted_value*percent', function (value, percent) {
         return {
-          content: _this.getLabel(displayedValue, percent)
+          content: _this.getLabel(value, percent)
         };
       }, {
         offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
@@ -166,20 +157,19 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
           shadowBlur: 2,
           shadowColor: 'rgba(0, 0, 0, .45)'
         }
-      }).tooltip('name*value*percent', function (name, value, percent) {
+      }).tooltip('name*formatted_value*percent', function (name, value, percent) {
         var title = name;
         if (!name || name === 'undefined') {
           title = intl.get(EMPTY_NAME);
         } else if (name === 'Others') {
           title = intl.get('Others');
         }
-        var displayedValue = getNumberDisplayString(value, columnData);
         return show_percent || display_label ? {
           name: title,
-          value: _this.getLabel(displayedValue, percent)
+          value: _this.getLabel(value, percent)
         } : {
           name: title,
-          value: displayedValue
+          value: value
         };
       }).state({
         active: {
@@ -199,13 +189,13 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       if (display_annotation == undefined || display_annotation) {
         _this.setAnnotation({
           name: intl.get(TITLE_TOTAL),
-          value: summaryColumn ? getNumberDisplayString(_this.sum, summaryColumn.data) : _this.sum
+          value: summaryColumn ? _this.getNumberDisplayString(_this.sum, summaryColumnData, summary_method) : _this.sum
         }, themeColors.labelColor);
         _this.chart.on('interval:mouseenter', function (evt) {
-          return _this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn);
+          return _this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData);
         });
         _this.chart.on('interval:mouseleave', function (evt) {
-          return _this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn);
+          return _this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData);
         });
       }
     };
@@ -239,11 +229,6 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       }
       return content;
     };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
-    };
     _this.getAnnotationFontSize = function () {
       var statItem = _this.props.statItem;
       var annotation_font_size = statItem.annotation_font_size;
@@ -254,7 +239,8 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         subFontSize: subFontSize
       };
     };
-    _this.setAnnotation = function (content, fontColor, summaryColumn) {
+    _this.setAnnotation = function (content, fontColor, summaryColumn, summaryColumnData) {
+      var summary_method = _this.props.statItem.summary_method;
       var name = content.name;
       if (!name || name === 'undefined') {
         name = intl.get(EMPTY_NAME);
@@ -276,7 +262,7 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: -20
       }).text({
         position: ['50%', '50%'],
-        content: summaryColumn ? getNumberDisplayString(content.value, summaryColumn.data) : content.value,
+        content: summaryColumn ? _this.getNumberDisplayString(content.value, summaryColumnData, summary_method) : content.value,
         style: {
           fontSize: mainFontSize,
           fill: fontColor,
@@ -285,18 +271,18 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: 20
       });
     };
-    _this.onEnterRingChart = function (ev, color, summaryColumn) {
+    _this.onEnterRingChart = function (ev, color, summaryColumn, summaryColumnData) {
       var item = ev.data.data;
       _this.chart.annotation().clear(true);
-      _this.setAnnotation(item, color, summaryColumn);
+      _this.setAnnotation(item, color, summaryColumn, summaryColumnData);
       _this.chart.render(true);
     };
-    _this.onLeaveRingChart = function (ev, color, summaryColumn) {
+    _this.onLeaveRingChart = function (ev, color, summaryColumn, summaryColumnData) {
       _this.chart.annotation().clear(true);
       _this.setAnnotation({
         name: intl.get(TITLE_TOTAL),
         value: _this.sum
-      }, color, summaryColumn);
+      }, color, summaryColumn, summaryColumnData);
       _this.chart.render(true);
     };
     _this.destroyChart = function () {
@@ -398,11 +384,7 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isCalculatingData = _this$state.isCalculatingData,
         showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },

package/es/stat-view/scatter-chart.js

@@ -10,14 +10,11 @@ import intl from 'react-intl-universal';
 import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
 import { getCurrentTheme } from '../utils/common-utils';
-import { EMPTY_NAME, LABEL_CONFIG_CHANGED, STAT_ITEM_THEME_COLORS } from '../constants';
+import { EMPTY_NAME, LABEL_CONFIG_CHANGED } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -127,8 +124,6 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
         getTableById = _this$props3.getTableById,
         isPreview = _this$props3.isPreview,
         statItem = _this$props3.statItem,
-        isEnlarge = _this$props3.isEnlarge,
-        theme = _this$props3.theme,
         colorThemeName = _this$props3.colorThemeName;
       var currentTheme = getCurrentTheme(colorThemeName);
       var table_id = statItem.table_id,
@@ -152,10 +147,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       _this.chart.on('element:click', function (e) {
         _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       _this.chart.axis('x_axis', {
         label: {
           style: {
@@ -245,10 +237,6 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       }
       if (!_this.chart) return;
       statItem = newStatItem || statItem;
-      var _this$props5 = _this.props,
-        isEnlarge = _this$props5.isEnlarge,
-        isPreview = _this$props5.isPreview,
-        theme = _this$props5.theme;
       var _statItem = statItem,
         table_id = _statItem.table_id,
         x_axis_column = _statItem.x_axis_column,
@@ -259,10 +247,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
         x_axis_label_position = _statItem.x_axis_label_position;
       var table = getTableById(table_id);
       var autoPadding = _this.chart.autoPadding;
-      var textColor = '#999999';
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        textColor = '#ffffff';
-      }
+      var textColor = _this.getAxisLabelColor();
       var xAxisID = "chart-x-axis-label_".concat(statItem._id);
       var chartContainer = _this.chart.getCanvas().get('container');
       var xLabel = chartContainer.querySelector("#".concat(xAxisID));
@@ -350,9 +335,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       if (show_y_axis_label) {
         style.paddingLeft = 38;
       }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref3) {
           return _this2.container = _ref3;
         },

package/es/stat-view/treemap-chart.js

@@ -14,7 +14,6 @@ import { getEllipsisText } from '@antv/g2/esm/util/text';
 import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart, registerGeometryLabelLayout } from '../custom-g2';
-import { Loading } from '../components';
 import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
 import { EMPTY_NAME, STATISTICS_COUNT_TYPE } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
@@ -215,14 +214,8 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
         domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
       chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', function (name, value, percent) {
@@ -302,9 +295,7 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
     value: function render() {
       var _this2 = this;
       var isCalculatingData = this.state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref3) {
           return _this2.container = _ref3;
         },

package/es/stat-view/trend-chart.js

@@ -7,15 +7,12 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, STAT_ITEM_THEME_COLORS } from '../constants';
+import { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, SUMMARY_METHOD_MAP } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func
@@ -116,8 +113,6 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       var _this$props3 = _this.props,
         isPreview = _this$props3.isPreview,
-        isEnlarge = _this$props3.isEnlarge,
-        theme = _this$props3.theme,
         statItem = _this$props3.statItem;
       if (isPreview) {
         _this.chart = new Chart({
@@ -134,13 +129,10 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       }
       var summary_method = statItem.summary_method;
       var latest = data && data.latest;
-      var content = summary_method === 'Distinct_values' ? latest : _this.formatData(latest);
+      var content = summary_method === SUMMARY_METHOD_MAP.Distinct_values ? latest : _this.formatData(latest);
       var fontSize = _this.getFontSize(content);
       var labelFontSize = fontSize - 32;
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       var labelContent = _this.createLabelContent(data, labelFontSize);
       _this.chart.annotation().html({
         position: ['50%', '50%'],
@@ -159,8 +151,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       if (summary_type !== STATISTICS_COUNT_TYPE.COUNT) {
         var table = getTableById(table_id);
         var selectedColumn = TableUtils.getTableColumnByKey(table, summary_column);
-        var formattedContent = getNumberDisplayString(data, selectedColumn.data || {});
-        return formattedContent;
+        return _this.getNumberDisplayString(data, selectedColumn.data || {});
       }
       var string = data + '';
       var isFloat = string.indexOf('.') > 0;
@@ -283,9 +274,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
     value: function render() {
       var _this2 = this;
       var isCalculatingData = this.state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref4) {
           return _this2.container = _ref4;
         },

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

@@ -6,11 +6,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set/lib/index';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, STAT_ITEM_THEME_COLORS, STAT_TYPE, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
+import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, STAT_TYPE, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
 var WIDTH = 798;
 var HEIGHT = 394;
 var WorldMap = /*#__PURE__*/function (_BaseChart) {
@@ -44,7 +43,8 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
               name_cn: name_cn,
               name: name,
               nameType: nameType,
-              value: value || 0
+              value: value || 0,
+              formatted_value: item.formatted_value
             });
             if (type === STAT_TYPE.WORLD_MAP_BUBBLE) {
               sum += item.value;
@@ -60,10 +60,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
     _this.renderCommonMap = function (data) {
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem,
-        theme = _this$props.theme,
-        isEnlarge = _this$props.isEnlarge,
-        isPreview = _this$props.isPreview;
+        statItem = _this$props.statItem;
       var userDataView = _this.dataSet.getView('statisticViewModel').source(data).transform({
         geoDataView: _this.dataSet.getView('mapDataModel'),
         field: 'name',
@@ -74,17 +71,18 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         table_id = _this$props$statItem.table_id,
         data_color = _this$props$statItem.data_color,
         summary_type = _this$props$statItem.summary_type,
+        summary_method = _this$props$statItem.summary_method,
         summary_column = _this$props$statItem.summary_column;
       var currentColorOption = COLOR_OPTIONS.filter(function (item) {
         return item.name == data_color;
       })[0] || COLOR_OPTIONS[0];
       var exampleColors = currentColorOption.exampleColors,
         highlightedBorderColor = currentColorOption.highlightedBorderColor;
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
         var table = getTableById(table_id);
         var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       _this.statisticView = _this.chart.createView();
       _this.statisticView.data(userDataView.rows);
@@ -99,17 +97,14 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
             stroke: highlightedBorderColor
           }
         }
-      }).tooltip('name*value*color*nameType*name_cn', function (name, value, color, nameType, name_cn) {
+      }).tooltip('name*formatted_value*color*nameType*name_cn', function (name, value, color, nameType, name_cn) {
         return {
           name: nameType === 'en' ? name : name_cn,
-          value: getNumberDisplayString(value, columnData),
-          color: color
+          color: color,
+          value: value
         };
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       var legendDirection = statItem.legend_direction || 'vertical';
       var size = statItem.legend_size || 1;
       _this.chart.legend({
@@ -126,7 +121,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
           formatter: function formatter(value) {
-            return getNumberDisplayString(value, columnData);
+            return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
         handler: {
@@ -142,9 +137,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       var _this$props2 = _this.props,
         getTableById = _this$props2.getTableById,
         statItem = _this$props2.statItem,
-        isPreview = _this$props2.isPreview,
-        isEnlarge = _this$props2.isEnlarge,
-        theme = _this$props2.theme;
+        isPreview = _this$props2.isPreview;
       var userDv = _this.dataSet.createView().source(data).transform({
         geoDataView: _this.dataSet.getView('mapDataModel'),
         field: 'name',
@@ -154,12 +147,13 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       var _this$props$statItem2 = _this.props.statItem,
         table_id = _this$props$statItem2.table_id,
         summary_type = _this$props$statItem2.summary_type,
+        summary_method = _this$props$statItem2.summary_method,
         summary_column = _this$props$statItem2.summary_column;
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
         var table = getTableById(table_id);
         var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       _this.statisticView = _this.chart.createView();
       _this.statisticView.data(userDv.rows);
@@ -170,11 +164,11 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           size = 60;
         }
         return size;
-      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*value*color', function (name, value, color) {
+      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*formatted_value*color', function (name, value, color) {
         return {
           name: name,
-          value: getNumberDisplayString(value, columnData),
-          color: color
+          color: color,
+          value: value
         };
       }).style({
         fillOpacity: 0.6,
@@ -188,10 +182,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       var legendDirection = statItem.legend_direction || 'vertical';
       var size = statItem.legend_size || 1;
       _this.chart.legend({
@@ -207,7 +198,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
           formatter: function formatter(value) {
-            return getNumberDisplayString(value, columnData);
+            return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
         handler: {
@@ -286,14 +277,8 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: "<div class=\"g2-tooltip-content\"><div class=\"tooltip-name\">{name}<div><div class=\"tooltip-item\">".concat(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
         domStyles: {
-          'g2-tooltip': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
       _this.chart.scale({
@@ -351,14 +336,15 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           isDataLoaded: true
         });
         if (!data) return;
+        _this2.geoData = data;
         _this2.initStatisticContext(data);
         if (_this2.container) {
-          chartCalculator.calculate(statItem).then(function (data) {
+          chartCalculator.calculate(statItem).then(function (calculation) {
             _this2.setState({
               isCalculatingData: false
             });
-            _this2.calculateData = data;
-            _this2.updateStatisticData(_this2.fixData(data));
+            _this2.calculateData = calculation;
+            _this2.updateStatisticData(_this2.fixData(calculation));
           });
         }
       });
@@ -389,9 +375,16 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
           isCalculatingData: true
         });
         if (this.container) {
-          chartCalculator.calculate(statItem).then(function (data) {
-            _this3.calculateData = data;
-            _this3.updateStatisticData(_this3.fixData(data));
+          if (this.chart) {
+            this.chart.destroy();
+            this.initStatisticContext(this.geoData);
+          }
+          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);
@@ -419,9 +412,7 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isDataLoaded = _this$state.isDataLoaded,
         isCalculatingData = _this$state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, !isDataLoaded && isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (!isDataLoaded || isCalculatingData) && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },
@@ -433,8 +424,6 @@ var WorldMap = /*#__PURE__*/function (_BaseChart) {
 }(BaseChart);
 WorldMap.propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,

package/es/tabs/tab.js

@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import { ModalPortal } from '../components';
 import { isMobile } from '../utils';
+import { THEME_NAME_MAP } from '../constants';
 import styles from './statistic-tabs.module.css';
 var DashBoardTab = /*#__PURE__*/function (_Component) {
   _inherits(DashBoardTab, _Component);
@@ -141,7 +142,7 @@ var DashBoardTab = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("i", {
         className: "".concat(styles['icon'], " dtable-font dtable-icon-drop-down")
       }), isShowViewDropdown && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(theme === 'dark' ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
+        className: "".concat(theme === THEME_NAME_MAP.DARK ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
         style: _objectSpread(_objectSpread({}, dropdownMenuPosition), {}, {
           zIndex: 1500
         })

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/common-utils.js

@@ -134,27 +134,45 @@ export var isArrayCellValue = function isArrayCellValue(column) {
 
 export var getSummaryResult = function getSummaryResult(results, summaryMethod) {
   var precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 8;
+  var numericResults = Array.isArray(results) && results.length > 0 ? results.filter(function (res) {
+    return isNumber(res);
+  }) : [];
   switch (summaryMethod) {
     case SUMMARY_METHOD_MAP.Max:
       {
-        return getMax(results);
+        return getMax(numericResults);
       }
     case SUMMARY_METHOD_MAP.Min:
       {
-        return getMin(results);
+        return getMin(numericResults);
       }
     case SUMMARY_METHOD_MAP.Sum:
       {
-        return getSum(results, precision);
+        return getSum(numericResults, precision);
       }
     case SUMMARY_METHOD_MAP.Mean:
       {
-        return getMean(results, precision);
+        return getMean(numericResults, precision);
       }
     case SUMMARY_METHOD_MAP.Distinct_values:
       {
-        var result = new Set(results).size;
-        return result;
+        var count = 0;
+        var existMap = {};
+        Array.isArray(results) && results.forEach(function (resNum) {
+          var num = resNum;
+          if (!num) {
+            if (num === 0) {
+              num = '0';
+            } else {
+              num = !!num;
+            }
+          }
+          if (!existMap[num]) {
+            existMap[num] = true;
+            count++;
+          }
+        });
+        return count;
       }
     default:
       {