dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,138 @@
+"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 _rcSlider = _interopRequireDefault(require("rc-slider"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _colorGroupSelector = _interopRequireDefault(require("../../color-setting/color-group-selector"));
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _constants = require("../../../../constants");
+require("../../../../assets/css/slider.css");
+class MapStyleSetting extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onSliderChange = value => {
+      this.setState({
+        legendSize: value
+      });
+    };
+    this.onAfterChange = value => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        legend_size: value
+      }));
+    };
+    this.getSelectedDirectionOption = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        legend_direction = 'vertical'
+      } = statItem;
+      if (legend_direction === 'vertical') {
+        return this.legendDirectionOptions[0];
+      }
+      return this.legendDirectionOptions[1];
+    };
+    this.renderLabelColor = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Bubble_color')), /*#__PURE__*/_react.default.createElement("div", {
+        className: "row gutters-xs ml-0"
+      }, _constants.LABEL_COLORS.map((item, index) => {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: "map-bubble-color-".concat(index),
+          className: "col-auto pl-0"
+        }, /*#__PURE__*/_react.default.createElement("label", {
+          className: "colorinput"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "colorinput-color statistic-colorinput",
+          onClick: this.updateBubbleColor.bind(this, item),
+          style: {
+            backgroundColor: item,
+            borderColor: item
+          }
+        }, item === (this.props.statItem.bubble_color || _constants.LABEL_COLORS[0]) && /*#__PURE__*/_react.default.createElement("i", {
+          className: "dtable-font dtable-icon-check-mark statistic-check-mark"
+        }))));
+      })));
+    };
+    this.updateBubbleColor = color => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        bubble_color: color
+      }));
+    };
+    this.renderColorSetting = () => {
+      const {
+        onChangeColor,
+        statItem
+      } = this.props;
+      const {
+        type
+      } = statItem;
+      return !type.includes('bubble') ? /*#__PURE__*/_react.default.createElement(_colorGroupSelector.default, {
+        currentColor: statItem.data_color,
+        onChangeColor: onChangeColor
+      }) : this.renderLabelColor();
+    };
+    this.onDirectionChange = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        legend_direction: option.value
+      }));
+    };
+    this.renderLegendDirection = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Legend_direction')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: this.getSelectedDirectionOption(),
+        options: this.legendDirectionOptions,
+        onChange: this.onDirectionChange
+      }));
+    };
+    this.renderLegendSize = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Legend_size')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_rcSlider.default, {
+        value: this.state.legendSize,
+        step: 0.5,
+        min: 1,
+        max: 5,
+        onChange: this.onSliderChange,
+        onAfterChange: this.onAfterChange
+      })));
+    };
+    this.legendDirectionOptions = [{
+      value: 'vertical',
+      label: /*#__PURE__*/_react.default.createElement("span", {
+        className: "select-option-name"
+      }, _reactIntlUniversal.default.get('Vertical'))
+    }, {
+      value: 'horizontal',
+      label: /*#__PURE__*/_react.default.createElement("span", {
+        className: "select-option-name"
+      }, _reactIntlUniversal.default.get('Horizontal'))
+    }];
+    this.state = {
+      legendSize: props.statItem.legend_size || 1
+    };
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderColorSetting(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderLegendDirection(), this.renderLegendSize());
+  }
+}
+var _default = exports.default = MapStyleSetting;

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

@@ -0,0 +1,331 @@
+"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 _numericSummaryItem = _interopRequireDefault(require("../public-setting/numeric-summary-item"));
+var _constants = require("../../../constants");
+const GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+class SummarySettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getSummaryTypeOptions = () => {
+      const summaryTypes = [{
+        value: GROUP_TYPES.COUNT,
+        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['count'])), /*#__PURE__*/_react.default.createElement("div", {
+          className: "summary-type-explanation"
+        }, this.summaryExplanation['count']))
+      }, {
+        value: GROUP_TYPES.SINGLE_NUMERIC_COLUMN,
+        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['advanced'])), /*#__PURE__*/_react.default.createElement("div", {
+          className: "summary-type-explanation"
+        }, this.summaryExplanation['advanced']))
+      }];
+
+      // multiple_numeric_column
+      if (this.props.useMultipleSummaryColumns) {
+        summaryTypes.push({
+          value: GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN,
+          label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+            className: 'select-module select-module-name'
+          }, _reactIntlUniversal.default.get('Summarize_multiple_fields')), /*#__PURE__*/_react.default.createElement("div", {
+            className: "summary-type-explanation"
+          }, _reactIntlUniversal.default.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+        });
+      }
+      return summaryTypes;
+    };
+    this.getSummaryExplanation = () => {
+      const {
+        statItem
+      } = this.props;
+      const chartType = statItem.type;
+      let variable = '';
+      if (chartType === 'map') {
+        variable = '位置字段';
+      }
+      if (chartType === 'world_map') {
+        variable = _reactIntlUniversal.default.get('Location_field');
+      }
+      if (chartType === 'heat_map') {
+        variable = _reactIntlUniversal.default.get('Time_field');
+      }
+      if (chartType === 'mirror') {
+        variable = _reactIntlUniversal.default.get('Statistic_field');
+      }
+      if (chartType === 'combination_chart') {
+        variable = _reactIntlUniversal.default.get('X-axis');
+      }
+      if (chartType === 'trend_chart') {
+        return {
+          count: _reactIntlUniversal.default.get('Calculate_the_number_of_records_in_two_time_periods'),
+          advanced: _reactIntlUniversal.default.get('Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods')
+        };
+      }
+      return {
+        count: _reactIntlUniversal.default.get('Count_by_var', {
+          var: variable
+        }),
+        advanced: _reactIntlUniversal.default.get('Compute_sum_max_min_by_var', {
+          var: variable
+        })
+      };
+    };
+    this.getSummaryMethodsOptions = () => {
+      return _constants.SUMMARY_METHOD.map(method => {
+        return {
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[method])),
+          value: method
+        };
+      });
+    };
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+    };
+    this.renderSummaryTypes = () => {
+      let {
+        label
+      } = this.props;
+      const selectedSummaryType = this.getSelectedSummaryType();
+      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: selectedSummaryType,
+        onChange: this.onChangeSummaryType,
+        options: this.summaryTypeOptions
+      }));
+    };
+    this.getSelectedSummaryType = () => {
+      const {
+        summaryType = 'count',
+        statItem,
+        useMultipleSummaryColumns
+      } = this.props;
+      if (summaryType === _constants.SUMMARY_TYPE.COUNT) {
+        return this.summaryTypeOptions[0];
+      }
+      if (statItem.type === _constants.STAT_TYPE.COMBINATION_CHART && statItem.y_axis_left_group_by_multiple_numeric_column && useMultipleSummaryColumns) {
+        return this.summaryTypeOptions[2];
+      }
+      return this.summaryTypeOptions[1];
+    };
+    this.onChangeSummaryType = option => {
+      const type = option.value;
+      let {
+        summaryType
+      } = this.props;
+      if (type === summaryType) return;
+      this.props.onChangeSummaryType(type);
+    };
+    this.onSelectSummaryColumn = option => {
+      this.props.onSelectSummaryColumn(option.value.key);
+    };
+    this.renderNumericColumn = () => {
+      const {
+        summaryColumn
+      } = this.props;
+      const selectedColumnOption = this.numericColumnsOptions.find(o => o.value.key === summaryColumn) || null;
+      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.onSelectSummaryColumn,
+        options: this.numericColumnsOptions,
+        placeholder: _reactIntlUniversal.default.get('Select_column'),
+        noOptionsMessage: () => {
+          return /*#__PURE__*/_react.default.createElement("span", null, _reactIntlUniversal.default.get('No_options'));
+        }
+      }));
+    };
+    this.renderSummaryMethod = () => {
+      let 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.onSelectSummaryMethod = option => {
+      this.props.onSelectSummaryMethod(option.value);
+    };
+    this.renderNumericSummaryItem = () => {
+      const {
+        statItem,
+        onSelectSummaryColumn,
+        onSelectSummaryMethod
+      } = this.props;
+      const {
+        type
+      } = statItem;
+      let column_key, summary_method;
+      if (type === _constants.STAT_TYPE.COMBINATION_CHART) {
+        column_key = statItem.y_axis_left_summary_column;
+        summary_method = statItem.y_axis_left_summary_method;
+      }
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+        statItem: statItem,
+        key: "number-column-".concat(0),
+        numericColumnsOptions: this.numericColumnsOptions,
+        summaryMethodOptions: this.summaryMethodsOptions,
+        index: 0,
+        numericColumnItem: {
+          column_key,
+          summary_method
+        },
+        onChangeColumnOption: (index, option) => onSelectSummaryColumn(option.value.key),
+        onChangeSummaryMethod: (index, option) => onSelectSummaryMethod(option.value)
+      }), this.renderGroupbyNumericColumns(), Array.isArray(this.numericColumnsOptions) && this.numericColumnsOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistics-add-number-column",
+        onClick: this.onAddNumericColumn
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "number-column-item dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, _reactIntlUniversal.default.get('Add_new_numeric_column'))));
+    };
+    this.onDeleteNumericColumnItem = index => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.statItem || {};
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
+      y_axis_left_group_by_numeric_columns.splice(index - 1, 1);
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns: [...y_axis_left_group_by_numeric_columns]
+      }));
+    };
+    this.onAddNumericColumn = () => {
+      let {
+        statItem
+      } = this.props;
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = statItem || {};
+      let newNumericColumnKey = this.numericColumnsOptions[0].value.key;
+      if (Array.isArray(y_axis_left_group_by_numeric_columns)) {
+        y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
+        y_axis_left_group_by_numeric_columns.push({
+          column_key: newNumericColumnKey,
+          summary_method: _constants.SUMMARY_METHOD[0]
+        });
+      } else {
+        y_axis_left_group_by_numeric_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: _constants.SUMMARY_METHOD[0]
+        }];
+      }
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns: [...y_axis_left_group_by_numeric_columns]
+      }));
+    };
+    this.onChangeNumericSummaryColumn = (index, columnOption) => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.statItem || {};
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
+      let selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      selectedItem = Object.assign({}, selectedItem, {
+        column_key: columnOption.value.key
+      });
+      y_axis_left_group_by_numeric_columns[index - 1] = selectedItem;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns
+      }));
+    };
+    this.onChangeNumericSummaryMethod = (index, option) => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.statItem || {};
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      y_axis_left_group_by_numeric_columns = [...y_axis_left_group_by_numeric_columns];
+      let selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      selectedItem = Object.assign({}, selectedItem, {
+        summary_method: option.value
+      });
+      y_axis_left_group_by_numeric_columns[index - 1] = selectedItem;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_left_group_by_numeric_columns
+      }));
+    };
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = statItem;
+      if (!y_axis_left_group_by_numeric_columns || !Array.isArray(y_axis_left_group_by_numeric_columns)) return null;
+      return y_axis_left_group_by_numeric_columns.map((item, index) => {
+        return /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
+          statItem: statItem,
+          key: "number-column-".concat(index),
+          numericColumnsOptions: this.numericColumnsOptions,
+          summaryMethodOptions: this.summaryMethodsOptions,
+          index: index + 1,
+          numericColumnItem: item,
+          onDeleteNumericColumnItem: this.onDeleteNumericColumnItem,
+          onChangeColumnOption: this.onChangeNumericSummaryColumn,
+          onChangeSummaryMethod: this.onChangeNumericSummaryMethod
+        });
+      });
+    };
+    this.useMultipleSummaryColumns = () => {
+      const {
+        statItem,
+        summaryType,
+        useMultipleSummaryColumns
+      } = this.props;
+      if (statItem.type === _constants.STAT_TYPE.COMBINATION_CHART) {
+        if (useMultipleSummaryColumns && summaryType === _constants.SUMMARY_TYPE.ADVANCED && statItem.y_axis_left_group_by_multiple_numeric_column) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const {
+      numericColumns,
+      getColumnsOptions
+    } = props;
+    this.numericColumnsOptions = getColumnsOptions(numericColumns);
+    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
+    this.summaryExplanation = this.getSummaryExplanation();
+    this.summaryTypeOptions = this.getSummaryTypeOptions();
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        numericColumns,
+        getColumnsOptions
+      } = nextProps;
+      this.numericColumnsOptions = getColumnsOptions(numericColumns);
+    }
+  }
+  render() {
+    const {
+      summaryType
+    } = this.props;
+    const _useMultipleSummaryColumns = this.useMultipleSummaryColumns();
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderSummaryTypes(), !_useMultipleSummaryColumns && summaryType === _constants.SUMMARY_TYPE.ADVANCED && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()), _useMultipleSummaryColumns && this.renderNumericSummaryItem());
+  }
+}
+var _default = exports.default = SummarySettings;

package/es/stat-editor/stat-settings/advance-chart-settings/trend-chart-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 _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _columnUtils = require("../../../utils/column-utils");
+const COMPARE_GRANULARITY = ['day', 'week', 'quarter', 'month', 'year', 'days_7', 'days_30'];
+const COMPARED_LIST = {
+  [COMPARE_GRANULARITY[0]]: 'Yesterday_vs_the_day_before_yesterday',
+  [COMPARE_GRANULARITY[1]]: 'Last_week_vs_the_week_before_last',
+  [COMPARE_GRANULARITY[3]]: 'Last_month_vs_the_month_before_last',
+  [COMPARE_GRANULARITY[2]]: 'Last_quarter_vs_the_quarter_before_last',
+  [COMPARE_GRANULARITY[4]]: 'Last_year_vs_the_year_before_last',
+  [COMPARE_GRANULARITY[5]]: 'Last_7_days_vs_previous_7_days',
+  [COMPARE_GRANULARITY[6]]: 'Last_30_days_vs_previous_30_days'
+};
+class TrendSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    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(COMPARED_LIST[g]))
+        };
+      });
+    };
+    this.getSelectedDateColumnOption = () => {
+      return this.dateColumnsOptions.find(option => option.value.key === this.props.statItem.date_column);
+    };
+    this.onSelectDateColumn = option => {
+      const {
+        date_column
+      } = this.props.statItem;
+      const new_date_column = option.value.key;
+      if (new_date_column === date_column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        date_column: new_date_column
+      }));
+    };
+    this.onSelectGroupbyGeolocationGranularity = option => {
+      const {
+        date_granularity
+      } = this.props.statItem;
+      if (option.value === date_granularity) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        date_granularity: option.value
+      }));
+    };
+    this.renderDateGranularity = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        date_granularity
+      } = statItem;
+      const selectedGeolocationGranularity = this.dateGranularityOptions.find(option => option.value === date_granularity);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Comparison_mode')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedGeolocationGranularity,
+        onChange: this.onSelectGroupbyGeolocationGranularity,
+        options: this.dateGranularityOptions
+      }));
+    };
+    const {
+      columns,
+      getColumnsOptions
+    } = props;
+    const dateColumns = columns.filter(column => (0, _columnUtils.isStatisticDateColumn)(column));
+    this.dateColumnsOptions = getColumnsOptions(dateColumns);
+    this.dateGranularityOptions = this.getGranularityOptions(COMPARE_GRANULARITY);
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        columns,
+        getColumnsOptions
+      } = nextProps;
+      const dateColumns = columns.filter(column => (0, _columnUtils.isStatisticDateColumn)(column));
+      this.dateColumnsOptions = getColumnsOptions(dateColumns);
+    }
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const selectedDateColumnOption = this.getSelectedDateColumnOption();
+    if (settingType === 'style') {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: statItem.table_id,
+      selectedViewId: statItem.view_id,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Time_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.dateColumnsOptions,
+      selectedColumnOption: selectedDateColumnOption,
+      onChangeSelectedColumn: this.onSelectDateColumn
+    })), this.renderDateGranularity(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      label: _reactIntlUniversal.default.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
+    }));
+  }
+}
+var _default = exports.default = TrendSettings;