dtable-statistic 4.1.2 → 4.1.3

package/es/dashboard.js

@@ -10,6 +10,7 @@ import { TableUtils, Views } from 'dtable-store';
 import StatisticDashBoard from './model/statistic-dashboard';
 import DashBoardService from './service/dashboard-service';
 import ChartService from './service/chart-service';
+import { MapJsonService } from './service/map-json';
 import DesktopDashboard from './desktop-dashboard';
 import MobileDashboard from './mobile-dashboard';
 import ThreadManager from './calculator/thread-manager';
@@ -302,6 +303,20 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       });
       _this.addChart(newChart);
     };
+    _this.moveChartToView = function (chartId, viewId) {
+      _this.disabledUpdateLayout = true;
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.MOVE_CHART_TO_VIEW,
+        payload: {
+          index: _this.state.selectedDashboardIdx,
+          chart_id: chartId,
+          target_view_id: viewId
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      });
+    };
     _this.deleteChart = function (chartId) {
       _this.disabledUpdateLayout = true;
       var updatedStatistics = _this.dashboardService.update({
@@ -370,6 +385,15 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       var permission = window.dtable.permission || '';
       return permission === 'r' || permission.slice(0, 2) === 'c-';
     };
+    _this.queryMapJson = function (_ref4, callback) {
+      var map_level = _ref4.map_level,
+        map_location = _ref4.map_location;
+      _this.mapJsonService.queryMapJson({
+        map_level: map_level,
+        map_location: map_location
+      }, callback);
+    };
+    var mediaUrl = window.dtable.mediaUrl;
     var _value = props.value;
     var defaultChartTitle = intl.get('Untitled');
     _this.defaultDashboardName = intl.get('Default_dashboard');
@@ -378,6 +402,9 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       defaultChartTitle: defaultChartTitle
     });
     _this.statisticThreadManager = new ThreadManager((navigator.hardwareConcurrency || 4) - 1);
+    _this.mapJsonService = new MapJsonService({
+      mediaUrl: mediaUrl
+    });
     var _this$initDashboard2 = _this.initDashboard(),
       _statistics = _this$initDashboard2.statistics,
       _selectedDashboardIdx = _this$initDashboard2.selectedDashboardIdx;
@@ -433,7 +460,8 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         addDashboard: this.addDashboard,
         renameDashboard: this.renameDashboard,
         deleteDashboard: this.deleteDashboard,
-        getTableById: this.getTableById
+        getTableById: this.getTableById,
+        queryMapJson: this.queryMapJson
       }) : /*#__PURE__*/React.createElement(DesktopDashboard, {
         isTableReadOnly: isTableReadOnly,
         colorThemeName: colorThemeName,
@@ -456,9 +484,11 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         getTableById: this.getTableById,
         getTables: this.getTables,
         getViews: this.getViews,
+        queryMapJson: this.queryMapJson,
         getInitChart: this.getInitChart,
         getConvertedChart: this.getConvertedChart,
         copyChart: this.copyChart,
+        moveChartToView: this.moveChartToView,
         deleteChart: this.deleteChart,
         modifyDashboardLayout: this.modifyDashboardLayout,
         addChart: this.addChart,

package/es/desktop-dashboard.js

@@ -117,6 +117,15 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         activeView: activeView
       });
     };
+    _this.getOtherStatistics = function () {
+      var _this$props3 = _this.props,
+        statistics = _this$props3.statistics,
+        selectedDashboardIdx = _this$props3.selectedDashboardIdx;
+      if (!Array.isArray(statistics)) return [];
+      return statistics.filter(function (_, index) {
+        return index !== selectedDashboardIdx;
+      });
+    };
     var defaultChartTitle = intl.get('Untitled');
     _this.charService = new ChartService({
       defaultChartTitle: defaultChartTitle
@@ -134,16 +143,16 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
   _createClass(DesktopDashboard, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        getTableById = _this$props3.getTableById,
-        isTableReadOnly = _this$props3.isTableReadOnly,
-        dtableChangedTime = _this$props3.dtableChangedTime,
-        colorThemeName = _this$props3.colorThemeName,
-        statistics = _this$props3.statistics,
-        selectedDashboardIdx = _this$props3.selectedDashboardIdx,
-        chartCalculator = _this$props3.chartCalculator,
-        labelColorConfigs = _this$props3.labelColorConfigs,
-        eventBus = _this$props3.eventBus;
+      var _this$props4 = this.props,
+        getTableById = _this$props4.getTableById,
+        isTableReadOnly = _this$props4.isTableReadOnly,
+        dtableChangedTime = _this$props4.dtableChangedTime,
+        colorThemeName = _this$props4.colorThemeName,
+        statistics = _this$props4.statistics,
+        selectedDashboardIdx = _this$props4.selectedDashboardIdx,
+        chartCalculator = _this$props4.chartCalculator,
+        labelColorConfigs = _this$props4.labelColorConfigs,
+        eventBus = _this$props4.eventBus;
       var _this$state = this.state,
         theme = _this$state.theme,
         isFullScreen = _this$state.isFullScreen,
@@ -226,9 +235,12 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         statItems: statItems,
         chartCalculator: chartCalculator,
         eventBus: eventBus,
+        getOtherStatistics: this.getOtherStatistics,
         getTableById: this.props.getTableById,
         getTables: this.props.getTables,
+        queryMapJson: this.props.queryMapJson,
         copyChart: this.props.copyChart,
+        moveChartToView: this.props.moveChartToView,
         deleteChart: this.props.deleteChart,
         modifyDashboardLayout: this.props.modifyDashboardLayout,
         onToggleEditChart: this.onToggleEditChart,
@@ -244,6 +256,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         getTables: this.props.getTables,
         getViews: this.props.getViews,
         getTableById: this.props.getTableById,
+        queryMapJson: this.props.queryMapJson,
         generateChart: this.generateChart,
         hideChartAdditionDialog: this.onToggleChartAddition,
         getConvertedChart: this.props.getConvertedChart,

package/es/locale/lang/en.js

@@ -240,6 +240,7 @@ var en = {
   'New_table': 'New table',
   'Select_table': 'Select table',
   'Update_to_a_table': 'Update to a table',
-  'Export_to_a_new_table': 'Export to a new table'
+  'Export_to_a_new_table': 'Export to a new table',
+  "Move_to": "Move to..."
 };
 export default en;

package/es/locale/lang/zh_CN.js

@@ -240,6 +240,7 @@ var zh_CN = {
   'New_table': '新建表',
   'Select_table': '选择子表',
   'Update_to_a_table': '更新到子表',
-  'Export_to_a_new_table': '导出到新的子表'
+  'Export_to_a_new_table': '导出到新的子表',
+  "Move_to": "移动到..."
 };
 export default zh_CN;

package/es/mobile-dashboard.js

@@ -29,6 +29,7 @@ var MobileDashboard = /*#__PURE__*/function (_Component) {
   _createClass(MobileDashboard, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
       var _this$props = this.props,
         getTableById = _this$props.getTableById,
         dtableChangedTime = _this$props.dtableChangedTime,
@@ -93,7 +94,8 @@ var MobileDashboard = /*#__PURE__*/function (_Component) {
           chartCalculator: chartCalculator,
           labelColorConfigs: labelColorConfigs,
           eventBus: eventBus,
-          getTableById: getTableById
+          getTableById: getTableById,
+          queryMapJson: _this2.props.queryMapJson
         })));
       })));
     }

package/es/model/generic-model.js

@@ -7,6 +7,7 @@ import { getChartConfigValueFromKey, getChartConfigValueFromKeys } from '../util
 import { isBoolean } from '../utils/common-utils';
 import { DATE_GRANULARITY, DATE_GRANULARITY_LIST, DEFAULT_LABEL_FONT_SIZE, GEOLOCATION_GRANULARITY, GEOLOCATION_GRANULARITY_LIST } from '../constants';
 import { COLUMN_DATE_GRANULARITY_KEYS, COLUMN_GEO_GRANULARITY_KEYS, COLUMN_GROUPBY_KEYS, LABEL_FRONT_SIZE_KEYS, X_DATE_GRANULARITY_KEYS, X_GEO_GRANULARITY_KEYS, X_GROUPBY_KEYS, X_INCLUDE_EMPTY_KEYS, X_LABEL_POSITION_KEYS, X_SHOW_AXIS_LABEL, Y_AUTO_RANGE_KEYS, Y_AUTO_RANGE_MAX_KEYS, Y_AUTO_RANGE_MIN_KEYS, Y_LABEL_COLOR_KEYS, Y_LABEL_COLOR_RULES_KEYS, Y_LABEL_POSITION_KEYS, Y_SHOW_AXIS_LABEL_KEYS, Y_SUMMARY_BY_KEYS, Y_SUMMARY_METHOD_KEYS, Y_SUMMARY_TYPE_KEYS } from '../constants/model';
+import { MAP_LEVEL } from '../constants/map';
 var GenericModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(GenericModel, _BaseModel);
   var _super = _createSuper(GenericModel);
@@ -212,6 +213,10 @@ var GenericModel = /*#__PURE__*/function (_BaseModel) {
     }
     _this.bubble_color = getChartConfigValueFromKey('bubble_color', object);
     _this.label_format = getChartConfigValueFromKey('label_format', object);
+
+    // map
+    _this.map_level = getChartConfigValueFromKey('map_level', object) || MAP_LEVEL.COUNTRY;
+    _this.map_location = getChartConfigValueFromKey('map_location', object);
     return _this;
   }
   return GenericModel;

package/es/model/map.js

@@ -4,7 +4,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import { isNumber, TableUtils } from 'dtable-store';
 import BaseModel from './base-model';
 import { isMapColumn } from '../utils/column-utils';
-import { GEOLOCATION_GRANULARITY, LEGEND_DIRECTION_MAP, SUMMARY_METHOD_MAP, SUMMARY_TYPE } from '../constants';
+import { LEGEND_DIRECTION_MAP, SUMMARY_METHOD_MAP, SUMMARY_TYPE } from '../constants';
+import { fixMapGeoGranularity } from '../utils/map';
 var Map = /*#__PURE__*/function (_BaseModel) {
   _inherits(Map, _BaseModel);
   var _super = _createSuper(Map);
@@ -13,7 +14,9 @@ var Map = /*#__PURE__*/function (_BaseModel) {
     _classCallCheck(this, Map);
     _this = _super.call(this, object);
     _this.geo_column = object.x_axis_column_key;
-    _this.geolocation_granularity = object.x_axis_geolocation_granularity || GEOLOCATION_GRANULARITY.PROVINCE;
+    _this.map_level = object.map_level;
+    _this.map_location = object.map_location;
+    _this.geolocation_granularity = fixMapGeoGranularity(object);
     if (_this.geo_column) {
       var column = TableUtils.getTableColumnByKey(table, _this.geo_column);
       if (!isMapColumn(column)) {

package/es/service/dashboard-service.js

@@ -417,6 +417,45 @@ var DashBoardService = /*#__PURE__*/function () {
             this.statistics = _updatedStatistics6;
             break;
           }
+        case DASHBOARD_ACTION_TYPE.MOVE_CHART_TO_VIEW:
+          {
+            var _index6 = payload.index,
+              _chart_id = payload.chart_id,
+              target_view_id = payload.target_view_id;
+            var _updatedStatistics7 = _toConsumableArray(this.statistics);
+            var currentDashboard = _updatedStatistics7[_index6];
+            if (!currentDashboard || !Array.isArray(currentDashboard.stat_items)) break;
+            var movedChartIndex = currentDashboard.stat_items.findIndex(function (chart) {
+              return chart._id === _chart_id;
+            });
+            if (movedChartIndex < 0) break;
+            var _targetDashboard = target_view_id && _updatedStatistics7.find(function (view) {
+              return view._id === target_view_id;
+            });
+            if (!_targetDashboard) break;
+            var movedCharts = currentDashboard.stat_items.splice(movedChartIndex, 1);
+            var movedChart = movedCharts && movedCharts[0];
+            if (!movedChart) break;
+            var newChartId = movedChart._id;
+            if (!Array.isArray(_targetDashboard.stat_items)) {
+              _targetDashboard.stat_items = [];
+            } else {
+              newChartId = generatorUniqueId(_targetDashboard.statItems);
+            }
+            movedChart = Object.assign(movedChart, {
+              _id: newChartId,
+              layout: {
+                i: newChartId,
+                x: _targetDashboard.stat_items.length % 2 * 2,
+                y: Infinity,
+                w: 2,
+                h: 7
+              }
+            });
+            _targetDashboard.stat_items.push(movedChart);
+            this.statistics = _updatedStatistics7;
+            break;
+          }
         default:
           {
             break;

package/es/service/map-json.js

@@ -0,0 +1,154 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { MAP_LEVEL } from '../constants/map';
+import { regions } from '../constants/regions';
+var MapJsonService = /*#__PURE__*/function () {
+  function MapJsonService(_ref) {
+    var mediaUrl = _ref.mediaUrl;
+    _classCallCheck(this, MapJsonService);
+    this.mediaUrl = mediaUrl;
+    this.urlMapJsonQuerying = {};
+    this.urlWaitingExecCallbacks = {};
+    this.urlMapJson = {};
+  }
+  _createClass(MapJsonService, [{
+    key: "getNameEnByMapLocation",
+    value: function getNameEnByMapLocation(mapLocation) {
+      var provinceName = mapLocation && mapLocation.province;
+      var province = provinceName && regions.find(function (province) {
+        return province.name === provinceName;
+      });
+      if (!province) return null;
+      var nameEN = {
+        province_name_en: province.name_en
+      };
+      var cityName = mapLocation.city;
+      var cities = province.cities;
+      var city = cityName && Array.isArray(cities) && cities.find(function (city) {
+        return city.name === cityName;
+      });
+      if (!city) {
+        return nameEN;
+      }
+      nameEN.city_name_en = city.name_en;
+      return nameEN;
+    }
+
+    /**
+     * @param {string} mapLevel
+     * @param {object} mapLocation: province, city
+     * @returns part url for query map-json
+     */
+  }, {
+    key: "getMapJsonQueryUrl",
+    value: function getMapJsonQueryUrl(mapLevel, mapLocation) {
+      switch (mapLevel) {
+        case MAP_LEVEL.WORLD:
+          {
+            return 'world';
+          }
+        case MAP_LEVEL.COUNTRY:
+          {
+            return 'china';
+          }
+        case MAP_LEVEL.PROVINCE:
+          {
+            var nameEn = this.getNameEnByMapLocation(mapLocation);
+            var provinceNameEn = nameEn && nameEn.province_name_en;
+            if (!provinceNameEn) {
+              return null;
+            }
+            return "region-mapjson/".concat(provinceNameEn, "/").concat(provinceNameEn);
+          }
+        case MAP_LEVEL.CITY:
+          {
+            var _nameEn = this.getNameEnByMapLocation(mapLocation);
+            var _provinceNameEn = _nameEn && _nameEn.province_name_en;
+            var cityNameEn = _nameEn && _nameEn.city_name_en;
+            if (!_provinceNameEn || !cityNameEn) {
+              return null;
+            }
+
+            // e.g. 北京市/北京市
+            if (_provinceNameEn === cityNameEn) {
+              return "region-mapjson/".concat(_provinceNameEn, "/").concat(_provinceNameEn);
+            }
+            return "region-mapjson/".concat(_provinceNameEn, "/").concat(_provinceNameEn, "_").concat(cityNameEn);
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    }
+  }, {
+    key: "getMapJson",
+    value: function getMapJson(url) {
+      return this.urlMapJson[url];
+    }
+  }, {
+    key: "setMapJson",
+    value: function setMapJson(url, json) {
+      this.urlMapJsonMap[url] = json;
+    }
+  }, {
+    key: "queryMapJson",
+    value: function queryMapJson(_ref2, callback) {
+      var map_level = _ref2.map_level,
+        map_location = _ref2.map_location;
+      var url = this.getMapJsonQueryUrl(map_level, map_location);
+      if (!url) {
+        callback && callback();
+        return;
+      }
+      var existMapJson = this.getMapJson(url);
+      if (existMapJson) {
+        callback && callback(existMapJson);
+        return;
+      }
+      if (this.urlWaitingExecCallbacks[url]) {
+        this.urlWaitingExecCallbacks[url].push(callback);
+      } else {
+        this.urlWaitingExecCallbacks[url] = [callback];
+      }
+
+      // the target map-json is being querying
+      if (this.urlMapJsonQuerying[url]) {
+        return;
+      }
+      this.urlMapJsonQuerying[url] = true;
+      this.startQuery(url);
+    }
+  }, {
+    key: "startQuery",
+    value: function startQuery(url) {
+      var _this = this;
+      fetch("".concat(this.mediaUrl, "dtable-statistic/geolocation/").concat(url, ".json")).then(function (res) {
+        return res && res.json();
+      }).then(function (mapJson) {
+        _this.handleLoadedMapJson(url, mapJson);
+      }).catch(function (err) {
+        // eslint-disable-next-line
+        console.log(err);
+      });
+    }
+  }, {
+    key: "handleLoadedMapJson",
+    value: function handleLoadedMapJson(url, mapJson) {
+      var isValid = mapJson && !mapJson.features;
+      if (isValid) {
+        this.setMapJson(url, mapJson);
+      }
+      var callbacks = this.urlWaitingExecCallbacks[url];
+      if (Array.isArray(callbacks) && callbacks.length > 0) {
+        callbacks.forEach(function (callback) {
+          callback && callback(mapJson);
+        });
+      }
+      delete this.urlWaitingExecCallbacks[url];
+      delete this.urlMapJsonQuerying[url];
+    }
+  }]);
+  return MapJsonService;
+}();
+export { MapJsonService };

package/es/stat-editor/index.js

@@ -49,6 +49,7 @@ var StatEditor = /*#__PURE__*/function (_Component) {
         chartCalculator: chartCalculator,
         eventBus: eventBus,
         getTableById: getTableById,
+        queryMapJson: this.props.queryMapJson,
         updateStatItem: this.props.modifyChart,
         toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
       }))), BASIC_STAT_TYPES.includes(statItem.type) ? /*#__PURE__*/React.createElement(BasicChartSettings, {

package/es/stat-editor/stat-settings/advance-chart-settings/map-settings.js

@@ -10,6 +10,10 @@ import SummarySettings from './summary-settings';
 import MapStyleSetting from './style-setting/map-setting';
 import { isMapColumn } from '../../../utils/column-utils';
 import { GEOLOCATION_GRANULARITY } from '../../../constants';
+import MapLevelSettings from '../map/map-level';
+import MapProvinceCitySettings from '../map/map-province-city';
+import { MAP_LEVEL } from '../../../constants/map';
+import { fixGeoGranularity } from '../../../utils/map';
 var MapSettings = /*#__PURE__*/function (_Component) {
   _inherits(MapSettings, _Component);
   var _super = _createSuper(MapSettings);
@@ -23,28 +27,57 @@ var MapSettings = /*#__PURE__*/function (_Component) {
         return isMapColumn(column);
       });
     };
-    _this.getGeoGranularityOptions = function () {
-      return [{
-        id: GEOLOCATION_GRANULARITY.PROVINCE,
-        name: '按省'
-      }].map(function (granularity) {
-        return {
-          label: /*#__PURE__*/React.createElement("span", {
-            className: "select-option-name"
-          }, granularity.name),
-          value: granularity.id
-        };
-      });
+    _this.generateGeoGranularityOptions = function () {
+      _this.provinceGranularityOption = {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, '按省'),
+        value: GEOLOCATION_GRANULARITY.PROVINCE
+      };
+      _this.cityGranularityOption = {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, '按市'),
+        value: GEOLOCATION_GRANULARITY.CITY
+      };
+      _this.districtGranularityOption = {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, '按区/县'),
+        value: GEOLOCATION_GRANULARITY.DISTRICT
+      };
     };
     _this.getSelectedGeoColumnOption = function () {
       return _this.geoColumnsOptions.find(function (option) {
         return option.value.key === _this.props.statItem.geo_column;
       });
     };
+    _this.getGeoGranularityOptions = function () {
+      var map_level = _this.props.statItem.map_level;
+      return _this.mapLevel2GeoGranularityOptions[map_level || MAP_LEVEL.COUNTRY];
+    };
     _this.getSelectedGeoGranularityOption = function () {
-      return _this.geoGranularityOptions.find(function (option) {
-        return option.value === _this.props.statItem.geolocation_granularity;
+      var _this$props$statItem = _this.props.statItem,
+        map_level = _this$props$statItem.map_level,
+        map_location = _this$props$statItem.map_location;
+      var geoGranularity = fixGeoGranularity({
+        mapLevel: map_level,
+        mapLocation: map_location
       });
+      switch (geoGranularity) {
+        case GEOLOCATION_GRANULARITY.CITY:
+          {
+            return _this.cityGranularityOption;
+          }
+        case GEOLOCATION_GRANULARITY.DISTRICT:
+          {
+            return _this.districtGranularityOption;
+          }
+        default:
+          {
+            return _this.provinceGranularityOption;
+          }
+      }
     };
     _this.onSelectGeoColumn = function (option) {
       var geo_column = _this.props.statItem.geo_column;
@@ -56,18 +89,13 @@ var MapSettings = /*#__PURE__*/function (_Component) {
       }));
     };
     _this.onSelectGeoGranularity = function (option) {
-      var geolocation_granularity = _this.props.statItem.geolocation_granularity;
-      var new_geolocation_granularity = option.value;
-      if (new_geolocation_granularity === geolocation_granularity) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        geolocation_granularity: new_geolocation_granularity
-      }));
+      return;
     };
     var _columns = props.columns,
       getColumnsOptions = props.getColumnsOptions;
     var geoColumns = _this.getColumns(_columns);
     _this.geoColumnsOptions = getColumnsOptions(geoColumns);
-    _this.geoGranularityOptions = _this.getGeoGranularityOptions();
+    _this.generateGeoGranularityOptions();
     return _this;
   }
   _createClass(MapSettings, [{
@@ -112,6 +140,14 @@ var MapSettings = /*#__PURE__*/function (_Component) {
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(MapLevelSettings, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement(MapProvinceCitySettings, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, "\u4F4D\u7F6E\u5B57\u6BB5"), /*#__PURE__*/React.createElement(ColumnSettings, {
@@ -121,7 +157,7 @@ var MapSettings = /*#__PURE__*/function (_Component) {
       })), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(GeoGranularitySettings, {
-        geoGranularityOptions: this.geoGranularityOptions,
+        geoGranularityOptions: [selectedGeoGranularityOption],
         selectedGeoGranularityOption: selectedGeoGranularityOption,
         onChangeGeoGranularity: this.onSelectGeoGranularity
       })), /*#__PURE__*/React.createElement("div", {

package/es/stat-editor/stat-settings/map/map-level.js

@@ -0,0 +1,76 @@
+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, { Component } from 'react';
+import { DTableSelect } from '../../../components';
+import { fixGeoGranularity } from '../../../utils/map';
+import { MAP_LEVEL } from '../../../constants/map';
+var MAP_LEVELS = [{
+  key: MAP_LEVEL.COUNTRY,
+  name: '国家'
+}, {
+  key: MAP_LEVEL.PROVINCE,
+  name: '省级'
+}, {
+  key: MAP_LEVEL.CITY,
+  name: '市级'
+}];
+var MapLevelSettings = /*#__PURE__*/function (_Component) {
+  _inherits(MapLevelSettings, _Component);
+  var _super = _createSuper(MapLevelSettings);
+  function MapLevelSettings(props) {
+    var _this;
+    _classCallCheck(this, MapLevelSettings);
+    _this = _super.call(this, props);
+    _this.createMapLevelOptions = function () {
+      return MAP_LEVELS.map(function (mapLevel) {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, mapLevel.name),
+          value: mapLevel.key
+        };
+      });
+    };
+    _this.getSelectedMapLevelOption = function () {
+      var map_level = _this.props.statItem.map_level;
+      var defaultOption = _this.mapLevelOptions[0];
+      if (!map_level) return defaultOption;
+      return _this.mapLevelOptions.find(function (option) {
+        return option.value === map_level;
+      }) || defaultOption;
+    };
+    _this.onSelectMapLevel = function (option) {
+      var _this$props$statItem = _this.props.statItem,
+        map_level = _this$props$statItem.map_level,
+        map_location = _this$props$statItem.map_location;
+      var newLevel = option.value;
+      if (newLevel === map_level) return;
+      var updated = {
+        map_level: newLevel,
+        geolocation_granularity: fixGeoGranularity({
+          mapLevel: newLevel,
+          mapLocation: map_location
+        })
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.mapLevelOptions = _this.createMapLevelOptions();
+    return _this;
+  }
+  _createClass(MapLevelSettings, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, "\u5730\u56FE\u7EA7\u522B"), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: this.getSelectedMapLevelOption(),
+        options: this.mapLevelOptions,
+        onChange: this.onSelectMapLevel
+      }));
+    }
+  }]);
+  return MapLevelSettings;
+}(Component);
+export default MapLevelSettings;