dtable-statistic 4.2.1 → 4.3.0

package/es/stat-view/combination-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';
@@ -12,7 +6,7 @@ import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
 import { getCurrentTheme } from '../utils/common-utils';
 import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_COLORS, STATISTICS_COUNT_SHOW, LABEL_CONFIG_CHANGED, SUMMARY_TYPE, TITLE_AMOUNT, LEGEND_LEFT, LEGEND_RIGHT } from '../constants';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   isEdit: PropTypes.bool,
   theme: PropTypes.string,
@@ -23,147 +17,104 @@ var propTypes = {
   getTableById: PropTypes.func,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var CombinationChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(CombinationChart, _BaseChart);
-  var _super = _createSuper(CombinationChart);
-  function CombinationChart(props) {
-    var _this;
-    _classCallCheck(this, CombinationChart);
-    _this = _super.call(this, props);
-    _this.componentDidMount = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _this$props, statItem, chartCalculator, eventBus, data, showResultDescription;
-      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;
-              _this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, function (newStatItem) {
-                _this.renderAxisLabel(newStatItem);
-              });
-              if (_this.container) {
-                _context.next = 4;
-                break;
-              }
-              return _context.abrupt("return");
-            case 4:
-              _context.next = 6;
-              return chartCalculator.calculate(statItem);
-            case 6:
-              data = _context.sent;
-              showResultDescription = data.length > 0 ? false : true;
-              _this.setState({
-                isCalculatingData: false,
-                showResultDescription: showResultDescription
-              }, function () {
-                if (!showResultDescription) {
-                  _this.drawChart(data);
-                  _this.calculateData = data;
-                }
-              });
-            case 9:
-            case "end":
-              return _context.stop();
-          }
+class CombinationChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.componentDidMount = async () => {
+      const {
+        statItem,
+        chartCalculator,
+        eventBus
+      } = this.props;
+      this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
+        this.renderAxisLabel(newStatItem);
+      });
+      if (!this.container) return;
+      const data = await chartCalculator.calculate(statItem);
+      let showResultDescription = data.length > 0 ? false : true;
+      this.setState({
+        isCalculatingData: false,
+        showResultDescription
+      }, () => {
+        if (!showResultDescription) {
+          this.drawChart(data);
+          this.calculateData = data;
         }
-      }, _callee);
-    }));
-    _this.componentDidUpdate = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(preProps, preState) {
-        var _this$props2, statItem, chartCalculator, isCalculatingData, data, showResultDescription;
-        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 = 16;
-                  break;
-                }
-                _this.setState({
-                  isCalculatingData: true
-                });
-                if (!_this.container) {
-                  _context2.next = 14;
-                  break;
-                }
-                _context2.next = 9;
-                return chartCalculator.calculate(statItem);
-              case 9:
-                data = _context2.sent;
-                showResultDescription = data.length > 0 ? false : true;
-                _this.chart && _this.destroyChart();
-                _this.calculateData = data;
-                _this.setState({
-                  isCalculatingData: false,
-                  showResultDescription: showResultDescription
-                }, function () {
-                  if (!showResultDescription) {
-                    _this.drawChart(data);
-                    if (_this.props.isPreview) _this.chart.forceFit();
-                  }
-                });
-              case 14:
-                _context2.next = 17;
-                break;
-              case 16:
-                if (!_this.state.showResultDescription) {
-                  _this.chart && _this.destroyChart();
-                  _this.drawChart(_this.calculateData);
-                  if (_this.props.isPreview) {
-                    _this.chart.forceFit();
-                  }
-                }
-              case 17:
-              case "end":
-                return _context2.stop();
+      });
+    };
+    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);
+          const showResultDescription = data.length > 0 ? false : true;
+          this.chart && this.destroyChart();
+          this.calculateData = data;
+          this.setState({
+            isCalculatingData: false,
+            showResultDescription
+          }, () => {
+            if (!showResultDescription) {
+              this.drawChart(data);
+              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();
           }
-        }, _callee2);
-      }));
-      return function (_x, _x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    _this.renderAxisLabel = function (newStatItem) {
-      var _this$props3 = _this.props,
-        getTableById = _this$props3.getTableById,
-        statItem = _this$props3.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_key = _statItem.x_axis_column_key,
-        show_y_axis_left_label = _statItem.show_y_axis_left_label,
-        show_y_axis_right_label = _statItem.show_y_axis_right_label,
-        show_x_axis_label = _statItem.show_x_axis_label,
-        y_axis_left_label_position = _statItem.y_axis_left_label_position,
-        y_axis_right_label_position = _statItem.y_axis_right_label_position,
-        y_axis_left_summary_column = _statItem.y_axis_left_summary_column,
-        y_axis_right_summary_column = _statItem.y_axis_right_summary_column,
-        x_axis_label_position = _statItem.x_axis_label_position,
-        y_axis_left_summary_method = _statItem.y_axis_left_summary_method,
-        y_axis_right_summary_method = _statItem.y_axis_right_summary_method;
-      var table = getTableById(table_id);
-      var autoPadding = _this.chart.autoPadding;
-      var themeColors = _this.getThemeColors();
-      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_key,
+        show_y_axis_left_label,
+        show_y_axis_right_label,
+        show_x_axis_label,
+        y_axis_left_label_position,
+        y_axis_right_label_position,
+        y_axis_left_summary_column,
+        y_axis_right_summary_column,
+        x_axis_label_position,
+        y_axis_left_summary_method,
+        y_axis_right_summary_method
+      } = statItem;
+      const table = getTableById(table_id);
+      const autoPadding = this.chart.autoPadding;
+      const themeColors = this.getThemeColors();
+      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_key);
+        const column = TableUtils.getTableColumnByKey(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
         div.setAttribute('style', "color:".concat(themeColors.textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
         chartContainer.appendChild(div);
@@ -174,102 +125,108 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
       if (xLabel && !show_x_axis_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
-      var yAxisLeftID = "chart-y-axis-left-label_".concat(statItem._id);
-      var yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      const yAxisLeftID = "chart-y-axis-left-label_".concat(statItem._id);
+      const yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
       if (!yAxisLeftLabel && show_y_axis_left_label) {
-        var _div = document.createElement('div');
-        _div.id = yAxisLeftID;
-        _div.className = 'statistic-chart-axis-label';
-        var yAxisColumn = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column);
-        var labeContent = yAxisColumn ? intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]) : intl.get(STATISTICS_COUNT_SHOW.count);
-        _div.innerHTML = labeContent;
-        var containerHeight = chartContainer.offsetHeight;
-        var textAlign = 'center';
+        const div = document.createElement('div');
+        div.id = yAxisLeftID;
+        div.className = 'statistic-chart-axis-label';
+        const yAxisColumn = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column);
+        const labeContent = yAxisColumn ? intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]) : intl.get(STATISTICS_COUNT_SHOW.count);
+        div.innerHTML = labeContent;
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
         if (y_axis_left_label_position === 'bottom') textAlign = 'left';
         if (y_axis_left_label_position === 'top') textAlign = 'right';
-        _div.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
-        chartContainer.appendChild(_div);
+        div.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
       }
       if (yAxisLeftLabel && show_y_axis_left_label) {
-        var _containerHeight = chartContainer.offsetHeight;
-        var _textAlign = 'center';
-        if (y_axis_left_label_position === 'bottom') _textAlign = 'left';
-        if (y_axis_left_label_position === 'top') _textAlign = 'right';
-        yAxisLeftLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(_containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(_textAlign, "; top: 0; left: 0px; transform: translate(-").concat(_containerHeight / 2 + 12, "px, ").concat((_containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_left_label_position === 'top') textAlign = 'right';
+        yAxisLeftLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-left: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-90deg)"));
       }
       if (yAxisLeftLabel && !show_y_axis_left_label) {
         yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
       }
-      var yAxisRightID = "chart-y-axis-right-label_".concat(statItem._id);
-      var yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      const yAxisRightID = "chart-y-axis-right-label_".concat(statItem._id);
+      const yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
       if (!yAxisRightLabel && show_y_axis_right_label) {
-        var _div2 = document.createElement('div');
-        _div2.id = yAxisRightID;
-        _div2.className = 'statistic-chart-axis-label';
-        var _yAxisColumn = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column);
-        var _labeContent = _yAxisColumn ? intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]) : intl.get(STATISTICS_COUNT_SHOW.count);
-        _div2.innerHTML = _labeContent;
-        var _containerHeight2 = chartContainer.offsetHeight;
-        var _textAlign2 = 'center';
-        if (y_axis_right_label_position === 'bottom') _textAlign2 = 'right';
-        if (y_axis_right_label_position === 'top') _textAlign2 = 'left';
-        _div2.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(_containerHeight2, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(_textAlign2, "; top: 0; right: 0px; transform: translate(").concat(_containerHeight2 / 2 + 12, "px, ").concat((_containerHeight2 - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
-        chartContainer.appendChild(_div2);
+        const div = document.createElement('div');
+        div.id = yAxisRightID;
+        div.className = 'statistic-chart-axis-label';
+        const yAxisColumn = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column);
+        const labeContent = yAxisColumn ? intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]) : intl.get(STATISTICS_COUNT_SHOW.count);
+        div.innerHTML = labeContent;
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_right_label_position === 'bottom') textAlign = 'right';
+        if (y_axis_right_label_position === 'top') textAlign = 'left';
+        div.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; right: 0px; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
+        chartContainer.appendChild(div);
       }
       if (yAxisRightLabel && show_y_axis_right_label) {
-        var _containerHeight3 = chartContainer.offsetHeight;
-        var _textAlign3 = 'center';
-        if (y_axis_right_label_position === 'bottom') _textAlign3 = 'right';
-        if (y_axis_right_label_position === 'top') _textAlign3 = 'left';
-        yAxisRightLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(_containerHeight3, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(_textAlign3, "; top: 0; right: 0px; transform: translate(").concat(_containerHeight3 / 2 + 12, "px, ").concat((_containerHeight3 - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_right_label_position === 'bottom') textAlign = 'right';
+        if (y_axis_right_label_position === 'top') textAlign = 'left';
+        yAxisRightLabel.setAttribute('style', "color:".concat(themeColors.textColor, "; position: absolute; width: ").concat(containerHeight, "px; padding-right: ").concat(autoPadding.bottom, "px; text-align: ").concat(textAlign, "; top: 0; right: 0px; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 - 6, "px) rotate(-270deg)"));
       }
       if (yAxisRightLabel && !show_y_axis_right_label) {
         yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
       }
     };
-    _this.drawChart = function (data) {
-      var _this$props4 = _this.props,
-        getTableById = _this$props4.getTableById,
-        statItem = _this$props4.statItem,
-        colorThemeName = _this$props4.colorThemeName;
-      var table_id = statItem.table_id,
-        y_axis_left_summary_column = statItem.y_axis_left_summary_column,
-        y_axis_right_summary_column = statItem.y_axis_right_summary_column;
-      _this.initChartHandler();
-      _this.chart.data(data);
-      _this.chart.coordinate('rect');
-      _this.chart.on('element:click', function (e) {
+    this.drawChart = data => {
+      const {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      const {
+        table_id,
+        y_axis_left_summary_column,
+        y_axis_right_summary_column
+      } = statItem;
+      this.initChartHandler();
+      this.chart.data(data);
+      this.chart.coordinate('rect');
+      this.chart.on('element:click', e => {
         if (e.data.data) {
-          _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+          this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
         }
       });
-      var table = getTableById(table_id);
-      var leftColumn = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
-      var rightColumn = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
-      _this.handleAutoRange(leftColumn, rightColumn);
-      var themeColors = _this.getThemeColors();
-      var currentTheme = getCurrentTheme(colorThemeName);
-      _this.setNameAxis(themeColors);
-      _this.setValueAxis(themeColors);
-      _this.setLegend(themeColors, table, currentTheme);
-      _this.drawLeft({
-        currentTheme: currentTheme
+      const table = getTableById(table_id);
+      const leftColumn = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
+      const rightColumn = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
+      this.handleAutoRange(leftColumn, rightColumn);
+      const themeColors = this.getThemeColors();
+      const currentTheme = getCurrentTheme(colorThemeName);
+      this.setNameAxis(themeColors);
+      this.setValueAxis(themeColors);
+      this.setLegend(themeColors, table, currentTheme);
+      this.drawLeft({
+        currentTheme
       });
-      _this.drawRight({
-        currentTheme: currentTheme,
-        themeColors: themeColors
+      this.drawRight({
+        currentTheme,
+        themeColors
       });
-      _this.chart.removeInteraction('legend-filter');
-      _this.chart.render();
-      _this.renderAxisLabel();
+      this.chart.removeInteraction('legend-filter');
+      this.chart.render();
+      this.renderAxisLabel();
     };
-    _this.initChartHandler = function () {
-      var _this$props5 = _this.props,
-        isPreview = _this$props5.isPreview,
-        statItem = _this$props5.statItem;
-      var display_data = statItem.display_data;
-      var config = {
-        container: _this.container,
+    this.initChartHandler = () => {
+      const {
+        isPreview,
+        statItem
+      } = this.props;
+      const {
+        display_data
+      } = statItem;
+      let config = {
+        container: this.container,
         autoFit: true,
         appendPadding: [display_data ? 20 : 3, 0, 0, 0]
       };
@@ -277,34 +234,32 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         config.height = 400;
         config.width = 700;
       }
-      _this.chart = new Chart(config);
+      this.chart = new Chart(config);
     };
-    _this.handleAutoRange = function (leftColumn, rightColumn) {
-      var statItem = _this.props.statItem;
-      var y_axis_left_summary_method = statItem.y_axis_left_summary_method,
-        y_axis_right_summary_method = statItem.y_axis_right_summary_method,
-        _statItem$y_axis_auto = statItem.y_axis_auto_range_left,
-        y_axis_auto_range_left = _statItem$y_axis_auto === void 0 ? true : _statItem$y_axis_auto,
-        _statItem$y_axis_min_ = statItem.y_axis_min_left,
-        y_axis_min_left = _statItem$y_axis_min_ === void 0 ? 0 : _statItem$y_axis_min_,
-        _statItem$y_axis_max_ = statItem.y_axis_max_left,
-        y_axis_max_left = _statItem$y_axis_max_ === void 0 ? 0 : _statItem$y_axis_max_,
-        _statItem$y_axis_auto2 = statItem.y_axis_auto_range_right,
-        y_axis_auto_range_right = _statItem$y_axis_auto2 === void 0 ? true : _statItem$y_axis_auto2,
-        _statItem$y_axis_min_2 = statItem.y_axis_min_right,
-        y_axis_min_right = _statItem$y_axis_min_2 === void 0 ? 0 : _statItem$y_axis_min_2,
-        _statItem$y_axis_max_2 = statItem.y_axis_max_right,
-        y_axis_max_right = _statItem$y_axis_max_2 === void 0 ? 0 : _statItem$y_axis_max_2;
-      var leftColumnData = leftColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
-      var rightColumnData = rightColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
-      var leftValueScaleOptions = {
-        formatter: function formatter(value) {
-          return _this.getNumberDisplayString(value, leftColumnData, y_axis_left_summary_method);
+    this.handleAutoRange = (leftColumn, rightColumn) => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_left_summary_method,
+        y_axis_right_summary_method,
+        y_axis_auto_range_left = true,
+        y_axis_min_left = 0,
+        y_axis_max_left = 0,
+        y_axis_auto_range_right = true,
+        y_axis_min_right = 0,
+        y_axis_max_right = 0
+      } = statItem;
+      const leftColumnData = leftColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      const rightColumnData = rightColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      let leftValueScaleOptions = {
+        formatter: value => {
+          return this.getNumberDisplayString(value, leftColumnData, y_axis_left_summary_method);
         }
       };
-      var rightValueScaleOptions = {
-        formatter: function formatter(value) {
-          return _this.getNumberDisplayString(value, rightColumnData, y_axis_right_summary_method);
+      let rightValueScaleOptions = {
+        formatter: value => {
+          return this.getNumberDisplayString(value, rightColumnData, y_axis_right_summary_method);
         }
       };
       if (!y_axis_auto_range_left) {
@@ -319,7 +274,7 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
           max: y_axis_max_right
         });
       }
-      _this.chart.scale({
+      this.chart.scale({
         name: {
           type: 'cat'
         },
@@ -329,13 +284,13 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         value_right: rightValueScaleOptions
       });
     };
-    _this.setNameAxis = function (themeColors) {
-      _this.chart.axis('name', {
+    this.setNameAxis = themeColors => {
+      this.chart.axis('name', {
         label: {
           style: {
             fill: themeColors.textColor
           },
-          formatter: function formatter(name) {
+          formatter: name => {
             if (name === '' || name == null) {
               return intl.get(EMPTY_NAME);
             }
@@ -347,8 +302,8 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setValueAxis = function (themeColors) {
-      _this.chart.axis('value_left', {
+    this.setValueAxis = themeColors => {
+      this.chart.axis('value_left', {
         grid: {
           line: {
             style: {
@@ -362,7 +317,7 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.axis('value_right', {
+      this.chart.axis('value_right', {
         grid: null,
         label: {
           style: {
@@ -371,9 +326,9 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setLegend = function (themeColors, table, currentTheme) {
-      var legendPosition = 'bottom';
-      _this.chart.legend({
+    this.setLegend = (themeColors, table, currentTheme) => {
+      let legendPosition = 'bottom';
+      this.chart.legend({
         custom: true,
         position: legendPosition,
         itemName: {
@@ -381,72 +336,87 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
             fill: themeColors.textColor
           }
         },
-        items: _this.getLegend(table, currentTheme)
+        items: this.getLegend(table, currentTheme)
       });
     };
-    _this.drawLeft = function (_ref3) {
-      var currentTheme = _ref3.currentTheme;
-      var statItem = _this.props.statItem;
-      var y_axis_left_summary_method = statItem.y_axis_left_summary_method,
-        y_axis_left_summary_type = statItem.y_axis_left_summary_type,
-        y_axis_left_group_by_multiple_numeric_column = statItem.y_axis_left_group_by_multiple_numeric_column;
-      _this.chart.interval().position('name*value_left').color('color', function (color) {
+    this.drawLeft = _ref => {
+      let {
+        currentTheme
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_left_summary_method,
+        y_axis_left_summary_type,
+        y_axis_left_group_by_multiple_numeric_column
+      } = statItem;
+      this.chart.interval().position('name*value_left').color('color', color => {
         if (!y_axis_left_group_by_multiple_numeric_column) {
           return currentTheme && currentTheme.colors[0];
         }
         return color;
-      }).adjust('dodge').tooltip('name*formatted_value_left', function (name, value) {
+      }).adjust('dodge').tooltip('name*formatted_value_left', (name, value) => {
         return {
-          value: value,
+          value,
           title: y_axis_left_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
-      _this.chart.tooltip({
+      this.chart.tooltip({
         showMarkers: false
       });
     };
-    _this.drawRight = function (_ref4) {
-      var currentTheme = _ref4.currentTheme,
-        themeColors = _ref4.themeColors;
-      var statItem = _this.props.statItem;
-      var y_axis_right_summary_type = statItem.y_axis_right_summary_type,
-        y_axis_right_summary_method = statItem.y_axis_right_summary_method,
-        _statItem$display_dat = statItem.display_data,
-        display_data = _statItem$display_dat === void 0 ? false : _statItem$display_dat;
+    this.drawRight = _ref2 => {
+      let {
+        currentTheme,
+        themeColors
+      } = _ref2;
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_right_summary_type,
+        y_axis_right_summary_method,
+        display_data = false
+      } = statItem;
 
       // line
-      _this.chart.line().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).tooltip('name*formatted_value_right', function (name, value) {
+      this.chart.line().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).tooltip('name*formatted_value_right', (name, value) => {
         return {
-          value: value,
+          value,
           title: y_axis_right_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
 
       // point on the line
-      _this.chart.point().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'formatted_value_right' : false, {
+      this.chart.point().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'formatted_value_right' : false, {
         style: {
-          fontSize: _this.getLabelFontSize(),
+          fontSize: this.getLabelFontSize(),
           fill: themeColors.textColor
         }
-      }).tooltip('name*formatted_value_right', function (name, value) {
+      }).tooltip('name*formatted_value_right', (name, value) => {
         return {
-          value: value,
+          value,
           title: y_axis_right_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
     };
-    _this.getLegend = function (table, colorTheme) {
-      var statItem = _this.props.statItem;
-      var y_axis_left_group_by_multiple_numeric_column = statItem.y_axis_left_group_by_multiple_numeric_column,
-        y_axis_left_summary_column = statItem.y_axis_left_summary_column,
-        y_axis_right_summary_column = statItem.y_axis_right_summary_column,
-        y_axis_left_group_by_numeric_columns = statItem.y_axis_left_group_by_numeric_columns;
-      var legendItems = [];
-      var column1 = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
-      var column2 = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
+    this.getLegend = (table, colorTheme) => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_left_group_by_multiple_numeric_column,
+        y_axis_left_summary_column,
+        y_axis_right_summary_column,
+        y_axis_left_group_by_numeric_columns
+      } = statItem;
+      const legendItems = [];
+      const column1 = TableUtils.getTableColumnByKey(table, y_axis_left_summary_column) || {};
+      const column2 = TableUtils.getTableColumnByKey(table, y_axis_right_summary_column) || {};
       if (!y_axis_left_group_by_multiple_numeric_column) {
         legendItems.push({
           value: 'value_left',
@@ -482,8 +452,8 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
             }
           }
         });
-        y_axis_left_group_by_numeric_columns.forEach(function (item, index) {
-          var column = TableUtils.getTableColumnByKey(table, item.column_key) || {};
+        y_axis_left_group_by_numeric_columns.forEach((item, index) => {
+          const column = TableUtils.getTableColumnByKey(table, item.column_key) || {};
           legendItems.push({
             value: 'group_name',
             name: column.name || intl.get(LEGEND_LEFT),
@@ -511,65 +481,59 @@ var CombinationChart = /*#__PURE__*/function (_BaseChart) {
       }
       return legendItems;
     };
-    _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(CombinationChart, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var _this$props6 = this.props,
-        theme = _this$props6.theme,
-        colorThemeName = _this$props6.colorThemeName;
-      if (this.canUpdate(this.props, nextProps)) {
-        return true;
-      }
-      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
-        return true;
-      }
-      if (nextProps.theme !== theme) {
-        return true;
-      }
-      if (nextProps.colorThemeName !== colorThemeName) {
-        return true;
-      }
-      return false;
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      theme,
+      colorThemeName
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.container = null;
-      this.unsubscribeStyleChange();
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var statItem = this.props.statItem;
-      var _this$state = this.state,
-        isCalculatingData = _this$state.isCalculatingData,
-        showResultDescription = _this$state.showResultDescription;
-      var show_y_axis_left_label = statItem.show_y_axis_left_label,
-        show_x_axis_label = statItem.show_x_axis_label;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref5) {
-          return _this2.container = _ref5;
-        },
-        style: {
-          padding: show_y_axis_left_label || show_x_axis_label ? 30 : 20
-        },
-        className: "statistic-chart-container"
-      }));
+    if (nextProps.theme !== theme) {
+      return true;
+    }
+    if (nextProps.colorThemeName !== colorThemeName) {
+      return true;
     }
-  }]);
-  return CombinationChart;
-}(BaseChart);
+    return false;
+  }
+  componentWillUnmount() {
+    this.container = null;
+    this.unsubscribeStyleChange();
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    const {
+      show_y_axis_left_label,
+      show_x_axis_label
+    } = statItem;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      style: {
+        padding: show_y_axis_left_label || show_x_axis_label ? 30 : 20
+      },
+      className: "statistic-chart-container"
+    }));
+  }
+}
 CombinationChart.propTypes = propTypes;
 export default CombinationChart;