dtable-statistic 4.2.1 → 4.3.0

package/es/stat-view/bar-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 DataSet from '@antv/data-set';
@@ -13,7 +9,7 @@ import { getCurrentTheme, sortDataByGroupSum } from '../utils/common-utils';
 import { getChartGroups } from '../utils/basic-chart-utils';
 import { getConvertedColorRules, getLabelColor } from '../utils/color-utils';
 import { EMPTY_NAME, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE, STATISTICS_COUNT_SHOW, LABEL_CONFIG_CHANGED, STAT_TYPE, TITLE_AMOUNT, TYPE_COLOR_USING, STATISTICS_COUNT_TYPE } from '../constants';
-var propTypes = {
+const propTypes = {
   isPreview: PropTypes.bool,
   isEdit: PropTypes.bool,
   colorThemeName: PropTypes.string,
@@ -23,44 +19,43 @@ var propTypes = {
   getTableById: PropTypes.func,
   toggleStatisticRecordsDialog: PropTypes.func
 };
-var BarChart = /*#__PURE__*/function (_BaseChart) {
-  _inherits(BarChart, _BaseChart);
-  var _super = _createSuper(BarChart);
-  function BarChart(props) {
-    var _this;
-    _classCallCheck(this, BarChart);
-    _this = _super.call(this, props);
-    _this.drawChart = function (originalData) {
-      var _this$props = _this.props,
-        getTableById = _this$props.getTableById,
-        statItem = _this$props.statItem,
-        colorThemeName = _this$props.colorThemeName;
-      var type = statItem.type,
-        table_id = statItem.table_id,
-        summary_type = statItem.summary_type,
-        y_axis_column_key = statItem.y_axis_column_key,
-        y_axis_summary_type = statItem.y_axis_summary_type,
-        summary_method = statItem.summary_method,
-        y_axis_summary_method = statItem.y_axis_summary_method,
-        column_groupby_column_key = statItem.column_groupby_column_key,
-        column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
-        sort_type = statItem.sort_type;
-      var data = originalData;
+class BarChart extends BaseChart {
+  constructor(props) {
+    super(props);
+    this.drawChart = originalData => {
+      const {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      const {
+        type,
+        table_id,
+        summary_type,
+        y_axis_column_key,
+        y_axis_summary_type,
+        summary_method,
+        y_axis_summary_method,
+        column_groupby_column_key,
+        column_groupby_multiple_numeric_column,
+        sort_type
+      } = statItem;
+      let data = originalData;
       if (type == STAT_TYPE.BAR_STACK && sort_type) {
         data = sortDataByGroupSum(originalData, sort_type);
       }
-      _this.initChartHandler();
-      _this.chart.on('interval:click', function (e) {
-        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      this.initChartHandler();
+      this.chart.on('interval:click', e => {
+        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var isGroupBar = column_groupby_column_key || column_groupby_multiple_numeric_column;
-      var currentTheme = getCurrentTheme(colorThemeName);
-      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      var summaryType = summary_type;
-      var summaryMethod = summary_method;
+      const isGroupBar = column_groupby_column_key || column_groupby_multiple_numeric_column;
+      const currentTheme = getCurrentTheme(colorThemeName);
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      let summaryType = summary_type;
+      let summaryMethod = summary_method;
       if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
-        var table = getTableById(table_id);
-        var summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+        const table = getTableById(table_id);
+        const summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
         summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       if (!summaryType && y_axis_summary_type) {
@@ -69,65 +64,70 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
       if (!summaryMethod && y_axis_summary_method) {
         summaryMethod = y_axis_summary_method;
       }
-      var chartBarColor = '#2a67d1';
+      let chartBarColor = '#2a67d1';
       if (isGroupBar) {
         chartBarColor = 'group_name';
-        _this.chart.scale('group_name', {
+        this.chart.scale('group_name', {
           type: 'cat'
         });
       } else if (currentTheme && currentTheme.colors) {
         chartBarColor = currentTheme.colors[0];
       }
-      _this.chart.data(data, {
+      this.chart.data(data, {
         'name': {
           type: 'cat',
           nice: false
         }
       });
-      var width = _this.chart.coordinateBBox.width;
-      var chartData = isGroupBar ? getChartGroups(data) : data;
-      var themeColors = _this.getThemeColors();
-      var ticks = _this.getTicks(chartData, width);
+      const {
+        width
+      } = this.chart.coordinateBBox;
+      const chartData = isGroupBar ? getChartGroups(data) : data;
+      const themeColors = this.getThemeColors();
+      const ticks = this.getTicks(chartData, width);
       if (ticks.length > 0) {
-        _this.chart.scale('name', {
-          ticks: ticks
+        this.chart.scale('name', {
+          ticks
         });
       }
 
       // set Coord type
-      _this.chart.coordinate('rect');
-      _this.handleAutoRange(data, summaryColumnData, summaryMethod);
+      this.chart.coordinate('rect');
+      this.handleAutoRange(data, summaryColumnData, summaryMethod);
       if (isGroupBar) {
-        _this.drawBarGroup({
-          data: data,
-          themeColors: themeColors,
-          currentTheme: currentTheme,
-          summaryColumnData: summaryColumnData,
-          summaryType: summaryType,
-          summaryMethod: summaryMethod
+        this.drawBarGroup({
+          data,
+          themeColors,
+          currentTheme,
+          summaryColumnData,
+          summaryType,
+          summaryMethod
         });
       } else {
-        _this.drawBar({
-          themeColors: themeColors,
-          chartBarColor: chartBarColor,
-          summaryType: summaryType,
-          summaryMethod: summaryMethod
+        this.drawBar({
+          themeColors,
+          chartBarColor,
+          summaryType,
+          summaryMethod
         });
       }
-      _this.setTooltip();
-      _this.setAxis(themeColors);
-      _this.setLegend(themeColors);
-      _this.chart.interaction('active-region');
-      _this.chart.render();
-      _this.renderAxisLabel();
+      this.setTooltip();
+      this.setAxis(themeColors);
+      this.setLegend(themeColors);
+      this.chart.interaction('active-region');
+      this.chart.render();
+      this.renderAxisLabel();
     };
-    _this.initChartHandler = function () {
-      var _this$props2 = _this.props,
-        isPreview = _this$props2.isPreview,
-        statItem = _this$props2.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 ? 17 : 0, 0, 0, 0]
       };
@@ -135,25 +135,31 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         config.height = 400;
         config.width = 700;
       }
-      _this.chart = new Chart(config);
+      this.chart = new Chart(config);
     };
-    _this.drawBar = function (_ref) {
-      var themeColors = _ref.themeColors,
-        chartBarColor = _ref.chartBarColor,
-        summaryType = _ref.summaryType,
-        summaryMethod = _ref.summaryMethod;
-      var statItem = _this.props.statItem;
-      var color_option = statItem.color_option,
-        display_data = statItem.display_data;
-      var colorRules = color_option === TYPE_COLOR_USING.USE_RULES && statItem.y_axis_label_color_rules && getConvertedColorRules(statItem.y_axis_label_color_rules);
-      _this.chart.interval().label(display_data ? 'formatted_value' : false, {
+    this.drawBar = _ref => {
+      let {
+        themeColors,
+        chartBarColor,
+        summaryType,
+        summaryMethod
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        color_option,
+        display_data
+      } = statItem;
+      const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && statItem.y_axis_label_color_rules && getConvertedColorRules(statItem.y_axis_label_color_rules);
+      this.chart.interval().label(display_data ? 'formatted_value' : false, {
         style: {
-          fontSize: _this.getLabelFontSize(),
+          fontSize: this.getLabelFontSize(),
           fill: themeColors.textColor
         }
-      }).position('name*value').tooltip('name*formatted_value', function (name, value) {
+      }).position('name*value').tooltip('name*formatted_value', (name, value) => {
         return {
-          value: value,
+          value,
           title: summaryType === STATISTICS_COUNT_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summaryMethod]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
@@ -163,37 +169,43 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
             stroke: null
           }
         }
-      }).style('value', function (value) {
-        var color = getLabelColor({
+      }).style('value', value => {
+        const color = getLabelColor({
           chart: statItem,
-          colorRules: colorRules,
-          value: value
+          colorRules,
+          value
         });
         return {
           fill: color || chartBarColor
         };
       });
     };
-    _this.drawBarGroup = function (_ref2) {
-      var data = _ref2.data,
-        themeColors = _ref2.themeColors,
-        summaryColumnData = _ref2.summaryColumnData,
-        summaryType = _ref2.summaryType,
-        summaryMethod = _ref2.summaryMethod,
-        currentTheme = _ref2.currentTheme;
-      var statItem = _this.props.statItem;
-      var chartType = statItem.type,
-        color_option = statItem.color_option,
-        display_data = statItem.display_data,
-        y_axis_use_stack = statItem.y_axis_use_stack,
-        display_each_block_data = statItem.display_each_block_data;
-      var labelCfg = {
+    this.drawBarGroup = _ref2 => {
+      let {
+        data,
+        themeColors,
+        summaryColumnData,
+        summaryType,
+        summaryMethod,
+        currentTheme
+      } = _ref2;
+      const {
+        statItem
+      } = this.props;
+      const {
+        type: chartType,
+        color_option,
+        display_data,
+        y_axis_use_stack,
+        display_each_block_data
+      } = statItem;
+      let labelCfg = {
         style: {
-          fontSize: _this.getLabelFontSize(),
+          fontSize: this.getLabelFontSize(),
           fill: themeColors.textColor
         }
       };
-      var displayData = display_data;
+      let displayData = display_data;
       if (chartType == STAT_TYPE.BAR_STACK) {
         displayData = display_each_block_data;
         if (displayData) {
@@ -201,7 +213,7 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         }
 
         // get the total value of each stack
-        var dv = new DataSet.DataView().source(data);
+        const dv = new DataSet.DataView().source(data);
         dv.transform({
           type: 'aggregate',
           fields: ['value'],
@@ -210,9 +222,9 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
           groupBy: ['name']
         });
         if (display_data) {
-          dv.rows.forEach(function (item) {
-            _this.chart.annotation().text({
-              content: _this.getNumberDisplayString(item.value_sum, summaryColumnData, summaryMethod),
+          dv.rows.forEach(item => {
+            this.chart.annotation().text({
+              content: this.getNumberDisplayString(item.value_sum, summaryColumnData, summaryMethod),
               position: {
                 name: item.name,
                 value: item.value_sum
@@ -223,31 +235,31 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
           });
         }
       }
-      var groupColorCallback = currentTheme && currentTheme.colors;
+      let groupColorCallback = currentTheme && currentTheme.colors;
 
       // when the 'Group by' column is a 'single-select' column,
       // and the user chooses to use the colors from the column.
       if (color_option === TYPE_COLOR_USING.USE_COLUMN_COLORS) {
-        var groupColorMapping = {};
-        data.forEach(function (item) {
+        const groupColorMapping = {};
+        data.forEach(item => {
           if (!groupColorMapping[item.group_name]) {
             groupColorMapping[item.group_name] = item.color;
           }
         });
-        groupColorCallback = function groupColorCallback(group_name) {
+        groupColorCallback = group_name => {
           return groupColorMapping[group_name];
         };
       }
-      _this.chart.scale({
+      this.chart.scale({
         group_name: {
           type: 'cat'
         }
       });
-      _this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name*raw_name', function (name, value, group_name, raw_name) {
-        var nameContent = !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name;
-        var titleContent = !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
+      this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name*raw_name', (name, value, group_name, raw_name) => {
+        const nameContent = !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name;
+        const titleContent = !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
         return {
-          value: value,
+          value,
           title: titleContent,
           name: nameContent
         };
@@ -261,14 +273,15 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.handleAutoRange = function (data, summaryColumnData, summaryMethod) {
-      var _this$props$statItem = _this.props.statItem,
-        y_axis_auto_range = _this$props$statItem.y_axis_auto_range,
-        y_axis_min = _this$props$statItem.y_axis_min,
-        y_axis_max = _this$props$statItem.y_axis_max;
-      var valueScaleOptions = {
-        formatter: function formatter(value) {
-          return _this.getNumberDisplayString(value, summaryColumnData, summaryMethod);
+    this.handleAutoRange = (data, summaryColumnData, summaryMethod) => {
+      const {
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max
+      } = this.props.statItem;
+      let valueScaleOptions = {
+        formatter: value => {
+          return this.getNumberDisplayString(value, summaryColumnData, summaryMethod);
         }
       };
 
@@ -284,14 +297,14 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         });
 
         // set the filter rule
-        _this.chart.filter('value', function (value) {
+        this.chart.filter('value', value => {
           return value >= y_axis_min;
         });
 
         // filter the data
-        _this.chart.filterData(data);
+        this.chart.filterData(data);
       }
-      _this.chart.scale({
+      this.chart.scale({
         // Set the type of the name column so that g2 can draw correctly
         name: {
           type: 'cat'
@@ -299,20 +312,20 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         value: valueScaleOptions
       });
     };
-    _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.setAxis = function (themeColors) {
-      _this.chart.axis('name', {
+    this.setAxis = themeColors => {
+      this.chart.axis('name', {
         line: {
           style: themeColors.gridColor
         },
@@ -321,10 +334,10 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
           style: {
             fill: themeColors.textColor
           },
-          formatter: _this.labelFormatter
+          formatter: this.labelFormatter
         }
       });
-      _this.chart.axis('value', {
+      this.chart.axis('value', {
         label: {
           style: {
             fill: themeColors.textColor
@@ -339,15 +352,15 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _this.setLegend = function (themeColors) {
-      var legendPosition = 'bottom';
-      _this.chart.legend('group_name', {
+    this.setLegend = themeColors => {
+      let legendPosition = 'bottom';
+      this.chart.legend('group_name', {
         position: legendPosition,
         itemName: {
           style: {
             fill: themeColors.textColor
           },
-          formatter: function formatter(name) {
+          formatter: name => {
             return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
           }
         },
@@ -367,37 +380,39 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
     };
-    _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,
-        type = _statItem.type,
-        table_id = _statItem.table_id,
-        x_axis_column_key = _statItem.x_axis_column_key,
-        y_axis_column_key = _statItem.y_axis_column_key,
-        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,
-        y_axis_summary_type = _statItem.y_axis_summary_type,
-        title_name = _statItem.title_name;
-      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 {
+        type,
+        table_id,
+        x_axis_column_key,
+        y_axis_column_key,
+        show_y_axis_label,
+        show_x_axis_label,
+        y_axis_label_position,
+        x_axis_label_position,
+        y_axis_summary_type,
+        title_name
+      } = 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_key);
+        const column = TableUtils.getTableColumnByKey(table, x_axis_column_key);
         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);
@@ -408,160 +423,153 @@ var BarChart = /*#__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';
+        const div = document.createElement('div');
+        div.id = yAxisID;
+        div.className = 'statistic-chart-axis-label';
         if (y_axis_summary_type === SUMMARY_TYPE.COUNT) {
-          _div.innerHTML = intl.get(TITLE_AMOUNT);
+          div.innerHTML = intl.get(TITLE_AMOUNT);
         } else {
-          var _column = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
-          _div.innerHTML = _column.name || '';
+          const column = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+          div.innerHTML = column.name || '';
           if (type === STAT_TYPE.BAR_STACK) {
-            _div.innerHTML = title_name || '';
+            div.innerHTML = title_name || '';
           }
         }
-        var containerHeight = chartContainer.offsetHeight;
-        var textAlign = 'center';
+        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.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;
+  }
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator,
+      eventBus
+    } = this.props;
+    this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
+      this.renderAxisLabel(newStatItem);
+    });
+    if (this.container) {
+      chartCalculator.calculate(statItem).then(data => {
+        if (!data) return;
+        let showResultDescription = 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;
   }
-  _createClass(BarChart, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$props4 = this.props,
-        statItem = _this$props4.statItem,
-        chartCalculator = _this$props4.chartCalculator,
-        eventBus = _this$props4.eventBus;
-      this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, function (newStatItem) {
-        _this2.renderAxisLabel(newStatItem);
+  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) {
-          if (!data) return;
-          var showResultDescription = data.length > 0 ? false : true;
-          _this2.setState({
+        chartCalculator.calculate(statItem).then(data => {
+          const showResultDescription = 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$props5 = this.props,
-        statItem = _this$props5.statItem,
-        chartCalculator = _this$props5.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.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;
-      this.unsubscribeStyleChange();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var statItem = this.props.statItem;
-      var _this$state = this.state,
-        isCalculatingData = _this$state.isCalculatingData,
-        showResultDescription = _this$state.showResultDescription;
-      var show_y_axis_label = statItem.show_y_axis_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(_ref3) {
-          return _this4.container = _ref3;
-        },
-        style: {
-          padding: show_y_axis_label || show_x_axis_label ? 30 : 20
-        },
-        className: "statistic-chart-container"
-      }));
-    }
-  }]);
-  return BarChart;
-}(BaseChart);
+  }
+  componentWillUnmount() {
+    this.container = null;
+    this.unsubscribeStyleChange();
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    const {
+      show_y_axis_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_label || show_x_axis_label ? 30 : 20
+      },
+      className: "statistic-chart-container"
+    }));
+  }
+}
 BarChart.propTypes = propTypes;
 export default BarChart;