dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,466 @@
+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 classnames from 'classnames';
+import intl from 'react-intl-universal';
+import { COLUMN_OPTIONS, isNumericColumn } from 'dtable-store';
+import ToggleSetting from '../public-setting/toggle-setting';
+import PieSettings from './pie-settings';
+import ScatterSettings from './scatter-settings';
+import BarSettings from './bar-settings';
+import AdvanceBarChartSettings from './advance-bar-chart-settings';
+import HorizontalBar from './horizontal-bar-settings';
+import HorizontalGroupBarChartSettings from './horizontal-group-chart-settings';
+import TimeComparisonSettings from './time-comparison-settings';
+import CompletenessSetting from './completeness-chart-settings';
+import PivotTableSettings from './pivot-table-settings';
+import CustomBarSettings from './custom-bar-settings';
+import { BASIC_CHART_COLUMN_LIST, DATE_GRANULARITY, GEOLOCATION_GRANULARITY, STATISTICS_COUNT_SHOW, STAT_TYPE, TIME_COLUMN_LIST } from '../../../constants';
+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 BasicChartSettings = /*#__PURE__*/function (_Component) {
+  _inherits(BasicChartSettings, _Component);
+  var _super = _createSuper(BasicChartSettings);
+  function BasicChartSettings(props) {
+    var _this;
+    _classCallCheck(this, BasicChartSettings);
+    _this = _super.call(this, props);
+    _this.setData = function (selectedTable) {
+      _this.availableColumns = _this.getAvailableColumns(selectedTable.columns);
+      _this.columnsOptions = _this.getColumnsOptions(_this.availableColumns);
+      _this.generalColumnsOptions = _this.getGeneralColumnsOptions(_this.columnsOptions);
+      _this.columnGroupbyColumnsOptions = _this.getColumnGroupbyColumnsOptions(_this.columnsOptions);
+      var numericColumns = _this.getNumericColumns(_this.availableColumns);
+      _this.numericColumnsOptions = _this.getColumnsOptions(numericColumns);
+      _this.pivotTableSummaryColumnOptions = _this.getPivotTableSummaryColumnOptions(_this.availableColumns);
+    };
+    _this.renderIncludeEmpty = function () {
+      var statItem = _this.props.statItem;
+      var _ref = statItem || {},
+        type = _ref.type,
+        groupby_include_empty_cells = _ref.groupby_include_empty_cells,
+        x_axis_include_empty = _ref.x_axis_include_empty,
+        vertical_axis_include_empty = _ref.vertical_axis_include_empty;
+      var includeEmptyCells;
+      if (type === STAT_TYPE.PIE || type === STAT_TYPE.RING || type === STAT_TYPE.TREEMAP || type === STAT_TYPE.PIVOT_TABLE) {
+        includeEmptyCells = groupby_include_empty_cells;
+      } else if (type === STAT_TYPE.HORIZONTAL_BAR || type === STAT_TYPE.HORIZONTAL_GROUP_BAR || type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+        includeEmptyCells = vertical_axis_include_empty;
+      } else {
+        includeEmptyCells = x_axis_include_empty;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: includeEmptyCells || false,
+        handleToggleChange: _this.onToggleIncludeEmpty,
+        label: intl.get('Including_empty_cell')
+      }));
+    };
+    _this.getAvailableColumns = function (columns) {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(function (column) {
+        return BASIC_CHART_COLUMN_LIST.includes(column.type);
+      });
+    };
+    _this.getPivotTableSummaryColumnOptions = function (columns) {
+      var summaryColumns = columns.filter(function (column) {
+        return column && (isNumericColumn(column) || TIME_COLUMN_LIST.includes(column.type));
+      });
+      return _this.getColumnsOptions(summaryColumns);
+    };
+    _this.getColumnsOptions = function (columns) {
+      if (!Array.isArray(columns)) return [];
+      return columns.map(function (column) {
+        var option = COLUMN_OPTIONS.find(function (o) {
+          return o.type === column.type;
+        }) || {};
+        var name = column.name,
+          key = column.key,
+          type = column.type;
+        return {
+          label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "header-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: option.iconClass
+          })), /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, name)),
+          value: {
+            name: name,
+            key: key,
+            type: type
+          }
+        };
+      });
+    };
+    _this.getGeneralColumnsOptions = function (columnsOptions) {
+      var statItem = _this.props.statItem;
+      var list = _toConsumableArray(columnsOptions);
+      if (statItem.type === STAT_TYPE.PIVOT_TABLE) {
+        list.unshift({
+          label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "header-icon"
+          }), /*#__PURE__*/React.createElement("span", {
+            style: {
+              color: '#999999'
+            },
+            className: "select-option-name"
+          }, intl.get('Not_used'))),
+          value: {
+            key: null
+          }
+        });
+      }
+      return list;
+    };
+    _this.getColumnGroupbyColumnsOptions = function (columnsOptions) {
+      var statItem = _this.props.statItem || {};
+      var availableOptions = columnsOptions.filter(function (o) {
+        return o.value.key !== statItem.x_axis_column_key;
+      });
+      return availableOptions;
+    };
+    _this.getNumericColumns = function (columns) {
+      if (!columns) return [];
+      return columns.filter(function (column) {
+        return column && isNumericColumn(column);
+      });
+    };
+    _this.getSelectedColumnOption = function (key, columnsOptions) {
+      if (!key || !Array.isArray(columnsOptions) || columnsOptions.length === 0) {
+        return null;
+      }
+      return columnsOptions.find(function (o) {
+        return o.value.key === key;
+      }) || columnsOptions[0];
+    };
+    _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.getSettingsByType = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        labelColorConfigs = _this$props.labelColorConfigs,
+        eventBus = _this$props.eventBus,
+        getTableById = _this$props.getTableById,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews;
+      var _this$state = _this.state,
+        selectedTable = _this$state.selectedTable,
+        settingType = _this$state.settingType;
+      var type = statItem.type;
+      switch (statItem.type) {
+        case STAT_TYPE.BAR:
+        case STAT_TYPE.LINE:
+        case STAT_TYPE.AREA_CHART:
+          {
+            return /*#__PURE__*/React.createElement(BarSettings, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        case STAT_TYPE.COMPARE_BAR:
+          {
+            return /*#__PURE__*/React.createElement(TimeComparisonSettings, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem
+            });
+          }
+        case STAT_TYPE.BAR_GROUP:
+        case STAT_TYPE.BAR_STACK:
+        case STAT_TYPE.GROUP_LINE:
+        case STAT_TYPE.AREA_GROUP_CHART:
+          {
+            return /*#__PURE__*/React.createElement(AdvanceBarChartSettings, {
+              chartType: type,
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        case STAT_TYPE.CUSTOM_BAR:
+          {
+            return /*#__PURE__*/React.createElement(CustomBarSettings, {
+              chartType: type,
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        case STAT_TYPE.PIE:
+        case STAT_TYPE.RING:
+        case STAT_TYPE.TREEMAP:
+          {
+            return /*#__PURE__*/React.createElement(PieSettings, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              columnsOptions: _this.generalColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatisticsSettings: _this.props.updateStatItem,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        case STAT_TYPE.SCATTER:
+          {
+            return /*#__PURE__*/React.createElement(ScatterSettings, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem
+            });
+          }
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return /*#__PURE__*/React.createElement(HorizontalBar, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        case STAT_TYPE.HORIZONTAL_GROUP_BAR:
+        case STAT_TYPE.STACKED_HORIZONTAL_BAR:
+          {
+            return /*#__PURE__*/React.createElement(HorizontalGroupBarChartSettings, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              updateStatItem: _this.props.updateStatItem,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        case STAT_TYPE.COMPLETENESS_CHART:
+        case STAT_TYPE.GROUP_COMPLETENESS_CHART:
+          {
+            return /*#__PURE__*/React.createElement(CompletenessSetting, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              numericColumnsOptions: _this.numericColumnsOptions,
+              updateStatItem: _this.props.updateStatItem,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              dateGranularityOptions: _this.dateGranularityOptions
+            });
+          }
+        case STAT_TYPE.PIVOT_TABLE:
+          {
+            return /*#__PURE__*/React.createElement(PivotTableSettings, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              generalColumnsOptions: _this.generalColumnsOptions,
+              pivotTableSummaryColumnOptions: _this.pivotTableSummaryColumnOptions,
+              updateStatItem: _this.props.updateStatItem,
+              getSelectedColumnOption: _this.getSelectedColumnOption,
+              columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
+              geolocationGranularityOptions: _this.geolocationGranularityOptions,
+              dateGranularityOptions: _this.dateGranularityOptions,
+              renderIncludeEmpty: _this.renderIncludeEmpty
+            });
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    };
+    _this.onToggleIncludeEmpty = function () {
+      var statItem = _this.props.statItem;
+      var _ref2 = statItem || {},
+        type = _ref2.type,
+        groupby_include_empty_cells = _ref2.groupby_include_empty_cells,
+        x_axis_include_empty = _ref2.x_axis_include_empty,
+        vertical_axis_include_empty = _ref2.vertical_axis_include_empty;
+      var updated;
+      if (type === STAT_TYPE.PIE || type === STAT_TYPE.RING || type === STAT_TYPE.TREEMAP || type === STAT_TYPE.PIVOT_TABLE) {
+        updated = {
+          groupby_include_empty_cells: !groupby_include_empty_cells
+        };
+      } else if (type === STAT_TYPE.HORIZONTAL_BAR || type === STAT_TYPE.HORIZONTAL_GROUP_BAR || type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+        updated = {
+          vertical_axis_include_empty: !vertical_axis_include_empty
+        };
+      } else {
+        updated = {
+          x_axis_include_empty: !x_axis_include_empty
+        };
+      }
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.selectEditType = function (type) {
+      _this.setState({
+        settingType: type
+      });
+    };
+    var _getTableById = props.getTableById,
+      _statItem = props.statItem;
+    var _selectedTable = _getTableById(_statItem.table_id);
+    _this.state = {
+      selectedTable: _selectedTable,
+      settingType: 'data'
+    };
+    _this.setData(_selectedTable);
+    _this.dateGranularityOptions = _this.getGranularityOptions(DATE_GRANULARITY_LIST);
+    _this.geolocationGranularityOptions = _this.getGranularityOptions(GEOLOCATION_GRANULARITY_LIST);
+    return _this;
+  }
+  _createClass(BasicChartSettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var getTableById = this.props.getTableById;
+      if (nextProps.statItem.table_id !== this.props.statItem.table_id) {
+        var statItem = nextProps.statItem;
+        var selectedTable = getTableById(statItem.table_id);
+        this.setState({
+          selectedTable: selectedTable
+        });
+        this.setData(selectedTable);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var settingType = this.state.settingType;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-settings"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-settings-type"
+      }, /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          return _this2.selectEditType('data');
+        },
+        className: classnames('statistic-type-item', {
+          'selected-statistic-type-item': settingType === 'data'
+        })
+      }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick() {
+          return _this2.selectEditType('style');
+        },
+        className: classnames('statistic-type-item', {
+          'selected-statistic-type-item': settingType === 'style'
+        })
+      }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-settings-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-settings-parameter-list pt-4"
+      }, this.getSettingsByType())));
+    }
+  }]);
+  return BasicChartSettings;
+}(Component);
+export default BasicChartSettings;

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

@@ -0,0 +1,183 @@
+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 SummarySettings from './summary-settings';
+import StyleSettings from './style-setting/pie-chart-style-settings';
+import DataSort from '../public-setting/data-sort-setting';
+import { STAT_TYPE } from '../../../constants';
+var GROUPBY_TYPE = {
+  ROW: 'row',
+  COLUMN: 'column'
+};
+var PieSettings = /*#__PURE__*/function (_Component) {
+  _inherits(PieSettings, _Component);
+  var _super = _createSuper(PieSettings);
+  function PieSettings() {
+    var _this;
+    _classCallCheck(this, PieSettings);
+    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;
+      if (type === GROUPBY_TYPE.ROW) {
+        updated = {
+          groupby_column_key: groupbyColumnKey,
+          groupby_date_granularity: groupbyDateGranularity,
+          groupby_geolocation_granularity: groupbyGeolocationGranularity
+        };
+      } else {
+        updated = {
+          column_groupby_column_key: groupbyColumnKey,
+          column_groupby_date_granularity: groupbyDateGranularity,
+          column_groupby_geolocation_granularity: groupbyGeolocationGranularity
+        };
+      }
+      _this.props.updateStatisticsSettings(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyDateGranularity = function (type, dateGranularity) {
+      var updated;
+      if (type === GROUPBY_TYPE.ROW) {
+        updated = {
+          groupby_date_granularity: dateGranularity
+        };
+      } else {
+        updated = {
+          column_groupby_date_granularity: dateGranularity
+        };
+      }
+      _this.props.updateStatisticsSettings(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyGeolocationGranularity = function (type, geolocationGranularity) {
+      var updated;
+      if (type === GROUPBY_TYPE.ROW) {
+        updated = {
+          groupby_geolocation_granularity: geolocationGranularity
+        };
+      } else {
+        updated = {
+          column_groupby_geolocation_granularity: geolocationGranularity
+        };
+      }
+      _this.props.updateStatisticsSettings(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onToggleShowLegend = function () {
+      var statItem = _this.props.statItem;
+      var show_legend = !statItem.show_legend;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_legend: show_legend
+      }));
+    };
+    _this.onToggleShowPercent = function () {
+      var statItem = _this.props.statItem;
+      var show_percent = !statItem.show_percent;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_percent: show_percent
+      }));
+    };
+    _this.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
+      var updated = Object.assign({}, _this.props.statItem, {
+        summary_type: summaryType,
+        summary_column_key: summaryColumnKey,
+        summary_method: summaryMethod
+      });
+      _this.props.updateStatisticsSettings(updated);
+    };
+    _this.onSelectNumericColumn = function (summaryColumnKey) {
+      _this.props.updateStatisticsSettings(Object.assign({}, _this.props.statItem, {
+        summary_column_key: summaryColumnKey
+      }));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatisticsSettings(Object.assign({}, _this.props.statItem, {
+        summary_method: summaryMethod
+      }));
+    };
+    return _this;
+  }
+  _createClass(PieSettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTableById = _this$props.getTableById,
+        statItem = _this$props.statItem,
+        selectedTable = _this$props.selectedTable,
+        columnsOptions = _this$props.columnsOptions,
+        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,
+        groupby_column_key = _ref.groupby_column_key,
+        groupby_date_granularity = _ref.groupby_date_granularity,
+        groupby_geolocation_granularity = _ref.groupby_geolocation_granularity,
+        summary_type = _ref.summary_type,
+        summary_column_key = _ref.summary_column_key,
+        summary_method = _ref.summary_method;
+      if (settingType === 'style') {
+        if (statItem.type == STAT_TYPE.TREEMAP) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(StyleSettings, {
+          statItem: statItem,
+          getTableById: getTableById,
+          updateStatisticsSettings: this.props.updateStatisticsSettings
+        });
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        selectedTableId: selectedTableId,
+        selectedViewId: selectedViewId,
+        statItem: statItem,
+        getTables: this.props.getTables,
+        getViews: this.props.getViews,
+        getTableById: this.props.getTableById,
+        updateStatItem: this.props.updateStatisticsSettings
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: columnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.get('Group_by'),
+        groupbyColumnKey: groupby_column_key,
+        groupbyDateGranularity: groupby_date_granularity,
+        groupbyGeolocationGranularity: groupby_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('Summary_method'),
+        numericColumnsOptions: numericColumnsOptions,
+        summaryType: summary_type,
+        summaryColumnKey: summary_column_key,
+        summaryMethod: summary_method,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onChangeSummaryType: this.updatedSummaryType,
+        onSelectNumericColumn: this.onSelectNumericColumn,
+        onSelectSummaryMethod: this.updateSummaryMethod
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(DataSort, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatisticsSettings
+      }));
+    }
+  }]);
+  return PieSettings;
+}(Component);
+export default PieSettings;