dtable-statistic 5.0.0 → 5.0.2

package/es/components/dialog/chart-addition-widgets/statistic-chart-selector.module.css

@@ -1,83 +0,0 @@
-.statistic-types-container {
-  position: relative;
-}
-
-.statistic-type-image-container {
-  padding: 0 12px;
-}
-
-.statistic-type {
-  position: relative;
-  padding: 0 16px 16px 16px;
-}
-
-.statistic-type::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 20px;
-}
-
-.statistic-type-demo-chart-image {
-  width: 100%;
-  height: 125px;
-}
-
-.statistic-type-title {
-  font-weight: 600;
-  font-size: 18px;
-  color: #212529;
-}
-
-.chart-categories-nav {
-  border-bottom: 1px solid #e9ecef;
-  background-color: #f9f9f9;
-  height: 50px;
-  box-sizing: border-box;
-  margin: 0;  
-}
-
-.chart-cat-nav-item {
-  font-size: 14px;
-  color: #666;
-}
-
-.statistic-type-item {
-  height: 172px;
-  width: 250px;
-  cursor: pointer;
-  border: 1px solid #dcdade;
-  border-radius: 4px;
-  box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
-  margin: 20px 17px 0 0;
-}
-
-.statistic-type-item:hover {
-  border-color: #FFBF7F;
-}
-
-.statistic-type-item-selected,
-.statistic-type-item-selected:hover {
-  border-color: #FF8000;
-}
-
-.statistic-type-description {
-  font-weight: 500;
-  font-size: 14px;
-  margin-top: 14px;
-  padding: 0 15px;
-  margin-bottom: 10px;
-}
-
-.chart-icon {
-  cursor: pointer;
-  color: #666666;
-}
-
-.chart-icon:not(.icon-highlight):hover {
-  color: #212529;
-}
-
-.icon-highlight {
-  color: #ff8000;
-}

package/es/components/dialog/statistic-types-dialog/index.css

@@ -1,14 +0,0 @@
-.statistic-types-dialog {
-  max-width: 1102px;
-  width: 1102px;
-  height: calc(100% - 56px);
-}
-
-.statistic-types-dialog .modal-content {
-  height: 100%;
-}
-
-.statistic-types-dialog .statistic-types-body {
-  padding: 0;
-  overflow: hidden;
-}

package/es/components/dialog/statistic-types-dialog/index.js

@@ -1,62 +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 _reactstrap = require("reactstrap");
-var _chartSelector = _interopRequireDefault(require("../chart-addition-widgets/chart-selector"));
-require("./index.css");
-class StatisticTypesDialog extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onToggle = () => {
-      this.props.onToggle();
-    };
-    this.onSelectStatisticType = type => {
-      if (type === this.state.selectedType) return;
-      this.setState({
-        selectedType: type
-      });
-    };
-    this.onSubmit = () => {
-      const {
-        selectedType
-      } = this.state;
-      this.props.onChange(selectedType);
-      this.onToggle();
-    };
-    this.state = {
-      selectedType: props.type
-    };
-  }
-  render() {
-    const {
-      selectedType
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
-      isOpen: true,
-      toggle: this.onToggle,
-      className: "statistic-types-dialog",
-      zIndex: 1048
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
-      toggle: this.onToggle
-    }, _reactIntlUniversal.default.get('Edit_type')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
-      className: "statistic-types-body"
-    }, /*#__PURE__*/_react.default.createElement(_chartSelector.default, {
-      selectedType: selectedType,
-      addEditingChart: this.onSelectStatisticType
-    })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      color: "secondary",
-      onClick: this.onToggle
-    }, _reactIntlUniversal.default.get('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
-      color: "primary",
-      onClick: this.onSubmit
-    }, _reactIntlUniversal.default.get('Submit'))));
-  }
-}
-var _default = exports.default = StatisticTypesDialog;

package/es/components/popover/color-rules/color-rule.js

@@ -1,183 +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 _classnames = _interopRequireDefault(require("classnames"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _DTableCommonAddTool = _interopRequireDefault(require("dtable-ui-component/lib/DTableCommonAddTool"));
-var _ruleFilters = _interopRequireDefault(require("./rule-filters"));
-var _colorSelectorPopover = _interopRequireDefault(require("../color-selector-popover"));
-class ColorRule extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onColorPopoverToggle = event => {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      this.setState({
-        isColorPopoverShow: !this.state.isColorPopoverShow
-      });
-    };
-    this.hideColorPopover = () => {
-      this.setState({
-        isColorPopoverShow: false
-      });
-    };
-    this.onSelectColor = color => {
-      const {
-        rule,
-        ruleIndex
-      } = this.props;
-      const updatedRule = Object.assign({}, rule, {
-        color
-      });
-      this.props.updateRule(ruleIndex, updatedRule);
-    };
-    this.deleteRule = e => {
-      e.nativeEvent.stopImmediatePropagation();
-      e.stopPropagation();
-      const {
-        ruleIndex
-      } = this.props;
-      this.props.deleteRule(ruleIndex);
-    };
-    this.addFilter = () => {
-      const {
-        colorRuleTypes,
-        rule
-      } = this.props;
-      const {
-        filters
-      } = rule;
-      const defaultFilter = this.props.generateDefaultFilter(colorRuleTypes[0]);
-      if (!defaultFilter || filters.length >= 8) return;
-      let updatedFilters = [...filters];
-      updatedFilters.push(defaultFilter);
-      this.updateFilters(updatedFilters);
-    };
-    this.updateFilter = (filterIndex, updatedFilter) => {
-      const {
-        rule
-      } = this.props;
-      const {
-        filters
-      } = rule;
-      let updatedFilters = [...filters];
-      updatedFilters[filterIndex] = updatedFilter;
-      this.updateFilters(updatedFilters);
-    };
-    this.modifyFilterConjunction = filterConjunction => {
-      const {
-        rule,
-        ruleIndex
-      } = this.props;
-      const updatedRule = Object.assign({}, rule, {
-        filter_conjunction: filterConjunction
-      });
-      this.props.updateRule(ruleIndex, updatedRule);
-    };
-    this.updateFilters = filters => {
-      const {
-        rule,
-        ruleIndex
-      } = this.props;
-      if (filters.length === 0) {
-        this.props.deleteRule(ruleIndex);
-      } else {
-        const updatedRule = Object.assign({}, rule, {
-          filters
-        });
-        this.props.updateRule(ruleIndex, updatedRule);
-      }
-    };
-    this.onMouseDown = e => {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    };
-    this.state = {
-      isColorPopoverShow: false
-    };
-  }
-  render() {
-    const {
-      labelColorConfigs,
-      colorRuleTypes,
-      rule,
-      isEditing,
-      ruleIndex,
-      ruleName
-    } = this.props;
-    const {
-      color,
-      filter_conjunction,
-      filters
-    } = rule;
-    const target = "row-color-rule-".concat(ruleIndex);
-    const selectedColorConfig = this.props.getColorConfigByColor(color);
-    const ruleTitle = ruleName || _reactIntlUniversal.default.get('Define_rule');
-    const canAddFilter = filters.length < 8;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('statistic-color-rule-item', {
-        'editing': isEditing
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex justify-content-between pr-4"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-color-rule-title",
-      onClick: () => this.props.setEditingRuleIndex(ruleIndex)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.rowColorRule = ref,
-      className: "statistic-color-rule-dropdown",
-      style: {
-        backgroundColor: color
-      },
-      onMouseDown: this.onMouseDown,
-      onClick: this.onColorPopoverToggle,
-      id: target
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-drop-down",
-      style: {
-        color: selectedColorConfig.text_color
-      }
-    }), this.state.isColorPopoverShow && /*#__PURE__*/_react.default.createElement(_colorSelectorPopover.default, {
-      placement: "bottom-start",
-      hideArrow: false,
-      target: target,
-      selectedColor: color,
-      colorConfigs: labelColorConfigs,
-      toggle: this.hideColorPopover,
-      onSelectColor: this.onSelectColor
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('statistic-color-rule-name text-truncate', {
-        'invalid': !!ruleName
-      }),
-      title: ruleTitle
-    }, ruleTitle)), /*#__PURE__*/_react.default.createElement("span", {
-      className: "statistic-delete-color-rule"
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-delete",
-      onClick: this.deleteRule
-    }))), isEditing && /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-color-rule-filters-wrapper"
-    }, /*#__PURE__*/_react.default.createElement(_ruleFilters.default, {
-      filterTypes: colorRuleTypes,
-      filters: rule.filters,
-      filterConjunction: filter_conjunction,
-      getFilterConfigByType: this.props.getFilterConfigByType,
-      modifyConjunction: this.modifyFilterConjunction,
-      updateFilters: this.updateFilters
-    }), /*#__PURE__*/_react.default.createElement(_DTableCommonAddTool.default, {
-      className: (0, _classnames.default)('statistic-btn-add-color-rule-filter', {
-        'disabled': !canAddFilter
-      }),
-      callBack: this.addFilter,
-      footerName: _reactIntlUniversal.default.get('Add_condition'),
-      addIconClassName: "popover-add-icon"
-    })));
-  }
-}
-var _default = exports.default = ColorRule;

package/es/components/popover/color-rules/index.js

@@ -1,87 +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 _colorRule = _interopRequireDefault(require("./color-rule"));
-class ColorRules extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.setEditingRuleIndex = editingRuleIndex => {
-      if (this.state.editingRuleIndex === editingRuleIndex) {
-        this.setState({
-          editingRuleIndex: -1
-        });
-        return;
-      }
-      this.setState({
-        editingRuleIndex
-      }, () => {
-        this.props.resetPopoverPosition();
-      });
-    };
-    this.updateRule = (ruleIndex, updatedRule) => {
-      const {
-        rules
-      } = this.props;
-      const isAddingFilter = updatedRule.filters.length > rules[ruleIndex].filters.length;
-      let updatedRules = [...rules];
-      updatedRules[ruleIndex] = updatedRule;
-      this.props.updateRules({
-        colorRules: updatedRules,
-        callback: () => {
-          isAddingFilter && this.props.resetPopoverPosition();
-        }
-      });
-    };
-    this.deleteRule = ruleIndex => {
-      const {
-        rules
-      } = this.props;
-      let updatedRules = [...rules];
-      updatedRules.splice(ruleIndex, 1);
-      this.props.updateRules({
-        colorRules: updatedRules
-      });
-    };
-    this.state = {
-      editingRuleIndex: -1
-    };
-  }
-  render() {
-    const {
-      rules,
-      labelColorConfigs,
-      colorRuleTypes,
-      rulesName
-    } = this.props;
-    const {
-      editingRuleIndex
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-color-rules"
-    }, rules.map((rule, ruleIndex) => {
-      const isEditing = editingRuleIndex === ruleIndex;
-      return /*#__PURE__*/_react.default.createElement(_colorRule.default, {
-        key: "statistic-color-rule-".concat(ruleIndex),
-        ruleIndex: ruleIndex,
-        rule: rule,
-        labelColorConfigs: labelColorConfigs,
-        colorRuleTypes: colorRuleTypes,
-        isEditing: isEditing,
-        ruleName: rulesName[ruleIndex],
-        setEditingRuleIndex: this.setEditingRuleIndex,
-        getColorConfigByColor: this.props.getColorConfigByColor,
-        getFilterConfigByType: this.props.getFilterConfigByType,
-        generateDefaultFilter: this.props.generateDefaultFilter,
-        updateRule: this.updateRule,
-        deleteRule: this.deleteRule
-      });
-    }));
-  }
-}
-var _default = exports.default = ColorRules;

package/es/components/popover/color-rules/rule-filters/filter.js

@@ -1,221 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _DTableCustomizeSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableCustomizeSelect"));
-var _numberInput = _interopRequireDefault(require("./number-input"));
-var _colorRules = require("../../../../constants/color-rules");
-const INPUT_CMP_TYPE_MAP = {
-  NUMBER: 'number'
-};
-class Filter extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.initSelectOptions = props => {
-      const {
-        filter
-      } = props;
-      const {
-        filterPredicateList
-      } = this.props.getFilterConfigByType(filter.filter_type);
-      this.predicateOptions = filterPredicateList ? filterPredicateList.map(predicate => {
-        if (_colorRules.EMPTY_PREDICATE.includes(predicate)) {
-          return null;
-        }
-        return {
-          value: predicate,
-          label: /*#__PURE__*/_react.default.createElement("span", {
-            className: "select-option-name"
-          }, _reactIntlUniversal.default.get(predicate))
-        };
-      }).filter(Boolean) : [];
-    };
-    this.onDeleteFilter = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        index
-      } = this.props;
-      this.props.deleteFilter(index);
-    };
-    this.onSelectConjunction = filterConjunction => {
-      if (filterConjunction === this.props.filterConjunction) {
-        return;
-      }
-      this.props.modifyConjunction(filterConjunction);
-    };
-    this.onSelectFilterBy = filterType => {
-      const {
-        index,
-        filter
-      } = this.props;
-      if (filter.filter_type === filterType) return;
-      const {
-        filterPredicateList
-      } = this.props.getFilterConfigByType(filter.filter_type);
-      if (!filterPredicateList) return;
-      const updatedFilter = Object.assign({}, filter, {
-        filter_type: filterType,
-        filter_predicate: filterPredicateList[0]
-      });
-      this.props.updateFilter(index, updatedFilter);
-    };
-    this.onSelectPredicate = predicate => {
-      const {
-        index,
-        filter
-      } = this.props;
-      if (filter.filter_predicate === predicate) {
-        return;
-      }
-      const updatedFilter = Object.assign({}, filter, {
-        filter_predicate: predicate
-      });
-      this.props.updateFilter(index, updatedFilter);
-    };
-    this.onNumberFilterTermChanged = newFilterTerm => {
-      const {
-        index,
-        filter
-      } = this.props;
-      if (newFilterTerm === filter.filter_term) return;
-      const newFilter = Object.assign({}, filter, {
-        filter_term: newFilterTerm
-      });
-      this.props.updateFilter(index, newFilter);
-    };
-    this.getInputComponent = type => {
-      const {
-        filter
-      } = this.props;
-      const {
-        filter_term
-      } = filter;
-      switch (type) {
-        case INPUT_CMP_TYPE_MAP.NUMBER:
-          {
-            const number = filter_term || filter_term === 0 ? filter_term : '';
-            return /*#__PURE__*/_react.default.createElement(_numberInput.default, {
-              value: number,
-              onChange: this.onNumberFilterTermChanged
-            });
-          }
-        default:
-          {
-            return null;
-          }
-      }
-    };
-    this.renderConjunction = () => {
-      const {
-        index,
-        filterConjunction,
-        conjunctionOptions
-      } = this.props;
-      switch (index) {
-        case 0:
-          {
-            return null;
-          }
-        case 1:
-          {
-            const selectedConjunction = conjunctionOptions.find(option => option.value === filterConjunction);
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-              value: selectedConjunction,
-              options: conjunctionOptions,
-              onSelectOption: this.onSelectConjunction
-            });
-          }
-        default:
-          {
-            return /*#__PURE__*/_react.default.createElement("span", {
-              className: "selected-conjunction-show"
-            }, _reactIntlUniversal.default.get(filterConjunction));
-          }
-      }
-    };
-    this.renderFilterTerm = () => {
-      const {
-        filter
-      } = this.props;
-      const {
-        filter_type,
-        filter_predicate
-      } = filter;
-
-      // predicate is empty or not empty
-      if (_colorRules.EMPTY_PREDICATE.includes(filter_predicate)) {
-        return null;
-      }
-      switch (filter_type) {
-        case _colorRules.COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE:
-          {
-            return this.getInputComponent(INPUT_CMP_TYPE_MAP.NUMBER);
-          }
-        default:
-          {
-            return null;
-          }
-      }
-    };
-    this.initSelectOptions(_props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      filter
-    } = this.props;
-    if (nextProps.filter !== filter) {
-      this.initSelectOptions(nextProps);
-    }
-  }
-  shouldComponentUpdate(nextProps) {
-    const currentProps = this.props;
-    const shouldUpdated = nextProps.index !== currentProps.index || nextProps.filter !== currentProps.filter || nextProps.filterConjunction !== currentProps.filterConjunction;
-    return shouldUpdated;
-  }
-  render() {
-    const {
-      filterTypeOptions,
-      filter
-    } = this.props;
-    const {
-      filter_type,
-      filter_predicate
-    } = filter;
-    const selectedFilterType = filterTypeOptions.find(option => option.value === filter_type);
-    const selectedPredicate = this.predicateOptions.find(option => option.value === filter_predicate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "delete-filter",
-      onClick: this.onDeleteFilter
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "condition"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-conjunction"
-    }, this.renderConjunction()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-column"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: selectedFilterType,
-      options: filterTypeOptions,
-      onSelectOption: this.onSelectFilterBy
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-predicate ml-2"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: selectedPredicate,
-      options: this.predicateOptions,
-      onSelectOption: this.onSelectPredicate
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term ml-2"
-    }, this.renderFilterTerm()))));
-  }
-}
-var _default = exports.default = Filter;