dtable-statistic 4.3.1 → 4.3.3

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

@@ -1,20 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import { TableUtils } from 'dtable-store';
-import BaseChart from './base-chart';
-import { Chart } from '../custom-g2';
-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';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableStore = require("dtable-store");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
 const propTypes = {
-  isPreview: PropTypes.bool,
-  colorThemeName: PropTypes.string,
-  statItem: PropTypes.object,
-  chartCalculator: PropTypes.object,
-  toggleStatisticRecordsDialog: PropTypes.func
+  isPreview: _propTypes.default.bool,
+  colorThemeName: _propTypes.default.string,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  toggleStatisticRecordsDialog: _propTypes.default.func
 };
-class RingChart extends BaseChart {
+class RingChart extends _baseChart.default {
   constructor(props) {
     super(props);
     this.drawChart = data => {
@@ -23,13 +30,13 @@ class RingChart extends BaseChart {
         statItem
       } = this.props;
       if (isPreview) {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           autoFit: true,
           padding: [20, 0]
         });
       } else {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           autoFit: true,
           height: 400,
@@ -54,7 +61,7 @@ class RingChart extends BaseChart {
         colorThemeName
       } = this.props;
       let summaryColumn = null;
-      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
       const {
         summary_type,
         summary_method,
@@ -67,17 +74,17 @@ class RingChart extends BaseChart {
         display_annotation
       } = statItem;
       const table = getTableById(table_id);
-      if (summary_type !== SUMMARY_TYPE.COUNT) {
-        summaryColumn = summary_column_key && TableUtils.getTableColumnByKey(table, summary_column_key);
-        summaryColumnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type !== _constants.SUMMARY_TYPE.COUNT) {
+        summaryColumn = summary_column_key && _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key);
+        summaryColumnData = summaryColumn && summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       this.chart.coordinate('theta', {
         radius: isCreating ? 0.75 : 0.95,
         innerRadius: isCreating ? 0.6 : 0.7
       });
-      const currentTheme = getCurrentTheme(colorThemeName);
+      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
       const themeColors = this.getThemeColors();
-      const newData = formatPieChartData(data, statItem, table, currentTheme);
+      const newData = (0, _commonUtils.formatPieChartData)(data, statItem, table, currentTheme);
       this.chart.data(newData, {
         'name': {
           type: 'cat',
@@ -114,9 +121,9 @@ class RingChart extends BaseChart {
             const colorIndex = sIndex.charAt(sIndex.length - 1);
             let name = obj.name;
             if (!obj.name && typeof obj.name !== 'number') {
-              name = intl.get(EMPTY_NAME);
+              name = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
             } else if (obj.name === 'Others') {
-              name = intl.get('Others');
+              name = _reactIntlUniversal.default.get('Others');
             }
             return {
               name,
@@ -146,7 +153,7 @@ class RingChart extends BaseChart {
           content: this.getLabel(value, percent)
         };
       }, {
-        offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
+        offset: !label_position || label_position === _constants.LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
         style: {
           fill: themeColors.labelColor,
           fontSize: this.getLabelFontSize(),
@@ -156,7 +163,7 @@ class RingChart extends BaseChart {
       }).tooltip('name*formatted_value*percent', (name, value, percent) => {
         let title = name;
         if (!name || name === 'undefined') {
-          title = intl.get(EMPTY_NAME);
+          title = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
         }
         return show_percent || display_label ? {
           name: title,
@@ -180,9 +187,9 @@ class RingChart extends BaseChart {
         itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
       });
       this.chart.interaction('element-active');
-      if (display_annotation == undefined || display_annotation) {
+      if (display_annotation === undefined || display_annotation === null || display_annotation) {
         this.setAnnotation({
-          name: intl.get(TITLE_TOTAL),
+          name: _reactIntlUniversal.default.get(_constants.TITLE_TOTAL),
           value: summaryColumn ? this.getNumberDisplayString(this.sum, summaryColumnData, summary_method) : this.sum
         }, themeColors.labelColor);
         this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData));
@@ -206,13 +213,13 @@ class RingChart extends BaseChart {
         }
       }
       switch (label_format) {
-        case LABEL_FORMATS[0]:
+        case _constants.LABEL_FORMATS[0]:
           content = percent;
           break;
-        case LABEL_FORMATS[1]:
+        case _constants.LABEL_FORMATS[1]:
           content = value;
           break;
-        case LABEL_FORMATS[2]:
+        case _constants.LABEL_FORMATS[2]:
           content = "".concat(value, " (").concat(percent, ")");
           break;
         default:
@@ -227,7 +234,7 @@ class RingChart extends BaseChart {
       const {
         annotation_font_size
       } = statItem;
-      const mainFontSize = annotation_font_size || DEFAULT_ANNOTATION_SIZE;
+      const mainFontSize = annotation_font_size || _constants.DEFAULT_ANNOTATION_SIZE;
       const subFontSize = Math.max(mainFontSize - 12, 12);
       return {
         mainFontSize,
@@ -240,9 +247,9 @@ class RingChart extends BaseChart {
       } = this.props.statItem;
       let name = content.name;
       if (!name || name === 'undefined') {
-        name = intl.get(EMPTY_NAME);
+        name = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
       } else if (name === 'Others') {
-        name = intl.get('Others');
+        name = _reactIntlUniversal.default.get('Others');
       }
       const {
         mainFontSize,
@@ -278,7 +285,7 @@ class RingChart extends BaseChart {
     this.onLeaveRingChart = (ev, color, summaryColumn, summaryColumnData) => {
       this.chart.annotation().clear(true);
       this.setAnnotation({
-        name: intl.get(TITLE_TOTAL),
+        name: _reactIntlUniversal.default.get(_constants.TITLE_TOTAL),
         value: this.sum
       }, color, summaryColumn, summaryColumnData);
       this.chart.render(true);
@@ -375,11 +382,11 @@ class RingChart extends BaseChart {
       isCalculatingData,
       showResultDescription
     } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
       ref: ref => this.container = ref,
-      className: "".concat(chartStyles['statistic-pie-chart-container'], " statistic-chart-container")
+      className: "".concat(_statisticChartModule.default['statistic-pie-chart-container'], " statistic-chart-container")
     }));
   }
 }
 RingChart.propTypes = propTypes;
-export default RingChart;
+var _default = exports.default = RingChart;

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

@@ -1,22 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import { TableUtils } from 'dtable-store';
-import BaseChart from './base-chart';
-import { Chart } from '../custom-g2';
-import { getCurrentTheme } from '../utils/common-utils';
-import { EMPTY_NAME, LABEL_CONFIG_CHANGED } from '../constants';
-import chartStyles from '../assets/css/statistic-chart.module.css';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableStore = require("dtable-store");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
 const propTypes = {
-  isPreview: PropTypes.bool,
-  colorThemeName: PropTypes.string,
-  statItem: PropTypes.object,
-  chartCalculator: PropTypes.object,
-  eventBus: PropTypes.object,
-  getTableById: PropTypes.func,
-  toggleStatisticRecordsDialog: PropTypes.func
+  isPreview: _propTypes.default.bool,
+  colorThemeName: _propTypes.default.string,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  eventBus: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  toggleStatisticRecordsDialog: _propTypes.default.func
 };
-class ScatterChart extends BaseChart {
+class ScatterChart extends _baseChart.default {
   constructor(props) {
     super(props);
     this.componentDidMount = async () => {
@@ -33,7 +40,7 @@ class ScatterChart extends BaseChart {
         this.drawChart(data);
         this.calculateData = data;
       }
-      this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
+      this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
         this.renderAxisLabel(newStatItem);
       });
     };
@@ -77,22 +84,22 @@ class ScatterChart extends BaseChart {
         statItem,
         colorThemeName
       } = this.props;
-      const currentTheme = getCurrentTheme(colorThemeName);
+      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
       const {
         table_id,
         x_axis_column,
         y_axis_column
       } = statItem;
       const selectedTable = getTableById(table_id);
-      const selectedXAxisColumn = TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
-      const selectedYAxisColumn = TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
+      const selectedXAxisColumn = _dtableStore.TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
+      const selectedYAxisColumn = _dtableStore.TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
       if (isPreview) {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           autoFit: true
         });
       } else {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           height: 400,
           width: 700
@@ -146,7 +153,7 @@ class ScatterChart extends BaseChart {
       });
       chart.point().position('x_axis*y_axis').color('group_by', currentTheme && currentTheme.colors).shape('circle').tooltip('group_by*x_axis*y_axis', (group_by, x_axis, y_axis) => {
         return {
-          name: group_by || group_by === 0 ? group_by : intl.get(EMPTY_NAME),
+          name: group_by || group_by === 0 ? group_by : _reactIntlUniversal.default.get(_constants.EMPTY_NAME),
           valueX: "".concat(selectedXAxisColumn.name, ": ").concat(x_axis),
           valueY: "".concat(selectedYAxisColumn.name, ": ").concat(y_axis)
         };
@@ -157,7 +164,7 @@ class ScatterChart extends BaseChart {
         position: 'bottom',
         itemName: {
           formatter: name => {
-            return name || name === 0 ? name : intl.get(EMPTY_NAME);
+            return name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
           },
           style: {
             fill: themeColors.textColor
@@ -211,7 +218,7 @@ class ScatterChart extends BaseChart {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'statistic-chart-axis-label';
-        const column = TableUtils.getTableColumnByKey(table, x_axis_column);
+        const column = _dtableStore.TableUtils.getTableColumnByKey(table, x_axis_column);
         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);
@@ -229,7 +236,7 @@ class ScatterChart extends BaseChart {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'statistic-chart-axis-label';
-        const column = TableUtils.getTableColumnByKey(table, y_axis_column) || {};
+        const column = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column) || {};
         div.innerHTML = column.name || '';
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
@@ -288,12 +295,12 @@ class ScatterChart extends BaseChart {
     if (show_y_axis_label) {
       style.paddingLeft = 38;
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
       ref: ref => this.container = ref,
-      className: "".concat(chartStyles['statistic-scatter-chart-container'], " statistic-chart-container"),
+      className: "".concat(_statisticChartModule.default['statistic-scatter-chart-container'], " statistic-chart-container"),
       style: style
     }));
   }
 }
 ScatterChart.propTypes = propTypes;
-export default ScatterChart;
+var _default = exports.default = ScatterChart;

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

@@ -1,26 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DataSet from '@antv/data-set';
-import intl from 'react-intl-universal';
-import { each, pick } from '@antv/util';
-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 { formatPieChartData, getCurrentTheme } from '../utils/common-utils';
-import { EMPTY_NAME, STATISTICS_COUNT_TYPE } from '../constants';
-import chartStyles from '../assets/css/statistic-chart.module.css';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dataSet = _interopRequireDefault(require("@antv/data-set"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _util = require("@antv/util");
+var _text = require("@antv/g2/esm/util/text");
+var _dtableStore = require("dtable-store");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
 const propTypes = {
-  isPreview: PropTypes.bool,
-  isEnlarge: PropTypes.bool,
-  theme: PropTypes.string,
-  colorThemeName: PropTypes.string,
-  statItem: PropTypes.object,
-  chartCalculator: PropTypes.object,
-  getTableById: PropTypes.func,
-  toggleStatisticRecordsDialog: PropTypes.func
+  isPreview: _propTypes.default.bool,
+  isEnlarge: _propTypes.default.bool,
+  theme: _propTypes.default.string,
+  colorThemeName: _propTypes.default.string,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  toggleStatisticRecordsDialog: _propTypes.default.func
 };
-class TreemapChart extends BaseChart {
+class TreemapChart extends _baseChart.default {
   constructor(props) {
     super(props);
     this.componentDidMount = async () => {
@@ -83,14 +90,14 @@ class TreemapChart extends BaseChart {
         summary_column_key
       } = statItem;
       const table = getTableById(table_id);
-      const selectedNumericColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
+      const selectedNumericColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key);
       if (isPreview) {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           autoFit: true
         });
       } else {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           height: 400,
           width: 700
@@ -99,20 +106,20 @@ class TreemapChart extends BaseChart {
       this.chart.on('element:click', e => {
         this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      const currentTheme = getCurrentTheme(colorThemeName);
-      const newData = formatPieChartData(data, statItem, table, currentTheme);
+      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
+      const newData = (0, _commonUtils.formatPieChartData)(data, statItem, table, currentTheme);
       const colorSet = newData.colorSet;
       const {
         DataView
-      } = DataSet;
+      } = _dataSet.default;
       const dv = new DataView();
       const fullData = {
         name: 'root',
         children: newData.map(item => {
           let name = item.name;
-          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
-          if (name == 'Others') {
-            item.name = intl.get('Others');
+          item.name = name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+          if (name === 'Others') {
+            item.name = _reactIntlUniversal.default.get('Others');
           }
           return item;
         })
@@ -167,7 +174,7 @@ class TreemapChart extends BaseChart {
       chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', (name, value, percent) => {
         return {
           name,
-          info: summary_type == STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
+          info: summary_type === _constants.STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
         };
       }).style({
         lineWidth: 1,
@@ -196,22 +203,22 @@ class TreemapChart extends BaseChart {
 
     // customize label layout: show ellipsis for long labels
     function limitInShape(items, labels, shapes, region) {
-      each(labels, (label, index) => {
+      (0, _util.each)(labels, (label, index) => {
         const labelBBox = label.getCanvasBBox();
         const shapeBBox = shapes[index].getBBox();
         if (labelBBox.minX < shapeBBox.minX || labelBBox.minY < shapeBBox.minY || labelBBox.maxX > shapeBBox.maxX || labelBBox.maxY > shapeBBox.maxY) {
           const translateX = labelBBox.width - shapeBBox.width + 20;
           const textShapes = label.findAll(shape => shape.get('type') === 'text');
           textShapes.forEach(textShape => {
-            const style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            const style = (0, _util.pick)(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
             const textBox = textShape.getCanvasBBox();
-            const text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+            const text = (0, _text.getEllipsisText)(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
             textShape.attr('text', text);
           });
         }
       });
     }
-    registerGeometryLabelLayout('custom-limit-in-shape', limitInShape);
+    (0, _customG.registerGeometryLabelLayout)('custom-limit-in-shape', limitInShape);
   }
   shouldComponentUpdate(nextProps, nextState) {
     const {
@@ -235,11 +242,11 @@ class TreemapChart extends BaseChart {
     const {
       isCalculatingData
     } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
       ref: ref => this.container = ref,
-      className: "statistic-chart-container ".concat(chartStyles['statistic-treemap-chart-container'])
+      className: "statistic-chart-container ".concat(_statisticChartModule.default['statistic-treemap-chart-container'])
     }));
   }
 }
 TreemapChart.propTypes = propTypes;
-export default TreemapChart;
+var _default = exports.default = TreemapChart;

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

@@ -1,17 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import intl from 'react-intl-universal';
-import { TableUtils } from 'dtable-store';
-import BaseChart from './base-chart';
-import { Chart } from '../custom-g2';
-import { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, SUMMARY_METHOD_MAP } from '../constants';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableStore = require("dtable-store");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _constants = require("../constants");
 const propTypes = {
-  isPreview: PropTypes.bool,
-  statItem: PropTypes.object,
-  chartCalculator: PropTypes.object,
-  getTableById: PropTypes.func
+  isPreview: _propTypes.default.bool,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func
 };
-class BasicNumericCard extends BaseChart {
+class BasicNumericCard extends _baseChart.default {
   constructor(props) {
     super(props);
     this.componentDidMount = async () => {
@@ -67,12 +74,12 @@ class BasicNumericCard extends BaseChart {
         statItem
       } = this.props;
       if (isPreview) {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           autoFit: true
         });
       } else {
-        this.chart = new Chart({
+        this.chart = new _customG.Chart({
           container: this.container,
           autoFit: true,
           height: 400,
@@ -83,7 +90,7 @@ class BasicNumericCard extends BaseChart {
         summary_method
       } = statItem;
       const latest = data && data.latest;
-      const content = summary_method === SUMMARY_METHOD_MAP.Distinct_values ? latest : this.formatData(latest);
+      const content = summary_method === _constants.SUMMARY_METHOD_MAP.Distinct_values ? latest : this.formatData(latest);
       const fontSize = this.getFontSize(content);
       let labelFontSize = fontSize - 32;
       const themeColors = this.getThemeColors();
@@ -99,15 +106,15 @@ class BasicNumericCard extends BaseChart {
         getTableById,
         statItem
       } = this.props;
-      if (typeof data !== 'number') return intl.get(EMPTY_NAME);
+      if (typeof data !== 'number') return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
       const {
         table_id,
         summary_type,
         summary_column
       } = statItem;
-      if (summary_type !== STATISTICS_COUNT_TYPE.COUNT) {
+      if (summary_type !== _constants.STATISTICS_COUNT_TYPE.COUNT) {
         const table = getTableById(table_id);
-        const selectedColumn = TableUtils.getTableColumnByKey(table, summary_column);
+        const selectedColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column);
         return this.getNumberDisplayString(data, selectedColumn.data || {});
       }
       let string = data + '';
@@ -167,20 +174,20 @@ class BasicNumericCard extends BaseChart {
         date_granularity
       } = statItem;
       let conjunctions = '';
-      if (date_granularity === DATE_GRANULARITY.YEAR) {
-        conjunctions = intl.get('The_year_before_last');
-      } else if (date_granularity === DATE_GRANULARITY.QUARTER) {
-        conjunctions = intl.get('The_quarter_before_last');
-      } else if (date_granularity === DATE_GRANULARITY.MONTH) {
-        conjunctions = intl.get('The_month_before_last');
-      } else if (date_granularity === DATE_GRANULARITY.WEEK) {
-        conjunctions = intl.get('The_week_before_last');
+      if (date_granularity === _constants.DATE_GRANULARITY.YEAR) {
+        conjunctions = _reactIntlUniversal.default.get('The_year_before_last');
+      } else if (date_granularity === _constants.DATE_GRANULARITY.QUARTER) {
+        conjunctions = _reactIntlUniversal.default.get('The_quarter_before_last');
+      } else if (date_granularity === _constants.DATE_GRANULARITY.MONTH) {
+        conjunctions = _reactIntlUniversal.default.get('The_month_before_last');
+      } else if (date_granularity === _constants.DATE_GRANULARITY.WEEK) {
+        conjunctions = _reactIntlUniversal.default.get('The_week_before_last');
       } else if (date_granularity === 'days_7') {
-        conjunctions = intl.get('Previous_7_days');
+        conjunctions = _reactIntlUniversal.default.get('Previous_7_days');
       } else if (date_granularity === 'days_30') {
-        conjunctions = intl.get('Previous_30_days');
+        conjunctions = _reactIntlUniversal.default.get('Previous_30_days');
       } else {
-        conjunctions = intl.get('The_day_before_yesterday');
+        conjunctions = _reactIntlUniversal.default.get('The_day_before_yesterday');
       }
       const {
         result,
@@ -195,7 +202,7 @@ class BasicNumericCard extends BaseChart {
       }
       let resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%•").concat(conjunctions).concat(previous);
       if (!previous) {
-        resultText = intl.get('Can_not_compare_with_var', {
+        resultText = _reactIntlUniversal.default.get('Can_not_compare_with_var', {
           var: conjunctions.toLowerCase()
         });
       }
@@ -232,11 +239,11 @@ class BasicNumericCard extends BaseChart {
     const {
       isCalculatingData
     } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
       ref: ref => this.container = ref,
       className: "statistic-chart-container statistic-number-card"
     }));
   }
 }
 BasicNumericCard.propTypes = propTypes;
-export default BasicNumericCard;
+var _default = exports.default = BasicNumericCard;