dtable-statistic 4.0.7 → 4.0.8

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

@@ -5,18 +5,15 @@ 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 { getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { getChartDisplayLabels, getChartGroups } from '../utils/basic-chart-utils';
-import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_CONFIG_CHANGED, NO_STATISTIC_RESULTS, STATISTICS_COUNT_SHOW, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_AMOUNT, USEABLE_COLOR_TYPES } from '../constants';
+import { getCurrentTheme } from '../utils/common-utils';
+import { getChartGroups } from '../utils/basic-chart-utils';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_CONFIG_CHANGED, STATISTICS_COUNT_SHOW, SUMMARY_TYPE, TITLE_AMOUNT, USEABLE_COLOR_TYPES } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -34,29 +31,8 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        isPreview = _this$props.isPreview,
         statItem = _this$props.statItem,
-        isEnlarge = _this$props.isEnlarge,
-        theme = _this$props.theme,
         colorThemeName = _this$props.colorThemeName;
-      var currentTheme = getCurrentTheme(colorThemeName);
-      if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true
-        });
-      } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          height: 400,
-          width: 700
-        });
-      }
-      _this.chart.on('element:click', function (e) {
-        if (e.data && e.data.data) {
-          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
-        }
-      });
       var table_id = statItem.table_id,
         summary_type = statItem.summary_type,
         y_axis_column_key = statItem.y_axis_column_key,
@@ -64,20 +40,31 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
         summary_method = statItem.summary_method,
         y_axis_summary_method = statItem.y_axis_summary_method,
         column_groupby_column_key = statItem.column_groupby_column_key,
-        display_data = statItem.display_data,
-        y_axis_auto_range = statItem.y_axis_auto_range,
-        y_axis_min = statItem.y_axis_min,
-        y_axis_max = statItem.y_axis_max,
-        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
-        color_option = statItem.color_option;
-      if (!summary_type && y_axis_summary_type) {
-        summary_type = y_axis_summary_type;
+        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column;
+      _this.initChartHandler();
+      _this.chart.on('element:click', function (e) {
+        if (e.data && e.data.data) {
+          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+        }
+      });
+      var summaryType = summary_type;
+      var summaryMethod = summary_method;
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (!summaryType && y_axis_summary_type) {
+        summaryType = y_axis_summary_type;
+      }
+      if (!summaryMethod && y_axis_summary_method) {
+        summaryMethod = y_axis_summary_method;
       }
-      if (!summary_method && y_axis_summary_method) {
-        summary_method = y_axis_summary_method;
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
+      var currentTheme = getCurrentTheme(colorThemeName);
       var chartBarColor = currentTheme && currentTheme.colors[0] || '#2a67d1';
-      if (column_groupby_column_key || column_groupby_multiple_numeric_column) {
+      var isGroup = column_groupby_column_key || column_groupby_multiple_numeric_column;
+      if (isGroup) {
         _this.chart.scale('group_name', {
           type: 'cat'
         });
@@ -89,133 +76,172 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
       var width = _this.chart.coordinateBBox.width;
-      var chartData,
-        columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (column_groupby_column_key || column_groupby_multiple_numeric_column) {
-        chartData = getChartGroups(data);
-      } else {
-        chartData = data;
-      }
-      var labelCount = chartData.length;
-      if (Math.floor(width / labelCount) <= 20) {
-        var displayLabels = getChartDisplayLabels(width, 20, chartData);
-        labelCount = displayLabels.length;
+      var chartData = isGroup ? getChartGroups(data) : data;
+      var ticks = _this.getTicks(chartData, width);
+      var labelCount = _this.getLabelCount(ticks, chartData);
+      if (ticks.length > 0) {
         _this.chart.scale('name', {
           type: 'cat',
-          ticks: displayLabels
+          ticks: ticks
         });
       }
-      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
-        var table = getTableById(table_id);
-        var summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
-      }
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
 
       // set Coord type
       _this.chart.coordinate('rect');
+      _this.handleAutoRange(data, summaryColumnData, summaryMethod);
+      if (isGroup) {
+        _this.drawLineGroup({
+          data: data,
+          currentTheme: currentTheme,
+          themeColors: themeColors
+        });
+      } else {
+        _this.drawLine({
+          summaryType: summaryType,
+          summaryMethod: summaryMethod,
+          chartBarColor: chartBarColor,
+          themeColors: themeColors
+        });
+      }
+      _this.setTooltip();
+      _this.setAxis(themeColors, labelCount);
+      _this.setTheme();
+      _this.setLegend(themeColors);
+      _this.chart.render();
+      _this.renderAxisLabel();
+    };
+    _this.initChartHandler = function () {
+      var isPreview = _this.props.isPreview;
+      var config = {
+        container: _this.container
+      };
+      if (isPreview) {
+        config.autoFit = true;
+      } else {
+        config.height = 400;
+        config.width = 700;
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.handleAutoRange = function (data, summaryColumnData, summaryMethod) {
+      var _this$props$statItem = _this.props.statItem,
+        y_axis_auto_range = _this$props$statItem.y_axis_auto_range,
+        y_axis_min = _this$props$statItem.y_axis_min,
+        y_axis_max = _this$props$statItem.y_axis_max;
       var valueScaleOptions = {
         formatter: function formatter(value) {
-          return getNumberDisplayString(value, columnData);
+          return _this.getNumberDisplayString(value, summaryColumnData, summaryMethod);
         }
       };
+
+      // eslint-disable-next-line
       if (y_axis_auto_range == undefined || y_axis_auto_range) {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });
       } else {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           min: y_axis_min,
           max: y_axis_max
         });
+
         // set the filter rule
         _this.chart.filter('value', function (value) {
           return value >= y_axis_min;
         });
+
         // filter the data
         _this.chart.filterData(data);
       }
       _this.chart.scale({
         value: valueScaleOptions
       });
-      if (column_groupby_column_key || column_groupby_multiple_numeric_column) {
-        var groupColorCallback = currentTheme && currentTheme.colors;
-        // when the 'Group by' column is a 'single-select' column,
-        // and the user chooses to use the colors from the column.
-        if (color_option === USEABLE_COLOR_TYPES[1]) {
-          var groupColorMapping = {};
-          data.forEach(function (item) {
-            if (!groupColorMapping[item.group_name]) {
-              groupColorMapping[item.group_name] = item.color;
-            }
-          });
-          groupColorCallback = function groupColorCallback(group_name) {
-            return groupColorMapping[group_name];
-          };
+    };
+    _this.drawLine = function (_ref) {
+      var summaryType = _ref.summaryType,
+        summaryMethod = _ref.summaryMethod,
+        chartBarColor = _ref.chartBarColor,
+        themeColors = _ref.themeColors;
+      var display_data = _this.props.statItem.display_data;
+      _this.chart.line().position('name*value').color(chartBarColor).tooltip('name*formatted_value', function (name, value) {
+        return {
+          value: value,
+          name: summaryType === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summaryMethod])
+        };
+      });
+      _this.chart.point().label(display_data ? 'value' : false, {
+        style: {
+          fontSize: _this.getLabelFontSize(),
+          fill: themeColors.textColor
         }
-        _this.chart.scale({
-          group_name: {
-            type: 'cat'
-          }
-        });
-        _this.chart.line().position('name*value').color('group_name', groupColorCallback);
-        _this.chart.point().label(display_data ? 'value' : false, {
-          style: {
-            fontSize: _this.getLabelFontSize(),
-            fill: themeColors.textColor
-          }
-        }).position('name*value').size(3).color('group_name', groupColorCallback).tooltip('name*value*group_name', function (name, value, group_name) {
-          return {
-            title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
-            value: getNumberDisplayString(value, columnData),
-            name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
-          };
-        }).shape('circle').style({
-          lineWidth: 1,
-          stroke: '#fff'
-        });
-      } else {
-        _this.chart.line().position('name*value').color(chartBarColor).tooltip('name*value', function (name, value) {
-          return {
-            name: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
-            value: getNumberDisplayString(value, columnData)
-          };
-        });
-        _this.chart.point().label(display_data ? 'value' : false, {
-          style: {
-            fontSize: _this.getLabelFontSize(),
-            fill: themeColors.textColor
+      }).position('name*value').color(chartBarColor).shape('circle').size(3).style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).tooltip('name*formatted_value', function (name, value) {
+        return {
+          value: value,
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+          title: summaryType === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summaryMethod])
+        };
+      });
+    };
+    _this.drawLineGroup = function (_ref2) {
+      var data = _ref2.data,
+        currentTheme = _ref2.currentTheme,
+        themeColors = _ref2.themeColors;
+      var _this$props$statItem2 = _this.props.statItem,
+        display_data = _this$props$statItem2.display_data,
+        color_option = _this$props$statItem2.color_option;
+      var groupColorCallback = currentTheme && currentTheme.colors;
+      // when the 'Group by' column is a 'single-select' column,
+      // and the user chooses to use the colors from the column.
+      if (color_option === USEABLE_COLOR_TYPES[1]) {
+        var groupColorMapping = {};
+        data.forEach(function (item) {
+          if (!groupColorMapping[item.group_name]) {
+            groupColorMapping[item.group_name] = item.color;
           }
-        }).position('name*value').color(chartBarColor).shape('circle').size(3).style({
-          lineWidth: 1,
-          stroke: '#fff'
-        }).tooltip('name*value', function (name, value) {
-          return {
-            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
-            value: getNumberDisplayString(value, columnData),
-            title: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method])
-          };
         });
+        groupColorCallback = function groupColorCallback(group_name) {
+          return groupColorMapping[group_name];
+        };
       }
+      _this.chart.scale({
+        group_name: {
+          type: 'cat'
+        }
+      });
+      _this.chart.line().position('name*value').color('group_name', groupColorCallback);
+      _this.chart.point().label(display_data ? 'formatted_value' : false, {
+        style: {
+          fontSize: _this.getLabelFontSize(),
+          fill: themeColors.textColor
+        }
+      }).position('name*value').size(3).color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name', function (name, value, group_name) {
+        return {
+          value: value,
+          title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+          name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
+        };
+      }).shape('circle').style({
+        lineWidth: 1,
+        stroke: '#fff'
+      });
+    };
+    _this.setTooltip = function () {
       _this.chart.tooltip({
         showCrosshairs: true,
         showTitle: true,
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {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.setAxis = function (themeColors, labelCount) {
       _this.chart.axis('name', {
         line: {
           style: themeColors.gridColor
@@ -227,16 +253,7 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
           offset: 20,
           autoRotate: true,
           rotate: labelCount > 11 ? 0.3 : 0,
-          formatter: function formatter(name) {
-            var label = name;
-            if (name.length > 10) {
-              label = "".concat(name.slice(0, 10), "...");
-            }
-            if (name === '' || name === 'undefined') {
-              label = intl.get(EMPTY_NAME);
-            }
-            return label;
-          }
+          formatter: _this.labelFormatter
         }
       });
       _this.chart.axis('value', {
@@ -253,6 +270,8 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setTheme = function () {
       _this.chart.theme({
         geometries: {
           point: {
@@ -267,6 +286,8 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setLegend = function (themeColors) {
       _this.chart.legend('group_name', {
         position: 'bottom',
         itemName: {
@@ -292,16 +313,11 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.render();
-      _this.renderAxisLabel();
     };
     _this.renderAxisLabel = function (newStatItem) {
       var _this$props2 = _this.props,
         getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem,
-        isEnlarge = _this$props2.isEnlarge,
-        isPreview = _this$props2.isPreview,
-        theme = _this$props2.theme;
+        statItem = _this$props2.statItem;
       if (newStatItem && newStatItem._id !== statItem._id) {
         return;
       }
@@ -318,10 +334,7 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
         y_axis_summary_type = _statItem.y_axis_summary_type;
       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));
@@ -375,11 +388,6 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
       _this.chart.destroy();
       _this.chart = null;
     };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
-    };
     _this.state = {
       isCalculatingData: true,
       showResultDescription: true
@@ -486,13 +494,9 @@ var LineChart = /*#__PURE__*/function (_BaseChart) {
       var style = {
         padding: show_y_axis_label || show_x_axis_label ? 30 : 20
       };
-      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", {
-        ref: function ref(_ref) {
-          return _this4.container = _ref;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref3) {
+          return _this4.container = _ref3;
         },
         style: style,
         className: "statistic-chart-container"

package/es/stat-view/map.js

@@ -5,11 +5,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set/lib/index';
-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, SUMMARY_TYPE } from '../constants';
+import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE } from '../constants';
 var WIDTH = 798;
 var HEIGHT = 520;
 var Map = /*#__PURE__*/function (_BaseChart) {
@@ -33,7 +32,8 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           if (matchFeature) {
             statisticNewData.push({
               name: matchFeature.properties.name,
-              value: item.value || 0
+              value: item.value || 0,
+              formatted_value: item.formatted_value
             });
             if (type === 'map_bubble') {
               sum += item.value;
@@ -49,10 +49,7 @@ var Map = /*#__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',
@@ -63,6 +60,7 @@ var Map = /*#__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;
@@ -88,17 +86,14 @@ var Map = /*#__PURE__*/function (_BaseChart) {
             stroke: highlightedBorderColor
           }
         }
-      }).tooltip('name*value*color', function (name, value, color) {
+      }).tooltip('name*formatted_value*color', function (name, value, color) {
         return {
           name: name,
-          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({
@@ -115,7 +110,7 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
           formatter: function formatter(value) {
-            return getNumberDisplayString(value, columnData);
+            return _this.getNumberDisplayString(value, columnData, summary_method);
           }
         },
         handler: {
@@ -150,9 +145,7 @@ var Map = /*#__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',
@@ -162,6 +155,7 @@ var Map = /*#__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;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
@@ -178,11 +172,11 @@ var Map = /*#__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,
@@ -196,10 +190,7 @@ var Map = /*#__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({
@@ -215,7 +206,7 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           },
           align: legendDirection === 'vertical' ? 'right' : 'bottom',
           formatter: function formatter(value) {
-            return getNumberDisplayString(value, columnData);
+            return _this.getNumberDisplayString(value, columnData, summary_method);
           }
         },
         handler: {
@@ -269,14 +260,8 @@ var Map = /*#__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">数量: {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({
@@ -332,6 +317,7 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           isDataLoaded: true
         }, function () {
           if (!data) return;
+          _this2.geoData = data;
           _this2.initStatisticContext(data);
           if (_this2.container) {
             chartCalculator.calculate(statItem).then(function (data) {
@@ -371,6 +357,10 @@ var Map = /*#__PURE__*/function (_BaseChart) {
           isCalculatingData: true
         });
         if (this.container) {
+          if (this.chart) {
+            this.chart.destroy();
+            this.initStatisticContext(this.geoData);
+          }
           chartCalculator.calculate(statItem).then(function (statData) {
             _this3.calculateData = statData;
             _this3.setState({
@@ -404,9 +394,7 @@ var Map = /*#__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;
         },
@@ -418,8 +406,6 @@ var Map = /*#__PURE__*/function (_BaseChart) {
 }(BaseChart);
 Map.propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func,