dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,135 @@
+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, FORMULA_RESULT_TYPE, FORMULA_COLUMN_TYPES } from 'dtable-store';
+import BaseSettings from '../public-setting/base-settings';
+import ColumnSettings from '../public-setting/column-settings';
+import SummarySettings from './summary-settings';
+import MapStyleSetting from './style-setting/map-setting';
+var WordMapSettings = /*#__PURE__*/function (_Component) {
+  _inherits(WordMapSettings, _Component);
+  var _super = _createSuper(WordMapSettings);
+  function WordMapSettings(props) {
+    var _this;
+    _classCallCheck(this, WordMapSettings);
+    _this = _super.call(this, props);
+    _this.getColumns = function (columns) {
+      var geoColumns = columns.filter(function (column) {
+        var type = column.type,
+          data = column.data;
+        if (type === CellType.TEXT) return true;
+        if (type === CellType.GEOLOCATION) {
+          var _ref = data || {},
+            geo_format = _ref.geo_format;
+          if (geo_format === 'country_region') {
+            return true;
+          }
+        }
+        if (FORMULA_COLUMN_TYPES.includes(type)) {
+          var _data = column.data;
+          var _ref2 = _data || {},
+            result_type = _ref2.result_type,
+            array_type = _ref2.array_type,
+            array_data = _ref2.array_data;
+          if (result_type !== FORMULA_RESULT_TYPE.ARRAY || array_type !== CellType.GEOLOCATION) {
+            return false;
+          }
+          var _ref3 = array_data || {},
+            _geo_format = _ref3.geo_format;
+          if (_geo_format === 'country_region') {
+            return true;
+          }
+        }
+        return false;
+      });
+      return geoColumns;
+    };
+    _this.getSelectedTextColumnOption = function () {
+      return _this.textColumnsOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.column;
+      });
+    };
+    _this.onSelectTextColumn = function (option) {
+      var column = _this.props.statItem.column;
+      var new_column = option.value.key;
+      if (new_column === column) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        column: new_column
+      }));
+    };
+    var getColumnsOptions = props.getColumnsOptions,
+      _columns = props.columns;
+    var textColumns = _this.getColumns(_columns);
+    _this.textColumnsOptions = getColumnsOptions(textColumns);
+    return _this;
+  }
+  _createClass(WordMapSettings, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var getColumnsOptions = nextProps.getColumnsOptions,
+          columns = nextProps.columns;
+        var textColumns = this.getColumns(columns);
+        this.textColumnsOptions = getColumnsOptions(textColumns);
+      }
+    }
+  }, {
+    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 selectedTextColumnOption = this.getSelectedTextColumnOption();
+      var selectedViewId = statItem.view_id;
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(MapStyleSetting, {
+          statItem: statItem,
+          currentColor: statItem.data_color,
+          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('Location_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.textColumnsOptions,
+        selectedColumnOption: selectedTextColumnOption,
+        onChangeSelectedColumn: this.onSelectTextColumn
+      })), /*#__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 WordMapSettings;
+}(Component);
+export default WordMapSettings;

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

@@ -0,0 +1,156 @@
+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 DataSort from '../public-setting/data-sort-setting';
+import BarChartStyle from './style-setting/bar-chart-style-setting';
+import GroupbySettings from './groupby-settings';
+import YAxisGroupSettings from './y-axis-group-settings';
+import { GROUPBY_TYPE, STAT_TYPE } from '../../../constants';
+var AdvanceBarChartSettings = /*#__PURE__*/function (_Component) {
+  _inherits(AdvanceBarChartSettings, _Component);
+  var _super = _createSuper(AdvanceBarChartSettings);
+  function AdvanceBarChartSettings() {
+    var _this;
+    _classCallCheck(this, AdvanceBarChartSettings);
+    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.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
+      var statItem = _this.props.statItem;
+      var updated = {
+        y_axis_summary_type: summaryType,
+        y_axis_column_key: summaryColumnKey,
+        y_axis_summary_method: summaryMethod
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.updateSummaryColumn = function (summaryColumnKey) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_column_key: summaryColumnKey
+      }));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_summary_method: summaryMethod
+      }));
+    };
+    return _this;
+  }
+  _createClass(AdvanceBarChartSettings, [{
+    key: "render",
+    value: function render() {
+      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,
+        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,
+        columnGroupbyColumnsOptions = _this$props.columnGroupbyColumnsOptions;
+      var _ref = statItem || {},
+        type = _ref.type,
+        selectedTableId = _ref.table_id,
+        selectedViewId = _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,
+        y_axis_summary_type = _ref.y_axis_summary_type,
+        y_axis_column_key = _ref.y_axis_column_key,
+        y_axis_summary_method = _ref.y_axis_summary_method;
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(BarChartStyle, {
+          showRangeSetting: type !== STAT_TYPE.BAR_STACK,
+          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: 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(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(YAxisGroupSettings, {
+        label: intl.get('Y-axis'),
+        statItem: statItem,
+        selectedTable: selectedTable,
+        summaryType: y_axis_summary_type,
+        summaryColumnKey: y_axis_column_key,
+        summaryMethod: y_axis_summary_method,
+        columnGroupbyColumnsOptions: columnGroupbyColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        numericColumnsOptions: numericColumnsOptions,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onChangeColumnGroupbyType: this.updateColumnGroupby,
+        onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN),
+        updatedColumnGroupbyNumericColumns: this.updatedColumnGroupbyNumericColumns,
+        updateStatItem: this.props.updateStatItem
+      }), type === STAT_TYPE.BAR_STACK && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(DataSort, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatItem
+      })));
+    }
+  }]);
+  return AdvanceBarChartSettings;
+}(Component);
+export default AdvanceBarChartSettings;

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

@@ -0,0 +1,147 @@
+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 BarChartStyle from './style-setting/bar-chart-style-setting';
+import GroupbySettings from './groupby-settings';
+import SummarySettings from './summary-settings';
+import DataSort from '../public-setting/data-sort-setting';
+import { GROUPBY_TYPE } from '../../../constants';
+var BarSettings = /*#__PURE__*/function (_Component) {
+  _inherits(BarSettings, _Component);
+  var _super = _createSuper(BarSettings);
+  function BarSettings() {
+    var _this;
+    _classCallCheck(this, BarSettings);
+    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.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
+      var statItem = _this.props.statItem;
+      var updated = {
+        y_axis_summary_type: summaryType,
+        y_axis_column_key: summaryColumnKey,
+        y_axis_summary_method: summaryMethod
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.updateSummaryColumn = function (summaryColumnKey) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_column_key: summaryColumnKey
+      }));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_summary_method: summaryMethod
+      }));
+    };
+    return _this;
+  }
+  _createClass(BarSettings, [{
+    key: "render",
+    value: function render() {
+      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,
+        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 || {},
+        selectedTableId = _ref.table_id,
+        selectedViewId = _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,
+        y_axis_summary_type = _ref.y_axis_summary_type,
+        y_axis_column_key = _ref.y_axis_column_key,
+        y_axis_summary_method = _ref.y_axis_summary_method;
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(BarChartStyle, {
+          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: 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(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: generalColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('X-axis'),
+        placeholder: intl.get('Select_a_column'),
+        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(SummarySettings, {
+        statItem: statItem,
+        label: intl.get('Y-axis'),
+        numericColumnsOptions: numericColumnsOptions,
+        summaryType: y_axis_summary_type,
+        summaryColumnKey: y_axis_column_key,
+        summaryMethod: y_axis_summary_method,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onChangeSummaryType: this.updatedSummaryType,
+        onSelectNumericColumn: this.updateSummaryColumn,
+        onSelectSummaryMethod: this.updateSummaryMethod
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(DataSort, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatItem
+      }));
+    }
+  }]);
+  return BarSettings;
+}(Component);
+export default BarSettings;

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

@@ -0,0 +1,195 @@
+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, TableUtils } from 'dtable-store';
+import { DTableSelect } from '../../../components';
+import CompletenessStyle from './style-setting/completeness-style';
+import GroupbySettings from './groupby-settings';
+import BaseSettings from '../public-setting/base-settings';
+import DataSort from '../public-setting/data-sort-setting';
+import { TIME_COLUMN_LIST, STAT_TYPE } from '../../../constants';
+var COLUMN_TYPES = [CellType.TEXT, CellType.COLLABORATOR, CellType.SINGLE_SELECT];
+var CompletenessSetting = /*#__PURE__*/function (_Component) {
+  _inherits(CompletenessSetting, _Component);
+  var _super = _createSuper(CompletenessSetting);
+  function CompletenessSetting(props) {
+    var _this;
+    _classCallCheck(this, CompletenessSetting);
+    _this = _super.call(this, props);
+    _this.renderNameSettings = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        getSelectedColumnOption = _this$props.getSelectedColumnOption;
+      var name_column = statItem.name_column;
+      var selectedItem = getSelectedColumnOption(name_column, _this.columnOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Name_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+        placeholder: intl.get('Select_a_column'),
+        value: selectedItem,
+        onChange: _this.onSelectGroupColumn,
+        options: _this.columnOptions
+      }));
+    };
+    _this.onSelectGroupColumn = function (option) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        name_column: option.value.key
+      }));
+    };
+    _this.renderCompletionSettings = function () {
+      var _this$props2 = _this.props,
+        statItem = _this$props2.statItem,
+        getSelectedColumnOption = _this$props2.getSelectedColumnOption;
+      var completed_column = statItem.completed_column;
+      var selectedItem = getSelectedColumnOption(completed_column, _this.props.numericColumnsOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Completion_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+        placeholder: intl.get('Select_a_column'),
+        value: selectedItem,
+        onChange: _this.onSelectCompletionColumn,
+        options: _this.props.numericColumnsOptions
+      }));
+    };
+    _this.renderGroupSettings = function () {
+      var _this$props3 = _this.props,
+        selectedTable = _this$props3.selectedTable,
+        columnGroupbyColumnsOptions = _this$props3.columnGroupbyColumnsOptions,
+        dateGranularityOptions = _this$props3.dateGranularityOptions,
+        geolocationGranularityOptions = _this$props3.geolocationGranularityOptions,
+        statItem = _this$props3.statItem,
+        getSelectedColumnOption = _this$props3.getSelectedColumnOption;
+      var group_column = statItem.group_column,
+        date_granularity = statItem.date_granularity,
+        geolocation_granularity = statItem.geolocation_granularity;
+      return /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: columnGroupbyColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('Group_by'),
+        groupbyColumnKey: group_column,
+        groupbyDateGranularity: date_granularity,
+        groupbyGeolocationGranularity: geolocation_granularity,
+        getSelectedColumnOption: getSelectedColumnOption,
+        onSelectGroupbyColumn: _this.onSelectColumnGroupColumn,
+        onSelectGroupbyDateGranularity: _this.onSelectDateGranularity,
+        onSelectGroupbyGeolocationGranularity: _this.onSelectGeolocationGranularity
+      });
+    };
+    _this.onSelectColumnGroupColumn = function (key) {
+      var _this$props4 = _this.props,
+        statItem = _this$props4.statItem,
+        selectedTable = _this$props4.selectedTable;
+      if (key === statItem.group_column) return;
+      var selectedColumn = TableUtils.getTableColumnByKey(selectedTable, key);
+      var newStatItem = {};
+      if (selectedColumn && TIME_COLUMN_LIST.includes(selectedColumn.type)) {
+        newStatItem.date_granularity = 'month';
+      }
+      if (selectedColumn.type === CellType.GEOLOCATION) {
+        newStatItem.geolocation_granularity = 'district';
+      }
+      newStatItem.group_column = key;
+      _this.props.updateStatItem(Object.assign({}, statItem, newStatItem));
+    };
+    _this.onSelectDateGranularity = function (key) {
+      var statItem = _this.props.statItem;
+      if (key === statItem.date_granularity) return;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        date_granularity: key
+      }));
+    };
+    _this.onSelectGeolocationGranularity = function (key) {
+      var statItem = _this.props.statItem;
+      if (key === statItem.geolocation_granularity) return;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        geolocation_granularity: key
+      }));
+    };
+    _this.onSelectCompletionColumn = function (option) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        completed_column: option.value.key
+      }));
+    };
+    _this.renderTotalValueSettings = function () {
+      var _this$props5 = _this.props,
+        statItem = _this$props5.statItem,
+        getSelectedColumnOption = _this$props5.getSelectedColumnOption;
+      var target_column = statItem.target_column;
+      var selectedItem = getSelectedColumnOption(target_column, _this.props.numericColumnsOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+        placeholder: intl.get('Select_a_column'),
+        value: selectedItem,
+        onChange: _this.onSelectTotalColumn,
+        options: _this.props.numericColumnsOptions
+      }));
+    };
+    _this.onSelectTotalColumn = function (option) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        target_column: option.value.key
+      }));
+    };
+    _this.columnOptions = props.generalColumnsOptions.filter(function (item) {
+      return COLUMN_TYPES.includes(item.value.type);
+    });
+    return _this;
+  }
+  _createClass(CompletenessSetting, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps, props) {
+      if (nextProps.selectedTable._id !== this.props.selectedTable._id) {
+        this.columnOptions = nextProps.generalColumnsOptions.filter(function (item) {
+          return COLUMN_TYPES.includes(item.value.type);
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props6 = this.props,
+        getTables = _this$props6.getTables,
+        getViews = _this$props6.getViews,
+        statItem = _this$props6.statItem,
+        settingType = _this$props6.settingType;
+      var _ref = statItem || {},
+        selectedTableId = _ref.table_id,
+        selectedViewId = _ref.view_id;
+      var isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(CompletenessStyle, {
+          statItem: statItem,
+          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"
+      }), this.renderNameSettings(), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), this.renderCompletionSettings(), this.renderTotalValueSettings(), isGroupChart && this.renderGroupSettings(), !isGroupChart && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(DataSort, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatItem
+      })));
+    }
+  }]);
+  return CompletenessSetting;
+}(Component);
+export default CompletenessSetting;