dtable-statistic 4.2.2 → 4.3.1

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/label-font-size-editor.js

@@ -1,65 +1,50 @@
-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 { Form, FormGroup, Label } from 'reactstrap';
-var LabelFontSizeEditor = /*#__PURE__*/function (_Component) {
-  _inherits(LabelFontSizeEditor, _Component);
-  var _super = _createSuper(LabelFontSizeEditor);
-  function LabelFontSizeEditor() {
-    var _this;
-    _classCallCheck(this, LabelFontSizeEditor);
-    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.onChange = function (evt) {
-      var value = evt.target.value.trim().replace(/[^0-9]/g, '');
-      var fontSize = value ? Number(value) : null;
-      if (fontSize === _this.props.fontSize) {
+class LabelFontSizeEditor extends Component {
+  constructor() {
+    super(...arguments);
+    this.onChange = evt => {
+      const value = evt.target.value.trim().replace(/[^0-9]/g, '');
+      const fontSize = value ? Number(value) : null;
+      if (fontSize === this.props.fontSize) {
         return;
       }
       if (fontSize) {
-        _this.props.onChangeFontSize(fontSize);
+        this.props.onChangeFontSize(fontSize);
       }
     };
-    _this.onKeyDown = function (e) {
+    this.onKeyDown = e => {
       if (e.key == 'Enter') {
         e.preventDefault();
         e.target.blur();
       }
     };
-    return _this;
   }
-  _createClass(LabelFontSizeEditor, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        fontSize = _this$props.fontSize,
-        className = _this$props.className,
-        id = _this$props.id,
-        labelText = _this$props.labelText;
-      var inputID = id || 'label-font-size';
-      return /*#__PURE__*/React.createElement("div", {
-        className: "label-font-size-editor ".concat(className ? className : '')
-      }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
-        for: inputID
-      }, labelText || intl.get('Label_font_size')), /*#__PURE__*/React.createElement("div", {
-        className: "font-size-editor-wrapper"
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "text",
-        className: "form-control",
-        id: inputID,
-        defaultValue: fontSize,
-        onBlur: this.onChange,
-        onKeyDown: this.onKeyDown
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "font-size-unit"
-      }, /*#__PURE__*/React.createElement("span", null, "px"))))));
-    }
-  }]);
-  return LabelFontSizeEditor;
-}(Component);
+  render() {
+    const {
+      fontSize,
+      className,
+      id,
+      labelText
+    } = this.props;
+    const inputID = id || 'label-font-size';
+    return /*#__PURE__*/React.createElement("div", {
+      className: "label-font-size-editor ".concat(className ? className : '')
+    }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+      for: inputID
+    }, labelText || intl.get('Label_font_size')), /*#__PURE__*/React.createElement("div", {
+      className: "font-size-editor-wrapper"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      className: "form-control",
+      id: inputID,
+      defaultValue: fontSize,
+      onBlur: this.onChange,
+      onKeyDown: this.onKeyDown
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "font-size-unit"
+    }, /*#__PURE__*/React.createElement("span", null, "px"))))));
+  }
+}
 export default LabelFontSizeEditor;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/pie-chart-style-settings.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, Fragment } from 'react';
 import { Form, FormGroup, Label } from 'reactstrap';
 import intl from 'react-intl-universal';
@@ -11,23 +7,19 @@ import ToggleSetting from '../../public-setting/toggle-setting';
 import ColorUseTypeSelector from '../../color-setting/color-use-type-selector';
 import LabelFontSizeEditor from './label-font-size-editor';
 import { DEFAULT_ANNOTATION_SIZE, LABEL_FORMATS, LABEL_FORMATS_MAP, LABEL_POSITIONS, LABEL_POSITIONS_MAP, STAT_TYPE } from '../../../../constants';
-var PieStyleSettings = /*#__PURE__*/function (_Component) {
-  _inherits(PieStyleSettings, _Component);
-  var _super = _createSuper(PieStyleSettings);
-  function PieStyleSettings(props) {
-    var _this;
-    _classCallCheck(this, PieStyleSettings);
-    _this = _super.call(this, props);
-    _this.renderShowLegend = function () {
+class PieStyleSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.renderShowLegend = () => {
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
-        isChecked: _this.props.statItem.show_legend || false,
-        handleToggleChange: _this.onToggleShowLegend,
+        isChecked: this.props.statItem.show_legend || false,
+        handleToggleChange: this.onToggleShowLegend,
         label: intl.get('Display_legend')
       }));
     };
-    _this.replaceNumberNotAllowInput = function (value) {
+    this.replaceNumberNotAllowInput = value => {
       if (!value) {
         return '';
       }
@@ -35,8 +27,10 @@ var PieStyleSettings = /*#__PURE__*/function (_Component) {
       value = value.replace(/-/g, '');
       return value.replace(/[^.-\d,]/g, '');
     };
-    _this.renderMinimumPercent = function () {
-      var minimumSlicePercent = _this.state.minimumSlicePercent;
+    this.renderMinimumPercent = () => {
+      const {
+        minimumSlicePercent
+      } = this.state;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
@@ -44,73 +38,83 @@ var PieStyleSettings = /*#__PURE__*/function (_Component) {
       }, intl.get('Minimum_slice_percent')), /*#__PURE__*/React.createElement("input", {
         className: "form-control",
         id: "percent",
-        ref: function ref(_ref) {
-          return _this.inputRef = _ref;
-        },
+        ref: ref => this.inputRef = ref,
         type: "text",
         autoComplete: "off",
-        onKeyDown: _this.onKeyDown,
-        onBlur: _this.onBlur,
+        onKeyDown: this.onKeyDown,
+        onBlur: this.onBlur,
         value: minimumSlicePercent,
-        onChange: _this.onPercentChange
+        onChange: this.onPercentChange
       }))));
     };
-    _this.labelFontSizeEditor = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
+    this.labelFontSizeEditor = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        label_font_size
+      } = statItem;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
         fontSize: label_font_size,
-        onChangeFontSize: _this.onChangeLabelFontSize
+        onChangeFontSize: this.onChangeLabelFontSize
       }));
     };
-    _this.onKeyDown = function (event) {
+    this.onKeyDown = event => {
       if (event.keyCode === 13) {
         event.preventDefault();
-        _this.inputRef.blur();
-        _this.onCommit();
+        this.inputRef.blur();
+        this.onCommit();
       }
     };
-    _this.onPercentChange = function (e) {
-      var value = e.target.value;
-      value = _this.replaceNumberNotAllowInput(value);
-      _this.setState({
+    this.onPercentChange = e => {
+      let value = e.target.value;
+      value = this.replaceNumberNotAllowInput(value);
+      this.setState({
         minimumSlicePercent: value
       });
     };
-    _this.onBlur = function () {
-      _this.onCommit();
+    this.onBlur = () => {
+      this.onCommit();
     };
-    _this.onCommit = function () {
-      var statItem = _this.props.statItem;
-      var minimumSlicePercent = _this.state.minimumSlicePercent;
+    this.onCommit = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        minimumSlicePercent
+      } = this.state;
       if (minimumSlicePercent > 100) {
         minimumSlicePercent = 100;
       }
-      _this.setState({
+      this.setState({
         minimumSlicePercent: Number(minimumSlicePercent)
       });
       if (minimumSlicePercent === statItem.minimum_slice_percent) return;
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
         minimum_slice_percent: Number(minimumSlicePercent)
       }));
     };
-    _this.onToggleShowLegend = function () {
-      var statItem = _this.props.statItem;
-      var show_legend = !statItem.show_legend;
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
-        show_legend: show_legend
+    this.onToggleShowLegend = () => {
+      let {
+        statItem
+      } = this.props;
+      let show_legend = !statItem.show_legend;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_legend
       }));
     };
-    _this.onChangeLabelFontSize = function (label_font_size) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
-        label_font_size: label_font_size
+    this.onChangeLabelFontSize = label_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        label_font_size
       }));
     };
-    _this.getLabelFormatOptions = function () {
-      var options = LABEL_FORMATS.map(function (item) {
+    this.getLabelFormatOptions = () => {
+      const options = LABEL_FORMATS.map(item => {
         return {
           value: item,
           label: /*#__PURE__*/React.createElement("span", {
@@ -120,46 +124,49 @@ var PieStyleSettings = /*#__PURE__*/function (_Component) {
       });
       return options;
     };
-    _this.getSelectedLabelFormat = function () {
-      var options = _this.labelFormatOptions;
-      var _this$props$statItem = _this.props.statItem,
-        show_percent = _this$props$statItem.show_percent,
-        label_format = _this$props$statItem.label_format;
+    this.getSelectedLabelFormat = () => {
+      const options = this.labelFormatOptions;
+      const {
+        show_percent,
+        label_format
+      } = this.props.statItem;
 
       // be compatible with `show_percent`(the previous `display percent` setting option)
       if (show_percent) {
         return options[0]; // the 'percent' option
       }
 
-      return options.filter(function (option) {
-        return option.value == label_format;
-      })[0] || options[0];
+      return options.filter(option => option.value == label_format)[0] || options[0];
     };
-    _this.onSelectLabelFormat = function (option) {
-      var statItem = _this.props.statItem;
-      var newObj = {
+    this.onSelectLabelFormat = option => {
+      const {
+        statItem
+      } = this.props;
+      const newObj = {
         label_format: option.value
       };
 
       // make `show_percent` no longer work (as there is a 'percent' option in this 'label format selector')
-      var show_percent = statItem.show_percent;
+      const {
+        show_percent
+      } = statItem;
       if (show_percent) {
         newObj.show_percent = false;
       }
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
     };
-    _this.renderLabelFormatSelector = function () {
-      var selectedOption = _this.getSelectedLabelFormat();
+    this.renderLabelFormatSelector = () => {
+      let selectedOption = this.getSelectedLabelFormat();
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Label_format')), /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedOption,
-        onChange: _this.onSelectLabelFormat,
-        options: _this.labelFormatOptions
+        onChange: this.onSelectLabelFormat,
+        options: this.labelFormatOptions
       }));
     };
-    _this.getLabelPositionOptions = function () {
-      var options = LABEL_POSITIONS.map(function (item) {
+    this.getLabelPositionOptions = () => {
+      const options = LABEL_POSITIONS.map(item => {
         return {
           value: item,
           label: /*#__PURE__*/React.createElement("span", {
@@ -169,35 +176,41 @@ var PieStyleSettings = /*#__PURE__*/function (_Component) {
       });
       return options;
     };
-    _this.getSelectedLabelPosition = function () {
-      var options = _this.labelPositionOptions;
-      var label_position = _this.props.statItem.label_position;
-      return options.filter(function (option) {
-        return option.value == label_position;
-      })[0] || options[0];
+    this.getSelectedLabelPosition = () => {
+      const options = this.labelPositionOptions;
+      const {
+        label_position
+      } = this.props.statItem;
+      return options.filter(option => option.value == label_position)[0] || options[0];
     };
-    _this.onSelectLabelPosition = function (option) {
-      var statItem = _this.props.statItem;
-      var newObj = {
+    this.onSelectLabelPosition = option => {
+      const {
+        statItem
+      } = this.props;
+      const newObj = {
         label_position: option.value
       };
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
     };
-    _this.renderLabelPositionSelector = function () {
-      var selectedOption = _this.getSelectedLabelPosition();
+    this.renderLabelPositionSelector = () => {
+      let selectedOption = this.getSelectedLabelPosition();
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Label_position')), /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedOption,
-        onChange: _this.onSelectLabelPosition,
-        options: _this.labelPositionOptions
+        onChange: this.onSelectLabelPosition,
+        options: this.labelPositionOptions
       }));
     };
-    _this.onToggleDisplayLabel = function () {
-      var statItem = _this.props.statItem;
-      var display_label = statItem.display_label,
-        show_percent = statItem.show_percent;
-      var newObj;
+    this.onToggleDisplayLabel = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_label,
+        show_percent
+      } = statItem;
+      let newObj;
       // be compatible with the previous `show_percent`(the `display percent` option)
       if (show_percent) {
         newObj = {
@@ -209,12 +222,16 @@ var PieStyleSettings = /*#__PURE__*/function (_Component) {
           display_label: !display_label
         };
       }
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
     };
-    _this.renderDisplayLabel = function () {
-      var statItem = _this.props.statItem;
-      var show_percent = statItem.show_percent,
-        display_label = statItem.display_label;
+    this.renderDisplayLabel = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        show_percent,
+        display_label
+      } = statItem;
       // be compatible with the previous `show_percent`(the `display percent` option)
       if (show_percent) {
         display_label = true;
@@ -223,96 +240,112 @@ var PieStyleSettings = /*#__PURE__*/function (_Component) {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: display_label || false,
-        handleToggleChange: _this.onToggleDisplayLabel,
+        handleToggleChange: this.onToggleDisplayLabel,
         label: intl.get('Display_label')
       }));
     };
-    _this.displayColorSelector = function () {
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem;
-      var table_id = statItem.table_id,
-        groupby_column_key = statItem.groupby_column_key;
+    this.displayColorSelector = () => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        groupby_column_key
+      } = statItem;
       if (!groupby_column_key) {
         return false;
       }
-      var table = getTableById(table_id);
-      var groupByColumn = TableUtils.getTableColumnByKey(table, groupby_column_key);
-      var columnType = groupByColumn.type;
+      const table = getTableById(table_id);
+      const groupByColumn = TableUtils.getTableColumnByKey(table, groupby_column_key);
+      const {
+        type: columnType
+      } = groupByColumn;
       if (columnType == CellType.SINGLE_SELECT) {
         return true;
       }
       return false;
     };
-    _this.renderDisplayAnnotation = function () {
-      var display_annotation = _this.getDisplayAnnotation();
+    this.renderDisplayAnnotation = () => {
+      const display_annotation = this.getDisplayAnnotation();
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: display_annotation,
-        handleToggleChange: _this.onToggleDisplayAnnotation,
+        handleToggleChange: this.onToggleDisplayAnnotation,
         label: intl.get('Display_annotation')
       }));
     };
-    _this.onToggleDisplayAnnotation = function (e) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+    this.onToggleDisplayAnnotation = e => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
         display_annotation: e.target.checked
       }));
     };
-    _this.getDisplayAnnotation = function () {
-      var statItem = _this.props.statItem;
-      var display_annotation = statItem.display_annotation;
+    this.getDisplayAnnotation = () => {
+      const {
+        statItem
+      } = this.props;
+      let {
+        display_annotation
+      } = statItem;
       // for stat items created before `display_annotation` was added.
       if (display_annotation == undefined) {
         display_annotation = true;
       }
       return display_annotation;
     };
-    _this.renderAnnotationFontSizeEditor = function () {
-      var statItem = _this.props.statItem;
-      var annotation_font_size = statItem.annotation_font_size;
+    this.renderAnnotationFontSizeEditor = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        annotation_font_size
+      } = statItem;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
         id: 'annotation-font-size',
         labelText: intl.get('Font_size'),
         fontSize: annotation_font_size || DEFAULT_ANNOTATION_SIZE,
-        onChangeFontSize: _this.onChangeAnnotationFontSize
+        onChangeFontSize: this.onChangeAnnotationFontSize
       }));
     };
-    _this.onChangeAnnotationFontSize = function (annotation_font_size) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
-        annotation_font_size: annotation_font_size
+    this.onChangeAnnotationFontSize = annotation_font_size => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        annotation_font_size
       }));
     };
-    _this.labelFormatOptions = _this.getLabelFormatOptions();
-    _this.labelPositionOptions = _this.getLabelPositionOptions();
-    var _minimumSlicePercent = typeof props.statItem.minimum_slice_percent === 'number' ? props.statItem.minimum_slice_percent : 1.5;
-    _this.state = {
+    this.labelFormatOptions = this.getLabelFormatOptions();
+    this.labelPositionOptions = this.getLabelPositionOptions();
+    let _minimumSlicePercent = typeof props.statItem.minimum_slice_percent === 'number' ? props.statItem.minimum_slice_percent : 1.5;
+    this.state = {
       minimumSlicePercent: _minimumSlicePercent
     };
-    return _this;
   }
-  _createClass(PieStyleSettings, [{
-    key: "render",
-    value: function render() {
-      var statItem = this.props.statItem;
-      var show_percent = statItem.show_percent,
-        display_label = statItem.display_label;
-      return /*#__PURE__*/React.createElement(Fragment, null, this.renderShowLegend(), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderDisplayLabel(), (show_percent || display_label) && /*#__PURE__*/React.createElement(Fragment, null, this.renderLabelPositionSelector(), this.renderLabelFormatSelector(), this.renderMinimumPercent(), this.labelFontSizeEditor()), statItem.type == STAT_TYPE.RING && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderDisplayAnnotation(), this.getDisplayAnnotation() && this.renderAnnotationFontSizeEditor()), this.displayColorSelector() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
-        chart: statItem,
-        updateChart: this.props.updateStatisticsSettings
-      })));
-    }
-  }]);
-  return PieStyleSettings;
-}(Component);
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      show_percent,
+      display_label
+    } = statItem;
+    return /*#__PURE__*/React.createElement(Fragment, null, this.renderShowLegend(), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderDisplayLabel(), (show_percent || display_label) && /*#__PURE__*/React.createElement(Fragment, null, this.renderLabelPositionSelector(), this.renderLabelFormatSelector(), this.renderMinimumPercent(), this.labelFontSizeEditor()), statItem.type == STAT_TYPE.RING && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderDisplayAnnotation(), this.getDisplayAnnotation() && this.renderAnnotationFontSizeEditor()), this.displayColorSelector() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+      chart: statItem,
+      updateChart: this.props.updateStatisticsSettings
+    })));
+  }
+}
 export default PieStyleSettings;