dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,124 @@
+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 { STATISTICS_COUNT_SHOW, STATISTICS_COUNT_TYPE, STAT_TYPE, SUMMARY_METHOD, TIME_COLUMN_LIST } from '../../../constants';
+var DATE_COLUMN_SUMMARY_METHOD = ['Max', 'Min'];
+var SummaryMethodSettings = /*#__PURE__*/function (_Component) {
+  _inherits(SummaryMethodSettings, _Component);
+  var _super = _createSuper(SummaryMethodSettings);
+  function SummaryMethodSettings(props) {
+    var _this;
+    _classCallCheck(this, SummaryMethodSettings);
+    _this = _super.call(this, props);
+    _this.renderNumericColumn = function () {
+      var _this$props = _this.props,
+        summaryColumnKey = _this$props.summaryColumnKey,
+        numericColumnsOptions = _this$props.numericColumnsOptions,
+        statItem = _this$props.statItem;
+      var selectedColumnOption = _this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, statItem.type === STAT_TYPE.PIVOT_TABLE ? intl.get('Summary_column') : intl.get('Numeric_column')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColumnOption,
+        onChange: _this.onSelectNumericColumn,
+        options: numericColumnsOptions,
+        placeholder: intl.get('Select_a_column'),
+        noOptionsMessage: function noOptionsMessage() {
+          return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
+        }
+      }));
+    };
+    _this.renderSummaryMethod = function () {
+      var _this$props2 = _this.props,
+        summaryColumnKey = _this$props2.summaryColumnKey,
+        numericColumnsOptions = _this$props2.numericColumnsOptions,
+        summaryMethod = _this$props2.summaryMethod;
+      var selectedMethodOption = _this.getSelectedMethodOption(summaryMethod, _this.summaryMethodsOptions);
+      var summaryMethodOption = _this.summaryMethodsOptions;
+      var selectedColumnOption = _this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
+      if (selectedColumnOption && TIME_COLUMN_LIST.includes(selectedColumnOption.value.type)) {
+        summaryMethodOption = summaryMethodOption.filter(function (option) {
+          return option.value == DATE_COLUMN_SUMMARY_METHOD[0] || option.value == DATE_COLUMN_SUMMARY_METHOD[1];
+        });
+      }
+      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: summaryMethodOption
+      }));
+    };
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (m) {
+        return {
+          value: m,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
+      return summaryMethodsOptions.find(function (m) {
+        return m.value === method;
+      }) || summaryMethodsOptions[0];
+    };
+    _this.onChangeSummaryType = function (option) {
+      var type = option.value;
+      var _this$props3 = _this.props,
+        summaryType = _this$props3.summaryType,
+        numericColumnsOptions = _this$props3.numericColumnsOptions;
+      if (type === summaryType) {
+        return;
+      }
+      var summaryColumnKey = null;
+      var summaryMethod = null;
+      if (type === STATISTICS_COUNT_TYPE.ADVANCED && Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0) {
+        summaryColumnKey = numericColumnsOptions[0].value.key;
+        summaryMethod = SUMMARY_METHOD[0];
+      }
+      _this.props.onChangeSummaryType(type, summaryColumnKey, summaryMethod);
+    };
+    _this.onSelectNumericColumn = function (columnOption) {
+      var newSummaryColumnKey = columnOption.value.key;
+      if (newSummaryColumnKey === _this.props.summaryColumnKey) {
+        return;
+      }
+      var _this$props4 = _this.props,
+        statItem = _this$props4.statItem,
+        updateStatItem = _this$props4.updateStatItem,
+        onSelectNumericColumn = _this$props4.onSelectNumericColumn;
+      var newSummaryColumnType = columnOption.value.type;
+      if (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 = function (summaryMethodOption) {
+      var newSummaryMethod = summaryMethodOption.value;
+      if (newSummaryMethod === _this.props.summaryMethod) {
+        return;
+      }
+      _this.props.onSelectSummaryMethod(newSummaryMethod);
+    };
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    return _this;
+  }
+  _createClass(SummaryMethodSettings, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod());
+    }
+  }]);
+  return SummaryMethodSettings;
+}(Component);
+export default SummaryMethodSettings;

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

@@ -0,0 +1,150 @@
+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 { STATISTICS_COUNT_SHOW, STATISTICS_COUNT_TYPE, STAT_TYPE, SUMMARY_METHOD, SUMMARY_TYPE } from '../../../constants';
+var SUMMARY_TYPES = [SUMMARY_TYPE.COUNT, SUMMARY_TYPE.ADVANCED];
+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 summaryExplanation = _this.getSummaryExplanation();
+      return SUMMARY_TYPES.map(function (type, index) {
+        return {
+          value: type,
+          label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[type])), /*#__PURE__*/React.createElement("div", {
+            className: "summary-type-explanation"
+          }, summaryExplanation[type]))
+        };
+      });
+    };
+    _this.getSummaryExplanation = function () {
+      var statItem = _this.props.statItem;
+      var type = statItem.type;
+      if (type === STAT_TYPE.PIE || type === STAT_TYPE.RING || type === STAT_TYPE.TREEMAP) {
+        return {
+          count: intl.get('Count_the_number_of_records_in_each_group'),
+          advanced: intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')
+        };
+      } else if (type === STAT_TYPE.HORIZONTAL_BAR) {
+        return {
+          count: intl.get('Group_the_records_according_to_the_vertical_axis_and_count_the_records_in_each_group'),
+          advanced: intl.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: intl.get('Count_the_records'),
+        advanced: intl.get('Compute_sum_max_min')
+      };
+    };
+    _this.renderSummaryTypes = function () {
+      var _this$props = _this.props,
+        summaryType = _this$props.summaryType,
+        label = _this$props.label;
+      summaryType = summaryType || 'count';
+      var selectedSummaryMethod = _this.summaryTypeOptions.find(function (item) {
+        return item.value === summaryType;
+      }) || _this.summaryTypeOptions[0];
+      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: selectedSummaryMethod,
+        onChange: _this.onChangeSummaryType,
+        options: _this.summaryTypeOptions
+      }));
+    };
+    _this.renderNumericColumn = function () {
+      var _this$props2 = _this.props,
+        summaryColumnKey = _this$props2.summaryColumnKey,
+        numericColumnsOptions = _this$props2.numericColumnsOptions;
+      var selectedColumnOption = _this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
+      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.onSelectNumericColumn,
+        options: 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.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (m) {
+        return {
+          value: m,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
+      return summaryMethodsOptions.find(function (m) {
+        return m.value === method;
+      }) || summaryMethodsOptions[0];
+    };
+    _this.onChangeSummaryType = function (option) {
+      var type = option.value;
+      var _this$props3 = _this.props,
+        summaryType = _this$props3.summaryType,
+        numericColumnsOptions = _this$props3.numericColumnsOptions;
+      if (type === summaryType) {
+        return;
+      }
+      var summaryColumnKey = null;
+      var summaryMethod = null;
+      if (type === STATISTICS_COUNT_TYPE.ADVANCED && Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0) {
+        summaryColumnKey = numericColumnsOptions[0].value.key;
+        summaryMethod = SUMMARY_METHOD[0];
+      }
+      _this.props.onChangeSummaryType(type, summaryColumnKey, summaryMethod);
+    };
+    _this.onSelectNumericColumn = function (columnOption) {
+      var newSummaryColumnKey = columnOption.value.key;
+      if (newSummaryColumnKey === _this.props.summaryColumnKey) {
+        return;
+      }
+      _this.props.onSelectNumericColumn(newSummaryColumnKey);
+    };
+    _this.onSelectSummaryMethod = function (summaryMethodOption) {
+      var newSummaryMethod = summaryMethodOption.value;
+      if (newSummaryMethod === _this.props.summaryMethod) {
+        return;
+      }
+      _this.props.onSelectSummaryMethod(newSummaryMethod);
+    };
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    _this.summaryTypeOptions = _this.getSummaryTypeOptions();
+    return _this;
+  }
+  _createClass(SummarySettings, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Fragment, null, this.renderSummaryTypes(), this.props.summaryType === STATISTICS_COUNT_TYPE.ADVANCED && /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()));
+    }
+  }]);
+  return SummarySettings;
+}(Component);
+export default SummarySettings;

package/es/stat-editor/stat-settings/basic-chart-settings/time-comparison-settings.js

@@ -0,0 +1,267 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 BaseSettings from '../public-setting/base-settings';
+import ToggleSetting from '../public-setting/toggle-setting';
+import SummarySettings from './summary-settings';
+import TimePicker from './timer-picker';
+import BarChartStyle from './style-setting/bar-chart-style-setting';
+import TimeCompareStyle from './style-setting/time-compare-style';
+import ColorPicker from '../color-setting/color-picker';
+import { TIME_COLUMN_LIST } from '../../../constants';
+import styles from '../../../assets/css/statistic-time-picker.module.css';
+var TimeComparisonSettings = /*#__PURE__*/function (_Component) {
+  _inherits(TimeComparisonSettings, _Component);
+  var _super = _createSuper(TimeComparisonSettings);
+  function TimeComparisonSettings(props) {
+    var _this;
+    _classCallCheck(this, TimeComparisonSettings);
+    _this = _super.call(this, props);
+    _this.renderGroupbyDateGranularity = function () {
+      var _this$props = _this.props,
+        dateGranularityOptions = _this$props.dateGranularityOptions,
+        groupbyDateGranularity = _this$props.groupbyDateGranularity;
+      var selectedDateGranularity = _this.getSelectedDateGranularity(groupbyDateGranularity);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedDateGranularity,
+        onChange: _this.onSelectGroupbyDateGranularity,
+        options: dateGranularityOptions
+      }));
+    };
+    _this.renderGroupby = function () {
+      var statItem = _this.props.statItem;
+      var x_axis_column_key = statItem.x_axis_column_key;
+      var selectedColumnOption = _this.props.getSelectedColumnOption(x_axis_column_key, _this.columnsOptions);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(DTableSelect, {
+        placeholder: intl.get('Select_a_column'),
+        value: selectedColumnOption,
+        onChange: _this.onSelectGroupbyColumn,
+        options: _this.columnsOptions
+      }));
+    };
+    _this.renderGroupbyDateGranularity = function () {
+      var _this$props2 = _this.props,
+        dateGranularityOptions = _this$props2.dateGranularityOptions,
+        statItem = _this$props2.statItem;
+      dateGranularityOptions = dateGranularityOptions.filter(function (item) {
+        return item.value !== 'year';
+      });
+      var selectedDateGranularity = _this.getSelectedDateGranularity(statItem.x_axis_date_granularity);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedDateGranularity,
+        onChange: _this.onSelectGroupbyDateGranularity,
+        options: dateGranularityOptions
+      }));
+    };
+    _this.onSelectGroupbyDateGranularity = function (dateGranularity) {
+      var updated = {
+        x_axis_date_granularity: dateGranularity.value
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyColumn = function (option) {
+      var updated = {
+        x_axis_column_key: option.value.key
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.getSelectedDateGranularity = function (dateGranularity) {
+      var dateGranularityOptions = _this.props.dateGranularityOptions;
+      return dateGranularityOptions.find(function (g) {
+        return g.value === dateGranularity;
+      }) || dateGranularityOptions[2];
+    };
+    _this.onColorChanged = function (color) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        increase_line_color: color.hex
+      }));
+    };
+    _this.renderDateRange = function () {
+      var statItem = _this.props.statItem;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Date_range')), /*#__PURE__*/React.createElement("div", {
+        className: styles['time-input-container']
+      }, /*#__PURE__*/React.createElement(TimePicker, {
+        onCommit: function onCommit(value) {
+          return _this.updateDate('x_axis_date_range_start', value);
+        },
+        value: statItem.x_axis_date_range_start
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles['concat']
+      }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
+        onCommit: function onCommit(value) {
+          return _this.updateDate('x_axis_date_range_end', value);
+        },
+        value: statItem.x_axis_date_range_end
+      })));
+    };
+    _this.renderComparedDateRange = function () {
+      var statItem = _this.props.statItem;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Compare_to_date_range')), /*#__PURE__*/React.createElement("div", {
+        className: styles['time-input-container']
+      }, /*#__PURE__*/React.createElement(TimePicker, {
+        onCommit: function onCommit(value) {
+          return _this.updateDate('x_axis_compared_date_range_start', value);
+        },
+        value: statItem.x_axis_compared_date_range_start
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles['concat']
+      }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
+        onCommit: function onCommit(value) {
+          return _this.updateDate('x_axis_compared_date_range_end', value);
+        },
+        value: statItem.x_axis_compared_date_range_end
+      })));
+    };
+    _this.renderIncrementLineSetting = function () {
+      var statItem = _this.props.statItem;
+      var display_increase = statItem.display_increase;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: display_increase || false,
+        handleToggleChange: _this.onToggleIncrease,
+        label: intl.get('Display_increase')
+      }));
+    };
+    _this.renderColorPicker = function () {
+      var _this$props$statItem$ = _this.props.statItem.increase_line_color,
+        increase_line_color = _this$props$statItem$ === void 0 ? '#fbd44a' : _this$props$statItem$;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Line_color')), /*#__PURE__*/React.createElement(ColorPicker, {
+        isPickAllColor: true,
+        activeColor: increase_line_color,
+        onColorChanged: _this.onColorChanged
+      }));
+    };
+    _this.onToggleIncrease = function () {
+      var statItem = _this.props.statItem;
+      var display_increase = statItem.display_increase;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        display_increase: !display_increase
+      }));
+    };
+    _this.updateDate = function (key, date) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, _defineProperty({}, key, date)));
+    };
+    _this.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
+      var statItem = _this.props.statItem;
+      var updated = {
+        y_axis_summary_type: summaryType,
+        y_axis_column_key: summaryColumnKey,
+        y_axis_summary_method: summaryMethod
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.updateSummaryColumn = function (summaryColumnKey) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_column_key: summaryColumnKey
+      }));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_summary_method: summaryMethod
+      }));
+    };
+    var _statItem = props.statItem,
+      generalColumnsOptions = props.generalColumnsOptions;
+    var x_axis_date_range_start = _statItem.x_axis_date_range_start,
+      x_axis_date_range_end = _statItem.x_axis_date_range_end,
+      x_axis_compared_date_range_start = _statItem.x_axis_compared_date_range_start,
+      x_axis_compared_date_range_end = _statItem.x_axis_compared_date_range_end;
+    _this.state = {
+      dateRangeStart: x_axis_date_range_start,
+      dateRangeEnd: x_axis_date_range_end,
+      comparedDateRangeStart: x_axis_compared_date_range_start,
+      comparedDateRangeEnd: x_axis_compared_date_range_end
+    };
+    _this.columnsOptions = generalColumnsOptions.filter(function (item) {
+      return TIME_COLUMN_LIST.includes(item.value.type);
+    });
+    return _this;
+  }
+  _createClass(TimeComparisonSettings, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps, props) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId || nextProps.generalColumnsOptions !== props.generalColumnsOptions) {
+        this.columnsOptions = nextProps.generalColumnsOptions.filter(function (item) {
+          return TIME_COLUMN_LIST.includes(item.value.type);
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        getTableById = _this$props3.getTableById,
+        statItem = _this$props3.statItem,
+        labelColorConfigs = _this$props3.labelColorConfigs,
+        eventBus = _this$props3.eventBus,
+        numericColumnsOptions = _this$props3.numericColumnsOptions,
+        settingType = _this$props3.settingType;
+      var _ref = statItem || {},
+        selectedTableId = _ref.table_id,
+        selectedViewId = _ref.view_id,
+        y_axis_summary_type = _ref.y_axis_summary_type,
+        y_axis_column_key = _ref.y_axis_column_key,
+        y_axis_summary_method = _ref.y_axis_summary_method;
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BarChartStyle, {
+          hideDisplayDataSetting: false,
+          statItem: statItem,
+          labelColorConfigs: labelColorConfigs,
+          eventBus: eventBus,
+          getTableById: getTableById,
+          updateStatItem: this.props.updateStatItem
+        }), /*#__PURE__*/React.createElement(TimeCompareStyle, {
+          statItem: statItem,
+          updateStatItem: this.props.updateStatItem
+        }), this.renderColorPicker());
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: selectedTableId,
+        selectedViewId: selectedViewId,
+        getTables: this.props.getTables,
+        getViews: this.props.getViews,
+        getTableById: this.props.getTableById,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), this.renderGroupby(), this.renderGroupbyDateGranularity(), this.renderDateRange(), this.renderComparedDateRange(), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(SummarySettings, {
+        statItem: statItem,
+        label: intl.get('Y-axis'),
+        numericColumnsOptions: numericColumnsOptions,
+        summaryType: y_axis_summary_type,
+        summaryColumnKey: y_axis_column_key,
+        summaryMethod: y_axis_summary_method,
+        getSelectedColumnOption: this.props.getSelectedColumnOption,
+        onChangeSummaryType: this.updatedSummaryType,
+        onSelectNumericColumn: this.updateSummaryColumn,
+        onSelectSummaryMethod: this.updateSummaryMethod
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), this.renderIncrementLineSetting());
+    }
+  }]);
+  return TimeComparisonSettings;
+}(Component);
+export default TimeComparisonSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/timer-picker.js

@@ -0,0 +1,109 @@
+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, { Fragment } from 'react';
+import dayjs from 'dayjs';
+import DateEditorPopover from '../public-setting/calender';
+import styles from '../../../assets/css/statistic-time-picker.module.css';
+var DATE_FORMAT = 'YYYY-MM-DD';
+var TimePicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(TimePicker, _React$Component);
+  var _super = _createSuper(TimePicker);
+  function TimePicker(props) {
+    var _this;
+    _classCallCheck(this, TimePicker);
+    _this = _super.call(this, props);
+    _this.onDateEditorToggle = function () {
+      _this.setState({
+        isPopoverShow: !_this.state.isPopoverShow
+      });
+    };
+    _this.onValueChanged = function (value) {
+      if (value !== _this.props.value) {
+        _this.setState({
+          value: value
+        });
+      }
+    };
+    _this.handleKeyDown = function (e) {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        setTimeout(function () {
+          _this.onClosePopover();
+        }, 1);
+      }
+    };
+    _this.commitAndClosePopover = function () {
+      if (_this.state.value !== _this.props.value) {
+        _this.onCommit(_this.state.value);
+      }
+      _this.onClosePopover();
+    };
+    _this.onCommit = function (newValue) {
+      _this.props.onCommit(newValue);
+    };
+    _this.onClosePopover = function () {
+      _this.setState({
+        isPopoverShow: false
+      });
+    };
+    _this.state = {
+      isDateInit: false,
+      isPopoverShow: false,
+      defaultCalendarValue: null,
+      value: props.value
+    };
+    return _this;
+  }
+  _createClass(TimePicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var isZhcn = window.dtable && window.dtable.lang === 'zh-cn';
+      if (isZhcn) {
+        dayjs.locale('zh-cn');
+      } else {
+        dayjs.locale('en-gb');
+      }
+      this.setState({
+        isDateInit: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.state.isDateInit) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "cell-editor date-editor"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "date-editor-container"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "control-form"
+        })));
+      }
+      var isPopoverShow = this.state.isPopoverShow;
+      var lang = window.dtable && window.dtable.lang || 'zh-cn';
+      return /*#__PURE__*/React.createElement("div", {
+        onKeyDown: this.handleKeyDown,
+        className: styles['date-editor']
+      }, !isPopoverShow && /*#__PURE__*/React.createElement("div", {
+        className: styles['date-editor-container']
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "form-control",
+        onClick: this.onDateEditorToggle
+      }, this.props.value)), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DateEditorPopover, {
+        lang: lang,
+        value: this.props.value,
+        dateFormat: DATE_FORMAT,
+        showHourAndMinute: false,
+        onValueChanged: this.onValueChanged,
+        commitAndClosePopover: this.commitAndClosePopover
+      })));
+    }
+  }]);
+  return TimePicker;
+}(React.Component);
+TimePicker.defaultProps = {
+  value: ''
+};
+export default TimePicker;