dtable-statistic 4.0.7 → 4.0.9

package/es/stat-view/pivot-table/two-dimension-table.js

@@ -6,10 +6,10 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { PureComponent } from 'react';
 import intl from 'react-intl-universal';
-import { CellType, isNumber, TableUtils, Views } from 'dtable-store';
+import { FORMULA_COLUMN_TYPES_MAP, isNumber, TableUtils, Views } from 'dtable-store';
 import PivotTableDisplayName from './pivot-table-display-name';
 import { isMobile } from '../../utils';
-import { TITLE_TOTAL } from '../../constants';
+import { STATISTICS_COUNT_TYPE, SUMMARY_METHOD_MAP, TITLE_TOTAL } from '../../constants';
 import styles from './statistic-pivot-table.module.css';
 var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
   _inherits(TwoDimensionTable, _PureComponent);
@@ -59,6 +59,95 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
       }
       return 0;
     };
+    _this.getCellValueFromRow = function (row, formulaRow, columnType, columnKey, sqlKey, isSqlQuery) {
+      if (!isSqlQuery) {
+        if (FORMULA_COLUMN_TYPES_MAP[columnType]) {
+          var cellValue = formulaRow[columnKey];
+          return Array.isArray(cellValue) ? cellValue[0] : cellValue;
+        }
+        return row[columnKey];
+      }
+      return row[sqlKey];
+    };
+    _this.getSummaryTotal = function (summaryColumnType, summaryColumnKey, sqlKey, summaryType, summaryMethod, rows, formulaRows, isSqlQuery) {
+      if (summaryType === STATISTICS_COUNT_TYPE.COUNT) {
+        return rows.length;
+      }
+      if (summaryType !== STATISTICS_COUNT_TYPE.ADVANCED) {
+        return 0;
+      }
+      switch (summaryMethod) {
+        case SUMMARY_METHOD_MAP.Distinct_values:
+          {
+            var count = 0;
+            var existMap = {};
+            rows.forEach(function (row) {
+              var formulaRow = formulaRows && formulaRows[row._id];
+              var cellValue = _this.getCellValueFromRow(row, formulaRow, summaryColumnType, summaryColumnKey, sqlKey, isSqlQuery);
+              if (!cellValue) {
+                if (cellValue === 0) {
+                  cellValue = '0';
+                } else {
+                  cellValue = !!cellValue;
+                }
+              }
+              if (!existMap[cellValue]) {
+                existMap[cellValue] = true;
+                count++;
+              }
+            });
+            return count;
+          }
+        case SUMMARY_METHOD_MAP.Sum:
+        case SUMMARY_METHOD_MAP.Mean:
+          {
+            var sum = 0;
+            var validNumbersCount = 0;
+            rows.forEach(function (row) {
+              var formulaRow = formulaRows && formulaRows[row._id];
+              var cellValue = _this.getCellValueFromRow(row, formulaRow, summaryColumnType, summaryColumnKey, sqlKey, isSqlQuery);
+              if (isNumber(cellValue)) {
+                validNumbersCount++;
+                sum += cellValue;
+              }
+            });
+            if (summaryMethod === SUMMARY_METHOD_MAP.Sum) {
+              sum = Number.parseFloat(sum.toFixed(8));
+            } else if (summaryMethod === SUMMARY_METHOD_MAP.Mean) {
+              sum = validNumbersCount === 0 ? 0 : Number.parseFloat((sum / validNumbersCount).toFixed(8));
+            }
+            return sum;
+          }
+        case SUMMARY_METHOD_MAP.Max:
+        case SUMMARY_METHOD_MAP.Min:
+          {
+            if (rows.length === 0) {
+              return 0;
+            }
+            var result = rows.reduce(function (current, next) {
+              var currentFormulaRow = formulaRows && formulaRows[current._id];
+              var nextFormulaRow = formulaRows && formulaRows[next._id];
+              var currentValue = _this.getCellValueFromRow(current, currentFormulaRow, summaryColumnType, summaryColumnKey, sqlKey, isSqlQuery);
+              var nextValue = _this.getCellValueFromRow(next, nextFormulaRow, summaryColumnType, summaryColumnKey, sqlKey, isSqlQuery);
+              if (!nextValue && nextValue !== 0) {
+                return current;
+              }
+              var isNextGreater = currentValue < nextValue;
+              if (summaryMethod === SUMMARY_METHOD_MAP.Min) {
+                return isNextGreater ? current : next;
+              } else {
+                return isNextGreater ? next : current;
+              }
+            });
+            var formulaRow = formulaRows && formulaRows[result._id];
+            return _this.getCellValueFromRow(result, formulaRow, summaryColumnType, summaryColumnKey, sqlKey, isSqlQuery);
+          }
+        default:
+          {
+            return 0;
+          }
+      }
+    };
     _this.getCells = function (row, summaryColumn) {
       var _this$props2 = _this.props,
         pivotResult = _this$props2.pivotResult,
@@ -83,19 +172,7 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
             sqlKey = column.sqlKey,
             method = column.method;
           if (Array.isArray(rowData)) {
-            var sum = 0;
-            rowData.forEach(function (rowDataItem) {
-              if (!isSqlQuery) {
-                if (type === CellType.FORMULA) {
-                  var formulaRow = formulaRows[rowDataItem._id];
-                  sum += _this.getNumberValue(formulaRow[key]);
-                  return;
-                }
-                sum += _this.getNumberValue(rowDataItem[key]);
-                return;
-              }
-              sum += _this.getNumberValue(rowDataItem[sqlKey]);
-            });
+            var sum = _this.getSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
             summary_multiple_columns.push(sum);
             formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, sum, method));
             return;
@@ -304,22 +381,12 @@ var TwoDimensionTable = /*#__PURE__*/function (_PureComponent) {
         var isValidTotalDisplayValue = true;
         if (column_groupby_multiple_numeric_column) {
           var total = 0;
-          pivotColumnCell.forEach(function (item) {
-            pivot_summary_multiple_columns.forEach(function (jtem) {
-              var type = jtem.type,
-                key = jtem.key,
-                sqlKey = jtem.sqlKey;
-              if (!isSqlQuery) {
-                if (type === CellType.FORMULA) {
-                  var formulaRow = formulaRows[item._id];
-                  total += _this.getNumberValue(formulaRow[key]);
-                  return;
-                }
-                total += _this.getNumberValue(item[key]);
-                return;
-              }
-              total += _this.getNumberValue(item[sqlKey]);
-            });
+          pivot_summary_multiple_columns.forEach(function (summaryCol) {
+            var type = summaryCol.type,
+              key = summaryCol.key,
+              sqlKey = summaryCol.sqlKey,
+              method = summaryCol.method;
+            total += _this.getSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
           });
           totalDisplayValue = total;
           allTotalDisplay += total;

package/es/stat-view/ring-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 { formatPieChartData, getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
-import { DEFAULT_ANNOTATION_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_TOTAL } from '../constants';
+import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
+import { DEFAULT_ANNOTATION_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, SUMMARY_TYPE, TITLE_TOTAL } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -61,14 +58,11 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       var _this$props2 = _this.props,
         getTableById = _this$props2.getTableById,
         statItem = _this$props2.statItem,
-        theme = _this$props2.theme,
-        isEnlarge = _this$props2.isEnlarge,
-        isPreview = _this$props2.isPreview,
         colorThemeName = _this$props2.colorThemeName;
-      var currentTheme = getCurrentTheme(colorThemeName);
       var summaryColumn = null;
-      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       var summary_type = statItem.summary_type,
+        summary_method = statItem.summary_method,
         summary_column_key = statItem.summary_column_key,
         table_id = statItem.table_id,
         show_legend = statItem.show_legend,
@@ -79,16 +73,14 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       var table = getTableById(table_id);
       if (summary_type !== SUMMARY_TYPE.COUNT) {
         summaryColumn = summary_column_key && TableUtils.getTableColumnByKey(table, summary_column_key);
-        columnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        summaryColumnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       _this.chart.coordinate('theta', {
         radius: isCreating ? 0.75 : 0.95,
         innerRadius: isCreating ? 0.6 : 0.7
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var themeColors = _this.getThemeColors();
       var newData = formatPieChartData(data, statItem, table, currentTheme);
       _this.chart.data(newData, {
         'name': {
@@ -153,10 +145,9 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
           nice: false
         }
       });
-      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', function (value, percent) {
-        var displayedValue = getNumberDisplayString(value, columnData);
+      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('formatted_value*percent', function (value, percent) {
         return {
-          content: _this.getLabel(displayedValue, percent)
+          content: _this.getLabel(value, percent)
         };
       }, {
         offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
@@ -166,20 +157,19 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
           shadowBlur: 2,
           shadowColor: 'rgba(0, 0, 0, .45)'
         }
-      }).tooltip('name*value*percent', function (name, value, percent) {
+      }).tooltip('name*formatted_value*percent', function (name, value, percent) {
         var title = name;
         if (!name || name === 'undefined') {
           title = intl.get(EMPTY_NAME);
         } else if (name === 'Others') {
           title = intl.get('Others');
         }
-        var displayedValue = getNumberDisplayString(value, columnData);
         return show_percent || display_label ? {
           name: title,
-          value: _this.getLabel(displayedValue, percent)
+          value: _this.getLabel(value, percent)
         } : {
           name: title,
-          value: displayedValue
+          value: value
         };
       }).state({
         active: {
@@ -199,13 +189,13 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       if (display_annotation == undefined || display_annotation) {
         _this.setAnnotation({
           name: intl.get(TITLE_TOTAL),
-          value: summaryColumn ? getNumberDisplayString(_this.sum, summaryColumn.data) : _this.sum
+          value: summaryColumn ? _this.getNumberDisplayString(_this.sum, summaryColumnData, summary_method) : _this.sum
         }, themeColors.labelColor);
         _this.chart.on('interval:mouseenter', function (evt) {
-          return _this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn);
+          return _this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData);
         });
         _this.chart.on('interval:mouseleave', function (evt) {
-          return _this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn);
+          return _this.onLeaveRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData);
         });
       }
     };
@@ -239,11 +229,6 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
       }
       return content;
     };
-    _this.getLabelFontSize = function () {
-      var statItem = _this.props.statItem;
-      var label_font_size = statItem.label_font_size;
-      return getLabelFontSize(label_font_size);
-    };
     _this.getAnnotationFontSize = function () {
       var statItem = _this.props.statItem;
       var annotation_font_size = statItem.annotation_font_size;
@@ -254,7 +239,8 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         subFontSize: subFontSize
       };
     };
-    _this.setAnnotation = function (content, fontColor, summaryColumn) {
+    _this.setAnnotation = function (content, fontColor, summaryColumn, summaryColumnData) {
+      var summary_method = _this.props.statItem.summary_method;
       var name = content.name;
       if (!name || name === 'undefined') {
         name = intl.get(EMPTY_NAME);
@@ -276,7 +262,7 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: -20
       }).text({
         position: ['50%', '50%'],
-        content: summaryColumn ? getNumberDisplayString(content.value, summaryColumn.data) : content.value,
+        content: summaryColumn ? _this.getNumberDisplayString(content.value, summaryColumnData, summary_method) : content.value,
         style: {
           fontSize: mainFontSize,
           fill: fontColor,
@@ -285,18 +271,18 @@ var RingChart = /*#__PURE__*/function (_BaseChart) {
         offsetY: 20
       });
     };
-    _this.onEnterRingChart = function (ev, color, summaryColumn) {
+    _this.onEnterRingChart = function (ev, color, summaryColumn, summaryColumnData) {
       var item = ev.data.data;
       _this.chart.annotation().clear(true);
-      _this.setAnnotation(item, color, summaryColumn);
+      _this.setAnnotation(item, color, summaryColumn, summaryColumnData);
       _this.chart.render(true);
     };
-    _this.onLeaveRingChart = function (ev, color, summaryColumn) {
+    _this.onLeaveRingChart = function (ev, color, summaryColumn, summaryColumnData) {
       _this.chart.annotation().clear(true);
       _this.setAnnotation({
         name: intl.get(TITLE_TOTAL),
         value: _this.sum
-      }, color, summaryColumn);
+      }, color, summaryColumn, summaryColumnData);
       _this.chart.render(true);
     };
     _this.destroyChart = function () {
@@ -398,11 +384,7 @@ var RingChart = /*#__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", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref) {
           return _this4.container = _ref;
         },

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

@@ -10,14 +10,11 @@ import intl from 'react-intl-universal';
 import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart } from '../custom-g2';
-import { Loading } from '../components';
 import { getCurrentTheme } from '../utils/common-utils';
-import { EMPTY_NAME, LABEL_CONFIG_CHANGED, STAT_ITEM_THEME_COLORS } from '../constants';
+import { EMPTY_NAME, LABEL_CONFIG_CHANGED } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   colorThemeName: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
@@ -127,8 +124,6 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
         getTableById = _this$props3.getTableById,
         isPreview = _this$props3.isPreview,
         statItem = _this$props3.statItem,
-        isEnlarge = _this$props3.isEnlarge,
-        theme = _this$props3.theme,
         colorThemeName = _this$props3.colorThemeName;
       var currentTheme = getCurrentTheme(colorThemeName);
       var table_id = statItem.table_id,
@@ -152,10 +147,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       _this.chart.on('element:click', function (e) {
         _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       _this.chart.axis('x_axis', {
         label: {
           style: {
@@ -245,10 +237,6 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       }
       if (!_this.chart) return;
       statItem = newStatItem || statItem;
-      var _this$props5 = _this.props,
-        isEnlarge = _this$props5.isEnlarge,
-        isPreview = _this$props5.isPreview,
-        theme = _this$props5.theme;
       var _statItem = statItem,
         table_id = _statItem.table_id,
         x_axis_column = _statItem.x_axis_column,
@@ -259,10 +247,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
         x_axis_label_position = _statItem.x_axis_label_position;
       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));
@@ -350,9 +335,7 @@ var ScatterChart = /*#__PURE__*/function (_BaseChart) {
       if (show_y_axis_label) {
         style.paddingLeft = 38;
       }
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref3) {
           return _this2.container = _ref3;
         },

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

@@ -14,7 +14,6 @@ import { getEllipsisText } from '@antv/g2/esm/util/text';
 import { TableUtils } from 'dtable-store';
 import BaseChart from './base-chart';
 import { Chart, registerGeometryLabelLayout } from '../custom-g2';
-import { Loading } from '../components';
 import { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
 import { EMPTY_NAME, STATISTICS_COUNT_TYPE } from '../constants';
 import chartStyles from '../assets/css/statistic-chart.module.css';
@@ -215,14 +214,8 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
         itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">{info}<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')
         }
       });
       chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', function (name, value, percent) {
@@ -302,9 +295,7 @@ var TreemapChart = /*#__PURE__*/function (_BaseChart) {
     value: function render() {
       var _this2 = this;
       var isCalculatingData = this.state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref3) {
           return _this2.container = _ref3;
         },

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

@@ -7,15 +7,12 @@ 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 { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, STAT_ITEM_THEME_COLORS } from '../constants';
+import { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, SUMMARY_METHOD_MAP } from '../constants';
 var propTypes = {
   isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
   statItem: PropTypes.object,
   chartCalculator: PropTypes.object,
   getTableById: PropTypes.func
@@ -116,8 +113,6 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
     _this.drawChart = function (data) {
       var _this$props3 = _this.props,
         isPreview = _this$props3.isPreview,
-        isEnlarge = _this$props3.isEnlarge,
-        theme = _this$props3.theme,
         statItem = _this$props3.statItem;
       if (isPreview) {
         _this.chart = new Chart({
@@ -134,13 +129,10 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       }
       var summary_method = statItem.summary_method;
       var latest = data && data.latest;
-      var content = summary_method === 'Distinct_values' ? latest : _this.formatData(latest);
+      var content = summary_method === SUMMARY_METHOD_MAP.Distinct_values ? latest : _this.formatData(latest);
       var fontSize = _this.getFontSize(content);
       var labelFontSize = fontSize - 32;
-      var themeColors = STAT_ITEM_THEME_COLORS.light;
-      if (theme === 'dark' && !isEnlarge && isPreview) {
-        themeColors = STAT_ITEM_THEME_COLORS.dark;
-      }
+      var themeColors = _this.getThemeColors();
       var labelContent = _this.createLabelContent(data, labelFontSize);
       _this.chart.annotation().html({
         position: ['50%', '50%'],
@@ -159,8 +151,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
       if (summary_type !== STATISTICS_COUNT_TYPE.COUNT) {
         var table = getTableById(table_id);
         var selectedColumn = TableUtils.getTableColumnByKey(table, summary_column);
-        var formattedContent = getNumberDisplayString(data, selectedColumn.data || {});
-        return formattedContent;
+        return _this.getNumberDisplayString(data, selectedColumn.data || {});
       }
       var string = data + '';
       var isFloat = string.indexOf('.') > 0;
@@ -283,9 +274,7 @@ var BasicNumericCard = /*#__PURE__*/function (_BaseChart) {
     value: function render() {
       var _this2 = this;
       var isCalculatingData = this.state.isCalculatingData;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
-        className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
         ref: function ref(_ref4) {
           return _this2.container = _ref4;
         },