dtable-statistic 4.0.6 → 4.0.8

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

@@ -6,19 +6,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set';
 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, sortDataByGroupSum } from '../utils/common-utils';
-import { getChartDisplayLabels, getChartGroups } from '../utils/basic-chart-utils';
+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, STAT_ITEM_THEME_COLORS, LABEL_CONFIG_CHANGED, STAT_TYPE, NO_STATISTIC_RESULTS, TITLE_AMOUNT, TYPE_COLOR_USING, STATISTICS_COUNT_TYPE } from '../constants';
+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 = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
   isEdit: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -36,64 +33,43 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (originalData) {
       var _this$props = _this.props,
         getTableById = _this$props.getTableById,
-        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,
-        type = statItem.type,
+      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 currentTheme = getCurrentTheme(colorThemeName);
       var data = originalData;
       if (type == STAT_TYPE.BAR_STACK && sort_type) {
         data = sortDataByGroupSum(originalData, sort_type);
       }
-      if (isPreview) {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          appendPadding: [display_data ? 17 : 0, 0, 0, 0]
-        });
-      } else {
-        _this.chart = new Chart({
-          container: _this.container,
-          autoFit: true,
-          height: 400,
-          width: 700,
-          appendPadding: [display_data ? 17 : 0, 0, 0, 0]
-        });
-      }
+      _this.initChartHandler();
       _this.chart.on('interval:click', function (e) {
         _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var 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,
-        y_axis_use_stack = statItem.y_axis_use_stack,
-        y_axis_auto_range = statItem.y_axis_auto_range,
-        y_axis_min = statItem.y_axis_min,
-        y_axis_max = statItem.y_axis_max,
-        color_option = statItem.color_option;
-      var chartBarColor,
-        columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       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;
       if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         var table = getTableById(table_id);
         var summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
-        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
-      if (!summary_type && y_axis_summary_type) {
-        summary_type = y_axis_summary_type;
+      if (!summaryType && y_axis_summary_type) {
+        summaryType = y_axis_summary_type;
       }
-      if (!summary_method && y_axis_summary_method) {
-        summary_method = y_axis_summary_method;
+      if (!summaryMethod && y_axis_summary_method) {
+        summaryMethod = y_axis_summary_method;
       }
+      var chartBarColor = '#2a67d1';
       if (isGroupBar) {
         chartBarColor = 'group_name';
         _this.chart.scale('group_name', {
@@ -101,8 +77,6 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         });
       } else if (currentTheme && currentTheme.colors) {
         chartBarColor = currentTheme.colors[0];
-      } else {
-        chartBarColor = '#2a67d1';
       }
       _this.chart.data(data, {
         'name': {
@@ -111,45 +85,209 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         }
       });
       var width = _this.chart.coordinateBBox.width;
-      var chartData;
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      var chartData = isGroupBar ? getChartGroups(data) : data;
+      var themeColors = _this.getThemeColors();
+      var ticks = _this.getTicks(chartData, width);
+      if (ticks.length > 0) {
+        _this.chart.scale('name', {
+          ticks: ticks
+        });
       }
+
+      // set Coord type
+      _this.chart.coordinate('rect');
+      _this.handleAutoRange(data, summaryColumnData, summaryMethod);
       if (isGroupBar) {
-        chartData = getChartGroups(data);
+        _this.drawBarGroup({
+          data: data,
+          themeColors: themeColors,
+          currentTheme: currentTheme,
+          summaryColumnData: summaryColumnData,
+          summaryType: summaryType,
+          summaryMethod: summaryMethod
+        });
       } else {
-        chartData = data;
+        _this.drawBar({
+          themeColors: themeColors,
+          chartBarColor: chartBarColor,
+          summaryType: summaryType,
+          summaryMethod: summaryMethod
+        });
       }
-      var labelCount = chartData.length;
-      if (Math.floor(width / labelCount) <= 20) {
-        var displayLabels = getChartDisplayLabels(width, 20, chartData);
-        labelCount = displayLabels.length;
-        _this.chart.scale('name', {
-          ticks: displayLabels
+      _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,
+        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, {
+        style: {
+          fontSize: _this.getLabelFontSize(),
+          fill: themeColors.textColor
+        }
+      }).position('name*value').tooltip('name*formatted_value', function (name, value) {
+        return {
+          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
+        };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      }).style('value', function (value) {
+        var color = getLabelColor({
+          chart: statItem,
+          colorRules: colorRules,
+          value: 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 = {
+        style: {
+          fontSize: _this.getLabelFontSize(),
+          fill: themeColors.textColor
+        }
+      };
+      var displayData = display_data;
+      if (chartType == STAT_TYPE.BAR_STACK) {
+        displayData = display_each_block_data;
+        if (displayData) {
+          labelCfg.position = 'middle';
+        }
+
+        // get the total value of each stack
+        var dv = new DataSet.DataView().source(data);
+        dv.transform({
+          type: 'aggregate',
+          fields: ['value'],
+          operations: ['sum'],
+          as: ['value_sum'],
+          groupBy: ['name']
         });
+        if (display_data) {
+          dv.rows.forEach(function (item) {
+            _this.chart.annotation().text({
+              content: _this.getNumberDisplayString(item.value_sum, summaryColumnData, summaryMethod),
+              position: {
+                name: item.name,
+                value: item.value_sum
+              },
+              offsetY: -10,
+              offsetX: -5
+            });
+          });
+        }
       }
+      var groupColorCallback = currentTheme && currentTheme.colors;
 
-      // set Coord type
-      _this.chart.coordinate('rect');
+      // 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) {
+          if (!groupColorMapping[item.group_name]) {
+            groupColorMapping[item.group_name] = item.color;
+          }
+        });
+        groupColorCallback = function groupColorCallback(group_name) {
+          return groupColorMapping[group_name];
+        };
+      }
+      _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;
+        return {
+          value: value,
+          title: titleContent,
+          name: nameContent
+        };
+      }).adjust([{
+        type: y_axis_use_stack ? 'stack' : 'dodge'
+      }]).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+    };
+    _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 getNumberDisplayString(value, columnData);
+          return _this.getNumberDisplayString(value, summaryColumnData, summaryMethod);
         }
       };
+
+      // eslint-disable-next-line
       if (y_axis_auto_range == undefined || y_axis_auto_range) {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });
       } else {
-        valueScaleOptions = Object.assign({}, valueScaleOptions, {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
           min: y_axis_min,
           max: y_axis_max
         });
+
         // set the filter rule
         _this.chart.filter('value', function (value) {
           return value >= y_axis_min;
         });
+
         // filter the data
         _this.chart.filterData(data);
       }
@@ -160,133 +298,20 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
         },
         value: valueScaleOptions
       });
-      if (isGroupBar) {
-        var labelCfg = {
-          style: {
-            fontSize: _this.getLabelFontSize(),
-            fill: themeColors.textColor
-          }
-        };
-        var displayData = display_data;
-        if (statItem.type == STAT_TYPE.BAR_STACK) {
-          var display_each_block_data = statItem.display_each_block_data;
-          displayData = display_each_block_data;
-          if (displayData) {
-            labelCfg.position = 'middle';
-          }
-
-          // get the total value of each stack
-          var dv = new DataSet.DataView().source(data);
-          dv.transform({
-            type: 'aggregate',
-            fields: ['value'],
-            operations: ['sum'],
-            as: ['value_sum'],
-            groupBy: ['name']
-          });
-          if (display_data) {
-            dv.rows.forEach(function (item) {
-              _this.chart.annotation().text({
-                content: getNumberDisplayString(item.value_sum, columnData),
-                position: {
-                  name: item.name,
-                  value: item.value_sum
-                },
-                offsetY: -10,
-                offsetX: -5
-              });
-            });
-          }
-        }
-        var 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) {
-            if (!groupColorMapping[item.group_name]) {
-              groupColorMapping[item.group_name] = item.color;
-            }
-          });
-          groupColorCallback = function groupColorCallback(group_name) {
-            return groupColorMapping[group_name];
-          };
-        }
-        _this.chart.scale({
-          group_name: {
-            type: 'cat'
-          }
-        });
-        _this.chart.interval().label(displayData ? 'value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*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;
-          return {
-            title: titleContent,
-            value: getNumberDisplayString(value, columnData),
-            name: nameContent
-          };
-        }).adjust([{
-          type: y_axis_use_stack ? 'stack' : 'dodge'
-        }]).state({
-          active: {
-            style: {
-              stroke: null
-            }
-          }
-        });
-      } else {
-        var colorRules = statItem.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 ? 'value' : false, {
-          style: {
-            fontSize: _this.getLabelFontSize(),
-            fill: themeColors.textColor
-          }
-        }).position('name*value').tooltip('name*value', function (name, value) {
-          return {
-            title: summary_type === STATISTICS_COUNT_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
-            value: getNumberDisplayString(value, columnData),
-            name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
-          };
-        }).state({
-          active: {
-            style: {
-              stroke: null
-            }
-          }
-        }).style('value', function (value) {
-          var color = getLabelColor({
-            chart: statItem,
-            colorRules: colorRules,
-            value: value
-          });
-          if (color) {
-            return {
-              fill: color
-            };
-          }
-          return {
-            fill: chartBarColor
-          };
-        });
-      }
+    };
+    _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
@@ -296,16 +321,7 @@ var BarChart = /*#__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', {
@@ -322,6 +338,8 @@ var BarChart = /*#__PURE__*/function (_BaseChart) {
           }
         }
       });
+    };
+    _this.setLegend = function (themeColors) {
       var legendPosition = 'bottom';
       _this.chart.legend('group_name', {
         position: legendPosition,
@@ -348,23 +366,16 @@ var BarChart = /*#__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;
+      var _this$props3 = _this.props,
+        getTableById = _this$props3.getTableById,
+        statItem = _this$props3.statItem;
       if (newStatItem && newStatItem._id !== statItem._id) {
         return;
       }
       if (!_this.chart) return;
       statItem = newStatItem || statItem;
-      var _this$props3 = _this.props,
-        isEnlarge = _this$props3.isEnlarge,
-        isPreview = _this$props3.isPreview,
-        theme = _this$props3.theme;
       var _statItem = statItem,
         type = _statItem.type,
         table_id = _statItem.table_id,
@@ -378,10 +389,7 @@ var BarChart = /*#__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));
@@ -438,11 +446,6 @@ var BarChart = /*#__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
@@ -547,13 +550,9 @@ var BarChart = /*#__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(_ref3) {
+          return _this4.container = _ref3;
         },
         style: {
           padding: show_y_axis_label || show_x_axis_label ? 30 : 20

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

@@ -1,10 +1,23 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import { Component } from 'react';
+import React, { Component } from 'react';
+import intl from 'react-intl-universal';
 import { getNumberDisplayString } from 'dtable-store';
-import { isStatItemEqual, shouldCalculateStatItem } from '../utils/common-utils';
-import { SUMMARY_METHOD_MAP } from '../constants';
+import { Loading } from '../components';
+import { getLabelFontSize, isStatItemEqual, shouldCalculateStatItem } from '../utils/common-utils';
+import { getChartDisplayLabels } from '../utils/basic-chart-utils';
+import { EMPTY_NAME, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_METHOD_MAP, THEME_NAME_MAP } from '../constants';
+var CHART_STYLE_CONFIG = {
+  'g2-tooltip': {
+    borderRadius: '2px',
+    backgroundColor: '#fff',
+    padding: '10px'
+  },
+  'tooltip-item': {
+    marginTop: '5px'
+  }
+};
 var BaseChart = /*#__PURE__*/function (_Component) {
   _inherits(BaseChart, _Component);
   var _super = _createSuper(BaseChart);
@@ -16,8 +29,8 @@ var BaseChart = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _this.needRefresh = function (preProps, nextProps) {
-      var refresh = nextProps.refresh;
-      return refresh && refresh !== preProps.refresh;
+      var dtableChangedTime = nextProps.dtableChangedTime;
+      return dtableChangedTime !== preProps.dtableChangedTime;
     };
     _this.canUpdate = function (preProps, nextProps) {
       var statItem = preProps.statItem,
@@ -31,12 +44,71 @@ var BaseChart = /*#__PURE__*/function (_Component) {
       var nextStatItem = nextProps.statItem;
       return shouldCalculateStatItem(statItem, nextStatItem) || _this.needRefresh(preProps, nextProps);
     };
-    _this.getNumberDisplayString = function (value, columnData, summaryType) {
-      if (summaryType === SUMMARY_METHOD_MAP.Distinct_values) {
+    _this.getTicks = function (data, width) {
+      var labelCount = data.length;
+      if (Math.floor(width / labelCount) > 20) {
+        return [];
+      }
+      return getChartDisplayLabels(width, 20, data);
+    };
+    _this.getLabelCount = function (ticks, data) {
+      var ticksLen = ticks.length;
+      return ticksLen > 0 ? ticksLen : data.length;
+    };
+    _this.getThemeColors = function () {
+      var _this$props = _this.props,
+        isPreview = _this$props.isPreview,
+        isEnlarge = _this$props.isEnlarge,
+        theme = _this$props.theme;
+      if (isEnlarge || !isPreview) {
+        return STAT_ITEM_THEME_COLORS.light;
+      }
+      return theme === THEME_NAME_MAP.DARK ? STAT_ITEM_THEME_COLORS[THEME_NAME_MAP.DARK] : STAT_ITEM_THEME_COLORS[THEME_NAME_MAP.LIGHT];
+    };
+    _this.getAxisLabelColor = function (textColor) {
+      var _this$props2 = _this.props,
+        isPreview = _this$props2.isPreview,
+        isEnlarge = _this$props2.isEnlarge,
+        theme = _this$props2.theme;
+      if (theme === THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
+        return '#ffffff';
+      }
+      return textColor || '#999999';
+    };
+    _this.getDefaultChartStyleByKey = function (key) {
+      return CHART_STYLE_CONFIG[key] || {};
+    };
+    _this.labelFormatter = function (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;
+    };
+    _this.getLabelFontSize = function () {
+      var statItem = _this.props.statItem;
+      var label_font_size = statItem.label_font_size;
+      return getLabelFontSize(label_font_size);
+    };
+    _this.getNumberDisplayString = function (value, columnData, summaryMethod) {
+      if (summaryMethod === SUMMARY_METHOD_MAP.Distinct_values) {
         return value;
       }
       return getNumberDisplayString(value, columnData);
     };
+    _this.renderLoading = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null));
+    };
+    _this.renderEmpty = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-text'
+      }, intl.get(NO_STATISTIC_RESULTS));
+    };
     return _this;
   }
   return BaseChart;