dtable-statistic 4.2.1 → 4.3.0

package/es/stat-view/treemap-chart.js

@@ -1,10 +1,3 @@
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-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 DataSet from '@antv/data-set';
@@ -17,7 +10,7 @@ import { Chart, registerGeometryLabelLayout } from '../custom-g2';
 import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
 import { EMPTY_NAME, STATISTICS_COUNT_TYPE } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   isEnlarge: PropTypes.bool,
   theme: PropTypes.string,
@@ -27,134 +20,96 @@ var propTypes = {
   getTableById: PropTypes.func,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var TreemapChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(TreemapChart, _BaseChart);
-  var _super = _createSuper(TreemapChart);
-  function TreemapChart(props) {
-    var _this;
-    _classCallCheck(this, TreemapChart);
-    _this = _super.call(this, props);
-    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _this$props, statItem, chartCalculator, data;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _this$props = _this.props, statItem = _this$props.statItem, chartCalculator = _this$props.chartCalculator;
-              if (!_this.container) {
-                _context.next = 8;
-                break;
-              }
-              _context.next = 4;
-              return chartCalculator.calculate(statItem);
-            case 4:
-              data = _context.sent;
-              _this.setState({
-                isCalculatingData: false
-              });
-              _this.drawChart(data);
-              _this.calculateData = data;
-            case 8:
-            case "end":
-              return _context.stop();
+class TreemapChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.componentDidMount = async () => {
+      const {
+        statItem,
+        chartCalculator
+      } = this.props;
+      if (this.container) {
+        const data = await chartCalculator.calculate(statItem);
+        this.setState({
+          isCalculatingData: false
+        });
+        this.drawChart(data);
+        this.calculateData = data;
+      }
+    };
+    this.componentDidUpdate = async (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) {
+          const data = await chartCalculator.calculate(statItem);
+          this.calculateData = data;
+          this.setState({
+            isCalculatingData: false
+          });
+          this.chart && this.chart.destroy();
+          this.drawChart(data);
+          if (this.props.isPreview) {
+            this.chart.forceFit();
           }
         }
-      }, _callee);
-    }));
-    _this.componentDidUpdate = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
-        var _this$props2, statItem, chartCalculator, isCalculatingData, data;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _this$props2 = _this.props, statItem = _this$props2.statItem, chartCalculator = _this$props2.chartCalculator;
-                isCalculatingData = _this.state.isCalculatingData;
-                if (!(isCalculatingData !== preState.isCalculatingData)) {
-                  _context2.next = 4;
-                  break;
-                }
-                return _context2.abrupt("return");
-              case 4:
-                if (!_this.shouldCalculateStatItem(preProps, _this.props)) {
-                  _context2.next = 17;
-                  break;
-                }
-                _this.setState({
-                  isCalculatingData: true
-                });
-                if (!_this.container) {
-                  _context2.next = 15;
-                  break;
-                }
-                _context2.next = 9;
-                return chartCalculator.calculate(statItem);
-              case 9:
-                data = _context2.sent;
-                _this.calculateData = data;
-                _this.setState({
-                  isCalculatingData: false
-                });
-                _this.chart && _this.chart.destroy();
-                _this.drawChart(data);
-                if (_this.props.isPreview) {
-                  _this.chart.forceFit();
-                }
-              case 15:
-                _context2.next = 20;
-                break;
-              case 17:
-                _this.chart && _this.chart.destroy();
-                _this.drawChart(_this.calculateData);
-                if (_this.props.isPreview) {
-                  _this.chart.forceFit();
-                }
-              case 20:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-      return function (_x, _x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    _this.drawChart = function (data) {
-      var _this$props3 = _this.props,
-        getTableById = _this$props3.getTableById,
-        isPreview = _this$props3.isPreview,
-        statItem = _this$props3.statItem,
-        colorThemeName = _this$props3.colorThemeName;
-      var table_id = statItem.table_id,
-        summary_type = statItem.summary_type,
-        summary_column_key = statItem.summary_column_key;
-      var table = getTableById(table_id);
-      var selectedNumericColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
+      } else {
+        this.chart && this.chart.destroy();
+        this.drawChart(this.calculateData);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
+        }
+      }
+    };
+    this.drawChart = data => {
+      const {
+        getTableById,
+        isPreview,
+        statItem,
+        colorThemeName
+      } = this.props;
+      const {
+        table_id,
+        summary_type,
+        summary_column_key
+      } = statItem;
+      const table = getTableById(table_id);
+      const selectedNumericColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
       if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
+        this.chart = new Chart({
+          container: this.container,
           autoFit: true
         });
       } else {
-        _this.chart = new Chart({
-          container: _this.container,
+        this.chart = new Chart({
+          container: this.container,
           height: 400,
           width: 700
         });
       }
-      _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 currentTheme = getCurrentTheme(colorThemeName);
-      var newData = formatPieChartData(data, statItem, table, currentTheme);
-      var colorSet = newData.colorSet;
-      var DataView = DataSet.DataView;
-      var dv = new DataView();
-      var fullData = {
+      const currentTheme = getCurrentTheme(colorThemeName);
+      const newData = formatPieChartData(data, statItem, table, currentTheme);
+      const colorSet = newData.colorSet;
+      const {
+        DataView
+      } = DataSet;
+      const dv = new DataView();
+      const fullData = {
         name: 'root',
-        children: newData.map(function (item) {
-          var name = item.name;
+        children: newData.map(item => {
+          let name = item.name;
           item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
           if (name == 'Others') {
             item.name = intl.get('Others');
@@ -170,33 +125,24 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
         tile: 'treemapResquarify',
         as: ['x', 'y']
       });
-      var nodes = [];
-      var _iterator = _createForOfIteratorHelper(dv.getAllNodes()),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var node = _step.value;
-          if (node.data.name === 'root') {
-            continue;
-          }
-          var eachNode = {
-            name: node.data.name,
-            x: node.x,
-            y: node.y,
-            value: node.data.value,
-            formatted_value: node.data.formatted_value,
-            percent: node.data.percent,
-            original_name: node.data.original_name,
-            rows: node.data.rows || null
-          };
-          nodes.push(eachNode);
+      const nodes = [];
+      for (const node of dv.getAllNodes()) {
+        if (node.data.name === 'root') {
+          continue;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+        const eachNode = {
+          name: node.data.name,
+          x: node.x,
+          y: node.y,
+          value: node.data.value,
+          formatted_value: node.data.formatted_value,
+          percent: node.data.percent,
+          original_name: node.data.original_name,
+          rows: node.data.rows || null
+        };
+        nodes.push(eachNode);
       }
-      var chart = _this.chart;
+      const chart = this.chart;
       chart.data(nodes);
       chart.scale({
         x: {
@@ -214,13 +160,13 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<div></div>',
         domStyles: {
-          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
-          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-      chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', function (name, value, percent) {
+      chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', (name, value, percent) => {
         return {
-          name: name,
+          name,
           info: summary_type == STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
         };
       }).style({
@@ -231,7 +177,7 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
         style: {
           textBaseline: 'middle'
         },
-        content: function content(obj) {
+        content: obj => {
           if (obj.name !== 'root') {
             return obj.name;
           }
@@ -243,67 +189,57 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
       chart.interaction('element-active');
       chart.render();
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true
     };
-    _this.calculateData = null;
+    this.calculateData = null;
 
     // customize label layout: show ellipsis for long labels
     function limitInShape(items, labels, shapes, region) {
-      each(labels, function (label, index) {
-        var labelBBox = label.getCanvasBBox();
-        var shapeBBox = shapes[index].getBBox();
+      each(labels, (label, index) => {
+        const labelBBox = label.getCanvasBBox();
+        const shapeBBox = shapes[index].getBBox();
         if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
-          var translateX = labelBBox.width - shapeBBox.width + 20;
-          var textShapes = label.findAll(function (shape) {
-            return shape.get('type') === 'text';
-          });
-          textShapes.forEach(function (textShape) {
-            var style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
-            var textBox = textShape.getCanvasBBox();
-            var text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+          const translateX = labelBBox.width - shapeBBox.width + 20;
+          const textShapes = label.findAll(shape => shape.get('type') === 'text');
+          textShapes.forEach(textShape => {
+            const style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            const textBox = textShape.getCanvasBBox();
+            const text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
             textShape.attr('text', text);
           });
         }
       });
     }
     registerGeometryLabelLayout('custom-limit-in-shape', limitInShape);
-    return _this;
   }
-  _createClass(TreemapChart, [{
-    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;
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      colorThemeName
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isCalculatingData = this.state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref3) {
-          return _this2.container = _ref3;
-        },
-        className: "statistic-chart-container ".concat(chartStyles['statistic-treemap-chart-container'])
-      }));
+    if (nextProps.colorThemeName !== colorThemeName) {
+      return true;
     }
-  }]);
-  return TreemapChart;
-}(BaseChart);
+    return false;
+  }
+  componentWillUnmount() {
+    this.container = null;
+  }
+  render() {
+    const {
+      isCalculatingData
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "statistic-chart-container ".concat(chartStyles['statistic-treemap-chart-container'])
+    }));
+  }
+}
 TreemapChart.propTypes = propTypes;
 export default TreemapChart;