dtable-statistic 4.0.2-test-2

package/es/stat-editor/stat-settings/advance-chart-settings/basic-number-card-settings.js

@@ -0,0 +1,149 @@
+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 ColumnSettings from '../public-setting/column-settings';
+import { DTableSelect } from '../../../components';
+import BaseSettings from '../public-setting/base-settings';
+import { STATISTICS_COUNT_SHOW, SUMMARY_METHOD } from '../../../constants';
+var BasicNumberCardSettings = /*#__PURE__*/function (_Component) {
+  _inherits(BasicNumberCardSettings, _Component);
+  var _super = _createSuper(BasicNumberCardSettings);
+  function BasicNumberCardSettings(props) {
+    var _this;
+    _classCallCheck(this, BasicNumberCardSettings);
+    _this = _super.call(this, props);
+    _this.getSelectedStatColumnOption = function () {
+      return _this.numericColumnOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.numeric_column;
+      });
+    };
+    _this.onSelectStatColumn = function (option) {
+      var numeric_column = _this.props.statItem.numeric_column;
+      var new_column = option.value.key;
+      if (numeric_column === new_column) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        numeric_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.onSelectSummaryMethod = function (option) {
+      _this.props.onSelectSummaryMethod(option.value);
+    };
+    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
+      return summaryMethodsOptions.find(function (m) {
+        return m.value === method;
+      }) || summaryMethodsOptions[0];
+    };
+    _this.renderSummaryMethod = function () {
+      var statItem = _this.props.statItem;
+      var summary_method = statItem.summary_method;
+      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: _this.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,
+        onChange: _this.onChangeName,
+        onKeyDown: _this.onKeyDown
+      })));
+    };
+    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(BasicNumberCardSettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_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 selectedColumnOption = this.getSelectedStatColumnOption();
+      var _this$props = this.props,
+        statItem = _this$props.statItem,
+        updateStatItem = _this$props.updateStatItem,
+        selectedTableId = _this$props.selectedTableId,
+        settingType = _this$props.settingType;
+      if (settingType === 'style') {
+        return this.getStyleSetting();
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: selectedTableId,
+        selectedViewId: statItem.view_id,
+        getTables: this.props.getTables,
+        getViews: this.props.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('Statistic_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.numericColumnOptions,
+        selectedColumnOption: selectedColumnOption,
+        onChangeSelectedColumn: this.onSelectStatColumn
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, this.renderSummaryMethod()));
+    }
+  }]);
+  return BasicNumberCardSettings;
+}(Component);
+export default BasicNumberCardSettings;

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

@@ -0,0 +1,415 @@
+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 { CellType, TableUtils } from 'dtable-store';
+import { DTableSelect } from '../../../components';
+import ColumnSettings from '../public-setting/column-settings';
+import BaseSettings from '../public-setting/base-settings';
+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 = {
+  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) {
+        return {
+          value: g,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[g]))
+        };
+      });
+    };
+    _this.renderGroupbyDateGranularity = function () {
+      var statItem = _this.props.statItem;
+      var 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
+      }));
+    };
+    _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, {
+        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;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedGeolocationGranularity,
+        onChange: _this.onSelectGroupbyGeolocationGranularity,
+        options: _this.geolocationGranularityOptions
+      }));
+    };
+    _this.getSelectedGeolocationGranularity = function (geolocationGranularity) {
+      return _this.geolocationGranularityOptions.find(function (g) {
+        return g.value === geolocationGranularity;
+      }) || _this.geolocationGranularityOptions[2];
+    };
+    _this.getSelectedDateGranularity = function (dateGranularity) {
+      return _this.dateGranularityOptions.find(function (g) {
+        return 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, {
+        x_axis_geolocation_granularity: newGeolocationGranularity
+      }));
+    };
+    _this.getAvailableColumns = function (columns) {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(function (c) {
+        return 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.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;
+      if (x_axis_column_key === new_column) return;
+      var _option$value = option.value,
+        type = _option$value.type,
+        key = _option$value.key;
+      if (type === CellType.DATE) {
+        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;
+        if (geo_format === 'province') {
+          x_axis_geolocation_granularity = 'province';
+        } else if (geo_format === 'province_city') {
+          x_axis_geolocation_granularity = 'city';
+        } else if (geo_format === 'geolocation' || !geo_format) {
+          x_axis_geolocation_granularity = 'district';
+        } else {
+          x_axis_geolocation_granularity = null;
+        }
+      } else {
+        x_axis_geolocation_granularity = null;
+      }
+      _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
+      }));
+    };
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.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.onSaveName = function (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;
+      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,
+        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;
+      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;
+        if (option === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN && y_axis_left_group_by_multiple_numeric_column) return;
+        if (option === GROUP_TYPES.COUNT) {
+          y_axis_left_summary_column = null;
+          y_axis_left_summary_method = null;
+          y_axis_left_group_by_multiple_numeric_column = false;
+          y_axis_left_group_by_numeric_columns = [];
+        }
+        if (option === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+          y_axis_left_summary_column = null;
+          y_axis_left_summary_method = SUMMARY_METHOD[0];
+          y_axis_left_group_by_multiple_numeric_column = false;
+          y_axis_left_group_by_numeric_columns = [];
+        }
+        if (option === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN) {
+          y_axis_left_summary_column = null;
+          y_axis_left_summary_method = SUMMARY_METHOD[0];
+          y_axis_left_group_by_multiple_numeric_column = true;
+          y_axis_left_group_by_numeric_columns = [];
+        }
+        _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
+        }));
+        return;
+      }
+      if (y_axis_right_summary_type === newSummaryType) return;
+      y_axis_right_summary_type = newSummaryType;
+      var 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, {
+        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
+      }));
+    };
+    _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;
+      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, {
+          y_axis_left_summary_column: newSummaryColumnKey,
+          y_axis_left_summary_method: y_axis_left_summary_method
+        }));
+        return;
+      }
+      if (y_axis_right_summary_column === newSummaryColumnKey) return;
+      if (!y_axis_right_summary_method) {
+        y_axis_right_summary_method = 'Sum';
+      }
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        y_axis_right_summary_column: newSummaryColumnKey,
+        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;
+      if (position === 'left') {
+        if (y_axis_left_summary_method !== newSummaryColumnMethod) {
+          _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, {
+          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 = {
+        x_axis_include_empty: !x_axis_include_empty
+      };
+      _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;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: x_axis_include_empty || false,
+        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 = {
+      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);
+      }
+    }
+  }, {
+    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,
+        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('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');
+        },
+        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);
+export default CombinationSettings;