dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+var _constants = require("../../../constants");
+class DashboardChartSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onSelectTargetValueColumn = option => {
+      const {
+        target_value_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
+      if (target_value_column === new_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        target_value_column: new_column
+      }));
+    };
+    this.onSelectTotalValueColumn = option => {
+      const {
+        total_value_column
+      } = this.props.statItem;
+      const new_column = option.value.key;
+      if (total_value_column === new_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        total_value_column: new_column
+      }));
+    };
+    this.getSummaryMethodsOptions = () => {
+      let numberCardSummaryMethod = ['Row_count', ..._constants.SUMMARY_METHOD];
+      return numberCardSummaryMethod.map(method => {
+        return {
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[method])),
+          value: method
+        };
+      });
+    };
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+    };
+    this.onSelectTargetValueColumnSummaryMethod = option => {
+      const {
+        target_value_column_summary_method
+      } = this.props.statItem;
+      const new_summary_method = option.value;
+      if (target_value_column_summary_method === new_summary_method) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        target_value_column_summary_method: new_summary_method
+      }));
+    };
+    this.onSelectTotalValueColumnSummaryMethod = option => {
+      const {
+        total_value_column_summary_method
+      } = this.props.statItem;
+      const new_summary_method = option.value;
+      if (total_value_column_summary_method === new_summary_method) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        total_value_column_summary_method: new_summary_method
+      }));
+    };
+    this.renderSummaryMethod = option => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        target_value_column_summary_method,
+        total_value_column_summary_method
+      } = statItem;
+      let summary_method, onSelectSummaryMethod;
+      if (option.targetColumn === 'target_value_column') {
+        summary_method = target_value_column_summary_method;
+        onSelectSummaryMethod = this.onSelectTargetValueColumnSummaryMethod;
+      } else {
+        summary_method = total_value_column_summary_method;
+        onSelectSummaryMethod = this.onSelectTotalValueColumnSummaryMethod;
+      }
+      const selectedMethodOption = this.getSelectedMethodOption(summary_method, this.summaryMethodsOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Summary_method')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedMethodOption,
+        onChange: onSelectSummaryMethod,
+        options: this.summaryMethodsOptions
+      }));
+    };
+    this.onChangeName = event => {
+      const value = event.target.value;
+      this.setState({
+        statName: value
+      });
+    };
+    this.onSaveName = event => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        name: this.state.statName
+      }));
+    };
+    this.onKeyDown = e => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.target.blur();
+      }
+    };
+    this.getStyleSetting = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        statName
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Label')), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+        type: "text",
+        value: statName || '',
+        placeholder: statItem.name,
+        onBlur: this.onSaveName,
+        onKeyDown: this.onKeyDown,
+        onChange: this.onChangeName
+      })));
+    };
+    const {
+      numericColumns,
+      getColumnsOptions,
+      statItem: _statItem
+    } = props;
+    this.numericColumnOptions = getColumnsOptions(numericColumns);
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+    this.state = {
+      statName: _statItem.name
+    };
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        numericColumns,
+        getColumnsOptions
+      } = nextProps;
+      this.numericColumnOptions = getColumnsOptions(numericColumns);
+    }
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      statItem,
+      updateStatItem,
+      selectedTableId,
+      settingType
+    } = this.props;
+    if (settingType === 'style') {
+      return this.getStyleSetting();
+    }
+    const {
+      target_value_column,
+      total_value_column
+    } = statItem;
+    const selectedTargetValueColumnOption = this.numericColumnOptions.filter(option => option.value.key === target_value_column)[0];
+    const selectedTotalValueColumnOption = this.numericColumnOptions.filter(option => option.value.key === total_value_column)[0];
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: statItem.view_id,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Current_value_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.numericColumnOptions,
+      selectedColumnOption: selectedTargetValueColumnOption,
+      onChangeSelectedColumn: this.onSelectTargetValueColumn
+    })), this.renderSummaryMethod({
+      targetColumn: 'target_value_column'
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Total_value_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.numericColumnOptions,
+      selectedColumnOption: selectedTotalValueColumnOption,
+      onChangeSelectedColumn: this.onSelectTotalValueColumn
+    })), this.renderSummaryMethod({
+      targetColumn: 'total_value_column'
+    }));
+  }
+}
+var _default = exports.default = DashboardChartSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/geo-granularity-settings.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+function GeoGranularitySettings(props) {
+  const {
+    geoGranularityOptions,
+    selectedGeoGranularityOption,
+    onChangeGeoGranularity
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+    value: selectedGeoGranularityOption,
+    options: geoGranularityOptions,
+    onChange: onChangeGeoGranularity
+  }));
+}
+var _default = exports.default = GeoGranularitySettings;

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _heatMapSettings = _interopRequireDefault(require("./style-setting/heat-map-settings"));
+var _columnUtils = require("../../../utils/column-utils");
+class HeatMapSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getSelectedDateColumnOption = () => {
+      return this.dateColumnsOptions.find(option => option.value.key === this.props.statItem.time_column);
+    };
+    this.onSelectDateColumn = option => {
+      const {
+        time_column
+      } = this.props.statItem;
+      const new_time_column = option.value.key;
+      if (new_time_column === time_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        time_column: new_time_column
+      }));
+    };
+    const {
+      columns,
+      getColumnsOptions
+    } = props;
+    const dateColumns = columns.filter(column => (0, _columnUtils.isStatisticDateColumn)(column));
+    this.dateColumnsOptions = getColumnsOptions(dateColumns);
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        columns,
+        getColumnsOptions
+      } = nextProps;
+      const dateColumns = columns.filter(column => (0, _columnUtils.isStatisticDateColumn)(column));
+      this.dateColumnsOptions = getColumnsOptions(dateColumns);
+    }
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const {
+      view_id: selectedViewId
+    } = statItem;
+    const selectedDateColumnOption = this.getSelectedDateColumnOption();
+    if (settingType === 'style') {
+      return /*#__PURE__*/_react.default.createElement(_heatMapSettings.default, {
+        statItem: statItem,
+        onChangeColor: this.props.onChangeColor,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Time_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.dateColumnsOptions,
+      selectedColumnOption: selectedDateColumnOption,
+      onChangeSelectedColumn: this.onSelectDateColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      label: _reactIntlUniversal.default.get('Summary_method'),
+      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
+    }));
+  }
+}
+var _default = exports.default = HeatMapSettings;

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

@@ -0,0 +1,334 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _mapSettings = _interopRequireDefault(require("./map-settings"));
+var _worldMapSettings = _interopRequireDefault(require("./world-map-settings"));
+var _heatMapSettings = _interopRequireDefault(require("./heat-map-settings"));
+var _mirrorSettings = _interopRequireDefault(require("./mirror-settings"));
+var _basicNumberCardSettings = _interopRequireDefault(require("./basic-number-card-settings"));
+var _combinationSettings = _interopRequireDefault(require("./combination-settings"));
+var _trendChartSettings = _interopRequireDefault(require("./trend-chart-settings"));
+var _dashboardChartSettings = _interopRequireDefault(require("./dashboard-chart-settings"));
+var _constants = require("../../../constants");
+const GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+class AdvancedChartSettings extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.getNumericColumns = columns => {
+      if (!columns) return [];
+      return columns.filter(column => column && (0, _dtableUtils.isNumericColumn)(column));
+    };
+    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 _constants.STAT_TYPE.MAP:
+        case _constants.STAT_TYPE.MAP_BUBBLE:
+          {
+            return /*#__PURE__*/_react.default.createElement(_mapSettings.default, {
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              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,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod,
+              onChangeColor: this.onChangeColor
+            });
+          }
+        case _constants.STAT_TYPE.WORLD_MAP:
+        case _constants.STAT_TYPE.WORLD_MAP_BUBBLE:
+          {
+            return /*#__PURE__*/_react.default.createElement(_worldMapSettings.default, {
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getColumnsOptions: this.getColumnsOptions,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod,
+              onChangeColor: this.onChangeColor
+            });
+          }
+        case _constants.STAT_TYPE.HEAT_MAP:
+          {
+            return /*#__PURE__*/_react.default.createElement(_heatMapSettings.default, {
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getColumnsOptions: this.getColumnsOptions,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod,
+              onChangeColor: this.onChangeColor
+            });
+          }
+        case _constants.STAT_TYPE.MIRROR:
+          {
+            return /*#__PURE__*/_react.default.createElement(_mirrorSettings.default, {
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getColumnsOptions: this.getColumnsOptions,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod
+            });
+          }
+        case _constants.STAT_TYPE.BASIC_NUMBER_CARD:
+          {
+            return /*#__PURE__*/_react.default.createElement(_basicNumberCardSettings.default, {
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              numericColumns: this.numericColumns,
+              getColumnsOptions: this.getColumnsOptions,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryMethod: this.onSelectSummaryMethod
+            });
+          }
+        case _constants.STAT_TYPE.COMBINATION_CHART:
+          {
+            return /*#__PURE__*/_react.default.createElement(_combinationSettings.default, {
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              settingType: settingType,
+              columns: this.columns,
+              selectedTableId: selectedTableId,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              numericColumns: this.numericColumns,
+              getColumnsOptions: this.getColumnsOptions
+            });
+          }
+        case _constants.STAT_TYPE.TREND_CHART:
+          {
+            return /*#__PURE__*/_react.default.createElement(_trendChartSettings.default, {
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              columns: this.columns,
+              numericColumns: this.numericColumns,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getColumnsOptions: this.getColumnsOptions,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: this.onChangeSummaryType,
+              onSelectSummaryColumn: this.onSelectSummaryColumn,
+              onSelectSummaryMethod: this.onSelectSummaryMethod
+            });
+          }
+        case _constants.STAT_TYPE.DASHBOARD:
+          {
+            return /*#__PURE__*/_react.default.createElement(_dashboardChartSettings.default, {
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: updateStatItem,
+              numericColumns: this.numericColumns,
+              getColumnsOptions: this.getColumnsOptions
+            });
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    };
+    this.getColumnsOptions = columns => {
+      if (!Array.isArray(columns)) return [];
+      return columns.map(column => {
+        const {
+          name,
+          key,
+          type
+        } = column;
+        return {
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, name),
+          value: {
+            name,
+            key,
+            type
+          }
+        };
+      });
+    };
+    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;
+        summary_method = _constants.SUMMARY_METHOD[0];
+        summary_type = _constants.SUMMARY_TYPE.ADVANCED;
+      } else {
+        summary_type = _constants.SUMMARY_TYPE.COUNT;
+        summary_method = null;
+        summary_column = null;
+      }
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_type,
+        summary_column,
+        summary_method
+      }));
+    };
+    this.onChangeColor = targetColor => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        data_color: targetColor
+      }));
+    };
+    this.onSelectSummaryColumn = summaryColumn => {
+      const {
+        summary_column
+      } = this.props.statItem;
+      if (summaryColumn === summary_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_column: summaryColumn
+      }));
+    };
+    this.onSelectSummaryMethod = summaryMethod => {
+      const {
+        summary_method
+      } = this.props.statItem;
+      if (summaryMethod === summary_method) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        summary_method: summaryMethod
+      }));
+    };
+    this.selectEditType = type => {
+      this.setState({
+        settingType: type
+      });
+    };
+    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'
+    };
+  }
+  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);
+    }
+  }
+  render() {
+    const {
+      settingType
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings"
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings-type"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => this.selectEditType('data'),
+      className: "statistic-type-item ".concat(settingType === 'data' ? 'selected-statistic-type-item' : '')
+    }, _reactIntlUniversal.default.get('Data_settings')), /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => this.selectEditType('style'),
+      className: "statistic-type-item ".concat(settingType === 'style' ? 'selected-statistic-type-item' : '')
+    }, _reactIntlUniversal.default.get('Style_settings'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings-parameter-list pt-4"
+    }, this.getSettingsByType()))));
+  }
+}
+var _default = exports.default = AdvancedChartSettings;