dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,473 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _toggleSetting = _interopRequireDefault(require("../public-setting/toggle-setting"));
+var _pieSettings = _interopRequireDefault(require("./pie-settings"));
+var _scatterSettings = _interopRequireDefault(require("./scatter-settings"));
+var _barSettings = _interopRequireDefault(require("./bar-settings"));
+var _advanceBarChartSettings = _interopRequireDefault(require("./advance-bar-chart-settings"));
+var _horizontalBarSettings = _interopRequireDefault(require("./horizontal-bar-settings"));
+var _horizontalGroupChartSettings = _interopRequireDefault(require("./horizontal-group-chart-settings"));
+var _timeComparisonSettings = _interopRequireDefault(require("./time-comparison-settings"));
+var _completenessChartSettings = _interopRequireDefault(require("./completeness-chart-settings"));
+var _pivotTableSettings = _interopRequireDefault(require("./pivot-table-settings"));
+var _customBarSettings = _interopRequireDefault(require("./custom-bar-settings"));
+var _constants = require("../../../constants");
+const DATE_GRANULARITY_LIST = [_constants.DATE_GRANULARITY.DAY, _constants.DATE_GRANULARITY.WEEK, _constants.DATE_GRANULARITY.MONTH, _constants.DATE_GRANULARITY.QUARTER, _constants.DATE_GRANULARITY.YEAR];
+const GEOLOCATION_GRANULARITY_LIST = [_constants.GEOLOCATION_GRANULARITY.PROVINCE, _constants.GEOLOCATION_GRANULARITY.CITY, _constants.GEOLOCATION_GRANULARITY.DISTRICT];
+class BasicChartSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.setData = 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);
+      const numericColumns = this.getNumericColumns(this.availableColumns);
+      this.numericColumnsOptions = this.getColumnsOptions(numericColumns);
+      this.pivotTableSummaryColumnOptions = this.getPivotTableSummaryColumnOptions(this.availableColumns);
+    };
+    this.renderIncludeEmpty = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        type,
+        groupby_include_empty_cells,
+        x_axis_include_empty,
+        vertical_axis_include_empty
+      } = statItem || {};
+      let includeEmptyCells;
+      if (type === _constants.STAT_TYPE.PIE || type === _constants.STAT_TYPE.RING || type === _constants.STAT_TYPE.TREEMAP || type === _constants.STAT_TYPE.PIVOT_TABLE) {
+        includeEmptyCells = groupby_include_empty_cells;
+      } else if (type === _constants.STAT_TYPE.HORIZONTAL_BAR || type === _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR || type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+        includeEmptyCells = vertical_axis_include_empty;
+      } else {
+        includeEmptyCells = x_axis_include_empty;
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: includeEmptyCells || false,
+        handleToggleChange: this.onToggleIncludeEmpty,
+        label: _reactIntlUniversal.default.get('Including_empty_cell')
+      }));
+    };
+    this.getAvailableColumns = columns => {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(column => _constants.BASIC_CHART_COLUMN_LIST.includes(column.type));
+    };
+    this.getPivotTableSummaryColumnOptions = columns => {
+      const summaryColumns = columns.filter(column => {
+        return column && ((0, _dtableUtils.isNumericColumn)(column) || _constants.TIME_COLUMN_LIST.includes(column.type));
+      });
+      return this.getColumnsOptions(summaryColumns);
+    };
+    this.getColumnsOptions = columns => {
+      if (!Array.isArray(columns)) return [];
+      return columns.map(column => {
+        let option = _dtableUtils.COLUMN_OPTIONS.find(o => o.type === column.type) || {};
+        const {
+          name,
+          key,
+          type
+        } = column;
+        return {
+          label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+            className: "header-icon"
+          }, /*#__PURE__*/_react.default.createElement("i", {
+            className: option.iconClass
+          })), /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, name)),
+          value: {
+            name,
+            key,
+            type
+          }
+        };
+      });
+    };
+    this.getGeneralColumnsOptions = columnsOptions => {
+      const {
+        statItem
+      } = this.props;
+      const list = [...columnsOptions];
+      if (statItem.type === _constants.STAT_TYPE.PIVOT_TABLE) {
+        list.unshift({
+          label: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+            className: "header-icon"
+          }), /*#__PURE__*/_react.default.createElement("span", {
+            style: {
+              color: '#999999'
+            },
+            className: "select-option-name"
+          }, _reactIntlUniversal.default.get('Not_used'))),
+          value: {
+            key: null
+          }
+        });
+      }
+      return list;
+    };
+    this.getColumnGroupbyColumnsOptions = columnsOptions => {
+      let statItem = this.props.statItem || {};
+      let availableOptions = columnsOptions.filter(o => o.value.key !== statItem.x_axis_column_key);
+      return availableOptions;
+    };
+    this.getNumericColumns = columns => {
+      if (!columns) return [];
+      return columns.filter(column => column && (0, _dtableUtils.isNumericColumn)(column));
+    };
+    this.getSelectedColumnOption = (key, columnsOptions) => {
+      if (!key || !Array.isArray(columnsOptions) || columnsOptions.length === 0) {
+        return null;
+      }
+      return columnsOptions.find(o => o.value.key === key) || columnsOptions[0];
+    };
+    this.getGranularityOptions = options => {
+      return options.map(g => {
+        return {
+          value: g,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[g]))
+        };
+      });
+    };
+    this.getSettingsByType = () => {
+      const {
+        statItem,
+        labelColorConfigs,
+        eventBus,
+        getTableById,
+        getTables,
+        getViews
+      } = this.props;
+      const {
+        selectedTable,
+        settingType
+      } = this.state;
+      const type = statItem.type;
+      switch (statItem.type) {
+        case _constants.STAT_TYPE.BAR:
+        case _constants.STAT_TYPE.LINE:
+        case _constants.STAT_TYPE.AREA_CHART:
+          {
+            return /*#__PURE__*/_react.default.createElement(_barSettings.default, {
+              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,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
+            });
+          }
+        case _constants.STAT_TYPE.COMPARE_BAR:
+          {
+            return /*#__PURE__*/_react.default.createElement(_timeComparisonSettings.default, {
+              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,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem
+            });
+          }
+        case _constants.STAT_TYPE.BAR_GROUP:
+        case _constants.STAT_TYPE.BAR_STACK:
+        case _constants.STAT_TYPE.GROUP_LINE:
+        case _constants.STAT_TYPE.AREA_GROUP_CHART:
+          {
+            return /*#__PURE__*/_react.default.createElement(_advanceBarChartSettings.default, {
+              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,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
+            });
+          }
+        case _constants.STAT_TYPE.CUSTOM_BAR:
+          {
+            return /*#__PURE__*/_react.default.createElement(_customBarSettings.default, {
+              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,
+              getConvertedChart: this.props.getConvertedChart,
+              updateStatItem: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
+            });
+          }
+        case _constants.STAT_TYPE.PIE:
+        case _constants.STAT_TYPE.RING:
+        case _constants.STAT_TYPE.TREEMAP:
+          {
+            return /*#__PURE__*/_react.default.createElement(_pieSettings.default, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              getConvertedChart: this.props.getConvertedChart,
+              columnsOptions: this.generalColumnsOptions,
+              numericColumnsOptions: this.numericColumnsOptions,
+              dateGranularityOptions: this.dateGranularityOptions,
+              geolocationGranularityOptions: this.geolocationGranularityOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              updateStatisticsSettings: this.props.updateStatItem,
+              renderIncludeEmpty: this.renderIncludeEmpty
+            });
+          }
+        case _constants.STAT_TYPE.SCATTER:
+          {
+            return /*#__PURE__*/_react.default.createElement(_scatterSettings.default, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              numericColumnsOptions: this.numericColumnsOptions,
+              generalColumnsOptions: this.generalColumnsOptions,
+              columnGroupbyColumnsOptions: this.columnGroupbyColumnsOptions,
+              getSelectedColumnOption: this.getSelectedColumnOption,
+              updateStatItem: this.props.updateStatItem
+            });
+          }
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return /*#__PURE__*/_react.default.createElement(_horizontalBarSettings.default, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              selectedTable: selectedTable,
+              getConvertedChart: this.props.getConvertedChart,
+              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 _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR:
+        case _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR:
+          {
+            return /*#__PURE__*/_react.default.createElement(_horizontalGroupChartSettings.default, {
+              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,
+              getConvertedChart: this.props.getConvertedChart,
+              renderIncludeEmpty: this.renderIncludeEmpty
+            });
+          }
+        case _constants.STAT_TYPE.COMPLETENESS_CHART:
+        case _constants.STAT_TYPE.GROUP_COMPLETENESS_CHART:
+          {
+            return /*#__PURE__*/_react.default.createElement(_completenessChartSettings.default, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              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 _constants.STAT_TYPE.PIVOT_TABLE:
+          {
+            return /*#__PURE__*/_react.default.createElement(_pivotTableSettings.default, {
+              settingType: settingType,
+              statItem: statItem,
+              labelColorConfigs: labelColorConfigs,
+              eventBus: eventBus,
+              getTables: getTables,
+              getViews: getViews,
+              getTableById: getTableById,
+              getConvertedChart: this.props.getConvertedChart,
+              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 = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        type,
+        groupby_include_empty_cells,
+        x_axis_include_empty,
+        vertical_axis_include_empty
+      } = statItem || {};
+      let updated;
+      if (type === _constants.STAT_TYPE.PIE || type === _constants.STAT_TYPE.RING || type === _constants.STAT_TYPE.TREEMAP || type === _constants.STAT_TYPE.PIVOT_TABLE) {
+        updated = {
+          groupby_include_empty_cells: !groupby_include_empty_cells
+        };
+      } else if (type === _constants.STAT_TYPE.HORIZONTAL_BAR || type === _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR || type === _constants.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 = type => {
+      this.setState({
+        settingType: type
+      });
+    };
+    const {
+      getTableById: _getTableById,
+      statItem: _statItem
+    } = props;
+    let _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);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      getTableById
+    } = this.props;
+    if (nextProps.statItem.table_id !== this.props.statItem.table_id) {
+      const {
+        statItem
+      } = nextProps;
+      const selectedTable = getTableById(statItem.table_id);
+      this.setState({
+        selectedTable
+      });
+      this.setData(selectedTable);
+    }
+  }
+  render() {
+    const {
+      settingType
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings-type"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => this.selectEditType('data'),
+      className: (0, _classnames.default)('statistic-type-item', {
+        'selected-statistic-type-item': settingType === 'data'
+      })
+    }, _reactIntlUniversal.default.get('Data_settings')), /*#__PURE__*/_react.default.createElement("div", {
+      onClick: () => this.selectEditType('style'),
+      className: (0, _classnames.default)('statistic-type-item', {
+        'selected-statistic-type-item': settingType === 'style'
+      })
+    }, _reactIntlUniversal.default.get('Style_settings'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-settings-parameter-list pt-4"
+    }, this.getSettingsByType())));
+  }
+}
+var _default = exports.default = BasicChartSettings;

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

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _groupbySettings = _interopRequireDefault(require("./groupby-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _pieChartStyleSettings = _interopRequireDefault(require("./style-setting/pie-chart-style-settings"));
+var _dataSortSetting = _interopRequireDefault(require("../public-setting/data-sort-setting"));
+var _constants = require("../../../constants");
+const GROUPBY_TYPE = {
+  ROW: 'row',
+  COLUMN: 'column'
+};
+class PieSettings extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let 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 = (type, dateGranularity) => {
+      let 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 = (type, geolocationGranularity) => {
+      let 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 = () => {
+      let {
+        statItem
+      } = this.props;
+      let show_legend = !statItem.show_legend;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_legend
+      }));
+    };
+    this.onToggleShowPercent = () => {
+      let {
+        statItem
+      } = this.props;
+      let show_percent = !statItem.show_percent;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_percent
+      }));
+    };
+    this.updatedSummaryType = (summaryType, summaryColumnKey, summaryMethod) => {
+      let updated = Object.assign({}, this.props.statItem, {
+        summary_type: summaryType,
+        summary_column_key: summaryColumnKey,
+        summary_method: summaryMethod
+      });
+      this.props.updateStatisticsSettings(updated);
+    };
+    this.onSelectNumericColumn = summaryColumnKey => {
+      this.props.updateStatisticsSettings(Object.assign({}, this.props.statItem, {
+        summary_column_key: summaryColumnKey
+      }));
+    };
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatisticsSettings(Object.assign({}, this.props.statItem, {
+        summary_method: summaryMethod
+      }));
+    };
+  }
+  render() {
+    const {
+      getTableById,
+      statItem,
+      selectedTable,
+      columnsOptions,
+      numericColumnsOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions,
+      renderIncludeEmpty,
+      settingType
+    } = this.props;
+    const {
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      groupby_column_key,
+      groupby_date_granularity,
+      groupby_geolocation_granularity,
+      summary_type,
+      summary_column_key,
+      summary_method
+    } = statItem || {};
+    if (settingType === 'style') {
+      if (statItem.type === _constants.STAT_TYPE.TREEMAP) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_pieChartStyleSettings.default, {
+        statItem: statItem,
+        getTableById: getTableById,
+        updateStatisticsSettings: this.props.updateStatisticsSettings
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      statItem: statItem,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatisticsSettings
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
+      selectedTable: selectedTable,
+      columnsOptions: columnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: _reactIntlUniversal.default.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.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      statItem: statItem,
+      label: _reactIntlUniversal.default.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.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_dataSortSetting.default, {
+      statItem: statItem,
+      updateStatItem: this.props.updateStatisticsSettings
+    }));
+  }
+}
+var _default = exports.default = PieSettings;