dtable-statistic 4.2.2 → 4.3.1

package/es/stat-view/pie-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';
@@ -10,7 +6,7 @@ import { Chart } from '../custom-g2';
 import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
 import { EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
@@ -18,62 +14,63 @@ var propTypes = {
   getTableById: PropTypes.func,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var PieChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(PieChart, _BaseChart);
-  var _super = _createSuper(PieChart);
-  function PieChart(props) {
-    var _this;
-    _classCallCheck(this, PieChart);
-    _this = _super.call(this, props);
-    _this.drawChart = function (data) {
-      var isPreview = _this.props.isPreview;
+class PieChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.drawChart = data => {
+      const {
+        isPreview
+      } = 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.drawPieChart(data, !isPreview);
-      _this.chart.render();
+      this.drawPieChart(data, !isPreview);
+      this.chart.render();
     };
-    _this.drawPieChart = function (data, isCreating) {
+    this.drawPieChart = (data, isCreating) => {
       if (data.length === 0) return;
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem,
-        colorThemeName = _this$props.colorThemeName;
-      _this.chart.coordinate('theta', {
+      let {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      this.chart.coordinate('theta', {
         radius: isCreating ? 0.75 : 0.95
       });
-      var 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;
-      var table = getTableById(table_id);
-      var currentTheme = getCurrentTheme(colorThemeName);
-      var themeColors = _this.getThemeColors();
-      var newData = formatPieChartData(data, statItem, table, currentTheme);
-      _this.chart.data(newData, {
+      const {
+        table_id,
+        show_legend,
+        show_percent,
+        display_label,
+        label_position
+      } = statItem;
+      const table = getTableById(table_id);
+      const currentTheme = getCurrentTheme(colorThemeName);
+      const themeColors = this.getThemeColors();
+      const newData = formatPieChartData(data, statItem, table, currentTheme);
+      this.chart.data(newData, {
         'name': {
           type: 'cat',
           nice: false
         }
       });
-      _this.chart.on('element:click', function (e) {
-        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      this.chart.on('element:click', e => {
+        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var colorSet = newData.colorSet;
+      const colorSet = newData.colorSet;
       if (show_legend) {
-        _this.chart.legend('name', {
+        this.chart.legend('name', {
           position: 'right',
           custom: true,
           itemName: {
@@ -81,15 +78,15 @@ var PieChart = /*#__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);
             }
             return {
-              name: name,
+              name,
               value: obj.value,
               marker: {
                 symbol: 'circle',
@@ -102,29 +99,29 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
           })
         });
       } else {
-        _this.chart.legend(false);
+        this.chart.legend(false);
       }
 
       // Do not automatically adjust the maximum and minimum values in pie 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);
         } else if (name === 'Others') {
@@ -132,10 +129,10 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
         }
         return show_percent || display_label ? {
           name: title,
-          value: _this.getLabel(value, percent)
+          value: this.getLabel(value, percent)
         } : {
           name: title,
-          value: value
+          value
         };
       }).state({
         active: {
@@ -146,19 +143,20 @@ var PieChart = /*#__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');
     };
-    _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;
@@ -183,114 +181,103 @@ var PieChart = /*#__PURE__*/function (_BaseChart) {
       }
       return content;
     };
-    _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(PieChart, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        statItem = _this$props2.statItem,
-        chartCalculator = _this$props2.chartCalculator;
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    if (this.container) {
+      chartCalculator.calculate(statItem).then(data => {
+        const showResultDescription = data && 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 && data.length > 0 ? false : true;
-          _this2.setState({
+        chartCalculator.calculate(statItem).then(data => {
+          const showResultDescription = data && 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$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.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 && 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 PieChart;
-}(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")
+    }));
+  }
+}
 PieChart.propTypes = propTypes;
 export default PieChart;