dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,7 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import intl from 'react-intl-universal';
 import { isNumericColumn } from 'dtable-store';
@@ -14,36 +10,35 @@ import CombinationSettings from './combination-settings';
 import TrendSettings from './trend-chart-settings';
 import DashboardChartSettings from './dashboard-chart-settings';
 import { STAT_TYPE, SUMMARY_TYPE, SUMMARY_METHOD } from '../../../constants';
-var GROUP_TYPES = {
+const GROUP_TYPES = {
   COUNT: 'count',
   SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
   MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
 };
-var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
-  _inherits(AdvancedChartSettings, _React$Component);
-  var _super = _createSuper(AdvancedChartSettings);
-  function AdvancedChartSettings(props) {
-    var _this;
-    _classCallCheck(this, AdvancedChartSettings);
-    _this = _super.call(this, props);
-    _this.getNumericColumns = function (columns) {
+class AdvancedChartSettings extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getNumericColumns = columns => {
       if (!columns) return [];
-      return columns.filter(function (column) {
-        return column && isNumericColumn(column);
-      });
+      return columns.filter(column => column && isNumericColumn(column));
     };
-    _this.getSettingsByType = function () {
-      var settingType = _this.state.settingType;
-      var _this$props = _this.props,
-        getTables = _this$props.getTables,
-        getViews = _this$props.getViews,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem,
-        labelColorConfigs = _this$props.labelColorConfigs,
-        eventBus = _this$props.eventBus,
-        updateStatItem = _this$props.updateStatItem;
-      var type = statItem.type,
-        selectedTableId = statItem.table_id;
+    this.getSettingsByType = () => {
+      const {
+        settingType
+      } = this.state;
+      const {
+        getTables,
+        getViews,
+        getTableById,
+        statItem,
+        labelColorConfigs,
+        eventBus,
+        updateStatItem
+      } = this.props;
+      const {
+        type,
+        table_id: selectedTableId
+      } = statItem;
       switch (type) {
         case STAT_TYPE.MAP:
         case STAT_TYPE.MAP_BUBBLE:
@@ -51,21 +46,21 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(MapSettings, {
               settingType: settingType,
               selectedTableId: selectedTableId,
-              columns: _this.columns,
-              numericColumns: _this.numericColumns,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
               statItem: statItem,
               labelColorConfigs: labelColorConfigs,
               eventBus: eventBus,
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getColumnsOptions: _this.getColumnsOptions,
-              getConvertedChart: _this.props.getConvertedChart,
+              getColumnsOptions: this.getColumnsOptions,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              onChangeSummaryType: _this.onChangeSummaryType,
-              onSelectSummaryColumn: _this.onSelectSummaryColumn,
-              onSelectSummaryMethod: _this.onSelectSummaryMethod,
-              onChangeColor: _this.onChangeColor
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod,
+              onChangeColor: this.onChangeColor
             });
           }
         case STAT_TYPE.WORLD_MAP:
@@ -74,21 +69,21 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(WorldMapSettings, {
               settingType: settingType,
               selectedTableId: selectedTableId,
-              columns: _this.columns,
-              numericColumns: _this.numericColumns,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
               statItem: statItem,
               labelColorConfigs: labelColorConfigs,
               eventBus: eventBus,
-              getColumnsOptions: _this.getColumnsOptions,
+              getColumnsOptions: this.getColumnsOptions,
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              onChangeSummaryType: _this.onChangeSummaryType,
-              onSelectSummaryColumn: _this.onSelectSummaryColumn,
-              onSelectSummaryMethod: _this.onSelectSummaryMethod,
-              onChangeColor: _this.onChangeColor
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod,
+              onChangeColor: this.onChangeColor
             });
           }
         case STAT_TYPE.HEAT_MAP:
@@ -96,21 +91,21 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(HeatMapSettings, {
               settingType: settingType,
               selectedTableId: selectedTableId,
-              columns: _this.columns,
-              numericColumns: _this.numericColumns,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
               statItem: statItem,
               labelColorConfigs: labelColorConfigs,
               eventBus: eventBus,
-              getColumnsOptions: _this.getColumnsOptions,
+              getColumnsOptions: this.getColumnsOptions,
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              onChangeSummaryType: _this.onChangeSummaryType,
-              onSelectSummaryColumn: _this.onSelectSummaryColumn,
-              onSelectSummaryMethod: _this.onSelectSummaryMethod,
-              onChangeColor: _this.onChangeColor
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod,
+              onChangeColor: this.onChangeColor
             });
           }
         case STAT_TYPE.MIRROR:
@@ -118,20 +113,20 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(MirrorSettings, {
               settingType: settingType,
               selectedTableId: selectedTableId,
-              columns: _this.columns,
-              numericColumns: _this.numericColumns,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
               statItem: statItem,
               labelColorConfigs: labelColorConfigs,
               eventBus: eventBus,
-              getColumnsOptions: _this.getColumnsOptions,
+              getColumnsOptions: this.getColumnsOptions,
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              onChangeSummaryType: _this.onChangeSummaryType,
-              onSelectSummaryColumn: _this.onSelectSummaryColumn,
-              onSelectSummaryMethod: _this.onSelectSummaryMethod
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod
             });
           }
         case STAT_TYPE.BASIC_NUMBER_CARD:
@@ -145,12 +140,12 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              numericColumns: _this.numericColumns,
-              getColumnsOptions: _this.getColumnsOptions,
-              onChangeSummaryType: _this.onChangeSummaryType,
-              onSelectSummaryMethod: _this.onSelectSummaryMethod
+              numericColumns: this.numericColumns,
+              getColumnsOptions: this.getColumnsOptions,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryMethod: this.onSelectSummaryMethod
             });
           }
         case STAT_TYPE.COMBINATION_CHART:
@@ -160,15 +155,15 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               labelColorConfigs: labelColorConfigs,
               eventBus: eventBus,
               settingType: settingType,
-              columns: _this.columns,
+              columns: this.columns,
               selectedTableId: selectedTableId,
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              numericColumns: _this.numericColumns,
-              getColumnsOptions: _this.getColumnsOptions
+              numericColumns: this.numericColumns,
+              getColumnsOptions: this.getColumnsOptions
             });
           }
         case STAT_TYPE.TREND_CHART:
@@ -176,20 +171,20 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
             return /*#__PURE__*/React.createElement(TrendSettings, {
               settingType: settingType,
               selectedTableId: selectedTableId,
-              columns: _this.columns,
-              numericColumns: _this.numericColumns,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
               statItem: statItem,
               labelColorConfigs: labelColorConfigs,
               eventBus: eventBus,
-              getColumnsOptions: _this.getColumnsOptions,
+              getColumnsOptions: this.getColumnsOptions,
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              onChangeSummaryType: _this.onChangeSummaryType,
-              onSelectSummaryColumn: _this.onSelectSummaryColumn,
-              onSelectSummaryMethod: _this.onSelectSummaryMethod
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod
             });
           }
         case STAT_TYPE.DASHBOARD:
@@ -203,10 +198,10 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
-              getConvertedChart: _this.props.getConvertedChart,
+              getConvertedChart: this.props.getConvertedChart,
               updateStatItem: updateStatItem,
-              numericColumns: _this.numericColumns,
-              getColumnsOptions: _this.getColumnsOptions
+              numericColumns: this.numericColumns,
+              getColumnsOptions: this.getColumnsOptions
             });
           }
         default:
@@ -215,29 +210,32 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
           }
       }
     };
-    _this.getColumnsOptions = function (columns) {
+    this.getColumnsOptions = columns => {
       if (!Array.isArray(columns)) return [];
-      return columns.map(function (column) {
-        var name = column.name,
-          key = column.key,
-          type = column.type;
+      return columns.map(column => {
+        const {
+          name,
+          key,
+          type
+        } = column;
         return {
           label: /*#__PURE__*/React.createElement("span", {
             className: "select-option-name"
           }, name),
           value: {
-            name: name,
-            key: key,
-            type: type
+            name,
+            key,
+            type
           }
         };
       });
     };
-    _this.onChangeSummaryType = function (summaryType) {
-      var _this$props$statItem = _this.props.statItem,
-        summary_type = _this$props$statItem.summary_type,
-        summary_column = _this$props$statItem.summary_column,
-        summary_method = _this$props$statItem.summary_method;
+    this.onChangeSummaryType = summaryType => {
+      let {
+        summary_type,
+        summary_column,
+        summary_method
+      } = this.props.statItem;
       if (summaryType === summary_type) return;
       if (summaryType === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
         summary_column = null;
@@ -248,83 +246,81 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
         summary_method = null;
         summary_column = null;
       }
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        summary_type: summary_type,
-        summary_column: summary_column,
-        summary_method: summary_method
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_type,
+        summary_column,
+        summary_method
       }));
     };
-    _this.onChangeColor = function (targetColor) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.onChangeColor = targetColor => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         data_color: targetColor
       }));
     };
-    _this.onSelectSummaryColumn = function (summaryColumn) {
-      var summary_column = _this.props.statItem.summary_column;
+    this.onSelectSummaryColumn = summaryColumn => {
+      const {
+        summary_column
+      } = this.props.statItem;
       if (summaryColumn === summary_column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         summary_column: summaryColumn
       }));
     };
-    _this.onSelectSummaryMethod = function (summaryMethod) {
-      var summary_method = _this.props.statItem.summary_method;
+    this.onSelectSummaryMethod = summaryMethod => {
+      const {
+        summary_method
+      } = this.props.statItem;
       if (summaryMethod === summary_method) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         summary_method: summaryMethod
       }));
     };
-    _this.selectEditType = function (type) {
-      _this.setState({
+    this.selectEditType = type => {
+      this.setState({
         settingType: type
       });
     };
-    var _getTableById = props.getTableById,
-      _statItem = props.statItem;
-    var selectedTable = _getTableById(_statItem.table_id);
-    _this.columns = selectedTable.columns;
-    _this.numericColumns = _this.getNumericColumns(_this.columns);
-    _this.state = {
+    const {
+      getTableById: _getTableById,
+      statItem: _statItem
+    } = props;
+    const selectedTable = _getTableById(_statItem.table_id);
+    this.columns = selectedTable.columns;
+    this.numericColumns = this.getNumericColumns(this.columns);
+    this.state = {
       settingType: 'data'
     };
-    return _this;
   }
-  _createClass(AdvancedChartSettings, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var getTableById = this.props.getTableById;
-      var newSelectedTableId = nextProps.statItem.table_id;
-      if (newSelectedTableId !== this.props.statItem.table_id) {
-        var selectedTable = getTableById(newSelectedTableId);
-        this.columns = selectedTable.columns;
-        this.numericColumns = this.getNumericColumns(this.columns);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var settingType = this.state.settingType;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings"
-      }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings-type"
-      }, /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick() {
-          return _this2.selectEditType('data');
-        },
-        className: "statistic-type-item ".concat(settingType === 'data' ? 'selected-statistic-type-item' : '')
-      }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick() {
-          return _this2.selectEditType('style');
-        },
-        className: "statistic-type-item ".concat(settingType === 'style' ? 'selected-statistic-type-item' : '')
-      }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-settings-parameter-list pt-4"
-      }, this.getSettingsByType()))));
+  componentWillReceiveProps(nextProps) {
+    const {
+      getTableById
+    } = this.props;
+    const newSelectedTableId = nextProps.statItem.table_id;
+    if (newSelectedTableId !== this.props.statItem.table_id) {
+      const selectedTable = getTableById(newSelectedTableId);
+      this.columns = selectedTable.columns;
+      this.numericColumns = this.getNumericColumns(this.columns);
     }
-  }]);
-  return AdvancedChartSettings;
-}(React.Component);
+  }
+  render() {
+    const {
+      settingType
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings"
+    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings-type"
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: () => this.selectEditType('data'),
+      className: "statistic-type-item ".concat(settingType === 'data' ? 'selected-statistic-type-item' : '')
+    }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
+      onClick: () => this.selectEditType('style'),
+      className: "statistic-type-item ".concat(settingType === 'style' ? 'selected-statistic-type-item' : '')
+    }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-settings-parameter-list pt-4"
+    }, this.getSettingsByType()))));
+  }
+}
 export default AdvancedChartSettings;

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

@@ -1,7 +1,3 @@
-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, Fragment } from 'react';
 import BaseSettings from '../public-setting/base-settings';
 import ColumnSettings from '../public-setting/column-settings';
@@ -11,111 +7,105 @@ import { isMapColumn } from '../../../utils/column-utils';
 import { GEOLOCATION_GRANULARITY } from '../../../constants';
 import MapLevelSettings from '../map/map-level';
 import MapProvinceCitySettings from '../map/map-province-city';
-var MapSettings = /*#__PURE__*/function (_Component) {
-  _inherits(MapSettings, _Component);
-  var _super = _createSuper(MapSettings);
-  function MapSettings(props) {
-    var _this;
-    _classCallCheck(this, MapSettings);
-    _this = _super.call(this, props);
-    _this.getColumns = function (columns) {
+class MapSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.getColumns = columns => {
       if (!Array.isArray(columns) || columns.length === 0) return [];
-      return columns.filter(function (column) {
-        return isMapColumn(column);
-      });
+      return columns.filter(column => isMapColumn(column));
     };
-    _this.getSelectedGeoColumnOption = function () {
-      return _this.geoColumnsOptions.find(function (option) {
-        return option.value.key === _this.props.statItem.geo_column;
-      });
+    this.getSelectedGeoColumnOption = () => {
+      return this.geoColumnsOptions.find(option => option.value.key === this.props.statItem.geo_column);
     };
-    _this.onSelectGeoColumn = function (option) {
-      var geo_column = _this.props.statItem.geo_column;
-      var new_geo_column = option.value.key;
+    this.onSelectGeoColumn = option => {
+      const {
+        geo_column
+      } = this.props.statItem;
+      const new_geo_column = option.value.key;
       if (new_geo_column === geo_column) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         geo_column: new_geo_column,
         geolocation_granularity: GEOLOCATION_GRANULARITY.PROVINCE
       }));
     };
-    var _columns = props.columns,
-      getColumnsOptions = props.getColumnsOptions;
-    var geoColumns = _this.getColumns(_columns);
-    _this.geoColumnsOptions = getColumnsOptions(geoColumns);
-    return _this;
+    const {
+      columns: _columns,
+      getColumnsOptions
+    } = props;
+    const geoColumns = this.getColumns(_columns);
+    this.geoColumnsOptions = getColumnsOptions(geoColumns);
   }
-  _createClass(MapSettings, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.selectedTableId !== this.props.selectedTableId) {
-        var columns = nextProps.columns,
-          getColumnsOptions = nextProps.getColumnsOptions;
-        var geoColumns = this.getColumns(columns);
-        this.geoColumnsOptions = getColumnsOptions(geoColumns);
-      }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        columns,
+        getColumnsOptions
+      } = nextProps;
+      const geoColumns = this.getColumns(columns);
+      this.geoColumnsOptions = getColumnsOptions(geoColumns);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getTables = _this$props.getTables,
-        getViews = _this$props.getViews,
-        settingType = _this$props.settingType,
-        selectedTableId = _this$props.selectedTableId,
-        statItem = _this$props.statItem,
-        getColumnsOptions = _this$props.getColumnsOptions,
-        numericColumns = _this$props.numericColumns;
-      var selectedViewId = statItem.view_id;
-      var selectedGeoColumnOption = this.getSelectedGeoColumnOption();
-      if (settingType === 'style') {
-        return /*#__PURE__*/React.createElement(MapStyleSetting, {
-          statItem: statItem,
-          onChangeColor: this.props.onChangeColor,
-          updateStatItem: this.props.updateStatItem
-        });
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
-        statItem: statItem,
-        selectedTableId: selectedTableId,
-        selectedViewId: selectedViewId,
-        getTables: getTables,
-        getViews: getViews,
-        getTableById: this.props.getTableById,
-        getConvertedChart: this.props.getConvertedChart,
-        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, {
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const {
+      view_id: selectedViewId
+    } = statItem;
+    const selectedGeoColumnOption = this.getSelectedGeoColumnOption();
+    if (settingType === 'style') {
+      return /*#__PURE__*/React.createElement(MapStyleSetting, {
         statItem: statItem,
+        onChangeColor: this.props.onChangeColor,
         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, {
-        columnsOptions: this.geoColumnsOptions,
-        selectedColumnOption: selectedGeoColumnOption,
-        onChangeSelectedColumn: this.onSelectGeoColumn
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(SummarySettings, {
-        label: '归总方法',
-        statItem: statItem,
-        selectedTableId: selectedTableId,
-        numericColumns: numericColumns,
-        summaryType: statItem.summary_type,
-        summaryMethod: statItem.summary_method,
-        summaryColumn: statItem.summary_column,
-        getColumnsOptions: getColumnsOptions,
-        onChangeSummaryType: this.props.onChangeSummaryType,
-        onSelectSummaryColumn: this.props.onSelectSummaryColumn,
-        onSelectSummaryMethod: this.props.onSelectSummaryMethod
-      }));
+      });
     }
-  }]);
-  return MapSettings;
-}(Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      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, {
+      columnsOptions: this.geoColumnsOptions,
+      selectedColumnOption: selectedGeoColumnOption,
+      onChangeSelectedColumn: this.onSelectGeoColumn
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(SummarySettings, {
+      label: '归总方法',
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      numericColumns: numericColumns,
+      summaryType: statItem.summary_type,
+      summaryMethod: statItem.summary_method,
+      summaryColumn: statItem.summary_column,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: this.props.onChangeSummaryType,
+      onSelectSummaryColumn: this.props.onSelectSummaryColumn,
+      onSelectSummaryMethod: this.props.onSelectSummaryMethod
+    }));
+  }
+}
 export default MapSettings;