dtable-statistic 4.3.3 → 4.3.4

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

@@ -1,20 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _dtableStore = require("dtable-store");
-var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
-var _utils = require("../../utils");
-var _pivotTable = require("../../utils/pivot-table");
-var _constants = require("../../constants");
-var _statisticPivotTableModule = _interopRequireDefault(require("./statistic-pivot-table.module.css"));
-class TwoDimensionTable extends _react.PureComponent {
+import React, { PureComponent } from 'react';
+import intl from 'react-intl-universal';
+import { isNumber, TableUtils, Views } from 'dtable-store';
+import PivotTableDisplayName from './pivot-table-display-name';
+import { isMobile } from '../../utils';
+import { getPivotTableSummaryTotal } from '../../utils/pivot-table';
+import { STATISTICS_COUNT_TYPE, TITLE_TOTAL } from '../../constants';
+import styles from './statistic-pivot-table.module.css';
+class TwoDimensionTable extends PureComponent {
   constructor() {
     var _this;
     super(...arguments);
@@ -24,7 +16,7 @@ class TwoDimensionTable extends _react.PureComponent {
         isColumn = false,
         isRow = false
       } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      if (_utils.isMobile) return;
+      if (isMobile) return;
       _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
         isColumn,
         isRow
@@ -34,7 +26,7 @@ class TwoDimensionTable extends _react.PureComponent {
       let {
         isCurrentView
       } = _ref;
-      if (_utils.isMobile) return;
+      if (isMobile) return;
       const {
         getTableById,
         statItem
@@ -44,9 +36,9 @@ class TwoDimensionTable extends _react.PureComponent {
         view_id
       } = statItem;
       const table = getTableById(table_id);
-      const view = _dtableStore.Views.getViewById(table.views, view_id);
+      const view = Views.getViewById(table.views, view_id);
       let rows = [];
-      if (!_dtableStore.Views.isArchiveView(view)) {
+      if (!Views.isArchiveView(view)) {
         rows = recordsList.flat();
       }
       this.props.toggleStatisticRecordsDialog({
@@ -56,7 +48,7 @@ class TwoDimensionTable extends _react.PureComponent {
       });
     };
     this.getNumberValue = val => {
-      if ((0, _dtableStore.isNumber)(val)) {
+      if (isNumber(val)) {
         return val;
       }
       return 0;
@@ -91,7 +83,7 @@ class TwoDimensionTable extends _react.PureComponent {
             method
           } = column;
           if (Array.isArray(rowData)) {
-            const sum = (0, _pivotTable.getPivotTableSummaryTotal)(type, key, sqlKey, _constants.STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
+            const sum = getPivotTableSummaryTotal(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;
@@ -134,36 +126,36 @@ class TwoDimensionTable extends _react.PureComponent {
         pivot_summary_multiple_columns
       } = pivotResult;
       const isMultipleColumnHeader = column_groupby_multiple_numeric_column && column_groupby_column_key && pivot_summary_multiple_columns.length !== 0;
-      return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+      return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         className: "pivot-table-header"
       }, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
         const {
           original_key
         } = item;
-        return /*#__PURE__*/_react.default.createElement("th", {
+        return /*#__PURE__*/React.createElement("th", {
           className: 'pivot-table-header',
           key: "pivot-column-".concat(index)
-        }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
           value: original_key,
           column: columnGroupbyColumn
         }));
-      }), display_total && /*#__PURE__*/_react.default.createElement("th", {
+      }), display_total && /*#__PURE__*/React.createElement("th", {
         className: 'pivot-table-header'
-      }, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL)))), isMultipleColumnHeader && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL)))), isMultipleColumnHeader && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         className: "pivot-table-header"
       }), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement("th", {
-          className: "pivot-table-header ".concat(_statisticPivotTableModule.default['pivot-summary-multiple-columns-th']),
+        return /*#__PURE__*/React.createElement("th", {
+          className: "pivot-table-header ".concat(styles['pivot-summary-multiple-columns-th']),
           key: "pivot-column-".concat(index)
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: _statisticPivotTableModule.default['pivot-summary-multiple-columns-div']
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles['pivot-summary-multiple-columns-div']
         }, pivot_summary_multiple_columns.map((item, index) => {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return /*#__PURE__*/React.createElement("div", {
             key: index
           }, item.column_name);
         })));
-      }), display_total && /*#__PURE__*/_react.default.createElement("th", {
-        className: "pivot-table-header ".concat(_statisticPivotTableModule.default['pivot-empty-cell'])
+      }), display_total && /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header ".concat(styles['pivot-empty-cell'])
       })));
     };
     this.renderRowTotal = (isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple) => {
@@ -171,8 +163,8 @@ class TwoDimensionTable extends _react.PureComponent {
       if (firstSummaryColumnFromMultiple) {
         rowTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, summaryDisplayValue, firstSummaryColumnFromMultiple.method);
       }
-      return /*#__PURE__*/_react.default.createElement("td", {
-        className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidSummaryDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+      return /*#__PURE__*/React.createElement("td", {
+        className: "".concat(styles['pivot-cell'], " ").concat(isValidSummaryDisplayValue ? '' : styles['pivot-empty-cell']),
         title: isValidSummaryDisplayValue ? rowTotal : '',
         onClick: () => this.toggleRecords({
           rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
@@ -182,7 +174,7 @@ class TwoDimensionTable extends _react.PureComponent {
         }, {
           isRow: true
         })
-      }, isValidSummaryDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, rowTotal) : /*#__PURE__*/_react.default.createElement("i", null));
+      }, isValidSummaryDisplayValue ? /*#__PURE__*/React.createElement("div", null, rowTotal) : /*#__PURE__*/React.createElement("i", null));
     };
     this.renderAllTotal = (allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple) => {
       const isValidAllTotalDisplay = this.props.isValidValue(allTotalDisplay);
@@ -190,13 +182,13 @@ class TwoDimensionTable extends _react.PureComponent {
       if (firstSummaryColumnFromMultiple) {
         allTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, allTotalDisplay, firstSummaryColumnFromMultiple.method);
       }
-      return /*#__PURE__*/_react.default.createElement("td", {
-        className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " pivot-table-total ").concat(isValidAllTotalDisplay ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+      return /*#__PURE__*/React.createElement("td", {
+        className: "".concat(styles['pivot-cell'], " pivot-table-total ").concat(isValidAllTotalDisplay ? '' : styles['pivot-empty-cell']),
         onClick: () => this.onClickTotals(pivotColumnCells, {
           isCurrentView: true
         }),
         title: isValidAllTotalDisplay ? allTotal : ''
-      }, isValidAllTotalDisplay ? /*#__PURE__*/_react.default.createElement("div", null, allTotal) : /*#__PURE__*/_react.default.createElement("i", null));
+      }, isValidAllTotalDisplay ? /*#__PURE__*/React.createElement("div", null, allTotal) : /*#__PURE__*/React.createElement("i", null));
     };
     this.renderRows = _ref3 => {
       let {
@@ -223,11 +215,11 @@ class TwoDimensionTable extends _react.PureComponent {
         formulaRows,
         isSqlQuery = false
       } = pivotResult;
-      const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
       let allTotalDisplay = column_groupby_multiple_numeric_column ? 0 : getSummaryValueDisplayString(summaryColumn, pivot_table_total, summary_method);
       let firstSummaryColumnFromMultiple = column_groupby_multiple_numeric_column && pivot_summary_multiple_columns[0] || null;
       let pivotColumnCells = [];
-      return /*#__PURE__*/_react.default.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
         const {
           name,
           original_name,
@@ -243,11 +235,11 @@ class TwoDimensionTable extends _react.PureComponent {
           summaryDisplayValue = 0;
         }
         const isValidSummaryDisplayValue = this.props.isValidValue(summaryDisplayValue);
-        return /*#__PURE__*/_react.default.createElement("tr", {
+        return /*#__PURE__*/React.createElement("tr", {
           key: 'table-row' + rowIdx
-        }, /*#__PURE__*/_react.default.createElement("td", {
+        }, /*#__PURE__*/React.createElement("td", {
           className: 'pivot-row-name'
-        }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
           value: original_name,
           column: groupbyColumn
         })), Array.isArray(cells) && cells.map((c, cellIdx) => {
@@ -267,8 +259,8 @@ class TwoDimensionTable extends _react.PureComponent {
             summary_multiple_columns.forEach(item => {
               summaryDisplayValue += this.getNumberValue(item);
             });
-            return /*#__PURE__*/_react.default.createElement("td", {
-              className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(_statisticPivotTableModule.default['pivot-summary-multiple-columns-td']),
+            return /*#__PURE__*/React.createElement("td", {
+              className: "".concat(styles['pivot-cell'], " ").concat(styles['pivot-summary-multiple-columns-td']),
               key: "table-cell-".concat(cellIdx),
               onClick: () => this.toggleRecords({
                 rows: c.rows,
@@ -278,19 +270,19 @@ class TwoDimensionTable extends _react.PureComponent {
                 group_original_name: c.group_original_name,
                 original_name: rowItem.original_name
               })
-            }, /*#__PURE__*/_react.default.createElement("div", {
-              className: _statisticPivotTableModule.default['pivot-summary-multiple-columns-div']
+            }, /*#__PURE__*/React.createElement("div", {
+              className: styles['pivot-summary-multiple-columns-div']
             }, formatted_summary_multiple_columns.map((label, index) => {
-              return /*#__PURE__*/_react.default.createElement("div", {
+              return /*#__PURE__*/React.createElement("div", {
                 key: index,
                 title: label
               }, label);
-            })), /*#__PURE__*/_react.default.createElement("span", null));
+            })), /*#__PURE__*/React.createElement("span", null));
           }
           const displayValue = getSummaryValueDisplayString(c.column, c.total, summary_method);
           const isValidDisplayValue = this.props.isValidValue(displayValue);
-          return /*#__PURE__*/_react.default.createElement("td", {
-            className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+          return /*#__PURE__*/React.createElement("td", {
+            className: "".concat(styles['pivot-cell'], " ").concat(isValidDisplayValue ? '' : styles['pivot-empty-cell']),
             key: "table-cell-".concat(cellIdx),
             title: isValidDisplayValue ? displayValue : '',
             onClick: () => this.toggleRecords({
@@ -301,11 +293,11 @@ class TwoDimensionTable extends _react.PureComponent {
               group_original_name: c.group_original_name,
               original_name: rowItem.original_name
             })
-          }, isValidDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, displayValue) : /*#__PURE__*/_react.default.createElement("i", null), /*#__PURE__*/_react.default.createElement("span", null));
+          }, isValidDisplayValue ? /*#__PURE__*/React.createElement("div", null, displayValue) : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", null));
         }), display_total && this.renderRowTotal(isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple));
-      }), display_total && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
         className: 'pivot-column-total'
-      }, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
         const pivotColumnCell = pivotColumnCells[index] || [];
         const pivotColumnTotal = pivot_columns_total[c.key];
         let totalDisplayValue = 0;
@@ -319,7 +311,7 @@ class TwoDimensionTable extends _react.PureComponent {
               sqlKey,
               method
             } = summaryCol;
-            total += (0, _pivotTable.getPivotTableSummaryTotal)(type, key, sqlKey, _constants.STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
+            total += getPivotTableSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
           });
           totalDisplayValue = total;
           allTotalDisplay += total;
@@ -331,8 +323,8 @@ class TwoDimensionTable extends _react.PureComponent {
           totalDisplayValue = getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summary_method);
           isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
         }
-        return /*#__PURE__*/_react.default.createElement("td", {
-          className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
+        return /*#__PURE__*/React.createElement("td", {
+          className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
           key: "total-cell-".concat(index),
           title: isValidTotalDisplayValue ? totalDisplayValue : '',
           onClick: () => this.toggleRecords({
@@ -342,7 +334,7 @@ class TwoDimensionTable extends _react.PureComponent {
           }, {
             isColumn: true
           })
-        }, isValidTotalDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, totalDisplayValue) : /*#__PURE__*/_react.default.createElement("i", null));
+        }, isValidTotalDisplayValue ? /*#__PURE__*/React.createElement("div", null, totalDisplayValue) : /*#__PURE__*/React.createElement("i", null));
       }), this.renderAllTotal(allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple)));
     };
   }
@@ -361,17 +353,17 @@ class TwoDimensionTable extends _react.PureComponent {
       column_groupby_column_key
     } = statItem;
     const table = getTableById(table_id);
-    const groupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
-    const columnGroupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, column_groupby_column_key) || {};
-    return /*#__PURE__*/_react.default.createElement("table", {
+    const groupbyColumn = TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
+    const columnGroupbyColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key) || {};
+    return /*#__PURE__*/React.createElement("table", {
       style: {
         color: textColor
       },
-      className: "".concat(isPreview ? _statisticPivotTableModule.default['preview-pivot-table'] : _statisticPivotTableModule.default['large-pivot-table'], " ").concat(_statisticPivotTableModule.default['pivot-table'])
-    }, /*#__PURE__*/_react.default.createElement("caption", {
-      className: _statisticPivotTableModule.default['column-title']
-    }, columnGroupbyColumn.name), /*#__PURE__*/_react.default.createElement("caption", {
-      className: _statisticPivotTableModule.default['row-title']
+      className: "".concat(isPreview ? styles['preview-pivot-table'] : styles['large-pivot-table'], " ").concat(styles['pivot-table'])
+    }, /*#__PURE__*/React.createElement("caption", {
+      className: styles['column-title']
+    }, columnGroupbyColumn.name), /*#__PURE__*/React.createElement("caption", {
+      className: styles['row-title']
     }, groupbyColumn.name), this.renderHeader({
       groupbyColumn,
       columnGroupbyColumn
@@ -381,4 +373,4 @@ class TwoDimensionTable extends _react.PureComponent {
     }));
   }
 }
-var _default = exports.default = TwoDimensionTable;
+export default TwoDimensionTable;

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

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

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

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