dtable-statistic 4.2.2 → 4.3.0

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/heat-map-settings.js

@@ -1,89 +1,81 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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 intl from 'react-intl-universal';
 import { Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import ColorGroupSelector from '../../color-setting/color-group-selector';
 import { DEFAULT_GRID_DISTANCE, DEFAULT_GRID_SIZE } from '../../../../constants';
-var HeatMapStyleSettings = /*#__PURE__*/function (_Component) {
-  _inherits(HeatMapStyleSettings, _Component);
-  var _super = _createSuper(HeatMapStyleSettings);
-  function HeatMapStyleSettings() {
-    var _this;
-    _classCallCheck(this, HeatMapStyleSettings);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.renderColorSetting = function () {
-      var _this$props = _this.props,
-        onChangeColor = _this$props.onChangeColor,
-        statItem = _this$props.statItem;
+class HeatMapStyleSettings extends Component {
+  constructor() {
+    super(...arguments);
+    this.renderColorSetting = () => {
+      const {
+        onChangeColor,
+        statItem
+      } = this.props;
       return /*#__PURE__*/React.createElement(ColorGroupSelector, {
         currentColor: statItem.data_color,
         onChangeColor: onChangeColor
       });
     };
-    _this.onSubmit = function (evt) {
-      var statItem = _this.props.statItem;
-      var key = evt.target.name;
-      var value = evt.target.value.trim().replace(/[^0-9]/g, '');
-      var newValue = value ? Number(value) : null;
+    this.onSubmit = evt => {
+      const {
+        statItem
+      } = this.props;
+      const key = evt.target.name;
+      const value = evt.target.value.trim().replace(/[^0-9]/g, '');
+      const newValue = value ? Number(value) : null;
       if (newValue == statItem[key]) {
         return;
       }
       if (newValue) {
-        _this.props.updateStatItem(Object.assign({}, statItem, _defineProperty({}, key, newValue)));
+        this.props.updateStatItem(Object.assign({}, statItem, {
+          [key]: newValue
+        }));
       }
     };
-    _this.onKeyDown = function (e) {
+    this.onKeyDown = e => {
       if (e.key == 'Enter') {
         e.preventDefault();
         e.target.blur();
       }
     };
-    return _this;
   }
-  _createClass(HeatMapStyleSettings, [{
-    key: "render",
-    value: function render() {
-      var statItem = this.props.statItem;
-      var grid_size = statItem.grid_size,
-        grid_distance = statItem.grid_distance;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderColorSetting(), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(Label, {
-        for: "grid-size"
-      }, intl.get('Grid_size')), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input, {
-        type: "text",
-        id: "grid-size",
-        name: "grid_size",
-        defaultValue: grid_size || DEFAULT_GRID_SIZE,
-        onBlur: this.onSubmit,
-        onKeyDown: this.onKeyDown
-      }), /*#__PURE__*/React.createElement(InputGroupAddon, {
-        addonType: "append"
-      }, "px"))), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-item"
-      }, /*#__PURE__*/React.createElement(Label, {
-        for: "grid-distance"
-      }, intl.get('Grid_distance')), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input, {
-        type: "text",
-        id: "grid-distance",
-        name: "grid_distance",
-        defaultValue: grid_distance || DEFAULT_GRID_DISTANCE,
-        onBlur: this.onSubmit,
-        onKeyDown: this.onKeyDown
-      }), /*#__PURE__*/React.createElement(InputGroupAddon, {
-        addonType: "append"
-      }, "px"))));
-    }
-  }]);
-  return HeatMapStyleSettings;
-}(Component);
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      grid_size,
+      grid_distance
+    } = statItem;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderColorSetting(), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, {
+      for: "grid-size"
+    }, intl.get('Grid_size')), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input, {
+      type: "text",
+      id: "grid-size",
+      name: "grid_size",
+      defaultValue: grid_size || DEFAULT_GRID_SIZE,
+      onBlur: this.onSubmit,
+      onKeyDown: this.onKeyDown
+    }), /*#__PURE__*/React.createElement(InputGroupAddon, {
+      addonType: "append"
+    }, "px"))), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, {
+      for: "grid-distance"
+    }, intl.get('Grid_distance')), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input, {
+      type: "text",
+      id: "grid-distance",
+      name: "grid_distance",
+      defaultValue: grid_distance || DEFAULT_GRID_DISTANCE,
+      onBlur: this.onSubmit,
+      onKeyDown: this.onKeyDown
+    }), /*#__PURE__*/React.createElement(InputGroupAddon, {
+      addonType: "append"
+    }, "px"))));
+  }
+}
 export default HeatMapStyleSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/map-setting.js

@@ -1,8 +1,3 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import RcSlider from 'rc-slider';
 import intl from 'react-intl-universal';
@@ -10,39 +5,40 @@ import ColorGroupSelector from '../../color-setting/color-group-selector';
 import { DTableSelect } from '../../../../components';
 import { LABEL_COLORS } from '../../../../constants';
 import '../../../../assets/css/slider.css';
-var MapStyleSetting = /*#__PURE__*/function (_Component) {
-  _inherits(MapStyleSetting, _Component);
-  var _super = _createSuper(MapStyleSetting);
-  function MapStyleSetting(props) {
-    var _this;
-    _classCallCheck(this, MapStyleSetting);
-    _this = _super.call(this, props);
-    _this.onSliderChange = function (value) {
-      _this.setState({
+class MapStyleSetting extends Component {
+  constructor(props) {
+    super(props);
+    this.onSliderChange = value => {
+      this.setState({
         legendSize: value
       });
     };
-    _this.onAfterChange = function (value) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.onAfterChange = value => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         legend_size: value
       }));
     };
-    _this.getSelectedDirectionOption = function () {
-      var statItem = _this.props.statItem;
-      var _statItem$legend_dire = statItem.legend_direction,
-        legend_direction = _statItem$legend_dire === void 0 ? 'vertical' : _statItem$legend_dire;
+    this.getSelectedDirectionOption = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        legend_direction = 'vertical'
+      } = statItem;
       if (legend_direction === 'vertical') {
-        return _this.legendDirectionOptions[0];
+        return this.legendDirectionOptions[0];
       }
-      return _this.legendDirectionOptions[1];
+      return this.legendDirectionOptions[1];
     };
-    _this.renderLabelColor = function () {
+    this.renderLabelColor = () => {
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Bubble_color')), /*#__PURE__*/React.createElement("div", {
         className: "row gutters-xs ml-0"
-      }, LABEL_COLORS.map(function (item, index) {
+      }, LABEL_COLORS.map((item, index) => {
         return /*#__PURE__*/React.createElement("div", {
           key: "map-bubble-color-".concat(index),
           className: "col-auto pl-0"
@@ -50,60 +46,67 @@ var MapStyleSetting = /*#__PURE__*/function (_Component) {
           className: "colorinput"
         }, /*#__PURE__*/React.createElement("span", {
           className: "colorinput-color statistic-colorinput",
-          onClick: _this.updateBubbleColor.bind(_assertThisInitialized(_this), item),
+          onClick: this.updateBubbleColor.bind(this, item),
           style: {
             backgroundColor: item,
             borderColor: item
           }
-        }, item === (_this.props.statItem.bubble_color || LABEL_COLORS[0]) && /*#__PURE__*/React.createElement("i", {
+        }, item === (this.props.statItem.bubble_color || LABEL_COLORS[0]) && /*#__PURE__*/React.createElement("i", {
           className: "dtable-font dtable-icon-check-mark statistic-check-mark"
         }))));
       })));
     };
-    _this.updateBubbleColor = function (color) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.updateBubbleColor = color => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         bubble_color: color
       }));
     };
-    _this.renderColorSetting = function () {
-      var _this$props = _this.props,
-        onChangeColor = _this$props.onChangeColor,
-        statItem = _this$props.statItem;
-      var type = statItem.type;
+    this.renderColorSetting = () => {
+      const {
+        onChangeColor,
+        statItem
+      } = this.props;
+      const {
+        type
+      } = statItem;
       return !type.includes('bubble') ? /*#__PURE__*/React.createElement(ColorGroupSelector, {
         currentColor: statItem.data_color,
         onChangeColor: onChangeColor
-      }) : _this.renderLabelColor();
+      }) : this.renderLabelColor();
     };
-    _this.onDirectionChange = function (option) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.onDirectionChange = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         legend_direction: option.value
       }));
     };
-    _this.renderLegendDirection = function () {
+    this.renderLegendDirection = () => {
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_direction')), /*#__PURE__*/React.createElement(DTableSelect, {
-        value: _this.getSelectedDirectionOption(),
-        options: _this.legendDirectionOptions,
-        onChange: _this.onDirectionChange
+        value: this.getSelectedDirectionOption(),
+        options: this.legendDirectionOptions,
+        onChange: this.onDirectionChange
       }));
     };
-    _this.renderLegendSize = function () {
+    this.renderLegendSize = () => {
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_size')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RcSlider, {
-        value: _this.state.legendSize,
+        value: this.state.legendSize,
         step: 0.5,
         min: 1,
         max: 5,
-        onChange: _this.onSliderChange,
-        onAfterChange: _this.onAfterChange
+        onChange: this.onSliderChange,
+        onAfterChange: this.onAfterChange
       })));
     };
-    _this.legendDirectionOptions = [{
+    this.legendDirectionOptions = [{
       value: 'vertical',
       label: /*#__PURE__*/React.createElement("span", {
         className: "select-option-name"
@@ -114,19 +117,14 @@ var MapStyleSetting = /*#__PURE__*/function (_Component) {
         className: "select-option-name"
       }, intl.get('Horizontal'))
     }];
-    _this.state = {
+    this.state = {
       legendSize: props.statItem.legend_size || 1
     };
-    return _this;
   }
-  _createClass(MapStyleSetting, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderColorSetting(), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderLegendDirection(), this.renderLegendSize());
-    }
-  }]);
-  return MapStyleSetting;
-}(Component);
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderColorSetting(), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderLegendDirection(), this.renderLegendSize());
+  }
+}
 export default MapStyleSetting;