dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,218 @@
+"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 _dtableUtils = require("dtable-utils");
+var _DTableCommonAddTool = _interopRequireDefault(require("dtable-ui-component/lib/DTableCommonAddTool"));
+var _DTablePopover = _interopRequireDefault(require("dtable-ui-component/lib/DTablePopover"));
+var _colorRules = _interopRequireDefault(require("./color-rules"));
+var _colorRules2 = require("../../constants/color-rules");
+require("../../assets/css/color-rules-popover.css");
+const SAFE_DISTANCE_2_BOTTOM = 30; // Keep the distance to the bottom
+
+class ColorRulesPopover extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getColorConfigByColor = color => {
+      return this.props.labelColorConfigs.find(colorConfig => colorConfig.color === color) || {};
+    };
+    this.getFilterDisplay = filter => {
+      const {
+        filter_type,
+        filter_predicate,
+        filter_term
+      } = filter;
+      const name = _colorRules2.DISPLAY_COLOR_RULE_FILTER_TYPE[filter_type];
+      const template = "".concat(_reactIntlUniversal.default.get(name), " ").concat(_reactIntlUniversal.default.get(filter_predicate));
+      if (_colorRules2.EMPTY_PREDICATE.includes(filter_predicate)) {
+        return template;
+      }
+      switch (filter_type) {
+        case _colorRules2.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 = (filters, filterConjunction) => {
+      if (filters.length === 0) return '';
+      let contentText = '';
+      filterConjunction = filterConjunction || 'And';
+      filters.forEach((filter, index) => {
+        let filterContentText = index === 0 ? '' : " ".concat(filterConjunction === 'And' ? _reactIntlUniversal.default.get('And') : _reactIntlUniversal.default.get('Or'));
+        let filterDisplay = this.getFilterDisplay(filter);
+        if (filterDisplay) {
+          contentText = contentText + filterContentText + " ".concat(filterDisplay);
+        }
+      });
+      return contentText;
+    };
+    this.getRulesName = () => {
+      const {
+        colorRules
+      } = this.state;
+      return colorRules.map(rule => {
+        const {
+          filters,
+          filter_conjunction
+        } = rule;
+        return this.getRuleName(filters, filter_conjunction);
+      });
+    };
+    this.getFilterConfigByType = filterType => {
+      if (!filterType) {
+        return {};
+      }
+      switch (filterType) {
+        case _colorRules2.COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE:
+          {
+            return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.NUMBER];
+          }
+        default:
+          {
+            return {};
+          }
+      }
+    };
+    this.generateDefaultFilter = filterType => {
+      const {
+        filterPredicateList
+      } = this.getFilterConfigByType(filterType);
+      if (!filterPredicateList) {
+        return null;
+      }
+      const filterPredicate = filterPredicateList[0];
+      return {
+        filter_type: filterType,
+        filter_predicate: filterPredicate,
+        filter_term: null
+      };
+    };
+    this.addRule = () => {
+      const {
+        colorRuleTypes,
+        labelColorConfigs
+      } = this.props;
+      const {
+        colorRules
+      } = this.state;
+      const defaultRuleType = colorRuleTypes[0];
+      const defaultFilter = defaultRuleType && this.generateDefaultFilter(defaultRuleType);
+      if (!defaultFilter) return;
+      let updatedColorRules = [...colorRules];
+      const defaultColorConfig = labelColorConfigs[colorRules.length] || labelColorConfigs[0];
+      updatedColorRules.push({
+        color: defaultColorConfig.color,
+        filters: [defaultFilter],
+        filter_conjunction: 'And'
+      });
+      this.updateColorRules({
+        colorRules: updatedColorRules,
+        callback: () => {
+          this.resetPopoverPosition();
+        }
+      });
+    };
+    this.resetPopoverPosition = () => {
+      // keep the popover is visible in current window
+      const popoverWrapper = this.popover && this.popover.dtablePopoverRef && this.popover.dtablePopoverRef.parentNode.parentNode;
+      if (!popoverWrapper) return;
+      const bodyHeight = document.body.clientHeight;
+      const {
+        top,
+        height
+      } = popoverWrapper.getBoundingClientRect();
+      const offsetTop = popoverWrapper.offsetTop;
+      const offsetHeight = top + height + SAFE_DISTANCE_2_BOTTOM - bodyHeight;
+
+      // popover within the current window
+      if (offsetHeight < 0) {
+        return;
+      }
+      setTimeout(() => {
+        if (popoverWrapper) {
+          popoverWrapper.style.top = "".concat(-offsetHeight + offsetTop, "px");
+        }
+      }, 300);
+    };
+    this.updateColorRules = _ref => {
+      let {
+        colorRules,
+        callback
+      } = _ref;
+      this.setState({
+        colorRules
+      }, () => {
+        callback && callback();
+      });
+    };
+    this.hideColorRulesPopover = () => {
+      this.props.updateColorRules(this.state.colorRules);
+      this.props.hideColorRulesPopover();
+    };
+    this.state = {
+      colorRules: props.colorRules || []
+    };
+  }
+  render() {
+    const {
+      target,
+      labelColorConfigs,
+      colorRuleTypes
+    } = this.props;
+    const {
+      colorRules
+    } = this.state;
+    const hasRules = colorRules && colorRules.length > 0;
+    const rulesName = this.getRulesName();
+    const canAddRule = !rulesName.some(ruleName => !ruleName);
+    return /*#__PURE__*/_react.default.createElement(_DTablePopover.default, {
+      hideArrow: true,
+      target: target,
+      placement: "left-end",
+      ref: ref => this.popover = ref,
+      boundariesElement: document.body,
+      popoverClassName: "statistic-color-rules-popover",
+      hideDTablePopover: this.hideColorRulesPopover,
+      hideDTablePopoverWithEsc: this.hideColorRulesPopover
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-color-rules-wrapper"
+    }, !hasRules && /*#__PURE__*/_react.default.createElement("div", {
+      className: "no-color-rules"
+    }, _reactIntlUniversal.default.get('No_rules')), /*#__PURE__*/_react.default.createElement(_colorRules.default, {
+      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.default.createElement(_DTableCommonAddTool.default, {
+      className: (0, _classnames.default)('statistic-btn-add-color-rule', {
+        'disabled': !canAddRule
+      }),
+      footerName: _reactIntlUniversal.default.get('Add_rule'),
+      callBack: canAddRule ? this.addRule : () => {}
+    })));
+  }
+}
+var _default = exports.default = ColorRulesPopover;

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

@@ -0,0 +1,83 @@
+"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 _DTablePopover = _interopRequireDefault(require("dtable-ui-component/lib/DTablePopover"));
+var _utils = require("../../utils");
+class ColorSelectorPopover extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.initColorOptions = () => {
+      const {
+        colorConfigs
+      } = this.props;
+      this.colorOptions = colorConfigs.map(colorOption => {
+        if (!colorOption.border_color) {
+          const {
+            r,
+            g,
+            b
+          } = (0, _utils.hexToRgb)(colorOption.color);
+          return {
+            ...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 = color => {
+      this.props.onSelectColor(color);
+      this.props.toggle();
+    };
+    this.initColorOptions();
+  }
+  render() {
+    const {
+      target,
+      placement,
+      hideArrow,
+      selectedColor
+    } = this.props;
+    const upperCaseSelectedColor = selectedColor.toUpperCase();
+    return /*#__PURE__*/_react.default.createElement(_DTablePopover.default, {
+      target: target,
+      placement: placement || 'auto-start',
+      hideArrow: hideArrow,
+      popoverClassName: "statistic-color-selector",
+      hideDTablePopover: this.props.toggle,
+      hideDTablePopoverWithEsc: this.props.toggle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-color-selector-wrapper"
+    }, this.colorOptions.map(colorOption => {
+      const {
+        color,
+        border_color,
+        text_color
+      } = colorOption;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: "statistic-color-option-".concat(color),
+        className: "statistic-color-option",
+        onClick: () => this.onSelectColor(color),
+        style: {
+          backgroundColor: color,
+          borderColor: border_color
+        }
+      }, color === upperCaseSelectedColor && /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark",
+        style: {
+          color: text_color
+        }
+      }));
+    })));
+  }
+}
+ColorSelectorPopover.defaultProps = {
+  hideArrow: true
+};
+var _default = exports.default = ColorSelectorPopover;

package/es/constants/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_SELECTED_DASHBOARD = exports.INIT_STAT_ITEM = exports.GROUPBY_TYPE = exports.GEOLOCATION_GRANULARITY_LIST = exports.GEOLOCATION_GRANULARITY = exports.FILL_BORDER_COLOR_MAP = exports.EMPTY_NAME = exports.DTABLE_DB_SUMMARY_METHOD = exports.DEFAULT_NUMBER_FORMAT_OBJECT = exports.DEFAULT_LABEL_FONT_SIZE = exports.DEFAULT_GRID_SIZE = exports.DEFAULT_GRID_DISTANCE = exports.DEFAULT_ANNOTATION_SIZE = exports.DATE_GRANULARITY_LIST = exports.DATE_GRANULARITY = exports.DATA_SORT_TYPE_LABEL = exports.DATA_SORT_TYPES = exports.DATA_SORT_TYPE = exports.DASHBOARD_ACTION_TYPE = exports.CommonEventTypes = exports.COLOR_OPTIONS = exports.CHART_STYLE_COLORS = exports.BASIC_CHART_COLUMN_LIST = void 0;
+exports.KEY_SELECTED_DASHBOARD = exports.INIT_STAT_ITEM = exports.GROUPBY_TYPE = exports.GEOLOCATION_GRANULARITY_LIST = exports.GEOLOCATION_GRANULARITY = exports.FILL_BORDER_COLOR_MAP = exports.EMPTY_NAME = exports.DTABLE_DB_SUMMARY_METHOD = exports.DEFAULT_NUMBER_FORMAT_OBJECT = exports.DEFAULT_LABEL_FONT_SIZE = exports.DEFAULT_GRID_SIZE = exports.DEFAULT_GRID_DISTANCE = exports.DEFAULT_ANNOTATION_SIZE = exports.DATE_GRANULARITY_LIST = exports.DATE_GRANULARITY = exports.DATA_SORT_TYPE_LABEL = exports.DATA_SORT_TYPES = exports.DATA_SORT_TYPE = exports.DASHBOARD_ACTION_TYPE = exports.CommonEventTypes = exports.COLOR_OPTIONS = exports.CHART_STYLE_COLORS = exports.BASIC_STAT_TYPES = exports.BASIC_CHART_COLUMN_LIST = void 0;
 Object.defineProperty(exports, "KeyCodes", {
   enumerable: true,
   get: function () {
@@ -61,6 +61,7 @@ const STAT_TYPE = exports.STAT_TYPE = {
   PIVOT_TABLE: 'pivot_table',
   CUSTOM_BAR: 'custom_bar'
 };
+const BASIC_STAT_TYPES = exports.BASIC_STAT_TYPES = [STAT_TYPE.BAR, STAT_TYPE.BAR_GROUP, STAT_TYPE.BAR_STACK, STAT_TYPE.LINE, STAT_TYPE.GROUP_LINE, STAT_TYPE.PIE, STAT_TYPE.RING, STAT_TYPE.SCATTER, STAT_TYPE.HORIZONTAL_BAR, STAT_TYPE.HORIZONTAL_GROUP_BAR, STAT_TYPE.STACKED_HORIZONTAL_BAR, STAT_TYPE.AREA_CHART, STAT_TYPE.AREA_GROUP_CHART, STAT_TYPE.COMPARE_BAR, STAT_TYPE.COMPLETENESS_CHART, STAT_TYPE.GROUP_COMPLETENESS_CHART, STAT_TYPE.TREEMAP, STAT_TYPE.PIVOT_TABLE, STAT_TYPE.CUSTOM_BAR];
 const SUMMARY_TYPE = exports.SUMMARY_TYPE = {
   COUNT: 'count',
   ADVANCED: 'advanced'