dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,359 @@
+"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 _reactstrap = require("reactstrap");
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _toggleSetting = _interopRequireDefault(require("../../public-setting/toggle-setting"));
+var _colorUseTypeSelector = _interopRequireDefault(require("../../color-setting/color-use-type-selector"));
+var _labelFontSizeEditor = _interopRequireDefault(require("./label-font-size-editor"));
+var _constants = require("../../../../constants");
+class PieStyleSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.renderShowLegend = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: this.props.statItem.show_legend || false,
+        handleToggleChange: this.onToggleShowLegend,
+        label: _reactIntlUniversal.default.get('Display_legend')
+      }));
+    };
+    this.replaceNumberNotAllowInput = value => {
+      if (!value) {
+        return '';
+      }
+      value = value.replace(/。/g, '.');
+      value = value.replace(/-/g, '');
+      return value.replace(/[^.-\d,]/g, '');
+    };
+    this.renderMinimumPercent = () => {
+      const {
+        minimumSlicePercent
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Form, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+        for: "percent"
+      }, _reactIntlUniversal.default.get('Minimum_slice_percent')), /*#__PURE__*/_react.default.createElement("input", {
+        className: "form-control",
+        id: "percent",
+        ref: ref => this.inputRef = ref,
+        type: "text",
+        autoComplete: "off",
+        onKeyDown: this.onKeyDown,
+        onBlur: this.onBlur,
+        value: minimumSlicePercent,
+        onChange: this.onPercentChange
+      }))));
+    };
+    this.labelFontSizeEditor = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        label_font_size
+      } = statItem;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_labelFontSizeEditor.default, {
+        fontSize: label_font_size,
+        onChangeFontSize: this.onChangeLabelFontSize
+      }));
+    };
+    this.onKeyDown = event => {
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        this.inputRef.blur();
+        this.onCommit();
+      }
+    };
+    this.onPercentChange = e => {
+      let value = e.target.value;
+      value = this.replaceNumberNotAllowInput(value);
+      this.setState({
+        minimumSlicePercent: value
+      });
+    };
+    this.onBlur = () => {
+      this.onCommit();
+    };
+    this.onCommit = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        minimumSlicePercent
+      } = this.state;
+      if (minimumSlicePercent > 100) {
+        minimumSlicePercent = 100;
+      }
+      this.setState({
+        minimumSlicePercent: Number(minimumSlicePercent)
+      });
+      if (minimumSlicePercent === statItem.minimum_slice_percent) return;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        minimum_slice_percent: Number(minimumSlicePercent)
+      }));
+    };
+    this.onToggleShowLegend = () => {
+      let {
+        statItem
+      } = this.props;
+      let show_legend = !statItem.show_legend;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_legend
+      }));
+    };
+    this.onChangeLabelFontSize = label_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        label_font_size
+      }));
+    };
+    this.getLabelFormatOptions = () => {
+      const options = _constants.LABEL_FORMATS.map(item => {
+        return {
+          value: item,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.LABEL_FORMATS_MAP[item]))
+        };
+      });
+      return options;
+    };
+    this.getSelectedLabelFormat = () => {
+      const options = this.labelFormatOptions;
+      const {
+        show_percent,
+        label_format
+      } = this.props.statItem;
+
+      // be compatible with `show_percent`(the previous `display percent` setting option)
+      if (show_percent) {
+        return options[0]; // the 'percent' option
+      }
+
+      return options.filter(option => option.value === label_format)[0] || options[0];
+    };
+    this.onSelectLabelFormat = option => {
+      const {
+        statItem
+      } = this.props;
+      const newObj = {
+        label_format: option.value
+      };
+
+      // make `show_percent` no longer work (as there is a 'percent' option in this 'label format selector')
+      const {
+        show_percent
+      } = statItem;
+      if (show_percent) {
+        newObj.show_percent = false;
+      }
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+    };
+    this.renderLabelFormatSelector = () => {
+      let selectedOption = this.getSelectedLabelFormat();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Label_format')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedOption,
+        onChange: this.onSelectLabelFormat,
+        options: this.labelFormatOptions
+      }));
+    };
+    this.getLabelPositionOptions = () => {
+      const options = _constants.LABEL_POSITIONS.map(item => {
+        return {
+          value: item,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.LABEL_POSITIONS_MAP[item]))
+        };
+      });
+      return options;
+    };
+    this.getSelectedLabelPosition = () => {
+      const options = this.labelPositionOptions;
+      const {
+        label_position
+      } = this.props.statItem;
+      return options.filter(option => option.value === label_position)[0] || options[0];
+    };
+    this.onSelectLabelPosition = option => {
+      const {
+        statItem
+      } = this.props;
+      const newObj = {
+        label_position: option.value
+      };
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+    };
+    this.renderLabelPositionSelector = () => {
+      let selectedOption = this.getSelectedLabelPosition();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Label_position')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedOption,
+        onChange: this.onSelectLabelPosition,
+        options: this.labelPositionOptions
+      }));
+    };
+    this.onToggleDisplayLabel = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_label,
+        show_percent
+      } = statItem;
+      let newObj;
+      // be compatible with the previous `show_percent`(the `display percent` option)
+      if (show_percent) {
+        newObj = {
+          show_percent: false,
+          display_label: false
+        };
+      } else {
+        newObj = {
+          display_label: !display_label
+        };
+      }
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+    };
+    this.renderDisplayLabel = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        show_percent,
+        display_label
+      } = statItem;
+      // be compatible with the previous `show_percent`(the `display percent` option)
+      if (show_percent) {
+        display_label = true;
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: display_label || false,
+        handleToggleChange: this.onToggleDisplayLabel,
+        label: _reactIntlUniversal.default.get('Display_label')
+      }));
+    };
+    this.displayColorSelector = () => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        groupby_column_key
+      } = statItem;
+      if (!groupby_column_key) {
+        return false;
+      }
+      const table = getTableById(table_id);
+      const groupByColumn = (0, _dtableUtils.getTableColumnByKey)(table, groupby_column_key);
+      const {
+        type: columnType
+      } = groupByColumn;
+      if (columnType === _dtableUtils.CellType.SINGLE_SELECT) {
+        return true;
+      }
+      return false;
+    };
+    this.renderDisplayAnnotation = () => {
+      const display_annotation = this.getDisplayAnnotation();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+        isChecked: display_annotation,
+        handleToggleChange: this.onToggleDisplayAnnotation,
+        label: _reactIntlUniversal.default.get('Display_annotation')
+      }));
+    };
+    this.onToggleDisplayAnnotation = e => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        display_annotation: e.target.checked
+      }));
+    };
+    this.getDisplayAnnotation = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        display_annotation
+      } = statItem;
+      // for stat items created before `display_annotation` was added.
+      if (display_annotation === undefined || display_annotation === null) {
+        display_annotation = true;
+      }
+      return display_annotation;
+    };
+    this.renderAnnotationFontSizeEditor = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        annotation_font_size
+      } = statItem;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_labelFontSizeEditor.default, {
+        id: 'annotation-font-size',
+        labelText: _reactIntlUniversal.default.get('Font_size'),
+        fontSize: annotation_font_size || _constants.DEFAULT_ANNOTATION_SIZE,
+        onChangeFontSize: this.onChangeAnnotationFontSize
+      }));
+    };
+    this.onChangeAnnotationFontSize = annotation_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        annotation_font_size
+      }));
+    };
+    this.labelFormatOptions = this.getLabelFormatOptions();
+    this.labelPositionOptions = this.getLabelPositionOptions();
+    let _minimumSlicePercent = typeof props.statItem.minimum_slice_percent === 'number' ? props.statItem.minimum_slice_percent : 1.5;
+    this.state = {
+      minimumSlicePercent: _minimumSlicePercent
+    };
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      show_percent,
+      display_label
+    } = statItem;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderShowLegend(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderDisplayLabel(), (show_percent || display_label) && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderLabelPositionSelector(), this.renderLabelFormatSelector(), this.renderMinimumPercent(), this.labelFontSizeEditor()), statItem.type === _constants.STAT_TYPE.RING && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderDisplayAnnotation(), this.getDisplayAnnotation() && this.renderAnnotationFontSizeEditor()), this.displayColorSelector() && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_colorUseTypeSelector.default, {
+      chart: statItem,
+      updateChart: this.props.updateStatisticsSettings
+    })));
+  }
+}
+var _default = exports.default = PieStyleSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/time-compare-style.js

@@ -0,0 +1,48 @@
+"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 _toggleSetting = _interopRequireDefault(require("../../public-setting/toggle-setting"));
+class TimeCompareStyle extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onToggleIncreaseLabel = () => {
+      const {
+        statItem,
+        updateStatItem
+      } = this.props;
+      const {
+        display_increase_percentage
+      } = statItem;
+      updateStatItem(Object.assign({}, statItem, {
+        display_increase_percentage: !display_increase_percentage
+      }));
+    };
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      display_increase,
+      display_increase_percentage
+    } = statItem;
+    if (!display_increase) return null;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
+      isChecked: display_increase_percentage || false,
+      handleToggleChange: this.onToggleIncreaseLabel,
+      label: _reactIntlUniversal.default.get('Display_percentage_increase')
+    })));
+  }
+}
+var _default = exports.default = TimeCompareStyle;

package/es/stat-editor/stat-settings/basic-chart-settings/summary-method-setting.js

@@ -0,0 +1,121 @@
+"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 _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _constants = require("../../../constants");
+const DATE_COLUMN_SUMMARY_METHOD = ['Max', 'Min'];
+class SummaryMethodSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.renderNumericColumn = () => {
+      let {
+        summaryColumnKey,
+        numericColumnsOptions,
+        statItem
+      } = this.props;
+      let selectedColumnOption = this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, statItem.type === _constants.STAT_TYPE.PIVOT_TABLE ? _reactIntlUniversal.default.get('Summary_column') : _reactIntlUniversal.default.get('Numeric_column')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedColumnOption,
+        onChange: this.onSelectNumericColumn,
+        options: numericColumnsOptions,
+        placeholder: _reactIntlUniversal.default.get('Select_column'),
+        noOptionsMessage: () => {
+          return /*#__PURE__*/_react.default.createElement("span", null, _reactIntlUniversal.default.get('No_options'));
+        }
+      }));
+    };
+    this.renderSummaryMethod = () => {
+      let {
+        summaryColumnKey,
+        numericColumnsOptions,
+        summaryMethod
+      } = this.props;
+      let selectedMethodOption = this.getSelectedMethodOption(summaryMethod, this.summaryMethodsOptions);
+      let summaryMethodOption = this.summaryMethodsOptions;
+      let selectedColumnOption = this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
+      if (selectedColumnOption && _constants.TIME_COLUMN_LIST.includes(selectedColumnOption.value.type)) {
+        summaryMethodOption = summaryMethodOption.filter(option => {
+          return option.value === DATE_COLUMN_SUMMARY_METHOD[0] || option.value === DATE_COLUMN_SUMMARY_METHOD[1];
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Summary_method')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedMethodOption,
+        onChange: this.onSelectSummaryMethod,
+        options: summaryMethodOption
+      }));
+    };
+    this.getSummaryMethodsOptions = () => {
+      return _constants.SUMMARY_METHOD.map(m => {
+        return {
+          value: m,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+    };
+    this.onChangeSummaryType = option => {
+      const type = option.value;
+      let {
+        summaryType,
+        numericColumnsOptions
+      } = this.props;
+      if (type === summaryType) {
+        return;
+      }
+      let summaryColumnKey = null;
+      let summaryMethod = null;
+      if (type === _constants.STATISTICS_COUNT_TYPE.ADVANCED && Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0) {
+        summaryColumnKey = numericColumnsOptions[0].value.key;
+        summaryMethod = _constants.SUMMARY_METHOD[0];
+      }
+      this.props.onChangeSummaryType(type, summaryColumnKey, summaryMethod);
+    };
+    this.onSelectNumericColumn = columnOption => {
+      let newSummaryColumnKey = columnOption.value.key;
+      if (newSummaryColumnKey === this.props.summaryColumnKey) {
+        return;
+      }
+      const {
+        statItem,
+        updateStatItem,
+        onSelectNumericColumn
+      } = this.props;
+      const newSummaryColumnType = columnOption.value.type;
+      if (_constants.TIME_COLUMN_LIST.includes(newSummaryColumnType) && !DATE_COLUMN_SUMMARY_METHOD.includes(this.props.summaryMethod)) {
+        updateStatItem(Object.assign({}, statItem, {
+          summary_method: DATE_COLUMN_SUMMARY_METHOD[1],
+          summary_column_key: newSummaryColumnKey
+        }));
+        return;
+      }
+      onSelectNumericColumn(newSummaryColumnKey);
+    };
+    this.onSelectSummaryMethod = summaryMethodOption => {
+      let newSummaryMethod = summaryMethodOption.value;
+      if (newSummaryMethod === this.props.summaryMethod) {
+        return;
+      }
+      this.props.onSelectSummaryMethod(newSummaryMethod);
+    };
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod());
+  }
+}
+var _default = exports.default = SummaryMethodSettings;

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

@@ -0,0 +1,143 @@
+"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 _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _constants = require("../../../constants");
+const SUMMARY_TYPES = [_constants.SUMMARY_TYPE.COUNT, _constants.SUMMARY_TYPE.ADVANCED];
+class SummarySettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getSummaryTypeOptions = () => {
+      const summaryExplanation = this.getSummaryExplanation();
+      return SUMMARY_TYPES.map((type, index) => {
+        return {
+          value: type,
+          label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[type])), /*#__PURE__*/_react.default.createElement("div", {
+            className: "summary-type-explanation"
+          }, summaryExplanation[type]))
+        };
+      });
+    };
+    this.getSummaryExplanation = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        type
+      } = statItem;
+      if (type === _constants.STAT_TYPE.PIE || type === _constants.STAT_TYPE.RING || type === _constants.STAT_TYPE.TREEMAP) {
+        return {
+          count: _reactIntlUniversal.default.get('Count_the_number_of_records_in_each_group'),
+          advanced: _reactIntlUniversal.default.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')
+        };
+      } else if (type === _constants.STAT_TYPE.HORIZONTAL_BAR) {
+        return {
+          count: _reactIntlUniversal.default.get('Group_the_records_according_to_the_vertical_axis_and_count_the_records_in_each_group'),
+          advanced: _reactIntlUniversal.default.get('Group_the_records_according_to_the_vertical_axis_and_compute_the_sum_maximum_or_minimum_of_records_in_each_group_by_a_field')
+        };
+      }
+      return {
+        count: _reactIntlUniversal.default.get('Count_the_records'),
+        advanced: _reactIntlUniversal.default.get('Compute_sum_max_min')
+      };
+    };
+    this.renderSummaryTypes = () => {
+      let {
+        summaryType,
+        label
+      } = this.props;
+      summaryType = summaryType || 'count';
+      const selectedSummaryMethod = this.summaryTypeOptions.find(item => item.value === summaryType) || this.summaryTypeOptions[0];
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, label), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        classNamePrefix: 'statistic-chart-summary-types',
+        value: selectedSummaryMethod,
+        onChange: this.onChangeSummaryType,
+        options: this.summaryTypeOptions
+      }));
+    };
+    this.renderNumericColumn = () => {
+      const {
+        summaryColumnKey,
+        numericColumnsOptions
+      } = this.props;
+      const selectedColumnOption = this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Numeric_column')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedColumnOption,
+        onChange: this.onSelectNumericColumn,
+        options: numericColumnsOptions,
+        placeholder: _reactIntlUniversal.default.get('Select_column'),
+        noOptionsMessage: () => {
+          return /*#__PURE__*/_react.default.createElement("span", null, _reactIntlUniversal.default.get('No_options'));
+        }
+      }));
+    };
+    this.renderSummaryMethod = () => {
+      const selectedMethodOption = this.getSelectedMethodOption(this.props.summaryMethod, this.summaryMethodsOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Summary_method')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedMethodOption,
+        onChange: this.onSelectSummaryMethod,
+        options: this.summaryMethodsOptions
+      }));
+    };
+    this.getSummaryMethodsOptions = () => {
+      return _constants.SUMMARY_METHOD.map(m => {
+        return {
+          value: m,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+    };
+    this.onChangeSummaryType = option => {
+      const type = option.value;
+      const {
+        summaryType
+      } = this.props;
+      if (type === summaryType) {
+        return;
+      }
+      const summaryColumnKey = null;
+      const summaryMethod = type === _constants.STATISTICS_COUNT_TYPE.ADVANCED ? _constants.SUMMARY_METHOD[0] : null;
+      this.props.onChangeSummaryType(type, summaryColumnKey, summaryMethod);
+    };
+    this.onSelectNumericColumn = columnOption => {
+      let newSummaryColumnKey = columnOption.value.key;
+      if (newSummaryColumnKey === this.props.summaryColumnKey) {
+        return;
+      }
+      this.props.onSelectNumericColumn(newSummaryColumnKey);
+    };
+    this.onSelectSummaryMethod = summaryMethodOption => {
+      let newSummaryMethod = summaryMethodOption.value;
+      if (newSummaryMethod === this.props.summaryMethod) {
+        return;
+      }
+      this.props.onSelectSummaryMethod(newSummaryMethod);
+    };
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+    this.summaryTypeOptions = this.getSummaryTypeOptions();
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderSummaryTypes(), this.props.summaryType === _constants.STATISTICS_COUNT_TYPE.ADVANCED && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()));
+  }
+}
+var _default = exports.default = SummarySettings;