dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,9 +1,3 @@
-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 intl from 'react-intl-universal';
@@ -13,7 +7,7 @@ import { Chart } from '../custom-g2';
 import { getCurrentTheme } from '../utils/common-utils';
 import { EMPTY_NAME, LABEL_CONFIG_CHANGED } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
@@ -22,133 +16,93 @@ var propTypes = {
   getTableById: PropTypes.func,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var ScatterChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(ScatterChart, _BaseChart);
-  var _super = _createSuper(ScatterChart);
-  function ScatterChart(props) {
-    var _this;
-    _classCallCheck(this, ScatterChart);
-    _this = _super.call(this, props);
-    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _this$props, statItem, chartCalculator, eventBus, 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, eventBus = _this$props.eventBus;
-              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:
-              _this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, function (newStatItem) {
-                _this.renderAxisLabel(newStatItem);
-              });
-            case 9:
-            case "end":
-              return _context.stop();
+class ScatterChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.componentDidMount = async () => {
+      const {
+        statItem,
+        chartCalculator,
+        eventBus
+      } = this.props;
+      if (this.container) {
+        const data = await chartCalculator.calculate(statItem);
+        this.setState({
+          isCalculatingData: false
+        });
+        this.drawChart(data);
+        this.calculateData = data;
+      }
+      this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
+        this.renderAxisLabel(newStatItem);
+      });
+    };
+    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)) {
+        if (this.container) {
+          this.setState({
+            isCalculatingData: true
+          });
+          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;
-                }
-                if (!_this.container) {
-                  _context2.next = 15;
-                  break;
-                }
-                _this.setState({
-                  isCalculatingData: true
-                });
-                _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 currentTheme = getCurrentTheme(colorThemeName);
-      var table_id = statItem.table_id,
-        x_axis_column = statItem.x_axis_column,
-        y_axis_column = statItem.y_axis_column;
-      var selectedTable = getTableById(table_id);
-      var selectedXAxisColumn = TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
-      var selectedYAxisColumn = TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
+      } 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 currentTheme = getCurrentTheme(colorThemeName);
+      const {
+        table_id,
+        x_axis_column,
+        y_axis_column
+      } = statItem;
+      const selectedTable = getTableById(table_id);
+      const selectedXAxisColumn = TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
+      const selectedYAxisColumn = TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
       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 themeColors = _this.getThemeColors();
-      _this.chart.axis('x_axis', {
+      const themeColors = this.getThemeColors();
+      this.chart.axis('x_axis', {
         label: {
           style: {
             fill: themeColors.textColor
@@ -158,7 +112,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
           style: themeColors.gridColor
         }
       });
-      _this.chart.axis('y_axis', {
+      this.chart.axis('y_axis', {
         grid: {
           line: {
             style: {
@@ -172,7 +126,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      var chart = _this.chart;
+      const chart = this.chart;
       chart.data(data);
       chart.scale({
         x_axis: {
@@ -190,7 +144,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
         },
         itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '{valueX}<br/>' + '{valueY}' + '</li>'
       });
-      chart.point().position('x_axis*y_axis').color('group_by', currentTheme && currentTheme.colors).shape('circle').tooltip('group_by*x_axis*y_axis', function (group_by, x_axis, y_axis) {
+      chart.point().position('x_axis*y_axis').color('group_by', currentTheme && currentTheme.colors).shape('circle').tooltip('group_by*x_axis*y_axis', (group_by, x_axis, y_axis) => {
         return {
           name: group_by || group_by === 0 ? group_by : intl.get(EMPTY_NAME),
           valueX: "".concat(selectedXAxisColumn.name, ": ").concat(x_axis),
@@ -202,7 +156,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       chart.legend('group_by', {
         position: 'bottom',
         itemName: {
-          formatter: function formatter(name) {
+          formatter: name => {
             return name || name === 0 ? name : intl.get(EMPTY_NAME);
           },
           style: {
@@ -226,36 +180,38 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       });
       chart.interaction('legend-highlight');
       chart.render();
-      _this.renderAxisLabel();
+      this.renderAxisLabel();
     };
-    _this.renderAxisLabel = function (newStatItem) {
-      var _this$props4 = _this.props,
-        getTableById = _this$props4.getTableById,
-        statItem = _this$props4.statItem;
+    this.renderAxisLabel = newStatItem => {
+      let {
+        getTableById,
+        statItem
+      } = this.props;
       if (newStatItem && newStatItem._id !== statItem._id) {
         return;
       }
-      if (!_this.chart) return;
+      if (!this.chart) return;
       statItem = newStatItem || statItem;
-      var _statItem = statItem,
-        table_id = _statItem.table_id,
-        x_axis_column = _statItem.x_axis_column,
-        y_axis_column = _statItem.y_axis_column,
-        show_y_axis_label = _statItem.show_y_axis_label,
-        show_x_axis_label = _statItem.show_x_axis_label,
-        y_axis_label_position = _statItem.y_axis_label_position,
-        x_axis_label_position = _statItem.x_axis_label_position;
-      var table = getTableById(table_id);
-      var autoPadding = _this.chart.autoPadding;
-      var textColor = _this.getAxisLabelColor();
-      var xAxisID = "chart-x-axis-label_".concat(statItem._id);
-      var chartContainer = _this.chart.getCanvas().get('container');
-      var xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      const {
+        table_id,
+        x_axis_column,
+        y_axis_column,
+        show_y_axis_label,
+        show_x_axis_label,
+        y_axis_label_position,
+        x_axis_label_position
+      } = statItem;
+      const table = getTableById(table_id);
+      const autoPadding = this.chart.autoPadding;
+      const textColor = this.getAxisLabelColor();
+      const xAxisID = "chart-x-axis-label_".concat(statItem._id);
+      const chartContainer = this.chart.getCanvas().get('container');
+      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
       if (!xLabel && show_x_axis_label) {
-        var div = document.createElement('div');
+        const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'statistic-chart-axis-label';
-        var column = TableUtils.getTableColumnByKey(table, x_axis_column);
+        const column = TableUtils.getTableColumnByKey(table, x_axis_column);
         div.innerHTML = "".concat(column ? column.name : '');
         div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
         chartContainer.appendChild(div);
@@ -266,85 +222,78 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       if (xLabel && !show_x_axis_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
-      var yAxisID = "chart-y-axis-label_".concat(statItem._id);
-      var yLabel = chartContainer.querySelector("#".concat(yAxisID));
-      var paddingLeft = autoPadding.bottom + (show_x_axis_label ? 10 : 0);
+      const yAxisID = "chart-y-axis-label_".concat(statItem._id);
+      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      let paddingLeft = autoPadding.bottom + (show_x_axis_label ? 10 : 0);
       if (!yLabel && show_y_axis_label) {
-        var _div = document.createElement('div');
-        _div.id = yAxisID;
-        _div.className = 'statistic-chart-axis-label';
-        var _column = TableUtils.getTableColumnByKey(table, y_axis_column) || {};
-        _div.innerHTML = _column.name || '';
-        var containerHeight = chartContainer.offsetHeight;
-        var textAlign = 'center';
+        const div = document.createElement('div');
+        div.id = yAxisID;
+        div.className = 'statistic-chart-axis-label';
+        const column = TableUtils.getTableColumnByKey(table, y_axis_column) || {};
+        div.innerHTML = column.name || '';
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
         if (y_axis_label_position === 'bottom') textAlign = 'left';
         if (y_axis_label_position === 'top') textAlign = 'right';
-        _div.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
-        chartContainer.appendChild(_div);
+        div.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
       }
       if (yLabel && show_y_axis_label) {
-        var _containerHeight = chartContainer.offsetHeight;
-        var _textAlign = 'center';
-        if (y_axis_label_position === 'bottom') _textAlign = 'left';
-        if (y_axis_label_position === 'top') _textAlign = 'right';
-        yLabel.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(_containerHeight, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0px; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_label_position === 'top') textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
       }
       if (yLabel && !show_y_axis_label) {
         yLabel.parentNode.removeChild(yLabel);
       }
     };
-    _this.state = {
+    this.state = {
       isCalculatingData: true
     };
-    _this.calculateData = null;
-    return _this;
+    this.calculateData = null;
   }
-  _createClass(ScatterChart, [{
-    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;
-      this.unsubscribeStyleChange && this.unsubscribeStyleChange();
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isCalculatingData = this.state.isCalculatingData;
-      var _this$props$statItem = this.props.statItem,
-        show_x_axis_label = _this$props$statItem.show_x_axis_label,
-        show_y_axis_label = _this$props$statItem.show_y_axis_label;
-      var style = {};
-      if (show_x_axis_label) {
-        style.paddingBottom = 38;
-      }
-      if (show_y_axis_label) {
-        style.paddingLeft = 38;
-      }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref3) {
-          return _this2.container = _ref3;
-        },
-        className: "".concat(chartStyles['statistic-scatter-chart-container'], " statistic-chart-container"),
-        style: style
-      }));
+    if (nextProps.colorThemeName !== colorThemeName) {
+      return true;
     }
-  }]);
-  return ScatterChart;
-}(BaseChart);
+    return false;
+  }
+  componentWillUnmount() {
+    this.container = null;
+    this.unsubscribeStyleChange && this.unsubscribeStyleChange();
+  }
+  render() {
+    const {
+      isCalculatingData
+    } = this.state;
+    const {
+      show_x_axis_label,
+      show_y_axis_label
+    } = this.props.statItem;
+    const style = {};
+    if (show_x_axis_label) {
+      style.paddingBottom = 38;
+    }
+    if (show_y_axis_label) {
+      style.paddingLeft = 38;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "".concat(chartStyles['statistic-scatter-chart-container'], " statistic-chart-container"),
+      style: style
+    }));
+  }
+}
 ScatterChart.propTypes = propTypes;
 export default ScatterChart;