dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,132 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import RcSlider from 'rc-slider';
+import intl from 'react-intl-universal';
+import ColorGroupSelector from '../../color-setting/color-group-selector';
+import { DTableSelect } from '../../../../components';
+import { LABEL_COLORS } from '../../../../constants';
+import '../../../../assets/css/slider.css';
+var MapStyleSetting = /*#__PURE__*/function (_Component) {
+  _inherits(MapStyleSetting, _Component);
+  var _super = _createSuper(MapStyleSetting);
+  function MapStyleSetting(props) {
+    var _this;
+    _classCallCheck(this, MapStyleSetting);
+    _this = _super.call(this, props);
+    _this.onSliderChange = function (value) {
+      _this.setState({
+        legendSize: value
+      });
+    };
+    _this.onAfterChange = function (value) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        legend_size: value
+      }));
+    };
+    _this.getSelectedDirectionOption = function () {
+      var statItem = _this.props.statItem;
+      var _statItem$legend_dire = statItem.legend_direction,
+        legend_direction = _statItem$legend_dire === void 0 ? 'vertical' : _statItem$legend_dire;
+      if (legend_direction === 'vertical') {
+        return _this.legendDirectionOptions[0];
+      }
+      return _this.legendDirectionOptions[1];
+    };
+    _this.renderLabelColor = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Bubble_color')), /*#__PURE__*/React.createElement("div", {
+        className: "row gutters-xs ml-0"
+      }, LABEL_COLORS.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: "map-bubble-color-".concat(index),
+          className: "col-auto pl-0"
+        }, /*#__PURE__*/React.createElement("label", {
+          className: "colorinput"
+        }, /*#__PURE__*/React.createElement("span", {
+          className: "colorinput-color statistic-colorinput",
+          onClick: _this.updateBubbleColor.bind(_assertThisInitialized(_this), item),
+          style: {
+            backgroundColor: item,
+            borderColor: item
+          }
+        }, item === (_this.props.statItem.bubble_color || LABEL_COLORS[0]) && /*#__PURE__*/React.createElement("i", {
+          className: "dtable-font dtable-icon-check-mark statistic-check-mark"
+        }))));
+      })));
+    };
+    _this.updateBubbleColor = function (color) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        bubble_color: color
+      }));
+    };
+    _this.renderColorSetting = function () {
+      var _this$props = _this.props,
+        onChangeColor = _this$props.onChangeColor,
+        statItem = _this$props.statItem;
+      var type = statItem.type;
+      return !type.includes('bubble') ? /*#__PURE__*/React.createElement(ColorGroupSelector, {
+        currentColor: statItem.data_color,
+        onChangeColor: onChangeColor
+      }) : _this.renderLabelColor();
+    };
+    _this.onDirectionChange = function (option) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        legend_direction: option.value
+      }));
+    };
+    _this.renderLegendDirection = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_direction')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: _this.getSelectedDirectionOption(),
+        options: _this.legendDirectionOptions,
+        onChange: _this.onDirectionChange
+      }));
+    };
+    _this.renderLegendSize = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_size')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RcSlider, {
+        value: _this.state.legendSize,
+        step: 0.5,
+        min: 1,
+        max: 5,
+        onChange: _this.onSliderChange,
+        onAfterChange: _this.onAfterChange
+      })));
+    };
+    _this.legendDirectionOptions = [{
+      value: 'vertical',
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, intl.get('Vertical'))
+    }, {
+      value: 'horizontal',
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, intl.get('Horizontal'))
+    }];
+    _this.state = {
+      legendSize: props.statItem.legend_size || 1
+    };
+    return _this;
+  }
+  _createClass(MapStyleSetting, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderColorSetting(), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), this.renderLegendDirection(), this.renderLegendSize());
+    }
+  }]);
+  return MapStyleSetting;
+}(Component);
+export default MapStyleSetting;

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

@@ -0,0 +1,319 @@
+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 intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+import NumericSummaryItem from '../public-setting/numeric-summary-item';
+import { STATISTICS_COUNT_SHOW, STAT_TYPE, SUMMARY_METHOD, SUMMARY_TYPE } from '../../../constants';
+var GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+var SummarySettings = /*#__PURE__*/function (_Component) {
+  _inherits(SummarySettings, _Component);
+  var _super = _createSuper(SummarySettings);
+  function SummarySettings(props) {
+    var _this;
+    _classCallCheck(this, SummarySettings);
+    _this = _super.call(this, props);
+    _this.getSummaryTypeOptions = function () {
+      var summaryTypes = [{
+        value: GROUP_TYPES.COUNT,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get(STATISTICS_COUNT_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, _this.summaryExplanation['count']))
+      }, {
+        value: GROUP_TYPES.SINGLE_NUMERIC_COLUMN,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get(STATISTICS_COUNT_SHOW['advanced'])), /*#__PURE__*/React.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.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+            className: 'select-module select-module-name'
+          }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
+            className: "summary-type-explanation"
+          }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+        });
+      }
+      return summaryTypes;
+    };
+    _this.getSummaryExplanation = function () {
+      var statItem = _this.props.statItem;
+      var chartType = statItem.type;
+      var variable = '';
+      if (chartType === 'map') {
+        variable = '位置字段';
+      }
+      if (chartType === 'world_map') {
+        variable = intl.get('Location_field');
+      }
+      if (chartType === 'heat_map') {
+        variable = intl.get('Time_field');
+      }
+      if (chartType === 'mirror') {
+        variable = intl.get('Statistic_field');
+      }
+      if (chartType === 'combination_chart') {
+        variable = intl.get('X-axis');
+      }
+      if (chartType === 'trend_chart') {
+        return {
+          count: intl.get('Calculate_the_number_of_records_in_two_time_periods'),
+          advanced: intl.get('Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods')
+        };
+      }
+      return {
+        count: intl.get('Count_by_var', {
+          var: variable
+        }),
+        advanced: intl.get('Compute_sum_max_min_by_var', {
+          var: variable
+        })
+      };
+    };
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (method) {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(STATISTICS_COUNT_SHOW[method])),
+          value: method
+        };
+      });
+    };
+    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
+      return summaryMethodsOptions.find(function (m) {
+        return m.value === method;
+      }) || summaryMethodsOptions[0];
+    };
+    _this.renderSummaryTypes = function () {
+      var label = _this.props.label;
+      var selectedSummaryType = _this.getSelectedSummaryType();
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        classNamePrefix: 'statistic-chart-summary-types',
+        value: selectedSummaryType,
+        onChange: _this.onChangeSummaryType,
+        options: _this.summaryTypeOptions
+      }));
+    };
+    _this.getSelectedSummaryType = function () {
+      var _this$props = _this.props,
+        _this$props$summaryTy = _this$props.summaryType,
+        summaryType = _this$props$summaryTy === void 0 ? 'count' : _this$props$summaryTy,
+        statItem = _this$props.statItem,
+        useMultipleSummaryColumns = _this$props.useMultipleSummaryColumns;
+      if (summaryType === SUMMARY_TYPE.COUNT) {
+        return _this.summaryTypeOptions[0];
+      }
+      if (statItem.type === STAT_TYPE.COMBINATION_CHART && statItem.y_axis_left_group_by_multiple_numeric_column && useMultipleSummaryColumns) {
+        return _this.summaryTypeOptions[2];
+      }
+      return _this.summaryTypeOptions[1];
+    };
+    _this.onChangeSummaryType = function (option) {
+      var type = option.value;
+      var summaryType = _this.props.summaryType;
+      if (type === summaryType) return;
+      _this.props.onChangeSummaryType(type);
+    };
+    _this.onSelectSummaryColumn = function (option) {
+      _this.props.onSelectSummaryColumn(option.value.key);
+    };
+    _this.renderNumericColumn = function () {
+      var summaryColumn = _this.props.summaryColumn;
+      var selectedColumnOption = _this.numericColumnsOptions.find(function (o) {
+        return o.value.key === summaryColumn;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Numeric_column')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColumnOption,
+        onChange: _this.onSelectSummaryColumn,
+        options: _this.numericColumnsOptions,
+        placeholder: intl.get('Select_a_column'),
+        noOptionsMessage: function noOptionsMessage() {
+          return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
+        }
+      }));
+    };
+    _this.renderSummaryMethod = function () {
+      var selectedMethodOption = _this.getSelectedMethodOption(_this.props.summaryMethod, _this.summaryMethodsOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedMethodOption,
+        onChange: _this.onSelectSummaryMethod,
+        options: _this.summaryMethodsOptions
+      }));
+    };
+    _this.onSelectSummaryMethod = function (option) {
+      _this.props.onSelectSummaryMethod(option.value);
+    };
+    _this.renderNumericSummaryItem = function () {
+      var _this$props2 = _this.props,
+        statItem = _this$props2.statItem,
+        onSelectSummaryColumn = _this$props2.onSelectSummaryColumn,
+        onSelectSummaryMethod = _this$props2.onSelectSummaryMethod;
+      var type = statItem.type;
+      var column_key, summary_method;
+      if (type === STAT_TYPE.COMBINATION_CHART) {
+        column_key = statItem.y_axis_left_summary_column;
+        summary_method = statItem.y_axis_left_summary_method;
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        statItem: statItem,
+        key: "number-column-".concat(0),
+        numericColumnsOptions: _this.numericColumnsOptions,
+        summaryMethodOptions: _this.summaryMethodsOptions,
+        index: 0,
+        numericColumnItem: {
+          column_key: column_key,
+          summary_method: summary_method
+        },
+        onChangeColumnOption: function onChangeColumnOption(index, option) {
+          return onSelectSummaryColumn(option.value.key);
+        },
+        onChangeSummaryMethod: function onChangeSummaryMethod(index, option) {
+          return onSelectSummaryMethod(option.value);
+        }
+      }), _this.renderGroupbyNumericColumns(), Array.isArray(_this.numericColumnsOptions) && _this.numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-column",
+        onClick: _this.onAddNumericColumn
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, intl.get('Add_new_numeric_column'))));
+    };
+    _this.onDeleteNumericColumnItem = function (index) {
+      var _ref = _this.props.statItem || {},
+        y_axis_left_group_by_numeric_columns = _ref.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 = _toConsumableArray(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: _toConsumableArray(y_axis_left_group_by_numeric_columns)
+      }));
+    };
+    _this.onAddNumericColumn = function () {
+      var statItem = _this.props.statItem;
+      var _ref2 = statItem || {},
+        y_axis_left_group_by_numeric_columns = _ref2.y_axis_left_group_by_numeric_columns;
+      var newNumericColumnKey = _this.numericColumnsOptions[0].value.key;
+      if (Array.isArray(y_axis_left_group_by_numeric_columns)) {
+        y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+        y_axis_left_group_by_numeric_columns.push({
+          column_key: newNumericColumnKey,
+          summary_method: SUMMARY_METHOD[0]
+        });
+      } else {
+        y_axis_left_group_by_numeric_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: SUMMARY_METHOD[0]
+        }];
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_left_group_by_numeric_columns: _toConsumableArray(y_axis_left_group_by_numeric_columns)
+      }));
+    };
+    _this.onChangeNumericSummaryColumn = function (index, columnOption) {
+      var _ref3 = _this.props.statItem || {},
+        y_axis_left_group_by_numeric_columns = _ref3.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 = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+      var 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: y_axis_left_group_by_numeric_columns
+      }));
+    };
+    _this.onChangeNumericSummaryMethod = function (index, option) {
+      var _ref4 = _this.props.statItem || {},
+        y_axis_left_group_by_numeric_columns = _ref4.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 = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+      var 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: y_axis_left_group_by_numeric_columns
+      }));
+    };
+    _this.renderGroupbyNumericColumns = function () {
+      var statItem = _this.props.statItem;
+      var y_axis_left_group_by_numeric_columns = statItem.y_axis_left_group_by_numeric_columns;
+      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(function (item, index) {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          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 = function () {
+      var _this$props3 = _this.props,
+        statItem = _this$props3.statItem,
+        summaryType = _this$props3.summaryType,
+        useMultipleSummaryColumns = _this$props3.useMultipleSummaryColumns;
+      if (statItem.type === STAT_TYPE.COMBINATION_CHART) {
+        if (useMultipleSummaryColumns && summaryType === SUMMARY_TYPE.ADVANCED && statItem.y_axis_left_group_by_multiple_numeric_column) {
+          return true;
+        }
+      }
+      return false;
+    };
+    var numericColumns = props.numericColumns,
+      getColumnsOptions = props.getColumnsOptions;
+    _this.numericColumnsOptions = getColumnsOptions(numericColumns);
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    _this.summaryExplanation = _this.getSummaryExplanation();
+    _this.summaryTypeOptions = _this.getSummaryTypeOptions();
+    return _this;
+  }
+  _createClass(SummarySettings, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var numericColumns = nextProps.numericColumns,
+          getColumnsOptions = nextProps.getColumnsOptions;
+        this.numericColumnsOptions = getColumnsOptions(numericColumns);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var summaryType = this.props.summaryType;
+      var _useMultipleSummaryColumns = this.useMultipleSummaryColumns();
+      return /*#__PURE__*/React.createElement(Fragment, null, this.renderSummaryTypes(), !_useMultipleSummaryColumns && summaryType === SUMMARY_TYPE.ADVANCED && /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()), _useMultipleSummaryColumns && this.renderNumericSummaryItem());
+    }
+  }]);
+  return SummarySettings;
+}(Component);
+export default SummarySettings;

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

@@ -0,0 +1,138 @@
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _COMPARED_LIST;
+import React, { Component, Fragment } from 'react';
+import intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+import ColumnSettings from '../public-setting/column-settings';
+import BaseSettings from '../public-setting/base-settings';
+import SummarySettings from './summary-settings';
+import { TIME_COLUMN_LIST } from '../../../constants';
+var COMPARE_GRANULARITY = ['day', 'week', 'quarter', 'month', 'year', 'days_7', 'days_30'];
+var COMPARED_LIST = (_COMPARED_LIST = {}, _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[0], 'Yesterday_vs_the_day_before_yesterday'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[1], 'Last_week_vs_the_week_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[3], 'Last_month_vs_the_month_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[2], 'Last_quarter_vs_the_quarter_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[4], 'Last_year_vs_the_year_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[5], 'Last_7_days_vs_previous_7_days'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[6], 'Last_30_days_vs_previous_30_days'), _COMPARED_LIST);
+var TrendSettings = /*#__PURE__*/function (_Component) {
+  _inherits(TrendSettings, _Component);
+  var _super = _createSuper(TrendSettings);
+  function TrendSettings(props) {
+    var _this;
+    _classCallCheck(this, TrendSettings);
+    _this = _super.call(this, props);
+    _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(COMPARED_LIST[g]))
+        };
+      });
+    };
+    _this.getSelectedDateColumnOption = function () {
+      return _this.dateColumnsOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.date_column;
+      });
+    };
+    _this.onSelectDateColumn = function (option) {
+      var date_column = _this.props.statItem.date_column;
+      var 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 = function (option) {
+      var date_granularity = _this.props.statItem.date_granularity;
+      if (option.value === date_granularity) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        date_granularity: option.value
+      }));
+    };
+    _this.renderDateGranularity = function () {
+      var statItem = _this.props.statItem;
+      var date_granularity = statItem.date_granularity;
+      var selectedGeolocationGranularity = _this.dateGranularityOptions.find(function (option) {
+        return option.value === date_granularity;
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Comparison_mode')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedGeolocationGranularity,
+        onChange: _this.onSelectGroupbyGeolocationGranularity,
+        options: _this.dateGranularityOptions
+      }));
+    };
+    var columns = props.columns,
+      getColumnsOptions = props.getColumnsOptions;
+    var dateColumns = columns.filter(function (column) {
+      return TIME_COLUMN_LIST.includes(column.type);
+    });
+    _this.dateColumnsOptions = getColumnsOptions(dateColumns);
+    _this.dateGranularityOptions = _this.getGranularityOptions(COMPARE_GRANULARITY);
+    return _this;
+  }
+  _createClass(TrendSettings, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var columns = nextProps.columns,
+          getColumnsOptions = nextProps.getColumnsOptions;
+        var dateColumns = columns.filter(function (column) {
+          return TIME_COLUMN_LIST.includes(column.type);
+        });
+        this.dateColumnsOptions = getColumnsOptions(dateColumns);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews,
+        settingType = _this$props.settingType,
+        selectedTableId = _this$props.selectedTableId,
+        statItem = _this$props.statItem,
+        getColumnsOptions = _this$props.getColumnsOptions,
+        numericColumns = _this$props.numericColumns;
+      var selectedDateColumnOption = this.getSelectedDateColumnOption();
+      if (settingType === 'style') {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: statItem.table_id,
+        selectedViewId: statItem.view_id,
+        getTables: getTables,
+        getViews: getViews,
+        getTableById: this.props.getTableById,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Time_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.dateColumnsOptions,
+        selectedColumnOption: selectedDateColumnOption,
+        onChangeSelectedColumn: this.onSelectDateColumn
+      })), this.renderDateGranularity(), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(SummarySettings, {
+        label: intl.get('Summary_method'),
+        statItem: statItem,
+        selectedTableId: selectedTableId,
+        numericColumns: numericColumns,
+        summaryType: statItem.summary_type,
+        summaryMethod: statItem.summary_method,
+        summaryColumn: statItem.summary_column,
+        getColumnsOptions: getColumnsOptions,
+        onChangeSummaryType: this.props.onChangeSummaryType,
+        onSelectSummaryColumn: this.props.onSelectSummaryColumn,
+        onSelectSummaryMethod: this.props.onSelectSummaryMethod
+      }));
+    }
+  }]);
+  return TrendSettings;
+}(Component);
+export default TrendSettings;