dtable-statistic 4.4.24 → 5.0.0-alpha.2

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

@@ -1,269 +0,0 @@
-"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 _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
-var _toggleSetting = _interopRequireDefault(require("../public-setting/toggle-setting"));
-var _summarySettings = _interopRequireDefault(require("./summary-settings"));
-var _timerPicker = _interopRequireDefault(require("./timer-picker"));
-var _barChartStyleSetting = _interopRequireDefault(require("./style-setting/bar-chart-style-setting"));
-var _timeCompareStyle = _interopRequireDefault(require("./style-setting/time-compare-style"));
-var _colorPicker = _interopRequireDefault(require("../color-setting/color-picker"));
-var _constants = require("../../../constants");
-var _statisticTimePickerModule = _interopRequireDefault(require("../../../assets/css/statistic-time-picker.module.css"));
-class TimeComparisonSettings extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.renderGroupbyDateGranularity = () => {
-      let {
-        dateGranularityOptions,
-        statItem
-      } = this.props;
-      dateGranularityOptions = dateGranularityOptions.filter(item => item.value !== 'year');
-      let selectedDateGranularity = this.getSelectedDateGranularity(statItem.x_axis_date_granularity);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
-        value: selectedDateGranularity,
-        onChange: this.onSelectGroupbyDateGranularity,
-        options: dateGranularityOptions
-      }));
-    };
-    this.renderGroupby = () => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        x_axis_column_key
-      } = statItem;
-      let selectedColumnOption = this.props.getSelectedColumnOption(x_axis_column_key, this.columnsOptions);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('X-axis')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
-        placeholder: _reactIntlUniversal.default.get('Select_column'),
-        value: selectedColumnOption,
-        onChange: this.onSelectGroupbyColumn,
-        options: this.columnsOptions
-      }));
-    };
-    this.onSelectGroupbyDateGranularity = dateGranularity => {
-      let updated = {
-        x_axis_date_granularity: dateGranularity.value
-      };
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
-    };
-    this.onSelectGroupbyColumn = option => {
-      let updated = {
-        x_axis_column_key: option.value.key
-      };
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
-    };
-    this.getSelectedDateGranularity = dateGranularity => {
-      let {
-        dateGranularityOptions
-      } = this.props;
-      return dateGranularityOptions.find(g => g.value === dateGranularity) || dateGranularityOptions[2];
-    };
-    this.onColorChanged = color => {
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        increase_line_color: color.hex
-      }));
-    };
-    this.renderDateRange = () => {
-      const {
-        statItem
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Date_range')), /*#__PURE__*/_react.default.createElement("div", {
-        className: _statisticTimePickerModule.default['time-input-container']
-      }, /*#__PURE__*/_react.default.createElement(_timerPicker.default, {
-        onCommit: value => this.updateDate('x_axis_date_range_start', value),
-        value: statItem.x_axis_date_range_start
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: _statisticTimePickerModule.default['concat']
-      }, '   -   '), /*#__PURE__*/_react.default.createElement(_timerPicker.default, {
-        onCommit: value => this.updateDate('x_axis_date_range_end', value),
-        value: statItem.x_axis_date_range_end
-      })));
-    };
-    this.renderComparedDateRange = () => {
-      const {
-        statItem
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Compare_to_date_range')), /*#__PURE__*/_react.default.createElement("div", {
-        className: _statisticTimePickerModule.default['time-input-container']
-      }, /*#__PURE__*/_react.default.createElement(_timerPicker.default, {
-        onCommit: value => this.updateDate('x_axis_compared_date_range_start', value),
-        value: statItem.x_axis_compared_date_range_start
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: _statisticTimePickerModule.default['concat']
-      }, '   -   '), /*#__PURE__*/_react.default.createElement(_timerPicker.default, {
-        onCommit: value => this.updateDate('x_axis_compared_date_range_end', value),
-        value: statItem.x_axis_compared_date_range_end
-      })));
-    };
-    this.renderIncrementLineSetting = () => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        display_increase
-      } = statItem;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/_react.default.createElement(_toggleSetting.default, {
-        isChecked: display_increase || false,
-        handleToggleChange: this.onToggleIncrease,
-        label: _reactIntlUniversal.default.get('Display_increase')
-      }));
-    };
-    this.renderColorPicker = () => {
-      const {
-        statItem: {
-          increase_line_color = '#fbd44a'
-        }
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Line_color')), /*#__PURE__*/_react.default.createElement(_colorPicker.default, {
-        isPickAllColor: true,
-        activeColor: increase_line_color,
-        onColorChanged: this.onColorChanged
-      }));
-    };
-    this.onToggleIncrease = () => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        display_increase
-      } = statItem;
-      this.props.updateStatItem(Object.assign({}, statItem, {
-        display_increase: !display_increase
-      }));
-    };
-    this.updateDate = (key, date) => {
-      const {
-        statItem
-      } = this.props;
-      this.props.updateStatItem(Object.assign({}, statItem, {
-        [key]: date
-      }));
-    };
-    this.updatedSummaryType = (summaryType, summaryColumnKey, summaryMethod) => {
-      let {
-        statItem
-      } = this.props;
-      let 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 = summaryColumnKey => {
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        y_axis_column_key: summaryColumnKey
-      }));
-    };
-    this.updateSummaryMethod = summaryMethod => {
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        y_axis_summary_method: summaryMethod
-      }));
-    };
-    const {
-      statItem: _statItem,
-      generalColumnsOptions
-    } = props;
-    const {
-      x_axis_date_range_start,
-      x_axis_date_range_end,
-      x_axis_compared_date_range_start,
-      x_axis_compared_date_range_end
-    } = _statItem;
-    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(item => {
-      return _constants.TIME_COLUMN_LIST.includes(item.value.type);
-    });
-  }
-  componentWillReceiveProps(nextProps, props) {
-    if (nextProps.selectedTableId !== this.props.selectedTableId || nextProps.generalColumnsOptions !== props.generalColumnsOptions) {
-      this.columnsOptions = nextProps.generalColumnsOptions.filter(item => {
-        return _constants.TIME_COLUMN_LIST.includes(item.value.type);
-      });
-    }
-  }
-  render() {
-    const {
-      getTableById,
-      statItem,
-      labelColorConfigs,
-      eventBus,
-      numericColumnsOptions,
-      settingType
-    } = this.props;
-    let {
-      table_id: selectedTableId,
-      view_id: selectedViewId,
-      y_axis_summary_type,
-      y_axis_column_key,
-      y_axis_summary_method
-    } = statItem || {};
-    if (settingType === 'style') {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_barChartStyleSetting.default, {
-        hideDisplayDataSetting: false,
-        statItem: statItem,
-        labelColorConfigs: labelColorConfigs,
-        eventBus: eventBus,
-        getTableById: getTableById,
-        updateStatItem: this.props.updateStatItem
-      }), /*#__PURE__*/_react.default.createElement(_timeCompareStyle.default, {
-        statItem: statItem,
-        updateStatItem: this.props.updateStatItem
-      }), this.renderColorPicker());
-    }
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
-      statItem: statItem,
-      selectedTableId: selectedTableId,
-      selectedViewId: selectedViewId,
-      getTables: this.props.getTables,
-      getViews: this.props.getViews,
-      getTableById: this.props.getTableById,
-      getConvertedChart: this.props.getConvertedChart,
-      updateStatItem: this.props.updateStatItem
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-chart-parameter-divider"
-    }), this.renderGroupby(), this.renderGroupbyDateGranularity(), this.renderDateRange(), this.renderComparedDateRange(), /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-chart-parameter-divider"
-    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
-      statItem: statItem,
-      label: _reactIntlUniversal.default.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.default.createElement("div", {
-      className: "statistic-chart-parameter-divider"
-    }), this.renderIncrementLineSetting());
-  }
-}
-var _default = exports.default = TimeComparisonSettings;

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

@@ -1,104 +0,0 @@
-"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 _dayjs = _interopRequireDefault(require("dayjs"));
-var _calender = _interopRequireDefault(require("../public-setting/calender"));
-var _statisticTimePickerModule = _interopRequireDefault(require("../../../assets/css/statistic-time-picker.module.css"));
-const DATE_FORMAT = 'YYYY-MM-DD';
-class TimePicker extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onDateEditorToggle = () => {
-      this.setState({
-        isPopoverShow: !this.state.isPopoverShow
-      });
-    };
-    this.onValueChanged = value => {
-      if (value !== this.props.value) {
-        this.setState({
-          value
-        });
-      }
-    };
-    this.handleKeyDown = e => {
-      if (e.keyCode === 13) {
-        e.preventDefault();
-        setTimeout(() => {
-          this.onClosePopover();
-        }, 1);
-      }
-    };
-    this.commitAndClosePopover = () => {
-      if (this.state.value !== this.props.value) {
-        this.onCommit(this.state.value);
-      }
-      this.onClosePopover();
-    };
-    this.onCommit = newValue => {
-      this.props.onCommit(newValue);
-    };
-    this.onClosePopover = () => {
-      this.setState({
-        isPopoverShow: false
-      });
-    };
-    this.state = {
-      isDateInit: false,
-      isPopoverShow: false,
-      defaultCalendarValue: null,
-      value: props.value
-    };
-  }
-  componentDidMount() {
-    const isZhcn = window.dtable && window.dtable.lang === 'zh-cn';
-    if (isZhcn) {
-      _dayjs.default.locale('zh-cn');
-    } else {
-      _dayjs.default.locale('en-gb');
-    }
-    this.setState({
-      isDateInit: true
-    });
-  }
-  render() {
-    if (!this.state.isDateInit) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "cell-editor date-editor"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "date-editor-container"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "control-form"
-      })));
-    }
-    let {
-      isPopoverShow
-    } = this.state;
-    let lang = window.dtable && window.dtable.lang || 'zh-cn';
-    return /*#__PURE__*/_react.default.createElement("div", {
-      onKeyDown: this.handleKeyDown,
-      className: _statisticTimePickerModule.default['date-editor']
-    }, !isPopoverShow && /*#__PURE__*/_react.default.createElement("div", {
-      className: _statisticTimePickerModule.default['date-editor-container']
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "form-control",
-      onClick: this.onDateEditorToggle
-    }, this.props.value)), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_calender.default, {
-      lang: lang,
-      value: this.props.value,
-      dateFormat: DATE_FORMAT,
-      showHourAndMinute: false,
-      onValueChanged: this.onValueChanged,
-      commitAndClosePopover: this.commitAndClosePopover
-    })));
-  }
-}
-TimePicker.defaultProps = {
-  value: ''
-};
-var _default = exports.default = TimePicker;