dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,269 @@
+"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

@@ -0,0 +1,104 @@
+"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;