dtable-statistic 4.2.2 → 4.3.0

package/es/stat-view/mirror.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';
@@ -9,43 +5,44 @@ import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { DEFAULT_NUMBER_FORMAT_OBJECT, STATISTICS_COUNT_SHOW, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
-var Mirror = /*#__PURE__*/function (_BaseChart) {
-  _inherits(Mirror, _BaseChart);
-  var _super = _createSuper(Mirror);
-  function Mirror(props) {
-    var _this;
-    _classCallCheck(this, Mirror);
-    _this = _super.call(this, props);
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
+class Mirror extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
     };
-    _this.drawChart = function (_ref) {
-      var data = _ref.data,
-        colorSet = _ref.colorSet;
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem;
-      var table_id = statItem.table_id,
-        summary_type = statItem.summary_type,
-        summary_method = statItem.summary_method,
-        summary_column = statItem.summary_column;
-      _this.initChartHandler();
-      _this.chart.on('element:click', function (e) {
-        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+    this.drawChart = _ref => {
+      let {
+        data,
+        colorSet
+      } = _ref;
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const {
+        table_id,
+        summary_type,
+        summary_method,
+        summary_column
+      } = statItem;
+      this.initChartHandler();
+      this.chart.on('element:click', e => {
+        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var themeColors = _this.getThemeColors();
-      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      const themeColors = this.getThemeColors();
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === SUMMARY_TYPE.ADVANCED) {
-        var table = getTableById(table_id);
-        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        const table = getTableById(table_id);
+        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
         summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
-      _this.chart.data(data);
-      _this.setAxis(themeColors);
-      _this.setScale(summaryColumnData);
-      _this.setTooltip();
-      _this.chart.facet('mirror', {
+      this.chart.data(data);
+      this.setAxis(themeColors);
+      this.setScale(summaryColumnData);
+      this.setTooltip();
+      this.chart.facet('mirror', {
         fields: ['group_name'],
         transpose: statItem.is_transpose,
         padding: 'auto',
@@ -54,19 +51,19 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           }
         },
-        eachView: function eachView(view, facet) {
+        eachView: (view, facet) => {
           if (facet.rowValue && facet.rowValue.length > 5) {
             facet.rowValue = facet.rowValue.slice(0, 5) + '...';
           }
-          view.interval().position('name*value').color('group_name', colorSet).tooltip('name*formatted_value', function (name, value) {
+          view.interval().position('name*value').color('group_name', colorSet).tooltip('name*formatted_value', (name, value) => {
             return {
               title: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
-              name: name,
-              value: value
+              name,
+              value
             };
           }).state({
             active: {
-              style: function style(element) {
+              style: element => {
                 return {
                   fillOpacity: 0.6
                 };
@@ -76,22 +73,25 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
           view.interaction('active-region');
         }
       });
-      _this.chart.legend({
+      this.chart.legend({
         itemName: {
           style: {
             fill: themeColors.textColor
           }
         }
       });
-      _this.chart.render();
+      this.chart.render();
     };
-    _this.initChartHandler = function () {
-      var _this$props2 = _this.props,
-        isPreview = _this$props2.isPreview,
-        statItem = _this$props2.statItem;
-      var is_transpose = statItem.is_transpose;
-      var config = {
-        container: _this.container,
+    this.initChartHandler = () => {
+      const {
+        isPreview,
+        statItem
+      } = this.props;
+      const {
+        is_transpose
+      } = statItem;
+      let config = {
+        container: this.container,
         autoFit: true
       };
       if (isPreview) {
@@ -101,10 +101,10 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
         config.width = 800;
         config.padding = is_transpose ? [35, 30, 30, 30] : [30, 100, 30, 30];
       }
-      _this.chart = new Chart(config);
+      this.chart = new Chart(config);
     };
-    _this.setAxis = function (themeColors) {
-      _this.chart.axis('name', {
+    this.setAxis = themeColors => {
+      this.chart.axis('name', {
         line: {
           style: themeColors.gridColor
         },
@@ -112,8 +112,8 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
           style: {
             fill: themeColors.textColor
           },
-          formatter: function formatter(name) {
-            var label = name;
+          formatter: name => {
+            let label = name;
             if (name.length > 5) {
               label = "".concat(name.slice(0, 5), "...");
             }
@@ -121,7 +121,7 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.axis('value', {
+      this.chart.axis('value', {
         label: {
           style: {
             fill: themeColors.textColor
@@ -136,16 +136,18 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setScale = function (summaryColumnData) {
-      var summary_method = _this.props.statItem.summary_method;
-      _this.chart.scale({
+    this.setScale = summaryColumnData => {
+      const {
+        summary_method
+      } = this.props.statItem;
+      this.chart.scale({
         name: {
           sync: true
         },
         value: {
           sync: true,
-          formatter: function formatter(value) {
-            return _this.getNumberDisplayString(value, summaryColumnData, summary_method);
+          formatter: value => {
+            return this.getNumberDisplayString(value, summaryColumnData, summary_method);
           }
         },
         group_name: {
@@ -156,119 +158,106 @@ var Mirror = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setTooltip = function () {
-      _this.chart.tooltip({
+    this.setTooltip = () => {
+      this.chart.tooltip({
         showTitle: true,
         showMarkers: false,
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<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')
         }
       });
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true,
       showResultDescription: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(Mirror, [{
-    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 => {
+        let showResultDescription = data.colorSet && data.colorSet.length > 0 ? false : true;
+        this.setState({
+          isCalculatingData: false,
+          showResultDescription
+        }, () => {
+          if (!showResultDescription) {
+            this.drawChart(data);
+            this.calculateData = data;
+          }
+        });
+      });
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      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.colorSet && data.colorSet.length > 0 ? false : true;
-          _this2.setState({
+        chartCalculator.calculate(statItem).then(data => {
+          const showResultDescription = data.colorSet && data.colorSet.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) {
-      if (this.canUpdate(this.props, nextProps)) {
-        return true;
-      }
-      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-        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.colorSet && data.colorSet.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(_ref2) {
-          return _this4.container = _ref2;
-        },
-        className: "statistic-mirror-chart-container statistic-chart-container"
-      }));
-    }
-  }]);
-  return Mirror;
-}(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: "statistic-mirror-chart-container statistic-chart-container"
+    }));
+  }
+}
 Mirror.propTypes = {
   isPreview: PropTypes.bool,
   statItem: PropTypes.object,