dtable-statistic 4.2.2 → 4.3.1

package/es/stat-view/ring-chart.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 from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
@@ -11,87 +7,87 @@ import { Chart } from '../custom-g2';
 import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
 import { DEFAULT_ANNOTATION_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, SUMMARY_TYPE, TITLE_TOTAL } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var RingChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(RingChart, _BaseChart);
-  var _super = _createSuper(RingChart);
-  function RingChart(props) {
-    var _this;
-    _classCallCheck(this, RingChart);
-    _this = _super.call(this, props);
-    _this.drawChart = function (data) {
-      var _this$props = _this.props,
-        isPreview = _this$props.isPreview,
-        statItem = _this$props.statItem;
+class RingChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.drawChart = data => {
+      const {
+        isPreview,
+        statItem
+      } = this.props;
       if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
+        this.chart = new Chart({
+          container: this.container,
           autoFit: true,
           padding: [20, 0]
         });
       } else {
-        _this.chart = new Chart({
-          container: _this.container,
+        this.chart = new Chart({
+          container: this.container,
           autoFit: true,
           height: 400,
           width: 700
         });
       }
-      _this.chart.on('element:click', function (e) {
-        var clickData = e.data.data;
+      this.chart.on('element:click', e => {
+        const clickData = e.data.data;
         if (clickData.name !== 'Others') {
-          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+          this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
         }
       });
-      _this.drawRingChart(data, !isPreview);
-      _this.chart.render();
+      this.drawRingChart(data, !isPreview);
+      this.chart.render();
     };
-    _this.drawRingChart = function (data, isCreating) {
-      _this.sum = data.total;
+    this.drawRingChart = (data, isCreating) => {
+      this.sum = data.total;
       if (data.length === 0) return;
-      var _this$props2 = _this.props,
-        getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem,
-        colorThemeName = _this$props2.colorThemeName;
-      var summaryColumn = null;
-      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      var summary_type = statItem.summary_type,
-        summary_method = statItem.summary_method,
-        summary_column_key = statItem.summary_column_key,
-        table_id = statItem.table_id,
-        show_legend = statItem.show_legend,
-        show_percent = statItem.show_percent,
-        display_label = statItem.display_label,
-        label_position = statItem.label_position,
-        display_annotation = statItem.display_annotation;
-      var table = getTableById(table_id);
+      let {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      let summaryColumn = null;
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      const {
+        summary_type,
+        summary_method,
+        summary_column_key,
+        table_id,
+        show_legend,
+        show_percent,
+        display_label,
+        label_position,
+        display_annotation
+      } = statItem;
+      const table = getTableById(table_id);
       if (summary_type !== SUMMARY_TYPE.COUNT) {
         summaryColumn = summary_column_key && TableUtils.getTableColumnByKey(table, summary_column_key);
         summaryColumnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
-      _this.chart.coordinate('theta', {
+      this.chart.coordinate('theta', {
         radius: isCreating ? 0.75 : 0.95,
         innerRadius: isCreating ? 0.6 : 0.7
       });
-      var currentTheme = getCurrentTheme(colorThemeName);
-      var themeColors = _this.getThemeColors();
-      var newData = formatPieChartData(data, statItem, table, currentTheme);
-      _this.chart.data(newData, {
+      const currentTheme = getCurrentTheme(colorThemeName);
+      const themeColors = this.getThemeColors();
+      const newData = formatPieChartData(data, statItem, table, currentTheme);
+      this.chart.data(newData, {
         'name': {
           type: 'cat',
           nice: false
         }
       });
-      var colorSet = newData.colorSet;
-      _this.sum = newData.total;
+      const colorSet = newData.colorSet;
+      this.sum = newData.total;
       if (show_legend) {
-        _this.chart.legend('name', {
+        this.chart.legend('name', {
           position: 'right',
           custom: true,
           pageNavigator: {
@@ -113,17 +109,17 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
               fill: themeColors.textColor
             }
           },
-          items: newData.map(function (obj, index) {
-            var sIndex = String(index);
-            var colorIndex = sIndex.charAt(sIndex.length - 1);
-            var name = obj.name;
+          items: newData.map((obj, index) => {
+            const sIndex = String(index);
+            const colorIndex = sIndex.charAt(sIndex.length - 1);
+            let name = obj.name;
             if (!obj.name && typeof obj.name !== 'number') {
               name = intl.get(EMPTY_NAME);
             } else if (obj.name === 'Others') {
               name = intl.get('Others');
             }
             return {
-              name: name,
+              name,
               value: obj.value,
               marker: {
                 symbol: 'circle',
@@ -136,38 +132,38 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
           })
         });
       } else {
-        _this.chart.legend(false);
+        this.chart.legend(false);
       }
 
       // Do not automatically adjust the maximum and minimum values in ring chart
-      _this.chart.scale({
+      this.chart.scale({
         value: {
           nice: false
         }
       });
-      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('formatted_value*percent', function (value, percent) {
+      this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('formatted_value*percent', (value, percent) => {
         return {
-          content: _this.getLabel(value, percent)
+          content: this.getLabel(value, percent)
         };
       }, {
         offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
         style: {
           fill: themeColors.labelColor,
-          fontSize: _this.getLabelFontSize(),
+          fontSize: this.getLabelFontSize(),
           shadowBlur: 2,
           shadowColor: 'rgba(0, 0, 0, .45)'
         }
-      }).tooltip('name*formatted_value*percent', function (name, value, percent) {
-        var title = name;
+      }).tooltip('name*formatted_value*percent', (name, value, percent) => {
+        let title = name;
         if (!name || name === 'undefined') {
           title = intl.get(EMPTY_NAME);
         }
         return show_percent || display_label ? {
           name: title,
-          value: _this.getLabel(value, percent)
+          value: this.getLabel(value, percent)
         } : {
           name: title,
-          value: value
+          value
         };
       }).state({
         active: {
@@ -178,31 +174,28 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.tooltip({
+      this.chart.tooltip({
         showTitle: false,
         showMarkers: false,
         itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
       });
-      _this.chart.interaction('element-active');
+      this.chart.interaction('element-active');
       if (display_annotation == undefined || display_annotation) {
-        _this.setAnnotation({
+        this.setAnnotation({
           name: intl.get(TITLE_TOTAL),
-          value: summaryColumn ? _this.getNumberDisplayString(_this.sum, summaryColumnData, summary_method) : _this.sum
+          value: summaryColumn ? this.getNumberDisplayString(this.sum, summaryColumnData, summary_method) : this.sum
         }, themeColors.labelColor);
-        _this.chart.on('interval:mouseenter', function (evt) {
-          return _this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData);
-        });
-        _this.chart.on('interval:mouseleave', function (evt) {
-          return _this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData);
-        });
+        this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData));
+        this.chart.on('interval:mouseleave', evt => this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData));
       }
     };
-    _this.getLabel = function (value, percent) {
-      var _this$props$statItem = _this.props.statItem,
-        show_percent = _this$props$statItem.show_percent,
-        display_label = _this$props$statItem.display_label,
-        label_format = _this$props$statItem.label_format;
-      var content;
+    this.getLabel = (value, percent) => {
+      const {
+        show_percent,
+        display_label,
+        label_format
+      } = this.props.statItem;
+      let content;
       if (show_percent) {
         content = percent;
         return content;
@@ -227,28 +220,35 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       }
       return content;
     };
-    _this.getAnnotationFontSize = function () {
-      var statItem = _this.props.statItem;
-      var annotation_font_size = statItem.annotation_font_size;
-      var mainFontSize = annotation_font_size || DEFAULT_ANNOTATION_SIZE;
-      var subFontSize = Math.max(mainFontSize - 12, 12);
+    this.getAnnotationFontSize = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        annotation_font_size
+      } = statItem;
+      const mainFontSize = annotation_font_size || DEFAULT_ANNOTATION_SIZE;
+      const subFontSize = Math.max(mainFontSize - 12, 12);
       return {
-        mainFontSize: mainFontSize,
-        subFontSize: subFontSize
+        mainFontSize,
+        subFontSize
       };
     };
-    _this.setAnnotation = function (content, fontColor, summaryColumn, summaryColumnData) {
-      var summary_method = _this.props.statItem.summary_method;
-      var name = content.name;
+    this.setAnnotation = (content, fontColor, summaryColumn, summaryColumnData) => {
+      const {
+        summary_method
+      } = this.props.statItem;
+      let name = content.name;
       if (!name || name === 'undefined') {
         name = intl.get(EMPTY_NAME);
       } else if (name === 'Others') {
         name = intl.get('Others');
       }
-      var _this$getAnnotationFo = _this.getAnnotationFontSize(),
-        mainFontSize = _this$getAnnotationFo.mainFontSize,
-        subFontSize = _this$getAnnotationFo.subFontSize;
-      _this.chart.annotation().text({
+      const {
+        mainFontSize,
+        subFontSize
+      } = this.getAnnotationFontSize();
+      this.chart.annotation().text({
         content: name,
         position: ['50%', '50%'],
         style: {
@@ -260,7 +260,7 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: -20
       }).text({
         position: ['50%', '50%'],
-        content: summaryColumn ? _this.getNumberDisplayString(content.value, summaryColumnData, summary_method) : content.value,
+        content: summaryColumn ? this.getNumberDisplayString(content.value, summaryColumnData, summary_method) : content.value,
         style: {
           fontSize: mainFontSize,
           fill: fontColor,
@@ -269,128 +269,117 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: 20
       });
     };
-    _this.onEnterRingChart = function (ev, color, summaryColumn, summaryColumnData) {
-      var item = ev.data.data;
-      _this.chart.annotation().clear(true);
-      _this.setAnnotation(item, color, summaryColumn, summaryColumnData);
-      _this.chart.render(true);
+    this.onEnterRingChart = (ev, color, summaryColumn, summaryColumnData) => {
+      const item = ev.data.data;
+      this.chart.annotation().clear(true);
+      this.setAnnotation(item, color, summaryColumn, summaryColumnData);
+      this.chart.render(true);
     };
-    _this.onLeaveRingChart = function (ev, color, summaryColumn, summaryColumnData) {
-      _this.chart.annotation().clear(true);
-      _this.setAnnotation({
+    this.onLeaveRingChart = (ev, color, summaryColumn, summaryColumnData) => {
+      this.chart.annotation().clear(true);
+      this.setAnnotation({
         name: intl.get(TITLE_TOTAL),
-        value: _this.sum
+        value: this.sum
       }, color, summaryColumn, summaryColumnData);
-      _this.chart.render(true);
+      this.chart.render(true);
     };
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true,
       showResultDescription: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(RingChart, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    if (this.container) {
+      chartCalculator.calculate(statItem).then(data => {
+        const showResultDescription = data.length > 0 ? false : true;
+        this.setState({
+          isCalculatingData: false,
+          showResultDescription
+        }, () => {
+          if (!showResultDescription) {
+            this.drawChart(data);
+            this.calculateData = data;
+          }
+        });
+      });
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      colorThemeName
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
+    }
+    if (nextProps.colorThemeName !== colorThemeName) {
+      return true;
+    }
+    return false;
+  }
+  componentDidUpdate(preProps, preState) {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
+      });
       if (this.container) {
-        chartCalculator.calculate(statItem).then(function (data) {
-          var showResultDescription = data.length > 0 ? false : true;
-          _this2.setState({
+        chartCalculator.calculate(statItem).then(data => {
+          const showResultDescription = data.length > 0 ? false : true;
+          this.chart && this.destroyChart();
+          this.calculateData = data;
+          this.setState({
             isCalculatingData: false,
-            showResultDescription: showResultDescription
-          }, function () {
+            showResultDescription
+          }, () => {
             if (!showResultDescription) {
-              _this2.drawChart(data);
-              _this2.calculateData = data;
+              this.drawChart(data);
+              if (this.props.isPreview) this.chart.forceFit();
             }
           });
         });
       }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var colorThemeName = this.props.colorThemeName;
-      if (this.canUpdate(this.props, nextProps)) {
-        return true;
-      }
-      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-        return true;
-      }
-      if (nextProps.colorThemeName !== colorThemeName) {
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(preProps, preState) {
-      var _this3 = this;
-      var _this$props4 = this.props,
-        statItem = _this$props4.statItem,
-        chartCalculator = _this$props4.chartCalculator;
-      var isCalculatingData = this.state.isCalculatingData;
-      if (isCalculatingData !== preState.isCalculatingData) return;
-      if (this.shouldCalculateStatItem(preProps, this.props)) {
-        this.setState({
-          isCalculatingData: true
-        });
-        if (this.container) {
-          chartCalculator.calculate(statItem).then(function (data) {
-            var showResultDescription = data.length > 0 ? false : true;
-            _this3.chart && _this3.destroyChart();
-            _this3.calculateData = data;
-            _this3.setState({
-              isCalculatingData: false,
-              showResultDescription: showResultDescription
-            }, function () {
-              if (!showResultDescription) {
-                _this3.drawChart(data);
-                if (_this3.props.isPreview) _this3.chart.forceFit();
-              }
-            });
-          });
-        }
-      } else {
-        if (!this.state.showResultDescription) {
-          this.chart && this.destroyChart();
-          this.drawChart(this.calculateData);
-          if (this.props.isPreview) {
-            this.chart.forceFit();
-          }
+    } else {
+      if (!this.state.showResultDescription) {
+        this.chart && this.destroyChart();
+        this.drawChart(this.calculateData);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
         }
       }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var _this$state = this.state,
-        isCalculatingData = _this$state.isCalculatingData,
-        showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this4.container = _ref;
-        },
-        className: "".concat(chartStyles['statistic-pie-chart-container'], " statistic-chart-container")
-      }));
-    }
-  }]);
-  return RingChart;
-}(BaseChart);
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  render() {
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "".concat(chartStyles['statistic-pie-chart-container'], " statistic-chart-container")
+    }));
+  }
+}
 RingChart.propTypes = propTypes;
 export default RingChart;