sea-chart 0.0.9 → 0.0.10

package/dist/assets/css/time-picker.css

@@ -0,0 +1,9 @@
+.sea-chart-time-input-container {
+  display: flex;
+}
+
+.sea-chart-concat {
+  line-height: 38px;
+  width: 20px;
+  text-align: center;
+}

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

@@ -0,0 +1,175 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import intl from '../../../intl';
+import RuleFilters from './rule-filters';
+import ColorSelectorPopover from '../color-selector-popover';
+import CommonAddTool from '../../common-add-tool';
+class ColorRule extends 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 || intl.get('Define_rule');
+    const canAddFilter = filters.length < 8;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('statistic-color-rule-item', {
+        'editing': isEditing
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "d-flex justify-content-between pr-4"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-color-rule-title",
+      onClick: () => this.props.setEditingRuleIndex(ruleIndex)
+    }, /*#__PURE__*/React.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.createElement("i", {
+      className: "dtable-font dtable-icon-drop-down",
+      style: {
+        color: selectedColorConfig.text_color
+      }
+    }), this.state.isColorPopoverShow && /*#__PURE__*/React.createElement(ColorSelectorPopover, {
+      placement: "bottom-start",
+      hideArrow: false,
+      target: target,
+      selectedColor: color,
+      colorConfigs: labelColorConfigs,
+      toggle: this.hideColorPopover,
+      onSelectColor: this.onSelectColor
+    })), /*#__PURE__*/React.createElement("div", {
+      className: classnames('statistic-color-rule-name text-truncate', {
+        'invalid': !!ruleName
+      }),
+      title: ruleTitle
+    }, ruleTitle)), /*#__PURE__*/React.createElement("span", {
+      className: "statistic-delete-color-rule"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-delete",
+      onClick: this.deleteRule
+    }))), isEditing && /*#__PURE__*/React.createElement("div", {
+      className: "statistic-color-rule-filters-wrapper"
+    }, /*#__PURE__*/React.createElement(RuleFilters, {
+      filterTypes: colorRuleTypes,
+      filters: rule.filters,
+      filterConjunction: filter_conjunction,
+      getFilterConfigByType: this.props.getFilterConfigByType,
+      modifyConjunction: this.modifyFilterConjunction,
+      updateFilters: this.updateFilters
+    }), /*#__PURE__*/React.createElement(CommonAddTool, {
+      className: classnames('statistic-btn-add-color-rule-filter', {
+        'disabled': !canAddFilter
+      }),
+      callBack: this.addFilter,
+      footerName: intl.get('Add_condition'),
+      addIconClassName: "popover-add-icon"
+    })));
+  }
+}
+export default ColorRule;

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

@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import ColorRule from './color-rule';
+class ColorRules extends 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.createElement("div", {
+      className: "statistic-color-rules"
+    }, rules.map((rule, ruleIndex) => {
+      const isEditing = editingRuleIndex === ruleIndex;
+      return /*#__PURE__*/React.createElement(ColorRule, {
+        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
+      });
+    }));
+  }
+}
+export default ColorRules;

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

@@ -0,0 +1,214 @@
+import React from 'react';
+import intl from '../../../../intl';
+import DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
+import NumberInput from './number-input';
+import { COLOR_RULE_FILTER_TYPE_MAP, EMPTY_PREDICATE } from '../../../../constants/color-rules';
+const INPUT_CMP_TYPE_MAP = {
+  NUMBER: 'number'
+};
+class Filter extends React.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 (EMPTY_PREDICATE.includes(predicate)) {
+          return null;
+        }
+        return {
+          value: predicate,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.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.createElement(NumberInput, {
+              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.createElement(DTableCustomizeSelect, {
+              value: selectedConjunction,
+              options: conjunctionOptions,
+              onSelectOption: this.onSelectConjunction
+            });
+          }
+        default:
+          {
+            return /*#__PURE__*/React.createElement("span", {
+              className: "selected-conjunction-show"
+            }, intl.get(filterConjunction));
+          }
+      }
+    };
+    this.renderFilterTerm = () => {
+      const {
+        filter
+      } = this.props;
+      const {
+        filter_type,
+        filter_predicate
+      } = filter;
+
+      // predicate is empty or not empty
+      if (EMPTY_PREDICATE.includes(filter_predicate)) {
+        return null;
+      }
+      switch (filter_type) {
+        case 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.createElement("div", {
+      className: "filter-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "delete-filter",
+      onClick: this.onDeleteFilter
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "condition"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-conjunction"
+    }, this.renderConjunction()), /*#__PURE__*/React.createElement("div", {
+      className: "filter-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "filter-column"
+    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+      value: selectedFilterType,
+      options: filterTypeOptions,
+      onSelectOption: this.onSelectFilterBy
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "filter-predicate ml-2"
+    }, /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+      value: selectedPredicate,
+      options: this.predicateOptions,
+      onSelectOption: this.onSelectPredicate
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "filter-term ml-2"
+    }, this.renderFilterTerm()))));
+  }
+}
+export default Filter;

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

@@ -0,0 +1,210 @@
+.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;
+}