dtable-statistic 4.2.1 → 4.3.0

package/es/stat-editor/stat-settings/color-setting/color-picker.js

@@ -1,59 +1,58 @@
-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 from 'react';
 import { ChromePicker } from 'react-color';
 import '../../../assets/css/color-picker.css';
-var COVER = {
+const COVER = {
   position: 'fixed',
   top: '0px',
   right: '0px',
   bottom: '0px',
   left: '0px'
 };
-var ColorPicker = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ColorPicker, _React$PureComponent);
-  var _super = _createSuper(ColorPicker);
-  function ColorPicker(props) {
-    var _this;
-    _classCallCheck(this, ColorPicker);
-    _this = _super.call(this, props);
-    _this.onInputChanged = function (event) {
-      var value = event.target.value;
-      if (value === _this.state.activeColor) return;
+class ColorPicker extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onInputChanged = event => {
+      const value = event.target.value;
+      if (value === this.state.activeColor) return;
       // todo valid color
-      _this.updateColor(value);
-      _this.setState({
+      this.updateColor(value);
+      this.setState({
         activeColor: value
       });
     };
-    _this.onPickColorToggle = function () {
-      var readOnly = _this.props.readOnly;
+    this.onPickColorToggle = () => {
+      const {
+        readOnly
+      } = this.props;
       if (readOnly) return;
-      _this.setState({
-        isShowColorPicker: !_this.state.isShowColorPicker
+      this.setState({
+        isShowColorPicker: !this.state.isShowColorPicker
       });
     };
-    _this.onPickChanged = function (color) {
-      if (color.hex === _this.state.activeColor) return;
-      _this.updateColor(color);
-      _this.setState({
+    this.onPickChanged = color => {
+      if (color.hex === this.state.activeColor) return;
+      this.updateColor(color);
+      this.setState({
         activeColor: color.hex
       });
     };
-    _this.updateColor = function (color) {
-      var isPickAllColor = _this.props.isPickAllColor;
-      var colorValue = isPickAllColor ? color : color.hex;
-      _this.props.onColorChanged(colorValue);
+    this.updateColor = color => {
+      const {
+        isPickAllColor
+      } = this.props;
+      const colorValue = isPickAllColor ? color : color.hex;
+      this.props.onColorChanged(colorValue);
     };
-    _this.getPopoverStyle = function () {
-      if (!_this.colorPickerContainerRef) return {};
-      var _this$colorPickerCont = _this.colorPickerContainerRef.getBoundingClientRect(),
-        top = _this$colorPickerCont.top,
-        height = _this$colorPickerCont.height;
-      var clientHeight = document.body.clientHeight;
-      var selectTop = top + height;
+    this.getPopoverStyle = () => {
+      if (!this.colorPickerContainerRef) return {};
+      const {
+        top,
+        height
+      } = this.colorPickerContainerRef.getBoundingClientRect();
+      const {
+        clientHeight
+      } = document.body;
+      const selectTop = top + height;
       if (clientHeight - selectTop < 247) {
         // 247: ChromePicker's height
         return {
@@ -69,60 +68,54 @@ var ColorPicker = /*#__PURE__*/function (_React$PureComponent) {
         zIndex: '2'
       };
     };
-    _this.state = {
+    this.state = {
       isShowColorPicker: false,
       activeColor: props.activeColor
     };
-    _this.colorPickerContainerRef = null;
-    return _this;
+    this.colorPickerContainerRef = null;
   }
-  _createClass(ColorPicker, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.setState({
-        activeColor: nextProps.activeColor
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var activeColor = this.state.activeColor;
-      var isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
-      var readOnly = this.props.readOnly;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-color-picker-container",
-        ref: function ref(_ref) {
-          return _this2.colorPickerContainerRef = _ref;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "picker-control ".concat(readOnly ? 'readOnly' : '')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "color-control ".concat(isWhiteColor ? 'white-color' : '', " ").concat(readOnly ? 'readOnly' : ''),
-        onClick: this.onPickColorToggle,
-        style: {
-          background: activeColor
-        }
-      }), /*#__PURE__*/React.createElement("input", {
-        className: "text-control",
-        type: "text",
-        value: activeColor,
-        onChange: this.onInputChanged,
-        readOnly: readOnly
-      })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
-        style: this.getPopoverStyle()
-      }, /*#__PURE__*/React.createElement("div", {
-        style: COVER,
-        onClick: this.onPickColorToggle
-      }), /*#__PURE__*/React.createElement(ChromePicker, {
-        disableAlpha: true,
-        color: activeColor,
-        onChange: this.onPickChanged
-      })));
-    }
-  }]);
-  return ColorPicker;
-}(React.PureComponent);
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      activeColor: nextProps.activeColor
+    });
+  }
+  render() {
+    const {
+      activeColor
+    } = this.state;
+    const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
+    const {
+      readOnly
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-color-picker-container",
+      ref: ref => this.colorPickerContainerRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "picker-control ".concat(readOnly ? 'readOnly' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "color-control ".concat(isWhiteColor ? 'white-color' : '', " ").concat(readOnly ? 'readOnly' : ''),
+      onClick: this.onPickColorToggle,
+      style: {
+        background: activeColor
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      className: "text-control",
+      type: "text",
+      value: activeColor,
+      onChange: this.onInputChanged,
+      readOnly: readOnly
+    })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
+      style: this.getPopoverStyle()
+    }, /*#__PURE__*/React.createElement("div", {
+      style: COVER,
+      onClick: this.onPickColorToggle
+    }), /*#__PURE__*/React.createElement(ChromePicker, {
+      disableAlpha: true,
+      color: activeColor,
+      onChange: this.onPickChanged
+    })));
+  }
+}
 ColorPicker.defaultProps = {
   activeColor: '#000000'
 };

package/es/stat-editor/stat-settings/color-setting/color-use-type-selector.js

@@ -1,7 +1,3 @@
-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 { Input } from 'reactstrap';
@@ -12,26 +8,25 @@ import ColorRulesPopover from '../../../components/popover/color-rules-popover';
 import { getValidColorRules } from '../../../utils/color-utils';
 import { STAT_TYPE, TYPE_COLOR_USING, TYPE_DISPLAY_COLOR_USING } from '../../../constants';
 import { COLOR_RULE_FILTER_TYPE_MAP } from '../../../constants/color-rules';
-var COVER = {
+const COVER = {
   top: '0px',
   right: '0px',
   bottom: '0px',
   left: '0px'
 };
-var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
-  _inherits(ColorUseTypeSelector, _Component);
-  var _super = _createSuper(ColorUseTypeSelector);
-  function ColorUseTypeSelector(props) {
-    var _this;
-    _classCallCheck(this, ColorUseTypeSelector);
-    _this = _super.call(this, props);
-    _this.getPopoverStyle = function () {
-      if (!_this.colorPickerContainerRef) return {};
-      var _this$colorPickerCont = _this.colorPickerContainerRef.getBoundingClientRect(),
-        top = _this$colorPickerCont.top,
-        height = _this$colorPickerCont.height;
-      var clientHeight = document.body.clientHeight;
-      var selectTop = top + height;
+class ColorUseTypeSelector extends Component {
+  constructor(props) {
+    super(props);
+    this.getPopoverStyle = () => {
+      if (!this.colorPickerContainerRef) return {};
+      const {
+        top,
+        height
+      } = this.colorPickerContainerRef.getBoundingClientRect();
+      const {
+        clientHeight
+      } = document.body;
+      const selectTop = top + height;
       if (clientHeight - selectTop < 247) {
         // 247: ReactColor's height
         return {
@@ -47,7 +42,7 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
         zIndex: '2'
       };
     };
-    _this.getUsableColorTypes = function (chartType) {
+    this.getUsableColorTypes = chartType => {
       switch (chartType) {
         case STAT_TYPE.BAR_GROUP:
         case STAT_TYPE.BAR_STACK:
@@ -71,11 +66,15 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.initColorTypeOptions = function () {
-      var chart = _this.props.chart;
-      var type = chart.type;
-      var useableColorTypes = _this.getUsableColorTypes(type);
-      return useableColorTypes.map(function (colorType) {
+    this.initColorTypeOptions = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        type
+      } = chart;
+      const useableColorTypes = this.getUsableColorTypes(type);
+      return useableColorTypes.map(colorType => {
         return {
           value: colorType,
           label: /*#__PURE__*/React.createElement("span", {
@@ -84,15 +83,20 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
         };
       });
     };
-    _this.getSelectedSpecificColor = function () {
-      var _this$props = _this.props,
-        chart = _this$props.chart,
-        labelColorConfigs = _this$props.labelColorConfigs;
-      var type = chart.type;
+    this.getSelectedSpecificColor = () => {
+      const {
+        chart,
+        labelColorConfigs
+      } = this.props;
+      const {
+        type
+      } = chart;
       switch (type) {
         case STAT_TYPE.BAR:
           {
-            var y_axis_label_color = chart.y_axis_label_color;
+            const {
+              y_axis_label_color
+            } = chart;
             if (y_axis_label_color) {
               return y_axis_label_color.toUpperCase();
             }
@@ -100,7 +104,9 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
           }
         case STAT_TYPE.HORIZONTAL_BAR:
           {
-            var horizontal_axis_label_color = chart.horizontal_axis_label_color;
+            const {
+              horizontal_axis_label_color
+            } = chart;
             if (horizontal_axis_label_color) {
               return horizontal_axis_label_color.toUpperCase();
             }
@@ -112,9 +118,13 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.getColorRules = function () {
-      var chart = _this.props.chart;
-      var type = chart.type;
+    this.getColorRules = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        type
+      } = chart;
       switch (type) {
         case STAT_TYPE.BAR:
           {
@@ -130,9 +140,13 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.getColorRuleTypes = function () {
-      var chart = _this.props.chart;
-      var type = chart.type;
+    this.getColorRuleTypes = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        type
+      } = chart;
       switch (type) {
         case STAT_TYPE.BAR:
         case STAT_TYPE.HORIZONTAL_BAR:
@@ -145,13 +159,16 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
           }
       }
     };
-    _this.onSelectColorOption = function (_ref) {
-      var color_option = _ref.value;
-      var _this$props2 = _this.props,
-        chart = _this$props2.chart,
-        labelColorConfigs = _this$props2.labelColorConfigs;
-      var updatedChart = Object.assign({}, chart, {
-        color_option: color_option
+    this.onSelectColorOption = _ref => {
+      let {
+        value: color_option
+      } = _ref;
+      const {
+        chart,
+        labelColorConfigs
+      } = this.props;
+      let updatedChart = Object.assign({}, chart, {
+        color_option
       });
       if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
         switch (chart.type) {
@@ -171,33 +188,35 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
             }
         }
       }
-      _this.props.updateChart(updatedChart);
+      this.props.updateChart(updatedChart);
     };
-    _this.onToggleColorSelector = function () {
-      _this.setState({
-        isShowColorSelector: !_this.state.isShowColorSelector
-      }, function () {
-        if (!_this.state.isShowColorSelector) {
-          _this.modifySpecificColor(_this.state.specificColor);
+    this.onToggleColorSelector = () => {
+      this.setState({
+        isShowColorSelector: !this.state.isShowColorSelector
+      }, () => {
+        if (!this.state.isShowColorSelector) {
+          this.modifySpecificColor(this.state.specificColor);
         }
       });
     };
-    _this.showColorRulesEditor = function () {
-      if (_this.state.isShowColorRulesEditor) {
+    this.showColorRulesEditor = () => {
+      if (this.state.isShowColorRulesEditor) {
         return;
       }
-      _this.setState({
+      this.setState({
         isShowColorRulesEditor: true
       });
     };
-    _this.hideColorRulesEditor = function () {
-      _this.setState({
+    this.hideColorRulesEditor = () => {
+      this.setState({
         isShowColorRulesEditor: false
       });
     };
-    _this.modifySpecificColor = function (color) {
-      var chart = _this.props.chart;
-      var updatedChart = Object.assign({}, chart);
+    this.modifySpecificColor = color => {
+      const {
+        chart
+      } = this.props;
+      let updatedChart = Object.assign({}, chart);
       switch (chart.type) {
         case STAT_TYPE.BAR:
           {
@@ -214,21 +233,23 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
             break;
           }
       }
-      _this.setState({
+      this.setState({
         specificColor: color
-      }, function () {
-        _this.props.updateChart(updatedChart);
+      }, () => {
+        this.props.updateChart(updatedChart);
       });
     };
-    _this.modifyHex = function (colorSelection) {
-      if (colorSelection.hex === _this.state.specificColor) return;
-      _this.setState({
+    this.modifyHex = colorSelection => {
+      if (colorSelection.hex === this.state.specificColor) return;
+      this.setState({
         specificColor: colorSelection.hex
       });
     };
-    _this.modifyColorRules = function (colorRules) {
-      var chart = _this.props.chart;
-      var updatedChart = Object.assign({}, chart);
+    this.modifyColorRules = colorRules => {
+      const {
+        chart
+      } = this.props;
+      let updatedChart = Object.assign({}, chart);
       switch (chart.type) {
         case STAT_TYPE.BAR:
           {
@@ -245,17 +266,17 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
             break;
           }
       }
-      _this.props.updateChart(updatedChart);
+      this.props.updateChart(updatedChart);
     };
-    _this.renderSpecificColorSelector = function () {
-      var specificColor = _this.state.specificColor;
-      var id = 'statistic_selected_specific_color';
+    this.renderSpecificColorSelector = () => {
+      const {
+        specificColor
+      } = this.state;
+      const id = 'statistic_selected_specific_color';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         id: id,
         className: "selected-specific-color mt-1",
-        ref: function ref(_ref2) {
-          return _this.colorPickerContainerRef = _ref2;
-        }
+        ref: ref => this.colorPickerContainerRef = ref
       }, /*#__PURE__*/React.createElement("div", {
         className: "selected-specific-color-wrapper"
       }, /*#__PURE__*/React.createElement("span", {
@@ -263,34 +284,34 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
         style: {
           backgroundColor: specificColor
         },
-        onClick: _this.onToggleColorSelector
+        onClick: this.onToggleColorSelector
       }), /*#__PURE__*/React.createElement(Input, {
         type: "text",
         className: "specific-color-input",
         value: specificColor,
-        onChange: function onChange(event) {
-          return _this.modifySpecificColor(event.target.value);
-        }
-      }))), _this.state.isShowColorSelector && /*#__PURE__*/React.createElement("div", {
-        style: _this.getPopoverStyle()
+        onChange: event => this.modifySpecificColor(event.target.value)
+      }))), this.state.isShowColorSelector && /*#__PURE__*/React.createElement("div", {
+        style: this.getPopoverStyle()
       }, /*#__PURE__*/React.createElement("div", {
         className: "position-fixed",
         style: COVER,
-        onClick: _this.onToggleColorSelector
+        onClick: this.onToggleColorSelector
       }), /*#__PURE__*/React.createElement(ReactColor, {
         disableAlpha: true,
         color: specificColor,
-        onChange: _this.modifyHex
+        onChange: this.modifyHex
       })));
     };
-    _this.renderColorRulesEditor = function () {
-      var labelColorConfigs = _this.props.labelColorConfigs;
-      var colorRules = _this.getColorRules();
-      var colorRuleTypes = _this.getColorRuleTypes();
-      var rulesLen = colorRules ? colorRules.length : 0;
-      var hasRules = rulesLen > 0;
-      var id = 'statistic_color_rules_toggle';
-      var msg = intl.get('Add_rule');
+    this.renderColorRulesEditor = () => {
+      const {
+        labelColorConfigs
+      } = this.props;
+      const colorRules = this.getColorRules();
+      const colorRuleTypes = this.getColorRuleTypes();
+      const rulesLen = colorRules ? colorRules.length : 0;
+      const hasRules = rulesLen > 0;
+      const id = 'statistic_color_rules_toggle';
+      let msg = intl.get('Add_rule');
       if (rulesLen === 1) {
         msg = intl.get('Added_1_rule');
       } else if (rulesLen > 1) {
@@ -301,48 +322,45 @@ var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         id: id,
         className: classnames('statistic-color-rules-toggle', 'mt-1', hasRules ? 'statistic-edit-color-rule' : 'statistic-add-color-rule'),
-        onClick: _this.showColorRulesEditor
+        onClick: this.showColorRulesEditor
       }, hasRules ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, msg), /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-rename"
       })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-add-table"
       }), /*#__PURE__*/React.createElement("span", {
         className: "ml-2"
-      }, msg))), _this.state.isShowColorRulesEditor && /*#__PURE__*/React.createElement(ColorRulesPopover, {
+      }, msg))), this.state.isShowColorRulesEditor && /*#__PURE__*/React.createElement(ColorRulesPopover, {
         target: id,
         colorRules: colorRules,
         colorRuleTypes: colorRuleTypes,
         labelColorConfigs: labelColorConfigs,
-        hideColorRulesPopover: _this.hideColorRulesEditor,
-        updateColorRules: _this.modifyColorRules
+        hideColorRulesPopover: this.hideColorRulesEditor,
+        updateColorRules: this.modifyColorRules
       }));
     };
-    _this.state = {
+    this.state = {
       isShowColorSelector: false,
       isShowColorRulesEditor: false,
-      specificColor: _this.getSelectedSpecificColor()
+      specificColor: this.getSelectedSpecificColor()
     };
-    _this.colorOptions = _this.initColorTypeOptions();
-    _this.isToggleColorRulesEditor = false;
-    return _this;
+    this.colorOptions = this.initColorTypeOptions();
+    this.isToggleColorRulesEditor = false;
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      color_option
+    } = chart;
+    const selectedColorOption = this.colorOptions.find(colorOption => colorOption.value === color_option) || this.colorOptions[0];
+    return /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedColorOption,
+      options: this.colorOptions,
+      onChange: this.onSelectColorOption
+    }), color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
   }
-  _createClass(ColorUseTypeSelector, [{
-    key: "render",
-    value: function render() {
-      var chart = this.props.chart;
-      var color_option = chart.color_option;
-      var selectedColorOption = this.colorOptions.find(function (colorOption) {
-        return colorOption.value === color_option;
-      }) || this.colorOptions[0];
-      return /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
-        value: selectedColorOption,
-        options: this.colorOptions,
-        onChange: this.onSelectColorOption
-      }), color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
-    }
-  }]);
-  return ColorUseTypeSelector;
-}(Component);
+}
 export default ColorUseTypeSelector;