dtable-statistic 4.2.1 → 4.3.0

package/es/stat-editor/stat-settings/advance-chart-settings/combination-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 { Input } from 'reactstrap';
 import intl from 'react-intl-universal';
@@ -13,23 +9,19 @@ import CombinationStyleSettings from './style-setting/combination-style-setting'
 import ToggleSetting from '../public-setting/toggle-setting';
 import SummarySettings from './summary-settings';
 import { BASIC_CHART_COLUMN_LIST, DATE_GRANULARITY, GEOLOCATION_GRANULARITY, STATISTICS_COUNT_SHOW, SUMMARY_METHOD, SUMMARY_TYPE } from '../../../constants';
-var DATE_COLUMN_OPTIONS = ['date', 'mtime', 'ctime'];
-var DATE_GRANULARITY_LIST = [DATE_GRANULARITY.DAY, DATE_GRANULARITY.WEEK, DATE_GRANULARITY.MONTH, DATE_GRANULARITY.QUARTER, DATE_GRANULARITY.YEAR];
-var GEOLOCATION_GRANULARITY_LIST = [GEOLOCATION_GRANULARITY.PROVINCE, GEOLOCATION_GRANULARITY.CITY, GEOLOCATION_GRANULARITY.DISTRICT];
-var GROUP_TYPES = {
+const DATE_COLUMN_OPTIONS = ['date', 'mtime', 'ctime'];
+const DATE_GRANULARITY_LIST = [DATE_GRANULARITY.DAY, DATE_GRANULARITY.WEEK, DATE_GRANULARITY.MONTH, DATE_GRANULARITY.QUARTER, DATE_GRANULARITY.YEAR];
+const GEOLOCATION_GRANULARITY_LIST = [GEOLOCATION_GRANULARITY.PROVINCE, GEOLOCATION_GRANULARITY.CITY, GEOLOCATION_GRANULARITY.DISTRICT];
+const GROUP_TYPES = {
   COUNT: 'count',
   SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
   MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
 };
-var CombinationSettings = /*#__PURE__*/function (_Component) {
-  _inherits(CombinationSettings, _Component);
-  var _super = _createSuper(CombinationSettings);
-  function CombinationSettings(props) {
-    var _this;
-    _classCallCheck(this, CombinationSettings);
-    _this = _super.call(this, props);
-    _this.getGranularityOptions = function (options) {
-      return options.map(function (g) {
+class CombinationSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.getGranularityOptions = options => {
+      return options.map(g => {
         return {
           value: g,
           label: /*#__PURE__*/React.createElement("span", {
@@ -38,90 +30,88 @@ var CombinationSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.renderGroupbyDateGranularity = function () {
-      var statItem = _this.props.statItem;
-      var selectedDateGranularity = _this.getSelectedDateGranularity(statItem.x_axis_date_granularity);
+    this.renderGroupbyDateGranularity = () => {
+      const {
+        statItem
+      } = this.props;
+      let selectedDateGranularity = this.getSelectedDateGranularity(statItem.x_axis_date_granularity);
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedDateGranularity,
-        onChange: _this.onSelectGroupbyDateGranularity,
-        options: _this.dateGranularityOptions
+        onChange: this.onSelectGroupbyDateGranularity,
+        options: this.dateGranularityOptions
       }));
     };
-    _this.onSelectGroupbyDateGranularity = function (option) {
-      var newDateGranularity = option.value;
-      if (newDateGranularity === _this.props.statItem.x_axis_date_granularity) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.onSelectGroupbyDateGranularity = option => {
+      let newDateGranularity = option.value;
+      if (newDateGranularity === this.props.statItem.x_axis_date_granularity) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         x_axis_date_granularity: newDateGranularity
       }));
     };
-    _this.renderGroupbyGeolocationGranularity = function () {
-      var statItem = _this.props.statItem;
-      var selectedGeolocationGranularity = _this.getSelectedGeolocationGranularity(statItem.x_axis_geolocation_granularity);
-      if (_this.geolocationGranularityOptions.length === 0) return null;
+    this.renderGroupbyGeolocationGranularity = () => {
+      const {
+        statItem
+      } = this.props;
+      let selectedGeolocationGranularity = this.getSelectedGeolocationGranularity(statItem.x_axis_geolocation_granularity);
+      if (this.geolocationGranularityOptions.length === 0) return null;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedGeolocationGranularity,
-        onChange: _this.onSelectGroupbyGeolocationGranularity,
-        options: _this.geolocationGranularityOptions
+        onChange: this.onSelectGroupbyGeolocationGranularity,
+        options: this.geolocationGranularityOptions
       }));
     };
-    _this.getSelectedGeolocationGranularity = function (geolocationGranularity) {
-      return _this.geolocationGranularityOptions.find(function (g) {
-        return g.value === geolocationGranularity;
-      }) || _this.geolocationGranularityOptions[2];
+    this.getSelectedGeolocationGranularity = geolocationGranularity => {
+      return this.geolocationGranularityOptions.find(g => g.value === geolocationGranularity) || this.geolocationGranularityOptions[2];
     };
-    _this.getSelectedDateGranularity = function (dateGranularity) {
-      return _this.dateGranularityOptions.find(function (g) {
-        return g.value === dateGranularity;
-      }) || _this.dateGranularityOptions[2];
+    this.getSelectedDateGranularity = dateGranularity => {
+      return this.dateGranularityOptions.find(g => g.value === dateGranularity) || this.dateGranularityOptions[2];
     };
-    _this.onSelectGroupbyGeolocationGranularity = function (geolocationGranularityOption) {
-      var newGeolocationGranularity = geolocationGranularityOption.value;
-      if (newGeolocationGranularity === _this.props.statItem.x_axis_geolocation_granularity) return;
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.onSelectGroupbyGeolocationGranularity = geolocationGranularityOption => {
+      let newGeolocationGranularity = geolocationGranularityOption.value;
+      if (newGeolocationGranularity === this.props.statItem.x_axis_geolocation_granularity) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         x_axis_geolocation_granularity: newGeolocationGranularity
       }));
     };
-    _this.getAvailableColumns = function (columns) {
+    this.getAvailableColumns = columns => {
       if (!columns || !Array.isArray(columns)) return [];
-      return columns.filter(function (c) {
-        return BASIC_CHART_COLUMN_LIST.includes(c.type);
-      });
+      return columns.filter(c => BASIC_CHART_COLUMN_LIST.includes(c.type));
     };
-    _this.getSelectedStatColumnOption = function () {
-      return _this.columnsOptions.find(function (option) {
-        return option.value.key === _this.props.statItem.x_axis_column_key;
-      });
+    this.getSelectedStatColumnOption = () => {
+      return this.columnsOptions.find(option => option.value.key === this.props.statItem.x_axis_column_key);
     };
-    _this.onSelectStatColumn = function (option) {
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        selectedTableId = _this$props.selectedTableId,
-        statItem = _this$props.statItem;
-      var _this$props$statItem = _this.props.statItem,
-        x_axis_column_key = _this$props$statItem.x_axis_column_key,
-        x_axis_geolocation_granularity = _this$props$statItem.x_axis_geolocation_granularity,
-        x_axis_date_granularity = _this$props$statItem.x_axis_date_granularity;
-      var new_column = option.value.key;
+    this.onSelectStatColumn = option => {
+      const {
+        getTableById,
+        selectedTableId,
+        statItem
+      } = this.props;
+      let {
+        x_axis_column_key,
+        x_axis_geolocation_granularity,
+        x_axis_date_granularity
+      } = this.props.statItem;
+      const new_column = option.value.key;
       if (x_axis_column_key === new_column) return;
-      var _option$value = option.value,
-        type = _option$value.type,
-        key = _option$value.key;
+      const {
+        type,
+        key
+      } = option.value;
       if (type === CellType.DATE) {
-        x_axis_date_granularity = _this.dateGranularityOptions[2].value;
+        x_axis_date_granularity = this.dateGranularityOptions[2].value;
       } else {
         x_axis_date_granularity = null;
       }
       if (type === CellType.GEOLOCATION) {
-        var selectedTable = getTableById(selectedTableId);
-        var geoColumn = selectedTable.columns.find(function (column) {
-          return column.key === key;
-        }) || {};
-        var _ref = geoColumn.data || {},
-          geo_format = _ref.geo_format;
+        const selectedTable = getTableById(selectedTableId);
+        const geoColumn = selectedTable.columns.find(column => column.key === key) || {};
+        const {
+          geo_format
+        } = geoColumn.data || {};
         if (geo_format === 'province') {
           x_axis_geolocation_granularity = 'province';
         } else if (geo_format === 'province_city') {
@@ -134,14 +124,14 @@ var CombinationSettings = /*#__PURE__*/function (_Component) {
       } else {
         x_axis_geolocation_granularity = null;
       }
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+      this.props.updateStatItem(Object.assign({}, statItem, {
         x_axis_column_key: new_column,
-        x_axis_date_granularity: x_axis_date_granularity,
-        x_axis_geolocation_granularity: x_axis_geolocation_granularity
+        x_axis_date_granularity,
+        x_axis_geolocation_granularity
       }));
     };
-    _this.getSummaryMethodsOptions = function () {
-      return SUMMARY_METHOD.map(function (method) {
+    this.getSummaryMethodsOptions = () => {
+      return SUMMARY_METHOD.map(method => {
         return {
           label: /*#__PURE__*/React.createElement("span", {
             className: "select-option-name"
@@ -150,39 +140,45 @@ var CombinationSettings = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
-      return summaryMethodsOptions.find(function (m) {
-        return m.value === method;
-      }) || summaryMethodsOptions[0];
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
     };
-    _this.onSaveName = function (event) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
-        name: _this.state.statName
+    this.onSaveName = event => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        name: this.state.statName
       }));
     };
-    _this.getStyleSetting = function () {
-      var statItem = _this.props.statItem;
-      var statName = _this.state.statName;
+    this.getStyleSetting = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        statName
+      } = this.state;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(Input, {
         type: "text",
-        onBlur: _this.onSaveName,
-        onChange: _this.onChangeName,
+        onBlur: this.onSaveName,
+        onChange: this.onChangeName,
         value: statName,
         placeholder: statItem.name
       })));
     };
-    _this.onChangeSummaryType = function (option, position) {
-      var statItem = _this.props.statItem;
-      var y_axis_right_summary_type = statItem.y_axis_right_summary_type,
-        y_axis_left_summary_type = statItem.y_axis_left_summary_type,
-        y_axis_right_summary_column = statItem.y_axis_right_summary_column,
-        y_axis_left_summary_column = statItem.y_axis_left_summary_column,
-        y_axis_left_group_by_multiple_numeric_column = statItem.y_axis_left_group_by_multiple_numeric_column,
-        y_axis_left_summary_method = statItem.y_axis_left_summary_method,
-        y_axis_left_group_by_numeric_columns = statItem.y_axis_left_group_by_numeric_columns;
-      var newSummaryType = option === GROUP_TYPES.COUNT ? SUMMARY_TYPE.COUNT : SUMMARY_TYPE.ADVANCED;
+    this.onChangeSummaryType = (option, position) => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        y_axis_right_summary_type,
+        y_axis_left_summary_type,
+        y_axis_right_summary_column,
+        y_axis_left_summary_column,
+        y_axis_left_group_by_multiple_numeric_column,
+        y_axis_left_summary_method,
+        y_axis_left_group_by_numeric_columns
+      } = statItem;
+      let newSummaryType = option === GROUP_TYPES.COUNT ? SUMMARY_TYPE.COUNT : SUMMARY_TYPE.ADVANCED;
       if (position === 'left') {
         if (newSummaryType === SUMMARY_TYPE.COUNT && y_axis_left_summary_type === SUMMARY_TYPE.COUNT) return;
         if (option === GROUP_TYPES.SINGLE_NUMERIC_COLUMN && !y_axis_left_group_by_multiple_numeric_column && y_axis_left_summary_type !== SUMMARY_TYPE.COUNT) return;
@@ -205,43 +201,47 @@ var CombinationSettings = /*#__PURE__*/function (_Component) {
           y_axis_left_group_by_multiple_numeric_column = true;
           y_axis_left_group_by_numeric_columns = [];
         }
-        _this.props.updateStatItem(Object.assign({}, statItem, {
+        this.props.updateStatItem(Object.assign({}, statItem, {
           y_axis_left_summary_type: newSummaryType,
-          y_axis_left_summary_column: y_axis_left_summary_column,
-          y_axis_left_summary_method: y_axis_left_summary_method,
-          y_axis_left_group_by_multiple_numeric_column: y_axis_left_group_by_multiple_numeric_column,
-          y_axis_left_group_by_numeric_columns: y_axis_left_group_by_numeric_columns
+          y_axis_left_summary_column,
+          y_axis_left_summary_method,
+          y_axis_left_group_by_multiple_numeric_column,
+          y_axis_left_group_by_numeric_columns
         }));
         return;
       }
       if (y_axis_right_summary_type === newSummaryType) return;
       y_axis_right_summary_type = newSummaryType;
-      var y_axis_right_summary_method = SUMMARY_METHOD[0];
+      let y_axis_right_summary_method = SUMMARY_METHOD[0];
       if (newSummaryType === SUMMARY_TYPE.COUNT) {
         y_axis_right_summary_column = null;
         y_axis_right_summary_method = null;
       }
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+      this.props.updateStatItem(Object.assign({}, statItem, {
         y_axis_right_summary_type: newSummaryType,
-        y_axis_right_summary_column: y_axis_right_summary_column,
-        y_axis_right_summary_method: y_axis_right_summary_method
+        y_axis_right_summary_column,
+        y_axis_right_summary_method
       }));
     };
-    _this.onSelectSummaryColumn = function (option, position) {
-      var statItem = _this.props.statItem;
-      var y_axis_right_summary_column = statItem.y_axis_right_summary_column,
-        y_axis_left_summary_column = statItem.y_axis_left_summary_column,
-        y_axis_left_summary_method = statItem.y_axis_left_summary_method,
-        y_axis_right_summary_method = statItem.y_axis_right_summary_method;
-      var newSummaryColumnKey = option;
+    this.onSelectSummaryColumn = (option, position) => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        y_axis_right_summary_column,
+        y_axis_left_summary_column,
+        y_axis_left_summary_method,
+        y_axis_right_summary_method
+      } = statItem;
+      const newSummaryColumnKey = option;
       if (position === 'left') {
         if (y_axis_left_summary_column === newSummaryColumnKey) return;
         if (!y_axis_left_summary_method) {
           y_axis_left_summary_method = 'Sum';
         }
-        _this.props.updateStatItem(Object.assign({}, statItem, {
+        this.props.updateStatItem(Object.assign({}, statItem, {
           y_axis_left_summary_column: newSummaryColumnKey,
-          y_axis_left_summary_method: y_axis_left_summary_method
+          y_axis_left_summary_method
         }));
         return;
       }
@@ -249,168 +249,166 @@ var CombinationSettings = /*#__PURE__*/function (_Component) {
       if (!y_axis_right_summary_method) {
         y_axis_right_summary_method = 'Sum';
       }
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+      this.props.updateStatItem(Object.assign({}, statItem, {
         y_axis_right_summary_column: newSummaryColumnKey,
-        y_axis_right_summary_method: y_axis_right_summary_method
+        y_axis_right_summary_method
       }));
     };
-    _this.onSelectSummaryMethod = function (option, position) {
-      var statItem = _this.props.statItem;
-      var y_axis_right_summary_method = statItem.y_axis_right_summary_method,
-        y_axis_left_summary_method = statItem.y_axis_left_summary_method;
-      var newSummaryColumnMethod = option;
+    this.onSelectSummaryMethod = (option, position) => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_right_summary_method,
+        y_axis_left_summary_method
+      } = statItem;
+      const newSummaryColumnMethod = option;
       if (position === 'left') {
         if (y_axis_left_summary_method !== newSummaryColumnMethod) {
-          _this.props.updateStatItem(Object.assign({}, statItem, {
+          this.props.updateStatItem(Object.assign({}, statItem, {
             y_axis_left_summary_method: newSummaryColumnMethod
           }));
         }
         return;
       }
       if (y_axis_right_summary_method !== newSummaryColumnMethod) {
-        _this.props.updateStatItem(Object.assign({}, statItem, {
+        this.props.updateStatItem(Object.assign({}, statItem, {
           y_axis_right_summary_method: newSummaryColumnMethod
         }));
       }
     };
-    _this.onToggleIncludeEmpty = function () {
-      var statItem = _this.props.statItem;
-      var _ref2 = statItem || {},
-        x_axis_include_empty = _ref2.x_axis_include_empty;
-      var updated = {
+    this.onToggleIncludeEmpty = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        x_axis_include_empty
+      } = statItem || {};
+      let updated = {
         x_axis_include_empty: !x_axis_include_empty
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.renderIncludeEmpty = function () {
-      var statItem = _this.props.statItem;
-      var _ref3 = statItem || {},
-        x_axis_include_empty = _ref3.x_axis_include_empty;
+    this.renderIncludeEmpty = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        x_axis_include_empty
+      } = statItem || {};
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: x_axis_include_empty || false,
-        handleToggleChange: _this.onToggleIncludeEmpty,
+        handleToggleChange: this.onToggleIncludeEmpty,
         label: intl.get('Including_empty_cell')
       }));
     };
-    var getColumnsOptions = props.getColumnsOptions,
-      _statItem = props.statItem,
-      _columns = props.columns;
-    var availableColumns = _this.getAvailableColumns(_columns);
-    _this.columnsOptions = getColumnsOptions(availableColumns);
-    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
-    _this.dateGranularityOptions = _this.getGranularityOptions(DATE_GRANULARITY_LIST);
-    _this.geolocationGranularityOptions = _this.getGranularityOptions(GEOLOCATION_GRANULARITY_LIST);
-    _this.state = {
+    const {
+      getColumnsOptions,
+      statItem: _statItem,
+      columns: _columns
+    } = props;
+    const availableColumns = this.getAvailableColumns(_columns);
+    this.columnsOptions = getColumnsOptions(availableColumns);
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+    this.dateGranularityOptions = this.getGranularityOptions(DATE_GRANULARITY_LIST);
+    this.geolocationGranularityOptions = this.getGranularityOptions(GEOLOCATION_GRANULARITY_LIST);
+    this.state = {
       statName: _statItem.name
     };
-    return _this;
   }
-  _createClass(CombinationSettings, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.selectedTableId !== this.props.selectedTableId) {
-        var getColumnsOptions = nextProps.getColumnsOptions,
-          columns = nextProps.columns;
-        var availableColumns = this.getAvailableColumns(columns);
-        this.columnsOptions = getColumnsOptions(availableColumns);
-      }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        getColumnsOptions,
+        columns
+      } = nextProps;
+      const availableColumns = this.getAvailableColumns(columns);
+      this.columnsOptions = getColumnsOptions(availableColumns);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var selectedColumnOption = this.getSelectedStatColumnOption();
-      var _this$props2 = this.props,
-        getTables = _this$props2.getTables,
-        getViews = _this$props2.getViews,
-        getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem,
-        eventBus = _this$props2.eventBus,
-        updateStatItem = _this$props2.updateStatItem,
-        selectedTableId = _this$props2.selectedTableId,
-        settingType = _this$props2.settingType,
-        getColumnsOptions = _this$props2.getColumnsOptions;
-      var x_axis_column_key = statItem.x_axis_column_key,
-        y_axis_left_summary_type = statItem.y_axis_left_summary_type,
-        y_axis_right_summary_type = statItem.y_axis_right_summary_type,
-        y_axis_left_summary_method = statItem.y_axis_left_summary_method,
-        y_axis_right_summary_method = statItem.y_axis_right_summary_method,
-        y_axis_left_summary_column = statItem.y_axis_left_summary_column,
-        y_axis_right_summary_column = statItem.y_axis_right_summary_column;
-      var selectedTable = getTableById(selectedTableId);
-      var groupbyColumn = x_axis_column_key && TableUtils.getTableColumnByKey(selectedTable, x_axis_column_key);
-      var _ref4 = groupbyColumn || {},
-        groupbyColumnType = _ref4.type;
-      if (settingType === 'style') {
-        return /*#__PURE__*/React.createElement(CombinationStyleSettings, {
-          selectedTableId: selectedTableId,
-          statItem: statItem,
-          eventBus: eventBus,
-          updateStatItem: updateStatItem
-        });
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
-        statItem: statItem,
+  }
+  render() {
+    const selectedColumnOption = this.getSelectedStatColumnOption();
+    const {
+      getTables,
+      getViews,
+      getTableById,
+      statItem,
+      eventBus,
+      updateStatItem,
+      selectedTableId,
+      settingType,
+      getColumnsOptions
+    } = this.props;
+    const {
+      x_axis_column_key,
+      y_axis_left_summary_type,
+      y_axis_right_summary_type,
+      y_axis_left_summary_method,
+      y_axis_right_summary_method,
+      y_axis_left_summary_column,
+      y_axis_right_summary_column
+    } = statItem;
+    const selectedTable = getTableById(selectedTableId);
+    let groupbyColumn = x_axis_column_key && TableUtils.getTableColumnByKey(selectedTable, x_axis_column_key);
+    let {
+      type: groupbyColumnType
+    } = groupbyColumn || {};
+    if (settingType === 'style') {
+      return /*#__PURE__*/React.createElement(CombinationStyleSettings, {
         selectedTableId: selectedTableId,
-        selectedViewId: statItem.view_id,
-        getTables: getTables,
-        getViews: getViews,
-        getTableById: this.props.getTableById,
-        getConvertedChart: this.props.getConvertedChart,
-        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('X-axis')), /*#__PURE__*/React.createElement(ColumnSettings, {
-        columnsOptions: this.columnsOptions,
-        selectedColumnOption: selectedColumnOption,
-        onChangeSelectedColumn: this.onSelectStatColumn
-      }), DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && this.renderGroupbyDateGranularity(), groupbyColumnType === CellType.GEOLOCATION && this.renderGroupbyGeolocationGranularity(), this.renderIncludeEmpty()), /*#__PURE__*/React.createElement(SummarySettings, {
-        useMultipleSummaryColumns: true,
-        chartType: 'combination_chart',
-        label: intl.get('Y-axis(left side)'),
         statItem: statItem,
-        selectedTableId: selectedTableId,
-        summaryType: y_axis_left_summary_type,
-        summaryMethod: y_axis_left_summary_method,
-        summaryColumn: y_axis_left_summary_column,
-        numericColumns: this.props.numericColumns,
-        getColumnsOptions: getColumnsOptions,
-        onChangeSummaryType: function onChangeSummaryType(option) {
-          return _this2.onChangeSummaryType(option, 'left');
-        },
-        onSelectSummaryColumn: function onSelectSummaryColumn(option) {
-          return _this2.onSelectSummaryColumn(option, 'left');
-        },
-        onSelectSummaryMethod: function onSelectSummaryMethod(option) {
-          return _this2.onSelectSummaryMethod(option, 'left');
-        },
+        eventBus: eventBus,
         updateStatItem: updateStatItem
-      }), /*#__PURE__*/React.createElement(SummarySettings, {
-        chartType: 'combination_chart',
-        label: intl.get('Y-axis(right side)'),
-        statItem: statItem,
-        selectedTableId: selectedTableId,
-        summaryType: y_axis_right_summary_type,
-        summaryMethod: y_axis_right_summary_method,
-        summaryColumn: y_axis_right_summary_column,
-        numericColumns: this.props.numericColumns,
-        getColumnsOptions: getColumnsOptions,
-        onChangeSummaryType: function onChangeSummaryType(option) {
-          return _this2.onChangeSummaryType(option, 'right');
-        },
-        onSelectSummaryColumn: function onSelectSummaryColumn(option) {
-          return _this2.onSelectSummaryColumn(option, 'right');
-        },
-        onSelectSummaryMethod: function onSelectSummaryMethod(option) {
-          return _this2.onSelectSummaryMethod(option, 'right');
-        }
-      }));
+      });
     }
-  }]);
-  return CombinationSettings;
-}(Component);
+    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,
+      getConvertedChart: this.props.getConvertedChart,
+      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('X-axis')), /*#__PURE__*/React.createElement(ColumnSettings, {
+      columnsOptions: this.columnsOptions,
+      selectedColumnOption: selectedColumnOption,
+      onChangeSelectedColumn: this.onSelectStatColumn
+    }), DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && this.renderGroupbyDateGranularity(), groupbyColumnType === CellType.GEOLOCATION && this.renderGroupbyGeolocationGranularity(), this.renderIncludeEmpty()), /*#__PURE__*/React.createElement(SummarySettings, {
+      useMultipleSummaryColumns: true,
+      chartType: 'combination_chart',
+      label: intl.get('Y-axis(left side)'),
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      summaryType: y_axis_left_summary_type,
+      summaryMethod: y_axis_left_summary_method,
+      summaryColumn: y_axis_left_summary_column,
+      numericColumns: this.props.numericColumns,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: option => this.onChangeSummaryType(option, 'left'),
+      onSelectSummaryColumn: option => this.onSelectSummaryColumn(option, 'left'),
+      onSelectSummaryMethod: option => this.onSelectSummaryMethod(option, 'left'),
+      updateStatItem: updateStatItem
+    }), /*#__PURE__*/React.createElement(SummarySettings, {
+      chartType: 'combination_chart',
+      label: intl.get('Y-axis(right side)'),
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      summaryType: y_axis_right_summary_type,
+      summaryMethod: y_axis_right_summary_method,
+      summaryColumn: y_axis_right_summary_column,
+      numericColumns: this.props.numericColumns,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: option => this.onChangeSummaryType(option, 'right'),
+      onSelectSummaryColumn: option => this.onSelectSummaryColumn(option, 'right'),
+      onSelectSummaryMethod: option => this.onSelectSummaryMethod(option, 'right')
+    }));
+  }
+}
 export default CombinationSettings;