dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,193 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 { Input } from 'reactstrap';
+import intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+import BaseSettings from '../public-setting/base-settings';
+import ColumnSettings from '../public-setting/column-settings';
+import { STATISTICS_COUNT_SHOW, SUMMARY_METHOD } from '../../../constants';
+var DashboardChartSettings = /*#__PURE__*/function (_Component) {
+  _inherits(DashboardChartSettings, _Component);
+  var _super = _createSuper(DashboardChartSettings);
+  function DashboardChartSettings(props) {
+    var _this;
+    _classCallCheck(this, DashboardChartSettings);
+    _this = _super.call(this, props);
+    _this.onSelectTargetValueColumn = function (option) {
+      var target_value_column = _this.props.statItem.target_value_column;
+      var 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 = function (option) {
+      var total_value_column = _this.props.statItem.total_value_column;
+      var 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 = function () {
+      var numberCardSummaryMethod = ['Row_count'].concat(_toConsumableArray(SUMMARY_METHOD));
+      return numberCardSummaryMethod.map(function (method) {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(STATISTICS_COUNT_SHOW[method])),
+          value: method
+        };
+      });
+    };
+    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
+      return summaryMethodsOptions.find(function (m) {
+        return m.value === method;
+      }) || summaryMethodsOptions[0];
+    };
+    _this.onSelectTargetValueColumnSummaryMethod = function (option) {
+      var target_value_column_summary_method = _this.props.statItem.target_value_column_summary_method;
+      var 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 = function (option) {
+      var total_value_column_summary_method = _this.props.statItem.total_value_column_summary_method;
+      var 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 = function (option) {
+      var statItem = _this.props.statItem;
+      var target_value_column_summary_method = statItem.target_value_column_summary_method,
+        total_value_column_summary_method = statItem.total_value_column_summary_method;
+      var 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;
+      }
+      var selectedMethodOption = _this.getSelectedMethodOption(summary_method, _this.summaryMethodsOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedMethodOption,
+        onChange: onSelectSummaryMethod,
+        options: _this.summaryMethodsOptions
+      }));
+    };
+    _this.onChangeName = function (event) {
+      var value = event.target.value;
+      _this.setState({
+        statName: value
+      });
+    };
+    _this.onSaveName = function (event) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        name: _this.state.statName
+      }));
+    };
+    _this.onKeyDown = function (e) {
+      if (e.key == 'Enter') {
+        e.preventDefault();
+        e.target.blur();
+      }
+    };
+    _this.getStyleSetting = function () {
+      var statItem = _this.props.statItem;
+      var statName = _this.state.statName;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Label')), /*#__PURE__*/React.createElement(Input, {
+        type: "text",
+        value: statName || '',
+        placeholder: statItem.name,
+        onBlur: _this.onSaveName,
+        onKeyDown: _this.onKeyDown,
+        onChange: _this.onChangeName
+      })));
+    };
+    var numericColumns = props.numericColumns,
+      getColumnsOptions = props.getColumnsOptions,
+      _statItem = props.statItem;
+    _this.numericColumnOptions = getColumnsOptions(numericColumns);
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    _this.state = {
+      statName: _statItem.name
+    };
+    return _this;
+  }
+  _createClass(DashboardChartSettings, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var numericColumns = nextProps.numericColumns,
+          getColumnsOptions = nextProps.getColumnsOptions;
+        this.numericColumnOptions = getColumnsOptions(numericColumns);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews,
+        statItem = _this$props.statItem,
+        updateStatItem = _this$props.updateStatItem,
+        selectedTableId = _this$props.selectedTableId,
+        settingType = _this$props.settingType;
+      if (settingType === 'style') {
+        return this.getStyleSetting();
+      }
+      var target_value_column = statItem.target_value_column,
+        total_value_column = statItem.total_value_column;
+      var selectedTargetValueColumnOption = this.numericColumnOptions.filter(function (option) {
+        return option.value.key === target_value_column;
+      })[0];
+      var selectedTotalValueColumnOption = this.numericColumnOptions.filter(function (option) {
+        return option.value.key === total_value_column;
+      })[0];
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: selectedTableId,
+        selectedViewId: statItem.view_id,
+        getTables: getTables,
+        getViews: getViews,
+        getTableById: this.props.getTableById,
+        updateStatItem: updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.numericColumnOptions,
+        selectedColumnOption: selectedTargetValueColumnOption,
+        onChangeSelectedColumn: this.onSelectTargetValueColumn
+      })), this.renderSummaryMethod({
+        targetColumn: 'target_value_column'
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.numericColumnOptions,
+        selectedColumnOption: selectedTotalValueColumnOption,
+        onChangeSelectedColumn: this.onSelectTotalValueColumn
+      })), this.renderSummaryMethod({
+        targetColumn: 'total_value_column'
+      }));
+    }
+  }]);
+  return DashboardChartSettings;
+}(Component);
+export default DashboardChartSettings;

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

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react';
+import { DTableSelect } from '../../../components';
+function GeoGranularitySettings(props) {
+  var geoGranularityOptions = props.geoGranularityOptions,
+    selectedGeoGranularityOption = props.selectedGeoGranularityOption,
+    onChangeGeoGranularity = props.onChangeGeoGranularity;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedGeoGranularityOption,
+    options: geoGranularityOptions,
+    onChange: onChangeGeoGranularity
+  }));
+}
+export default GeoGranularitySettings;

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

@@ -0,0 +1,107 @@
+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 intl from 'react-intl-universal';
+import BaseSettings from '../public-setting/base-settings';
+import ColumnSettings from '../public-setting/column-settings';
+import SummarySettings from './summary-settings';
+import StyleSettings from './style-setting/heat-map-settings';
+import { TIME_COLUMN_LIST } from '../../../constants';
+var HeatMapSettings = /*#__PURE__*/function (_Component) {
+  _inherits(HeatMapSettings, _Component);
+  var _super = _createSuper(HeatMapSettings);
+  function HeatMapSettings(props) {
+    var _this;
+    _classCallCheck(this, HeatMapSettings);
+    _this = _super.call(this, props);
+    _this.getSelectedDateColumnOption = function () {
+      return _this.dateColumnsOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.time_column;
+      });
+    };
+    _this.onSelectDateColumn = function (option) {
+      var time_column = _this.props.statItem.time_column;
+      var 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
+      }));
+    };
+    var columns = props.columns,
+      getColumnsOptions = props.getColumnsOptions;
+    var dateColumns = columns.filter(function (column) {
+      return TIME_COLUMN_LIST.includes(column.type);
+    });
+    _this.dateColumnsOptions = getColumnsOptions(dateColumns);
+    return _this;
+  }
+  _createClass(HeatMapSettings, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var columns = nextProps.columns,
+          getColumnsOptions = nextProps.getColumnsOptions;
+        var dateColumns = columns.filter(function (column) {
+          return TIME_COLUMN_LIST.includes(column.type);
+        });
+        this.dateColumnsOptions = getColumnsOptions(dateColumns);
+      }
+    }
+  }, {
+    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 selectedDateColumnOption = this.getSelectedDateColumnOption();
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(StyleSettings, {
+          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,
+        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, intl.get('Time_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.dateColumnsOptions,
+        selectedColumnOption: selectedDateColumnOption,
+        onChangeSelectedColumn: this.onSelectDateColumn
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(SummarySettings, {
+        label: intl.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
+      }));
+    }
+  }]);
+  return HeatMapSettings;
+}(Component);
+export default HeatMapSettings;

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

@@ -0,0 +1,332 @@
+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';
+import MapSettings from './map-settings';
+import WorldMapSettings from './world-map-settings';
+import HeatMapSettings from './heat-map-settings';
+import MirrorSettings from './mirror-settings';
+import BasicNumberCardSettings from './basic-number-card-settings';
+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 = {
+  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.getDefaultColumnGroupbyType = function (_ref) {
+      var summary_type = _ref.summary_type;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
+      }
+      return GROUP_TYPES.COUNT;
+    };
+    _this.getNumericColumns = function (columns) {
+      if (!columns) return [];
+      return columns.filter(function (column) {
+        return 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;
+      switch (type) {
+        case STAT_TYPE.MAP:
+        case STAT_TYPE.MAP_BUBBLE:
+          {
+            return /*#__PURE__*/React.createElement(MapSettings, {
+              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,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: _this.onChangeSummaryType,
+              onSelectSummaryColumn: _this.onSelectSummaryColumn,
+              onSelectSummaryMethod: _this.onSelectSummaryMethod,
+              onChangeColor: _this.onChangeColor
+            });
+          }
+        case STAT_TYPE.WORLD_MAP:
+        case STAT_TYPE.WORLD_MAP_BUBBLE:
+          {
+            return /*#__PURE__*/React.createElement(WorldMapSettings, {
+              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,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: _this.onChangeSummaryType,
+              onSelectSummaryColumn: _this.onSelectSummaryColumn,
+              onSelectSummaryMethod: _this.onSelectSummaryMethod,
+              onChangeColor: _this.onChangeColor
+            });
+          }
+        case STAT_TYPE.HEAT_MAP:
+          {
+            return /*#__PURE__*/React.createElement(HeatMapSettings, {
+              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,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: _this.onChangeSummaryType,
+              onSelectSummaryColumn: _this.onSelectSummaryColumn,
+              onSelectSummaryMethod: _this.onSelectSummaryMethod,
+              onChangeColor: _this.onChangeColor
+            });
+          }
+        case STAT_TYPE.MIRROR:
+          {
+            return /*#__PURE__*/React.createElement(MirrorSettings, {
+              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,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: _this.onChangeSummaryType,
+              onSelectSummaryColumn: _this.onSelectSummaryColumn,
+              onSelectSummaryMethod: _this.onSelectSummaryMethod
+            });
+          }
+        case STAT_TYPE.BASIC_NUMBER_CARD:
+          {
+            return /*#__PURE__*/React.createElement(BasicNumberCardSettings, {
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              updateStatItem: updateStatItem,
+              numericColumns: _this.numericColumns,
+              getColumnsOptions: _this.getColumnsOptions,
+              onChangeSummaryType: _this.onChangeSummaryType,
+              onSelectSummaryMethod: _this.onSelectSummaryMethod
+            });
+          }
+        case STAT_TYPE.COMBINATION_CHART:
+          {
+            return /*#__PURE__*/React.createElement(CombinationSettings, {
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              settingType: settingType,
+              columns: _this.columns,
+              selectedTableId: selectedTableId,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              updateStatItem: updateStatItem,
+              numericColumns: _this.numericColumns,
+              getColumnsOptions: _this.getColumnsOptions
+            });
+          }
+        case STAT_TYPE.TREND_CHART:
+          {
+            return /*#__PURE__*/React.createElement(TrendSettings, {
+              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,
+              updateStatItem: updateStatItem,
+              onChangeSummaryType: _this.onChangeSummaryType,
+              onSelectSummaryColumn: _this.onSelectSummaryColumn,
+              onSelectSummaryMethod: _this.onSelectSummaryMethod
+            });
+          }
+        case STAT_TYPE.DASHBOARD:
+          {
+            return /*#__PURE__*/React.createElement(DashboardChartSettings, {
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              settingType: settingType,
+              selectedTableId: selectedTableId,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              updateStatItem: updateStatItem,
+              numericColumns: _this.numericColumns,
+              getColumnsOptions: _this.getColumnsOptions
+            });
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    };
+    _this.getColumnsOptions = function (columns) {
+      if (!Array.isArray(columns)) return [];
+      return columns.map(function (column) {
+        var name = column.name,
+          key = column.key,
+          type = column.type;
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, name),
+          value: {
+            name: name,
+            key: key,
+            type: 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;
+      if (summaryType === _this.columnGroupbyType) return;
+      if (summaryType === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+        var defaultColumn = _this.numericColumns[0];
+        summary_column = defaultColumn ? defaultColumn.key : null;
+        summary_method = SUMMARY_METHOD[0];
+        summary_type = SUMMARY_TYPE.ADVANCED;
+      } else {
+        summary_type = SUMMARY_TYPE.COUNT;
+        summary_method = null;
+        summary_column = null;
+      }
+      _this.columnGroupbyType = summaryType;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_type: summary_type,
+        summary_column: summary_column,
+        summary_method: summary_method
+      }));
+    };
+    _this.onChangeColor = function (targetColor) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        data_color: targetColor
+      }));
+    };
+    _this.onSelectSummaryColumn = function (summaryColumn) {
+      var summary_column = _this.props.statItem.summary_column;
+      if (summaryColumn === summary_column) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_column: summaryColumn
+      }));
+    };
+    _this.onSelectSummaryMethod = function (summaryMethod) {
+      var summary_method = _this.props.statItem.summary_method;
+      if (summaryMethod === summary_method) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        summary_method: summaryMethod
+      }));
+    };
+    _this.selectEditType = function (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 = {
+      settingType: 'data'
+    };
+    _this.columnGroupbyType = _this.getDefaultColumnGroupbyType(_statItem);
+    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()))));
+    }
+  }]);
+  return AdvancedChartSettings;
+}(React.Component);
+export default AdvancedChartSettings;