dtable-statistic 4.0.7 → 4.0.8

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

@@ -5,17 +5,14 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
-import { getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { EMPTY_NAME, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, STAT_TYPE } from '../constants';
+import { getCurrentTheme } from '../utils/common-utils';
+import { EMPTY_NAME, STAT_TYPE } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -29,10 +26,9 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
     var _this;
     _classCallCheck(this, CompletenessChart);
     _this = _super.call(this, props);
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
     };
     _this.sortData = function (data, sortType) {
       var compareCompleteness = sortType == 'ascending' ? function (a, b) {
@@ -53,16 +49,18 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        isPreview = _this$props.isPreview,
         statItem = _this$props.statItem,
-        theme = _this$props.theme,
-        isEnlarge = _this$props.isEnlarge,
         colorThemeName = _this$props.colorThemeName;
-      var group_column = statItem.group_column,
-        display_percentage = statItem.display_percentage,
-        sort_type = statItem.sort_type;
+      var sort_type = statItem.sort_type,
+        completed_column = statItem.completed_column,
+        target_column = statItem.target_column,
+        table_id = statItem.table_id;
       var isGroupChart = statItem.type === STAT_TYPE.GROUP_COMPLETENESS_CHART;
       var currentTheme = getCurrentTheme(colorThemeName);
+      _this.initChartHandler();
+      var selectedTable = getTableById(table_id);
+      var completedColumn = TableUtils.getTableColumnByKey(selectedTable, completed_column);
+      var targetColumn = TableUtils.getTableColumnByKey(selectedTable, target_column);
 
       // 数据颜色映射value设置当前主题色
       if (isGroupChart) {
@@ -75,21 +73,6 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
       if (sort_type && !isGroupChart) {
         _this.sortData(data, sort_type);
       }
-      if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          appendPadding: [0, display_percentage ? 30 : 0, 0, 0]
-        });
-      } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          height: 400,
-          width: 700,
-          appendPadding: [0, display_percentage ? 30 : 0, 0, 0]
-        });
-      }
       _this.chart.on('element:click', function (e) {
         _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
@@ -100,26 +83,57 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
       _this.chart.coordinate('rect');
-      var completed_column = statItem.completed_column,
-        target_column = statItem.target_column,
-        table_id = statItem.table_id,
-        _statItem$y_axis_auto = statItem.y_axis_auto_range,
-        y_axis_auto_range = _statItem$y_axis_auto === void 0 ? true : _statItem$y_axis_auto,
-        _statItem$y_axis_min = statItem.y_axis_min,
-        y_axis_min = _statItem$y_axis_min === void 0 ? 0 : _statItem$y_axis_min,
-        _statItem$y_axis_max = statItem.y_axis_max,
-        y_axis_max = _statItem$y_axis_max === void 0 ? 0 : _statItem$y_axis_max;
-      var selectedTable = getTableById(table_id);
-      var completedColumn = TableUtils.getTableColumnByKey(selectedTable, completed_column);
-      var targetColumn = TableUtils.getTableColumnByKey(selectedTable, target_column);
+      _this.handleAutoRange(targetColumn);
+      var themeColors = _this.getThemeColors();
+      _this.drawBar({
+        data: data,
+        currentTheme: currentTheme,
+        themeColors: themeColors,
+        isGroupChart: isGroupChart,
+        completedColumn: completedColumn,
+        targetColumn: targetColumn
+      });
+      _this.setTooltip();
+      _this.setAxis(themeColors);
+      _this.chart.interaction('active-region');
+      _this.chart.coordinate().transpose();
+      if (isGroupChart) {
+        _this.setLegendGroup(themeColors);
+      }
+      _this.chart.render();
+    };
+    _this.initChartHandler = function () {
+      var _this$props2 = _this.props,
+        isPreview = _this$props2.isPreview,
+        statItem = _this$props2.statItem;
+      var display_percentage = statItem.display_percentage;
+      var config = {
+        container: _this.container,
+        autoFit: true,
+        appendPadding: [0, display_percentage ? 30 : 0, 0, 0]
+      };
+      if (!isPreview) {
+        config.height = 400;
+        config.width = 700;
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.handleAutoRange = function (targetColumn) {
+      var _this$props$statItem = _this.props.statItem,
+        _this$props$statItem$ = _this$props$statItem.y_axis_auto_range,
+        y_axis_auto_range = _this$props$statItem$ === void 0 ? true : _this$props$statItem$,
+        _this$props$statItem$2 = _this$props$statItem.y_axis_min,
+        y_axis_min = _this$props$statItem$2 === void 0 ? 0 : _this$props$statItem$2,
+        _this$props$statItem$3 = _this$props$statItem.y_axis_max,
+        y_axis_max = _this$props$statItem$3 === void 0 ? 0 : _this$props$statItem$3;
       var valueScaleOptions = {
         nice: true,
         formatter: function formatter(value) {
-          return getNumberDisplayString(value, targetColumn.data);
+          return _this.getNumberDisplayString(value, targetColumn.data);
         }
       };
       if (!y_axis_auto_range) {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           min: y_axis_min,
           max: y_axis_max
         });
@@ -131,17 +145,24 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         // Automatic adjustment of maximum and minimum values
         value: valueScaleOptions
       });
+    };
+    _this.drawBar = function (_ref) {
+      var data = _ref.data,
+        themeColors = _ref.themeColors,
+        currentTheme = _ref.currentTheme,
+        isGroupChart = _ref.isGroupChart,
+        completedColumn = _ref.completedColumn,
+        targetColumn = _ref.targetColumn;
+      var _this$props$statItem2 = _this.props.statItem,
+        group_column = _this$props$statItem2.group_column,
+        display_percentage = _this$props$statItem2.display_percentage;
       var adjustType = isGroupChart ? [{
         type: 'dodge',
         dodgeBy: 'group_label'
       }, {
         type: 'stack'
       }] : 'stack';
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
-      _this.chart.interval().label(statItem.display_percentage ? 'current_value*target_value' : false, {
+      _this.chart.interval().label(display_percentage ? 'current_value*target_value' : false, {
         position: 'right',
         offset: 3,
         style: {
@@ -172,9 +193,9 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
         var value;
         if (type === 'uncompleted') {
           tooltipName = intl.get('Uncompleted');
-          value = getNumberDisplayString(target_value - current_value, targetColumn.data);
+          value = _this.getNumberDisplayString(target_value - current_value, targetColumn.data);
         } else {
-          value = getNumberDisplayString(current_value, completedColumn.data);
+          value = _this.getNumberDisplayString(current_value, completedColumn.data);
         }
         var tooltipTitle = name;
         if (!tooltipTitle && typeof tooltipTitle !== 'number') {
@@ -192,24 +213,20 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setTooltip = function () {
       _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': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-
-      // set axis label and tooltip
+    };
+    _this.setAxis = function (themeColors) {
       _this.chart.axis('name', {
         label: {
           formatter: function formatter(name) {
@@ -241,39 +258,32 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.interaction('active-region');
-      _this.chart.coordinate().transpose();
-      if (isGroupChart) {
-        _this.chart.legend('group_label', {
-          itemName: {
+    };
+    _this.setLegendGroup = function (themeColors) {
+      _this.chart.legend('group_label', {
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: function formatter(name) {
+            return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
+          }
+        },
+        pageNavigator: {
+          text: {
             style: {
               fill: themeColors.textColor
-            },
-            formatter: function formatter(name) {
-              return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
             }
           },
-          pageNavigator: {
-            text: {
-              style: {
-                fill: themeColors.textColor
-              }
-            },
-            marker: {
-              style: {
-                fill: themeColors.legendPageNavigatorMarkerColor,
-                inactiveFill: themeColors.legendPageNavigatorMarkerColor,
-                inactiveOpacity: 0.45
-              }
+          marker: {
+            style: {
+              fill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
             }
           }
-        });
-      }
-      _this.chart.render();
-    };
-    _this.destroyChart = function () {
-      _this.chart.destroy();
-      _this.chart = null;
+        }
+      });
     };
     _this.state = {
       isCalculatingData: true,
@@ -286,9 +296,9 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      var _this$props2 = this.props,
-        statItem = _this$props2.statItem,
-        chartCalculator = _this$props2.chartCalculator;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
       if (this.container) {
         chartCalculator.calculate(statItem).then(function (data) {
           var showResultDescription = data.length > 0 ? false : true;
@@ -323,9 +333,9 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(preProps, preState) {
       var _this3 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator;
+      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)) {
@@ -368,13 +378,9 @@ var CompletenessChart = /*#__PURE__*/function (_BaseChart) {
       var _this$state = this.state,
         isCalculatingData = _this$state.isCalculatingData,
         showResultDescription = _this$state.showResultDescription;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this4.container = _ref;
+      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;
         },
         style: {
           padding: 20

package/es/stat-view/custom-bar.js

@@ -9,19 +9,16 @@ import intl from 'react-intl-universal';
 import { TableUtils } from 'dtable-store';
 import { Chart } from '../custom-g2';
 import BaseChart from './base-chart';
-import { Loading } from '../components';
-import { getChartDisplayLabels, getChartGroups } from '../utils/basic-chart-utils';
-import { getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { EMPTY_NAME, STAT_ITEM_THEME_COLORS, LABEL_CONFIG_CHANGED, TITLE_AMOUNT, NO_STATISTIC_RESULTS } from '../constants';
+import { getChartGroups } from '../utils/basic-chart-utils';
+import { getCurrentTheme } from '../utils/common-utils';
+import { EMPTY_NAME, LABEL_CONFIG_CHANGED, TITLE_AMOUNT } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
   statItem: PropTypes.object,
   labelColorConfigs: PropTypes.array,
   chartCalculator: PropTypes.object,
   eventBus: PropTypes.object,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   toggleStatisticRecordsDialog: PropTypes.func
 };
@@ -35,24 +32,10 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (originalData) {
       // just support custom stack-bar
       var _this$props = _this.props,
-        isPreview = _this$props.isPreview,
         statItem = _this$props.statItem,
-        isEnlarge = _this$props.isEnlarge,
-        theme = _this$props.theme,
         colorThemeName = _this$props.colorThemeName;
-      var display_data = statItem.display_data;
-      var currentTheme = getCurrentTheme(colorThemeName);
+      _this.initChartHandler();
       var data = originalData;
-      var viewConfig = {
-        container: _this.container,
-        autoFit: true,
-        appendPadding: [display_data ? 17 : 0, 0, 0, 0]
-      };
-      if (!isPreview) {
-        viewConfig.height = 400;
-        viewConfig.width = 700;
-      }
-      _this.chart = new Chart(viewConfig);
       _this.chart.on('interval:click', function (e) {
         _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
@@ -66,17 +49,11 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
         }
       });
       var width = _this.chart.coordinateBBox.width;
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
       var chartData = getChartGroups(data);
-      var labelCount = chartData.length;
-      if (Math.floor(width / labelCount) <= 20) {
-        var displayLabels = getChartDisplayLabels(width, 20, chartData);
-        labelCount = displayLabels.length;
+      var ticks = _this.getTicks(chartData, width);
+      if (ticks.length > 0) {
         _this.chart.scale('name', {
-          ticks: displayLabels
+          ticks: ticks
         });
       }
 
@@ -88,17 +65,6 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
           type: 'cat'
         }
       });
-      var labelCfg = {
-        style: {
-          fontSize: _this.getLabelFontSize(),
-          fill: themeColors.textColor
-        }
-      };
-      var display_each_block_data = statItem.display_each_block_data;
-      var displayData = display_each_block_data;
-      if (displayData) {
-        labelCfg.position = 'middle';
-      }
 
       // get the total value of each stack
       var dv = new DataSet.DataView().source(data);
@@ -109,21 +75,64 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
         as: ['value_sum'],
         groupBy: ['name', 'y_axis_type']
       });
-      var groupColorCallback = currentTheme && currentTheme.colors;
       _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, formatted_value, group_name, raw_name) {
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var themeColors = _this.getThemeColors();
+      _this.drawBar({
+        themeColors: themeColors,
+        currentTheme: currentTheme
+      });
+      _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,
+        autoFit: true,
+        appendPadding: [display_data ? 17 : 0, 0, 0, 0]
+      };
+      if (!isPreview) {
+        config.height = 400;
+        config.width = 700;
+      }
+      _this.chart = new Chart(config);
+    };
+    _this.drawBar = function (_ref) {
+      var themeColors = _ref.themeColors,
+        currentTheme = _ref.currentTheme;
+      var display_each_block_data = _this.props.statItem.display_each_block_data;
+      var displayData = display_each_block_data;
+      var labelCfg = {
+        style: {
+          fontSize: _this.getLabelFontSize(),
+          fill: themeColors.textColor
+        }
+      };
+      if (displayData) {
+        labelCfg.position = 'middle';
+      }
+      var groupColorCallback = currentTheme && currentTheme.colors;
+      _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;
         if (!group_name && typeof group_name !== 'number') {
           nameContent = intl.get(EMPTY_NAME);
         }
         var title = !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
         return {
+          value: value,
           title: title,
-          value: formatted_value,
           name: nameContent
         };
       }).adjust([{
@@ -139,24 +148,20 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setTooltip = function () {
       _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': {
-            borderRadius: '2px',
-            backgroundColor: '#fff',
-            padding: '10px'
-          },
-          'tooltip-item': {
-            marginTop: '5px'
-          }
+          'g2-tooltip': _this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': _this.getDefaultChartStyleByKey('tooltip-item')
         }
       });
-
-      // set axis label and tooltip
+    };
+    _this.setAxis = function (themeColors) {
       _this.chart.axis('name', {
         line: {
           style: themeColors.gridColor
@@ -166,16 +171,7 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
           style: {
             fill: themeColors.textColor
           },
-          formatter: function formatter(name) {
-            var label = name;
-            if (name.length > 10) {
-              label = "".concat(name.slice(0, 10), "...");
-            }
-            if (name === '' || name === 'undefined') {
-              label = intl.get(EMPTY_NAME);
-            }
-            return label;
-          }
+          formatter: _this.labelFormatter
         }
       });
       _this.chart.axis('value', {
@@ -192,6 +188,8 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setLegend = function (themeColors) {
       var legendPosition = 'bottom';
       _this.chart.legend('group_name', {
         position: legendPosition,
@@ -221,17 +219,11 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
-      _this.chart.interaction('active-region');
-      _this.chart.render();
-      _this.renderAxisLabel();
     };
     _this.renderAxisLabel = function (newStatItem) {
-      var _this$props2 = _this.props,
-        getTableById = _this$props2.getTableById,
-        statItem = _this$props2.statItem,
-        isEnlarge = _this$props2.isEnlarge,
-        isPreview = _this$props2.isPreview,
-        theme = _this$props2.theme;
+      var _this$props3 = _this.props,
+        getTableById = _this$props3.getTableById,
+        statItem = _this$props3.statItem;
       if (newStatItem && newStatItem._id !== statItem._id) {
         return;
       }
@@ -247,10 +239,7 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
         title_name = _statItem.title_name;
       var table = getTableById(table_id);
       var autoPadding = _this.chart.autoPadding;
-      var textColor = '#999999';
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        textColor = '#ffffff';
-      }
+      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));
@@ -299,11 +288,6 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
       _this.chart.destroy();
       _this.chart = null;
     };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
-    };
     _this.state = {
       isCalculatingData: true,
       showResultDescription: true
@@ -315,10 +299,10 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      var _this$props3 = this.props,
-        statItem = _this$props3.statItem,
-        chartCalculator = _this$props3.chartCalculator,
-        eventBus = _this$props3.eventBus;
+      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);
       });
@@ -339,9 +323,9 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
-      var _this$props4 = this.props,
-        statItem = _this$props4.statItem,
-        colorThemeName = _this$props4.colorThemeName;
+      var _this$props5 = this.props,
+        statItem = _this$props5.statItem,
+        colorThemeName = _this$props5.colorThemeName;
       var nextStatItem = nextProps.statItem;
       if (this.canUpdate(this.props, nextProps) || statItem.y_axises !== nextStatItem.y_axises) {
         return true;
@@ -358,9 +342,9 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(preProps, preState) {
       var _this3 = this;
-      var _this$props5 = this.props,
-        statItem = _this$props5.statItem,
-        chartCalculator = _this$props5.chartCalculator;
+      var _this$props6 = this.props,
+        statItem = _this$props6.statItem,
+        chartCalculator = _this$props6.chartCalculator;
       var isCalculatingData = this.state.isCalculatingData;
       if (isCalculatingData !== preState.isCalculatingData) return;
       if (this.shouldCalculateStatItem(preProps, this.props) || preProps.statItem.y_axises !== statItem.y_axises) {
@@ -412,13 +396,9 @@ var CustomBar = /*#__PURE__*/function (_BaseChart) {
         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 && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-text'
-      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          return _this4.container = _ref;
+      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;
         },
         style: {
           padding: show_y_axis_label || show_x_axis_label ? 30 : 20