dtable-statistic 4.0.2-test-2

package/es/components/popover/color-rules/rule-filters/index.css

@@ -0,0 +1,214 @@
+.statistic-color-rule-filters {
+  min-height: 120px;
+  max-height: 100%;
+  padding: 8px 15px;
+}
+
+.statistic-color-rule-filters .selected-option {
+  align-self: stretch;
+}
+
+.statistic-color-rule-filters .filter-item {
+  display: flex;
+  align-items: center;
+  padding: .25rem 12px .25rem 12px;
+}
+
+.statistic-color-rule-filters .filter-item .condition {
+  display: flex;
+  flex: 1;
+}
+
+.statistic-color-rule-filters .filter-item .condition>div {
+  margin-left: .5rem;
+}
+
+.statistic-color-rule-filters .filter-item .condition>div:first-child {
+  margin-left: 0;
+}
+
+.statistic-color-rule-filters .filter-item .filter-term {
+  max-width: 300px;
+}
+
+.statistic-color-rule-filters .filter-item .dtable-font {
+  font-size: 12px;
+  color: #747474;
+}
+
+.statistic-color-rule-filters .filter-item .dtable-font:hover {
+  color: #000;
+}
+
+.statistic-color-rule-filters .filter-conjunction {
+  width: 72px;
+}
+
+.statistic-color-rule-filters .filter-conjunction-readonly {
+  width: 52px;
+}
+
+.statistic-color-rule-filters .filter-container {
+  width : calc(100% - 72px);
+  display: flex;
+}
+
+.statistic-color-rule-filters .selected-option-show {
+  width: calc(100% - 20px);
+  height: 20px;
+  line-height: 20px;
+}
+
+.statistic-color-rule-filters .selected-option {
+  width: auto;
+  overflow-x: auto;
+  background-color: #f5f5f5;
+}
+
+.statistic-color-rule-filters .dtable-icon-drop-down {
+  margin-left: .5rem;
+}
+
+.statistic-color-rule-filters .selected-conjunction-show {
+  padding: 0 10px;
+  color: #999;
+}
+
+.statistic-color-rule-filters .filter-column {
+  max-width: 150px;
+}
+
+.filter-column .option:hover .filter-header-icon .dtable-font {
+  color: #fff;
+}
+
+.statistic-color-rule-filters .filter-term input {
+  display: flex;
+  width: 100%;
+  height: 30px;
+  background-color: #ffffff;
+  padding-left: 8px;
+  padding-right: 8px;
+  outline: none;
+  border-radius: 3px;
+  font-size: 0.875rem;
+}
+
+.statistic-color-rule-filters .custom-select:hover,
+.statistic-color-rule-filters .filter-term input:hover {
+  border-color: rgb(179, 179, 179);
+}
+
+.statistic-color-rule-filters .filter-term input.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12);
+}
+
+.statistic-color-rule-filters .filter-term input:hover:focus {
+  border-color: #1991eb;
+}
+
+.statistic-color-rule-filters .filter-term input:focus {
+  color: #495057;
+  background-color: #fff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.statistic-color-rule-filters .filter-term .date-picker-container input:focus {
+  color: #495057;
+  background-color: #fff;
+  border: 1px solid #fff;
+  outline: 0;
+}
+
+.statistic-color-rule-filters .filter-term .date-picker-container table tr {
+  height: 30px;
+}
+
+.statistic-color-rule-filters .filter-term input[type='checkbox'] {
+  width: inherit;
+}
+
+.statistic-color-rule-filters .filter-term input[type='checkbox']:focus {
+  border: 0;
+  box-shadow: none;
+}
+
+.filter-term .filter-rate-list {
+  display: flex;
+  padding: 0 5px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+}
+
+.statistic-color-rule-filters .delete-filter {
+  width: 12px;
+  height: 20px;
+  margin-right: 14px;
+  text-align: center;
+}
+
+.statistic-color-rule-filters .delete-filter:hover {
+  cursor: pointer;
+}
+
+.statistic-color-rule-filters .delete-filter .dtable-icon-fork-number {
+  display: inline-block;
+  font-size: 12px;
+  color: #949494;
+}
+
+.statistic-color-rule-filters .popover-add-tool {
+  border-top: none;
+  color: #555555;
+}
+
+.statistic-color-rule-filters .popover-add-tool .popover-add-icon {
+  margin-right: 14px;
+}
+
+.statistic-color-rule-filters .option-group {
+  max-height: 360px;
+  overflow: auto;
+}
+
+.statistic-color-rule-filters .filter-item .dtable-icon-fork-number:hover {
+  color: #5a5a5a;
+}
+
+.statistic-color-rule-filters .filter-container-readonly .selected-option-show,
+.statistic-color-rule-filters .filter-conjunction-readonly .selected-option-show {
+  width: 100%;
+}
+
+.statistic-color-rule-filters .selected-option-show .remove-container {
+  display: none;
+}
+
+.filter-header-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.filter-header-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}
+
+.statistic-color-rule-filters .custom-select,
+.statistic-color-rule-filters .filter-term,
+.statistic-color-rule-filters .filter-term input,
+.statistic-color-rule-filters .filter-item .condition>div,
+.statistic-color-rule-filters .filter-item .filter-term input:focus {
+  height: 30px;
+  line-height: 30px;
+  background-color: #f5f5f5;
+  border-color: rgba(0, 40, 100, 0.12);
+  box-shadow: unset;
+}
+
+.statistic-color-rule-filters .dtable-select .selected-option {
+  background-color: transparent;
+}

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

@@ -0,0 +1,97 @@
+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 } from 'react';
+import classnames from 'classnames';
+import intl from 'react-intl-universal';
+import Filter from './filter';
+import { DISPLAY_COLOR_RULE_FILTER_TYPE } from '../../../../constants/color-rules';
+import './index.css';
+var RuleFilters = /*#__PURE__*/function (_Component) {
+  _inherits(RuleFilters, _Component);
+  var _super = _createSuper(RuleFilters);
+  function RuleFilters(props) {
+    var _this;
+    _classCallCheck(this, RuleFilters);
+    _this = _super.call(this, props);
+    _this.generateConjunctionOptions = function () {
+      _this.conjunctionOptions = [{
+        value: 'And',
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, intl.get('And'))
+      }, {
+        value: 'Or',
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, intl.get('Or'))
+      }];
+    };
+    _this.generateFilterTypeOptions = function (_ref) {
+      var filterTypes = _ref.filterTypes;
+      _this.filterTypeOptions = filterTypes.map(function (filterType) {
+        return {
+          value: filterType,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(DISPLAY_COLOR_RULE_FILTER_TYPE[filterTypes]))
+        };
+      });
+    };
+    _this.deleteFilter = function (index) {
+      var filters = _this.props.filters;
+      var updatedFilters = _toConsumableArray(filters);
+      updatedFilters.splice(index, 1);
+      _this.props.updateFilters(updatedFilters);
+    };
+    _this.updateFilter = function (index, updatedFilter) {
+      var filters = _this.props.filters;
+      var updatedFilters = _toConsumableArray(filters);
+      updatedFilters[index] = updatedFilter;
+      _this.props.updateFilters(updatedFilters);
+    };
+    _this.renderFilter = function (filter, index) {
+      var filterConjunction = _this.props.filterConjunction;
+      return /*#__PURE__*/React.createElement(Filter, {
+        key: index,
+        index: index,
+        filter: filter,
+        filterConjunction: filterConjunction,
+        conjunctionOptions: _this.conjunctionOptions,
+        filterTypeOptions: _this.filterTypeOptions,
+        getFilterConfigByType: _this.props.getFilterConfigByType,
+        modifyConjunction: _this.props.modifyConjunction,
+        deleteFilter: _this.deleteFilter,
+        updateFilter: _this.updateFilter
+      });
+    };
+    _this.generateConjunctionOptions();
+    _this.generateFilterTypeOptions(props);
+    return _this;
+  }
+  _createClass(RuleFilters, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.filterTypes !== this.props.filterTypes) {
+        this.generateFilterTypeOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        filters = _this$props.filters,
+        className = _this$props.className;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames('statistic-color-rule-filters', className)
+      }, filters.map(function (filter, index) {
+        return _this2.renderFilter(filter, index);
+      }));
+    }
+  }]);
+  return RuleFilters;
+}(Component);
+export default RuleFilters;

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

@@ -0,0 +1,85 @@
+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";
+/**
+ * support type number with format
+ */
+import React, { Component } from 'react';
+import { DEFAULT_NUMBER_FORMAT, formatStringToNumber, getNumberDisplayString, replaceNumberNotAllowInput } from 'dtable-store';
+var NumberInput = /*#__PURE__*/function (_Component) {
+  _inherits(NumberInput, _Component);
+  var _super = _createSuper(NumberInput);
+  function NumberInput(props) {
+    var _this;
+    _classCallCheck(this, NumberInput);
+    _this = _super.call(this, props);
+    _this.getInitValue = function () {
+      var value = _this.props.value;
+      var numericValue = null;
+      var valueType = typeof value;
+      if (valueType === 'number') {
+        numericValue = value;
+      } else if (valueType === 'string') {
+        numericValue = formatStringToNumber(value, {});
+      }
+      if (!numericValue && numericValue !== 0) {
+        return '';
+      }
+      return getNumberDisplayString(numericValue, {}) || '';
+    };
+    _this.onChange = function (evt) {
+      var value = replaceNumberNotAllowInput(evt.target.value.trim(), DEFAULT_NUMBER_FORMAT, null);
+      _this.setState({
+        value: value
+      }, function () {
+        _this.props.onChange(formatStringToNumber(value, {}));
+      });
+    };
+    _this.onPaste = function (evt) {
+      evt.stopPropagation();
+    };
+    _this.state = {
+      value: _this.getInitValue()
+    };
+    return _this;
+  }
+  _createClass(NumberInput, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.value !== prevProps.value) {
+        this.setState({
+          value: this.getInitValue()
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        placeholder = _this$props.placeholder,
+        disabled = _this$props.disabled,
+        autoFocus = _this$props.autoFocus;
+      return /*#__PURE__*/React.createElement("input", {
+        ref: function ref(_ref) {
+          return _this2.input = _ref;
+        },
+        type: "text",
+        className: "form-control",
+        value: this.state.value,
+        onChange: this.onChange,
+        onPaste: this.onPaste,
+        placeholder: placeholder || '',
+        autoFocus: autoFocus,
+        disabled: disabled
+      });
+    }
+  }]);
+  return NumberInput;
+}(Component);
+NumberInput.defaultProps = {
+  autoFocus: false,
+  disabled: false
+};
+export default NumberInput;

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

@@ -0,0 +1,213 @@
+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 } from 'react';
+import classnames from 'classnames';
+import intl from 'react-intl-universal';
+import { CellType, FILTER_COLUMN_OPTIONS } from 'dtable-store';
+import { CommonAddTool, DTablePopover } from '../index';
+import ColorRules from './color-rules';
+import { COLOR_RULE_FILTER_TYPE_MAP, DISPLAY_COLOR_RULE_FILTER_TYPE, EMPTY_PREDICATE } from '../../constants/color-rules';
+import '../../assets/css/color-rules-popover.css';
+var SAFE_DISTANCE_2_BOTTOM = 30; // Keep the distance to the bottom
+var ColorRulesPopover = /*#__PURE__*/function (_Component) {
+  _inherits(ColorRulesPopover, _Component);
+  var _super = _createSuper(ColorRulesPopover);
+  function ColorRulesPopover(props) {
+    var _this;
+    _classCallCheck(this, ColorRulesPopover);
+    _this = _super.call(this, props);
+    _this.getColorConfigByColor = function (color) {
+      return _this.props.labelColorConfigs.find(function (colorConfig) {
+        return colorConfig.color === color;
+      }) || {};
+    };
+    _this.getFilterDisplay = function (filter) {
+      var filter_type = filter.filter_type,
+        filter_predicate = filter.filter_predicate,
+        filter_term = filter.filter_term;
+      var name = DISPLAY_COLOR_RULE_FILTER_TYPE[filter_type];
+      var template = "".concat(intl.get(name), " ").concat(intl.get(filter_predicate));
+      if (EMPTY_PREDICATE.includes(filter_predicate)) {
+        return template;
+      }
+      switch (filter_type) {
+        case COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE:
+          {
+            if (filter_term === 0) {
+              return "".concat(template, " 0");
+            }
+            if (!filter_term) {
+              return null;
+            }
+            return "".concat(template, " ").concat(filter_term);
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    };
+    _this.getRuleName = function (filters, filterConjunction) {
+      if (filters.length === 0) return '';
+      var contentText = '';
+      filterConjunction = filterConjunction || 'And';
+      filters.forEach(function (filter, index) {
+        var filterContentText = index === 0 ? '' : " ".concat(filterConjunction === 'And' ? intl.get('And') : intl.get('Or'));
+        var filterDisplay = _this.getFilterDisplay(filter);
+        if (filterDisplay) {
+          contentText = contentText + filterContentText + " ".concat(filterDisplay);
+        }
+      });
+      return contentText;
+    };
+    _this.getRulesName = function () {
+      var colorRules = _this.state.colorRules;
+      return colorRules.map(function (rule) {
+        var filters = rule.filters,
+          filter_conjunction = rule.filter_conjunction;
+        return _this.getRuleName(filters, filter_conjunction);
+      });
+    };
+    _this.getFilterConfigByType = function (filterType) {
+      if (!filterType) {
+        return {};
+      }
+      switch (filterType) {
+        case COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE:
+          {
+            return FILTER_COLUMN_OPTIONS[CellType.NUMBER];
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    };
+    _this.generateDefaultFilter = function (filterType) {
+      var _this$getFilterConfig = _this.getFilterConfigByType(filterType),
+        filterPredicateList = _this$getFilterConfig.filterPredicateList;
+      if (!filterPredicateList) {
+        return null;
+      }
+      var filterPredicate = filterPredicateList[0];
+      return {
+        filter_type: filterType,
+        filter_predicate: filterPredicate,
+        filter_term: null
+      };
+    };
+    _this.addRule = function () {
+      var _this$props = _this.props,
+        colorRuleTypes = _this$props.colorRuleTypes,
+        labelColorConfigs = _this$props.labelColorConfigs;
+      var colorRules = _this.state.colorRules;
+      var defaultRuleType = colorRuleTypes[0];
+      var defaultFilter = defaultRuleType && _this.generateDefaultFilter(defaultRuleType);
+      if (!defaultFilter) return;
+      var updatedColorRules = _toConsumableArray(colorRules);
+      var defaultColorConfig = labelColorConfigs[colorRules.length] || labelColorConfigs[0];
+      updatedColorRules.push({
+        color: defaultColorConfig.color,
+        filters: [defaultFilter],
+        filter_conjunction: 'And'
+      });
+      _this.updateColorRules({
+        colorRules: updatedColorRules,
+        callback: function callback() {
+          _this.resetPopoverPosition();
+        }
+      });
+    };
+    _this.resetPopoverPosition = function () {
+      // keep the popover is visible in current window
+      var popoverWrapper = _this.popover && _this.popover.dtablePopoverRef && _this.popover.dtablePopoverRef.parentNode.parentNode;
+      if (!popoverWrapper) return;
+      var bodyHeight = document.body.clientHeight;
+      var _popoverWrapper$getBo = popoverWrapper.getBoundingClientRect(),
+        top = _popoverWrapper$getBo.top,
+        height = _popoverWrapper$getBo.height;
+      var offsetTop = popoverWrapper.offsetTop;
+      var offsetHeight = top + height + SAFE_DISTANCE_2_BOTTOM - bodyHeight;
+
+      // popover within the current window
+      if (offsetHeight < 0) {
+        return;
+      }
+      setTimeout(function () {
+        if (popoverWrapper) {
+          popoverWrapper.style.top = "".concat(-offsetHeight + offsetTop, "px");
+        }
+      }, 300);
+    };
+    _this.updateColorRules = function (_ref) {
+      var colorRules = _ref.colorRules,
+        callback = _ref.callback;
+      _this.setState({
+        colorRules: colorRules
+      }, function () {
+        callback && callback();
+      });
+    };
+    _this.hideColorRulesPopover = function () {
+      _this.props.updateColorRules(_this.state.colorRules);
+      _this.props.hideColorRulesPopover();
+    };
+    _this.state = {
+      colorRules: props.colorRules || []
+    };
+    return _this;
+  }
+  _createClass(ColorRulesPopover, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        target = _this$props2.target,
+        labelColorConfigs = _this$props2.labelColorConfigs,
+        colorRuleTypes = _this$props2.colorRuleTypes;
+      var colorRules = this.state.colorRules;
+      var hasRules = colorRules && colorRules.length > 0;
+      var rulesName = this.getRulesName();
+      var canAddRule = !rulesName.some(function (ruleName) {
+        return !ruleName;
+      });
+      return /*#__PURE__*/React.createElement(DTablePopover, {
+        hideArrow: true,
+        target: target,
+        placement: "left-end",
+        ref: function ref(_ref2) {
+          return _this2.popover = _ref2;
+        },
+        boundariesElement: document.body,
+        popoverClassName: "statistic-color-rules-popover",
+        hideDTablePopover: this.hideColorRulesPopover,
+        hideDTablePopoverWithEsc: this.hideColorRulesPopover
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-color-rules-wrapper"
+      }, !hasRules && /*#__PURE__*/React.createElement("div", {
+        className: "no-color-rules"
+      }, intl.get('No_rules')), /*#__PURE__*/React.createElement(ColorRules, {
+        rules: colorRules,
+        rulesName: rulesName,
+        labelColorConfigs: labelColorConfigs,
+        colorRuleTypes: colorRuleTypes,
+        getColorConfigByColor: this.getColorConfigByColor,
+        getFilterConfigByType: this.getFilterConfigByType,
+        generateDefaultFilter: this.generateDefaultFilter,
+        updateRules: this.updateColorRules,
+        resetPopoverPosition: this.resetPopoverPosition
+      }), /*#__PURE__*/React.createElement(CommonAddTool, {
+        className: classnames('statistic-btn-add-color-rule', {
+          'disabled': !canAddRule
+        }),
+        footerName: intl.get('Add_rule'),
+        callBack: canAddRule ? this.addRule : function () {}
+      })));
+    }
+  }]);
+  return ColorRulesPopover;
+}(Component);
+export default ColorRulesPopover;

package/es/components/popover/color-selector-popover.js

@@ -0,0 +1,85 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 } from 'react';
+import { DTablePopover } from '../index';
+import { hexToRgb } from '../../utils';
+var ColorSelectorPopover = /*#__PURE__*/function (_Component) {
+  _inherits(ColorSelectorPopover, _Component);
+  var _super = _createSuper(ColorSelectorPopover);
+  function ColorSelectorPopover(props) {
+    var _this;
+    _classCallCheck(this, ColorSelectorPopover);
+    _this = _super.call(this, props);
+    _this.initColorOptions = function () {
+      var colorConfigs = _this.props.colorConfigs;
+      _this.colorOptions = colorConfigs.map(function (colorOption) {
+        if (!colorOption.border_color) {
+          var _hexToRgb = hexToRgb(colorOption.color),
+            r = _hexToRgb.r,
+            g = _hexToRgb.g,
+            b = _hexToRgb.b;
+          return _objectSpread(_objectSpread({}, colorOption), {}, {
+            border_color: "rgb(".concat(Math.max(r - 20, 0), ", ").concat(Math.max(g - 20, 0), ", ").concat(Math.max(b - 20, 0), ")")
+          });
+        }
+        return colorOption;
+      });
+    };
+    _this.onSelectColor = function (color) {
+      _this.props.onSelectColor(color);
+      _this.props.toggle();
+    };
+    _this.initColorOptions();
+    return _this;
+  }
+  _createClass(ColorSelectorPopover, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        target = _this$props.target,
+        placement = _this$props.placement,
+        hideArrow = _this$props.hideArrow,
+        selectedColor = _this$props.selectedColor;
+      var upperCaseSelectedColor = selectedColor.toUpperCase();
+      return /*#__PURE__*/React.createElement(DTablePopover, {
+        target: target,
+        placement: placement || 'auto-start',
+        hideArrow: hideArrow,
+        popoverClassName: "statistic-color-selector",
+        hideDTablePopover: this.props.toggle,
+        hideDTablePopoverWithEsc: this.props.toggle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-color-selector-wrapper"
+      }, this.colorOptions.map(function (colorOption) {
+        var color = colorOption.color,
+          border_color = colorOption.border_color,
+          text_color = colorOption.text_color;
+        return /*#__PURE__*/React.createElement("div", {
+          key: "statistic-color-option-".concat(color),
+          className: "statistic-color-option",
+          onClick: function onClick() {
+            return _this2.onSelectColor(color);
+          },
+          style: {
+            backgroundColor: color,
+            borderColor: border_color
+          }
+        }, color === upperCaseSelectedColor && /*#__PURE__*/React.createElement("i", {
+          className: "dtable-font dtable-icon-check-mark",
+          style: {
+            color: text_color
+          }
+        }));
+      })));
+    }
+  }]);
+  return ColorSelectorPopover;
+}(Component);
+ColorSelectorPopover.defaultProps = {
+  hideArrow: true
+};
+export default ColorSelectorPopover;