dtable-statistic 4.3.3 → 4.3.4

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

@@ -1,32 +1,25 @@
-"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 _dtableStore = require("dtable-store");
-var _baseChart = _interopRequireDefault(require("./base-chart"));
-var _customG = require("../custom-g2");
-var _commonUtils = require("../utils/common-utils");
-var _basicChartUtils = require("../utils/basic-chart-utils");
-var _colorUtils = require("../utils/color-utils");
-var _constants = require("../constants");
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set';
+import intl from 'react-intl-universal';
+import { TableUtils } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+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, LABEL_CONFIG_CHANGED, STAT_TYPE, TITLE_AMOUNT, TYPE_COLOR_USING, STATISTICS_COUNT_TYPE } from '../constants';
 const propTypes = {
-  isPreview: _propTypes.default.bool,
-  isEdit: _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,
+  isEdit: PropTypes.bool,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  eventBus: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
 };
-class BarChart extends _baseChart.default {
+class BarChart extends BaseChart {
   constructor(props) {
     super(props);
     this.drawChart = originalData => {
@@ -48,22 +41,22 @@ class BarChart extends _baseChart.default {
         sort_type
       } = statItem;
       let data = originalData;
-      if (type === _constants.STAT_TYPE.BAR_STACK && sort_type) {
-        data = (0, _commonUtils.sortDataByGroupSum)(originalData, sort_type);
+      if (type === STAT_TYPE.BAR_STACK && sort_type) {
+        data = sortDataByGroupSum(originalData, sort_type);
       }
       this.initChartHandler();
       this.chart.on('interval:click', e => {
         this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
       const isGroupBar = column_groupby_column_key || column_groupby_multiple_numeric_column;
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
-      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      const currentTheme = getCurrentTheme(colorThemeName);
+      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       let summaryType = summary_type;
       let summaryMethod = summary_method;
-      if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         const table = getTableById(table_id);
-        const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
-        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+        const summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       if (!summaryType && y_axis_summary_type) {
         summaryType = y_axis_summary_type;
@@ -89,7 +82,7 @@ class BarChart extends _baseChart.default {
       const {
         width
       } = this.chart.coordinateBBox;
-      const chartData = isGroupBar ? (0, _basicChartUtils.getChartGroups)(data) : data;
+      const chartData = isGroupBar ? getChartGroups(data) : data;
       const themeColors = this.getThemeColors();
       const ticks = this.getTicks(chartData, width);
       if (ticks.length > 0) {
@@ -142,7 +135,7 @@ class BarChart extends _baseChart.default {
         config.height = 400;
         config.width = 700;
       }
-      this.chart = new _customG.Chart(config);
+      this.chart = new Chart(config);
     };
     this.drawBar = _ref => {
       let {
@@ -158,7 +151,7 @@ class BarChart extends _baseChart.default {
         color_option,
         display_data
       } = statItem;
-      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && statItem.y_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(statItem.y_axis_label_color_rules);
+      const 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(),
@@ -167,8 +160,8 @@ class BarChart extends _baseChart.default {
       }).position('name*value').tooltip('name*formatted_value', (name, value) => {
         return {
           value,
-          title: summaryType === _constants.STATISTICS_COUNT_TYPE.COUNT ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[summaryMethod]),
-          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
+          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: {
@@ -177,7 +170,7 @@ class BarChart extends _baseChart.default {
           }
         }
       }).style('value', value => {
-        const color = (0, _colorUtils.getLabelColor)({
+        const color = getLabelColor({
           chart: statItem,
           colorRules,
           value
@@ -213,14 +206,14 @@ class BarChart extends _baseChart.default {
         }
       };
       let displayData = display_data;
-      if (chartType === _constants.STAT_TYPE.BAR_STACK) {
+      if (chartType === STAT_TYPE.BAR_STACK) {
         displayData = display_each_block_data;
         if (displayData) {
           labelCfg.position = 'middle';
         }
 
         // get the total value of each stack
-        const dv = new _dataSet.default.DataView().source(data);
+        const dv = new DataSet.DataView().source(data);
         dv.transform({
           type: 'aggregate',
           fields: ['value'],
@@ -246,7 +239,7 @@ class BarChart extends _baseChart.default {
 
       // when the 'Group by' column is a 'single-select' column,
       // and the user chooses to use the colors from the column.
-      if (color_option === _constants.TYPE_COLOR_USING.USE_COLUMN_COLORS) {
+      if (color_option === TYPE_COLOR_USING.USE_COLUMN_COLORS) {
         const groupColorMapping = {};
         data.forEach(item => {
           if (!groupColorMapping[item.group_name]) {
@@ -263,8 +256,8 @@ class BarChart extends _baseChart.default {
         }
       });
       this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name*raw_name', (name, value, group_name, raw_name) => {
-        const nameContent = !group_name && typeof group_name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : group_name;
-        const titleContent = !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+        const nameContent = !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name;
+        const titleContent = !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
         return {
           value,
           title: titleContent,
@@ -368,7 +361,7 @@ class BarChart extends _baseChart.default {
             fill: themeColors.textColor
           },
           formatter: name => {
-            return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+            return !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
           }
         },
         pageNavigator: {
@@ -419,7 +412,7 @@ class BarChart 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_key);
+        const column = TableUtils.getTableColumnByKey(table, x_axis_column_key);
         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);
@@ -437,12 +430,12 @@ class BarChart extends _baseChart.default {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'statistic-chart-axis-label';
-        if (y_axis_summary_type === _constants.SUMMARY_TYPE.COUNT) {
-          div.innerHTML = _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
+        if (y_axis_summary_type === SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get(TITLE_AMOUNT);
         } else {
-          const column = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
+          const column = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
           div.innerHTML = column.name || '';
-          if (type === _constants.STAT_TYPE.BAR_STACK) {
+          if (type === STAT_TYPE.BAR_STACK) {
             div.innerHTML = title_name || '';
           }
         }
@@ -480,7 +473,7 @@ class BarChart extends _baseChart.default {
       chartCalculator,
       eventBus
     } = this.props;
-    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
+    this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
       this.renderAxisLabel(newStatItem);
     });
     if (this.container) {
@@ -569,7 +562,7 @@ class BarChart extends _baseChart.default {
       show_y_axis_label,
       show_x_axis_label
     } = statItem;
-    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,
       style: {
         padding: show_y_axis_label || show_x_axis_label ? 30 : 20
@@ -579,4 +572,4 @@ class BarChart extends _baseChart.default {
   }
 }
 BarChart.propTypes = propTypes;
-var _default = exports.default = BarChart;
+export default BarChart;

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

@@ -1,18 +1,10 @@
-"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 _components = require("../components");
-var _commonUtils = require("../utils/common-utils");
-var _basicChartUtils = require("../utils/basic-chart-utils");
-var _constants = require("../constants");
+import React, { Component } from 'react';
+import intl from 'react-intl-universal';
+import { getNumberDisplayString } from 'dtable-store';
+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';
 const CHART_STYLE_CONFIG = {
   'g2-tooltip': {
     borderRadius: '2px',
@@ -23,7 +15,7 @@ const CHART_STYLE_CONFIG = {
     marginTop: '5px'
   }
 };
-class BaseChart extends _react.Component {
+class BaseChart extends Component {
   constructor() {
     var _this;
     super(...arguments);
@@ -43,7 +35,7 @@ class BaseChart extends _react.Component {
         statItem: nextStatItem,
         theme: nextTheme
       } = nextProps;
-      return !(0, _commonUtils.isStatItemEqual)(statItem, nextStatItem) || this.needRefresh(preProps, nextProps) || nextTheme !== theme;
+      return !isStatItemEqual(statItem, nextStatItem) || this.needRefresh(preProps, nextProps) || nextTheme !== theme;
     };
     this.shouldCalculateStatItem = (preProps, nextProps) => {
       const {
@@ -52,14 +44,14 @@ class BaseChart extends _react.Component {
       const {
         statItem: nextStatItem
       } = nextProps;
-      return (0, _commonUtils.shouldCalculateStatItem)(statItem, nextStatItem) || this.needRefresh(preProps, nextProps);
+      return shouldCalculateStatItem(statItem, nextStatItem) || this.needRefresh(preProps, nextProps);
     };
     this.getTicks = (data, width) => {
       const labelCount = data.length;
       if (Math.floor(width / labelCount) > 20) {
         return [];
       }
-      return (0, _basicChartUtils.getChartDisplayLabels)(width, 20, data);
+      return getChartDisplayLabels(width, 20, data);
     };
     this.getLabelCount = (ticks, data) => {
       const ticksLen = ticks.length;
@@ -73,10 +65,10 @@ class BaseChart extends _react.Component {
         isEnlarge,
         theme
       } = _this.props;
-      if (theme === _constants.THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
-        themeColors = _constants.STAT_ITEM_THEME_COLORS.dark;
+      if (theme === THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
       }
-      return themeColors || _constants.STAT_ITEM_THEME_COLORS[_constants.THEME_NAME_MAP.LIGHT];
+      return themeColors || STAT_ITEM_THEME_COLORS[THEME_NAME_MAP.LIGHT];
     };
     this.getAxisLabelColor = textColor => {
       const {
@@ -84,7 +76,7 @@ class BaseChart extends _react.Component {
         isEnlarge,
         theme
       } = this.props;
-      if (theme === _constants.THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
+      if (theme === THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
         return '#ffffff';
       }
       return textColor || '#999999';
@@ -98,7 +90,7 @@ class BaseChart extends _react.Component {
         label = "".concat(name.slice(0, 10), "...");
       }
       if (name === '' || name === 'undefined') {
-        label = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+        label = intl.get(EMPTY_NAME);
       }
       return label;
     };
@@ -109,24 +101,24 @@ class BaseChart extends _react.Component {
       const {
         label_font_size
       } = statItem;
-      return (0, _commonUtils.getLabelFontSize)(label_font_size);
+      return getLabelFontSize(label_font_size);
     };
     this.getNumberDisplayString = (value, columnData, summaryMethod) => {
-      if (summaryMethod === _constants.SUMMARY_METHOD_MAP.Distinct_values) {
+      if (summaryMethod === SUMMARY_METHOD_MAP.Distinct_values) {
         return value;
       }
-      return (0, _dtableStore.getNumberDisplayString)(value, columnData);
+      return getNumberDisplayString(value, columnData);
     };
     this.renderLoading = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: 'statistic-chart-loading-container'
-      }, /*#__PURE__*/_react.default.createElement(_components.Loading, null));
+      }, /*#__PURE__*/React.createElement(Loading, null));
     };
     this.renderEmpty = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: 'statistic-chart-text'
-      }, _reactIntlUniversal.default.get(_constants.NO_STATISTIC_RESULTS));
+      }, intl.get(NO_STATISTIC_RESULTS));
     };
   }
 }
-var _default = exports.default = BaseChart;
+export default BaseChart;

package/es/stat-view/basic-number-card.js

@@ -1,24 +1,17 @@
-"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");
+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 { EMPTY_NAME, SUMMARY_METHOD_MAP } from '../constants';
 const propTypes = {
-  isPreview: _propTypes.default.bool,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  getTableById: _propTypes.default.func
+  isPreview: PropTypes.bool,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func
 };
-class BasicNumericCard extends _baseChart.default {
+class BasicNumericCard extends BaseChart {
   constructor(props) {
     super(props);
     this.componentDidMount = async () => {
@@ -74,12 +67,12 @@ class BasicNumericCard extends _baseChart.default {
         statItem
       } = this.props;
       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,
           autoFit: true,
           height: 400,
@@ -112,13 +105,13 @@ class BasicNumericCard extends _baseChart.default {
         table_id,
         numeric_column
       } = statItem;
-      if (summary_method === _constants.SUMMARY_METHOD_MAP.Distinct_values) {
+      if (summary_method === SUMMARY_METHOD_MAP.Distinct_values) {
         return data;
       }
-      if (!data) return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+      if (!data) return intl.get(EMPTY_NAME);
       if (summary_method !== 'Row_count') {
         const table = getTableById(table_id);
-        const selectedColumn = _dtableStore.TableUtils.getTableColumnByKey(table, numeric_column);
+        const selectedColumn = TableUtils.getTableColumnByKey(table, numeric_column);
         const formattedContent = this.getNumberDisplayString(data, selectedColumn.data || {});
         return formattedContent;
       }
@@ -191,11 +184,11 @@ class BasicNumericCard extends _baseChart.default {
     const {
       isCalculatingData
     } = this.state;
-    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: "statistic-chart-container statistic-number-card"
     }));
   }
 }
 BasicNumericCard.propTypes = propTypes;
-var _default = exports.default = BasicNumericCard;
+export default BasicNumericCard;