dtable-statistic 4.0.2-test-2

package/es/stat-editor/stat-settings/basic-chart-settings/custom-bar-settings.js

@@ -0,0 +1,126 @@
+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 GroupbySettings from './groupby-settings';
+import StacksSettings from './stacks-settings';
+import BarChartStyle from './style-setting/bar-chart-style-setting';
+import { GROUPBY_TYPE, STAT_TYPE } from '../../../constants';
+var CustomBarSettings = /*#__PURE__*/function (_Component) {
+  _inherits(CustomBarSettings, _Component);
+  var _super = _createSuper(CustomBarSettings);
+  function CustomBarSettings() {
+    var _this;
+    _classCallCheck(this, CustomBarSettings);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
+      var updated = {
+        x_axis_column_key: groupbyColumnKey,
+        x_axis_date_granularity: groupbyDateGranularity,
+        x_axis_geolocation_granularity: groupbyGeolocationGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyDateGranularity = function (type, dateGranularity) {
+      var updated = {
+        x_axis_date_granularity: dateGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyGeolocationGranularity = function (type, geolocationGranularity) {
+      var updated = {
+        x_axis_geolocation_granularity: geolocationGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.hasYAxisStack = function () {
+      var y_axises = _this.props.statItem.y_axises;
+      return Array.isArray(y_axises) && y_axises.some(function (yAxis) {
+        return yAxis.type === STAT_TYPE.BAR_STACK;
+      });
+    };
+    return _this;
+  }
+  _createClass(CustomBarSettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTableById = _this$props.getTableById,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews,
+        statItem = _this$props.statItem,
+        labelColorConfigs = _this$props.labelColorConfigs,
+        eventBus = _this$props.eventBus,
+        selectedTable = _this$props.selectedTable,
+        generalColumnsOptions = _this$props.generalColumnsOptions,
+        numericColumnsOptions = _this$props.numericColumnsOptions,
+        dateGranularityOptions = _this$props.dateGranularityOptions,
+        geolocationGranularityOptions = _this$props.geolocationGranularityOptions,
+        renderIncludeEmpty = _this$props.renderIncludeEmpty,
+        settingType = _this$props.settingType;
+      var _ref = statItem || {},
+        table_id = _ref.table_id,
+        view_id = _ref.view_id,
+        x_axis_column_key = _ref.x_axis_column_key,
+        x_axis_date_granularity = _ref.x_axis_date_granularity,
+        x_axis_geolocation_granularity = _ref.x_axis_geolocation_granularity;
+      var hasYAxisStack = this.hasYAxisStack();
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(BarChartStyle, {
+          showRangeSetting: false,
+          hideDisplayDataSetting: true,
+          enableYAxisCustomTitle: hasYAxisStack,
+          isDisplayEachBlockData: hasYAxisStack,
+          statItem: statItem,
+          labelColorConfigs: labelColorConfigs,
+          eventBus: eventBus,
+          getTableById: getTableById,
+          updateStatItem: this.props.updateStatItem
+        });
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: table_id,
+        selectedViewId: view_id,
+        getTableById: getTableById,
+        getTables: getTables,
+        getViews: getViews,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: generalColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('X-axis'),
+        groupbyColumnKey: x_axis_column_key,
+        groupbyDateGranularity: x_axis_date_granularity,
+        groupbyGeolocationGranularity: x_axis_geolocation_granularity,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.ROW),
+        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.ROW),
+        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.ROW),
+        renderIncludeEmpty: renderIncludeEmpty
+      }), /*#__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('Y-axis')), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-custom-bar-setting-y-axises"
+      }, /*#__PURE__*/React.createElement(StacksSettings, {
+        statItem: statItem,
+        numericColumnsOptions: numericColumnsOptions,
+        updateStatItem: this.props.updateStatItem
+      }))));
+    }
+  }]);
+  return CustomBarSettings;
+}(Component);
+export default CustomBarSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/groupby-settings.js

@@ -0,0 +1,169 @@
+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 { CellType, DATE_COLUMN_OPTIONS, TableUtils } from 'dtable-store';
+import { DTableSelect } from '../../../components';
+var GroupbySettings = /*#__PURE__*/function (_Component) {
+  _inherits(GroupbySettings, _Component);
+  var _super = _createSuper(GroupbySettings);
+  function GroupbySettings() {
+    var _this;
+    _classCallCheck(this, GroupbySettings);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.renderGroupby = function () {
+      var _this$props = _this.props,
+        columnsOptions = _this$props.columnsOptions,
+        groupbyColumnKey = _this$props.groupbyColumnKey,
+        label = _this$props.label;
+      var selectedColumnOption = _this.props.getSelectedColumnOption(groupbyColumnKey, columnsOptions);
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        placeholder: intl.get('Select_a_column'),
+        value: selectedColumnOption,
+        onChange: _this.onSelectGroupbyColumn,
+        options: columnsOptions
+      }));
+    };
+    _this.renderGroupbyDateGranularity = function () {
+      var _this$props2 = _this.props,
+        dateGranularityOptions = _this$props2.dateGranularityOptions,
+        groupbyDateGranularity = _this$props2.groupbyDateGranularity;
+      var selectedDateGranularity = _this.getSelectedDateGranularity(groupbyDateGranularity);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedDateGranularity,
+        onChange: _this.onSelectGroupbyDateGranularity,
+        options: dateGranularityOptions
+      }));
+    };
+    _this.renderGroupbyGeolocationGranularity = function () {
+      var _this$props3 = _this.props,
+        geolocationGranularityOptions = _this$props3.geolocationGranularityOptions,
+        groupbyGeolocationGranularity = _this$props3.groupbyGeolocationGranularity;
+      geolocationGranularityOptions = _this.getGeolocationGranularity();
+      var selectedGeolocationGranularity = _this.getSelectedGeolocationGranularity(groupbyGeolocationGranularity);
+      if (geolocationGranularityOptions.length === 0) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedGeolocationGranularity,
+        onChange: _this.onSelectGroupbyGeolocationGranularity,
+        options: geolocationGranularityOptions
+      }));
+    };
+    _this.getGeolocationGranularity = function () {
+      var _this$props4 = _this.props,
+        geolocationGranularityOptions = _this$props4.geolocationGranularityOptions,
+        selectedTable = _this$props4.selectedTable,
+        groupbyColumnKey = _this$props4.groupbyColumnKey;
+      var column = selectedTable.columns.find(function (column) {
+        return column.key === groupbyColumnKey;
+      });
+      if (column) {
+        var _ref = column.data || {},
+          geo_format = _ref.geo_format;
+        if (geo_format === 'province') {
+          geolocationGranularityOptions = geolocationGranularityOptions.filter(function (option) {
+            return option.value === 'province';
+          });
+        }
+        if (geo_format === 'province_city') {
+          geolocationGranularityOptions = geolocationGranularityOptions.filter(function (option) {
+            return option.value !== 'district';
+          });
+        }
+        if (geo_format === 'country_region' || geo_format === 'lng_lat') {
+          geolocationGranularityOptions = [];
+        }
+      }
+      return geolocationGranularityOptions;
+    };
+    _this.getSelectedDateGranularity = function (dateGranularity) {
+      var dateGranularityOptions = _this.props.dateGranularityOptions;
+      return dateGranularityOptions.find(function (g) {
+        return g.value === dateGranularity;
+      }) || dateGranularityOptions[2];
+    };
+    _this.getSelectedGeolocationGranularity = function (geolocationGranularity) {
+      var geolocationGranularityOptions = _this.props.geolocationGranularityOptions;
+      return geolocationGranularityOptions.find(function (g) {
+        return g.value === geolocationGranularity;
+      }) || geolocationGranularityOptions[2];
+    };
+    _this.onSelectGroupbyColumn = function (columnOption) {
+      var _this$props5 = _this.props,
+        dateGranularityOptions = _this$props5.dateGranularityOptions,
+        groupbyColumnKey = _this$props5.groupbyColumnKey,
+        groupbyDateGranularity = _this$props5.groupbyDateGranularity,
+        groupbyGeolocationGranularity = _this$props5.groupbyGeolocationGranularity,
+        selectedTable = _this$props5.selectedTable;
+      var _columnOption$value = columnOption.value,
+        key = _columnOption$value.key,
+        type = _columnOption$value.type;
+      if (key === groupbyColumnKey) {
+        return;
+      }
+      if (key !== 'Groupby_null') {
+        groupbyColumnKey = key;
+        if (type === CellType.DATE) {
+          groupbyDateGranularity = dateGranularityOptions[2].value;
+        }
+        if (type === CellType.GEOLOCATION) {
+          var geoColumn = selectedTable.columns.find(function (column) {
+            return column.key === key;
+          }) || {};
+          var _ref2 = geoColumn.data || {},
+            geo_format = _ref2.geo_format;
+          if (geo_format === 'province') {
+            groupbyGeolocationGranularity = 'province';
+          } else if (geo_format === 'province_city') {
+            groupbyGeolocationGranularity = 'city';
+          } else if (geo_format === 'geolocation' || !geo_format) {
+            groupbyGeolocationGranularity = 'district';
+          } else {
+            groupbyGeolocationGranularity = null;
+          }
+        }
+      } else {
+        groupbyColumnKey = null;
+        groupbyDateGranularity = null;
+        groupbyGeolocationGranularity = null;
+      }
+      _this.props.onSelectGroupbyColumn(groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity);
+    };
+    _this.onSelectGroupbyDateGranularity = function (dateGranularityOption) {
+      var newDateGranularity = dateGranularityOption.value;
+      if (newDateGranularity === _this.props.groupbyDateGranularity) return;
+      _this.props.onSelectGroupbyDateGranularity(newDateGranularity);
+    };
+    _this.onSelectGroupbyGeolocationGranularity = function (geolocationGranularityOption) {
+      var newGeolocationGranularity = geolocationGranularityOption.value;
+      if (newGeolocationGranularity === _this.props.groupbyGeolocationGranularity) return;
+      _this.props.onSelectGroupbyGeolocationGranularity(newGeolocationGranularity);
+    };
+    return _this;
+  }
+  _createClass(GroupbySettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props6 = this.props,
+        selectedTable = _this$props6.selectedTable,
+        groupbyColumnKey = _this$props6.groupbyColumnKey,
+        renderIncludeEmpty = _this$props6.renderIncludeEmpty;
+      var groupbyColumn = groupbyColumnKey && TableUtils.getTableColumnByKey(selectedTable, groupbyColumnKey);
+      var _ref3 = groupbyColumn || {},
+        groupbyColumnType = _ref3.type;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, this.renderGroupby(), DATE_COLUMN_OPTIONS.includes(groupbyColumnType) && this.renderGroupbyDateGranularity(), groupbyColumnType === CellType.GEOLOCATION && this.renderGroupbyGeolocationGranularity(), renderIncludeEmpty && renderIncludeEmpty());
+    }
+  }]);
+  return GroupbySettings;
+}(Component);
+export default GroupbySettings;

package/es/stat-editor/stat-settings/basic-chart-settings/horizontal-axis-group-settings.js

@@ -0,0 +1,352 @@
+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 intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+import GroupbySettings from './groupby-settings';
+import SummaryMethodSettings from './summary-method-setting';
+import NumericSummaryItem from '../public-setting/numeric-summary-item';
+import { GROUPBY_TYPE, STATISTICS_COUNT_SHOW, SUMMARY_METHOD, SUMMARY_TYPE } from '../../../constants';
+var GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+var GroupingSettings = /*#__PURE__*/function (_Component) {
+  _inherits(GroupingSettings, _Component);
+  var _super = _createSuper(GroupingSettings);
+  function GroupingSettings(props) {
+    var _this;
+    _classCallCheck(this, GroupingSettings);
+    _this = _super.call(this, props);
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (m) {
+        return {
+          value: m,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    _this.getDefaultColumnGroupbyType = function (_ref) {
+      var horizontal_axis_summary_type = _ref.horizontal_axis_summary_type,
+        column_groupby_multiple_numeric_column = _ref.column_groupby_multiple_numeric_column;
+      if (column_groupby_multiple_numeric_column) {
+        return GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
+      } else if (horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
+      }
+      return GROUP_TYPES.COUNT;
+    };
+    _this.getGroupTypeOptions = function () {
+      return [{
+        value: GROUP_TYPES.COUNT,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get(STATISTICS_COUNT_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Count_the_number_of_records_in_each_group')))
+      }, {
+        value: GROUP_TYPES.SINGLE_NUMERIC_COLUMN,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get(STATISTICS_COUNT_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
+      }, {
+        value: GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+      }];
+    };
+    _this.onChangeGroupType = function (option) {
+      var value = option.value;
+      if (value === _this.state.columnGroupbyType) return;
+      var statItem = _this.props.statItem;
+      var _ref2 = _this.props.statItem || {},
+        column_groupby_column_key = _ref2.column_groupby_column_key,
+        column_groupby_date_granularity = _ref2.column_groupby_date_granularity,
+        column_groupby_geolocation_granularity = _ref2.column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column = _ref2.column_groupby_multiple_numeric_column,
+        column_groupby_numeric_columns = _ref2.column_groupby_numeric_columns,
+        vertical_axis_column_key = _ref2.vertical_axis_column_key,
+        horizontal_axis_summary_type = _ref2.horizontal_axis_summary_type,
+        horizontal_axis_column_key = _ref2.horizontal_axis_column_key,
+        horizontal_axis_summary_method = _ref2.horizontal_axis_summary_method;
+      if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+        column_groupby_multiple_numeric_column = false;
+        column_groupby_numeric_columns = [];
+        horizontal_axis_summary_type = SUMMARY_TYPE.ADVANCED;
+        horizontal_axis_column_key = null;
+        column_groupby_date_granularity = null;
+        column_groupby_column_key = null;
+        column_groupby_geolocation_granularity = null;
+        horizontal_axis_summary_method = SUMMARY_METHOD[0];
+      } else if (value === GROUP_TYPES.COUNT) {
+        column_groupby_multiple_numeric_column = false;
+        column_groupby_numeric_columns = [];
+        var groupColumn = _this.props.columnGroupbyColumnsOptions.find(function (column) {
+          var key = column.key,
+            type = column.type;
+          return key !== vertical_axis_column_key && (type !== 'date' || type !== 'geolocation');
+        }) || {};
+        column_groupby_column_key = groupColumn.key;
+        horizontal_axis_summary_type = SUMMARY_TYPE.COUNT;
+        horizontal_axis_column_key = null;
+        column_groupby_date_granularity = null;
+        column_groupby_geolocation_granularity = null;
+      } else if (value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN) {
+        horizontal_axis_summary_type = SUMMARY_TYPE.ADVANCED;
+        column_groupby_multiple_numeric_column = true;
+        column_groupby_numeric_columns = [];
+        horizontal_axis_summary_type = SUMMARY_TYPE.ADVANCED;
+        horizontal_axis_column_key = _this.props.numericColumnsOptions.length > 0 ? _this.props.numericColumnsOptions[0].value.key : null;
+        column_groupby_date_granularity = null;
+        column_groupby_geolocation_granularity = null;
+        horizontal_axis_summary_method = SUMMARY_METHOD[0];
+      }
+      var updated = {
+        column_groupby_column_key: column_groupby_column_key,
+        column_groupby_date_granularity: column_groupby_date_granularity,
+        column_groupby_geolocation_granularity: column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column: column_groupby_multiple_numeric_column,
+        column_groupby_numeric_columns: column_groupby_numeric_columns,
+        horizontal_axis_summary_type: horizontal_axis_summary_type,
+        horizontal_axis_column_key: horizontal_axis_column_key,
+        horizontal_axis_summary_method: horizontal_axis_summary_method
+      };
+      _this.setState({
+        columnGroupbyType: value
+      }, function () {
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      });
+    };
+    _this.getSelectedGroupType = function () {
+      var statItem = _this.props.statItem;
+      var horizontal_axis_summary_type = statItem.horizontal_axis_summary_type,
+        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column;
+      if (column_groupby_multiple_numeric_column) {
+        return _this.groupTypeOptions.find(function (item) {
+          return item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
+        });
+      }
+      if (horizontal_axis_summary_type === SUMMARY_TYPE.COUNT) {
+        return _this.groupTypeOptions[0];
+      }
+      if (horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        return _this.groupTypeOptions[1];
+      }
+    };
+    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
+      var updated = {
+        column_groupby_column_key: groupbyColumnKey,
+        column_groupby_date_granularity: groupbyDateGranularity,
+        column_groupby_geolocation_granularity: groupbyGeolocationGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyDateGranularity = function (type, dateGranularity) {
+      var updated = {
+        column_groupby_date_granularity: dateGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyGeolocationGranularity = function (type, geolocationGranularity) {
+      var updated = {
+        column_groupby_geolocation_granularity: geolocationGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        horizontal_axis_summary_method: summaryMethod
+      }));
+    };
+    _this.updateSummaryColumn = function (summaryColumnKey) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        horizontal_axis_column_key: summaryColumnKey
+      }));
+    };
+    _this.renderGroupbyNumericColumns = function () {
+      var statItem = _this.props.statItem;
+      var column_groupby_numeric_columns = statItem.column_groupby_numeric_columns;
+      if (!column_groupby_numeric_columns || !Array.isArray(column_groupby_numeric_columns)) return null;
+      return column_groupby_numeric_columns.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          statItem: statItem,
+          key: "number-column-".concat(index),
+          numericColumnsOptions: _this.props.numericColumnsOptions,
+          summaryMethodOptions: _this.summaryMethodsOptions,
+          index: index + 1,
+          numericColumnItem: item,
+          onDeleteNumericColumnItem: _this.onDeleteNumericColumnItem,
+          onChangeColumnOption: _this.onChangeGroupbyNumericColumn,
+          onChangeSummaryMethod: _this.onChangeSummaryMethod
+        });
+      });
+    };
+    _this.onAddNumericColumn = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        numericColumnsOptions = _this$props.numericColumnsOptions;
+      var _ref3 = statItem || {},
+        column_groupby_numeric_columns = _ref3.column_groupby_numeric_columns;
+      var newNumericColumnKey = numericColumnsOptions[0].value.key;
+      if (Array.isArray(column_groupby_numeric_columns)) {
+        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        column_groupby_numeric_columns.push({
+          column_key: newNumericColumnKey,
+          summary_method: SUMMARY_METHOD[0]
+        });
+      } else {
+        column_groupby_numeric_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: SUMMARY_METHOD[0]
+        }];
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        column_groupby_numeric_columns: _toConsumableArray(column_groupby_numeric_columns)
+      }));
+    };
+    _this.onChangeGroupbyNumericColumn = function (index, columnOption) {
+      if (index === 0) {
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          horizontal_axis_column_key: columnOption.value.key
+        }));
+      } else {
+        var _ref4 = _this.props.statItem || {},
+          column_groupby_numeric_columns = _ref4.column_groupby_numeric_columns;
+        column_groupby_numeric_columns = column_groupby_numeric_columns || [];
+        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        var selectedItem = column_groupby_numeric_columns[index - 1];
+        selectedItem = Object.assign({}, selectedItem, {
+          column_key: columnOption.value.key
+        });
+        column_groupby_numeric_columns[index - 1] = selectedItem;
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          column_groupby_numeric_columns: column_groupby_numeric_columns
+        }));
+      }
+    };
+    _this.onDeleteNumericColumnItem = function (index) {
+      var _ref5 = _this.props.statItem || {},
+        column_groupby_numeric_columns = _ref5.column_groupby_numeric_columns;
+      column_groupby_numeric_columns = column_groupby_numeric_columns || [];
+      column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+      column_groupby_numeric_columns.splice(index - 1, 1);
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        column_groupby_numeric_columns: _toConsumableArray(column_groupby_numeric_columns)
+      }));
+    };
+    _this.onChangeSummaryMethod = function (index, option) {
+      if (index === 0) {
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          horizontal_axis_summary_method: option.value
+        }));
+      } else {
+        var _ref6 = _this.props.statItem || {},
+          column_groupby_numeric_columns = _ref6.column_groupby_numeric_columns;
+        column_groupby_numeric_columns = column_groupby_numeric_columns || [];
+        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        var selectedItem = column_groupby_numeric_columns[index - 1];
+        selectedItem = Object.assign({}, selectedItem, {
+          summary_method: option.value
+        });
+        column_groupby_numeric_columns[index - 1] = selectedItem;
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          column_groupby_numeric_columns: column_groupby_numeric_columns
+        }));
+      }
+    };
+    _this.groupTypeOptions = _this.getGroupTypeOptions();
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    _this.state = {
+      columnGroupbyType: _this.getDefaultColumnGroupbyType(props.statItem)
+    };
+    return _this;
+  }
+  _createClass(GroupingSettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        label = _this$props2.label,
+        statItem = _this$props2.statItem,
+        selectedTable = _this$props2.selectedTable,
+        columnGroupbyColumnsOptions = _this$props2.columnGroupbyColumnsOptions,
+        numericColumnsOptions = _this$props2.numericColumnsOptions,
+        dateGranularityOptions = _this$props2.dateGranularityOptions,
+        geolocationGranularityOptions = _this$props2.geolocationGranularityOptions;
+      var selectedGroupItem = this.getSelectedGroupType();
+      var _ref7 = statItem || {},
+        horizontal_axis_summary_type = _ref7.horizontal_axis_summary_type,
+        horizontal_axis_column_key = _ref7.horizontal_axis_column_key,
+        horizontal_axis_summary_method = _ref7.horizontal_axis_summary_method,
+        column_groupby_column_key = _ref7.column_groupby_column_key,
+        column_groupby_date_granularity = _ref7.column_groupby_date_granularity,
+        column_groupby_geolocation_granularity = _ref7.column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column = _ref7.column_groupby_multiple_numeric_column;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        classNamePrefix: "statistic-chart-summary-types",
+        value: selectedGroupItem,
+        onChange: this.onChangeGroupType,
+        options: this.groupTypeOptions
+      })), horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        statItem: statItem,
+        index: 0,
+        key: "number-column-".concat(0),
+        numericColumnsOptions: numericColumnsOptions,
+        summaryMethodOptions: this.summaryMethodsOptions,
+        numericColumnItem: {
+          column_key: horizontal_axis_column_key,
+          summary_method: horizontal_axis_summary_method
+        },
+        onChangeColumnOption: this.onChangeGroupbyNumericColumn,
+        onChangeSummaryMethod: this.onChangeSummaryMethod
+      }) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
+        statItem: statItem,
+        numericColumnsOptions: numericColumnsOptions,
+        summaryType: horizontal_axis_summary_type,
+        summaryColumnKey: horizontal_axis_column_key,
+        summaryMethod: horizontal_axis_summary_method,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onChangeSummaryType: this.updatedSummaryType,
+        onSelectSummaryMethod: this.updateSummaryMethod,
+        onSelectNumericColumn: this.updateSummaryColumn,
+        updateStatItem: this.props.updateStatItem
+      })), column_groupby_multiple_numeric_column && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number"
+      }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-column",
+        onClick: this.onAddNumericColumn
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, intl.get('Add_new_numeric_column')))), (!column_groupby_multiple_numeric_column && horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED || horizontal_axis_summary_type === SUMMARY_TYPE.COUNT) && /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: columnGroupbyColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('Group_by'),
+        groupbyColumnKey: column_groupby_column_key,
+        groupbyDateGranularity: column_groupby_date_granularity,
+        groupbyGeolocationGranularity: column_groupby_geolocation_granularity,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN)
+      }));
+    }
+  }]);
+  return GroupingSettings;
+}(Component);
+export default GroupingSettings;