dtable-statistic 4.3.3 → 4.3.4

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

@@ -1,31 +1,24 @@
-"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 _customG = require("../custom-g2");
-var _baseChart = _interopRequireDefault(require("./base-chart"));
-var _basicChartUtils = require("../utils/basic-chart-utils");
-var _commonUtils = require("../utils/common-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 { Chart } from '../custom-g2';
+import BaseChart from './base-chart';
+import { getChartGroups } from '../utils/basic-chart-utils';
+import { getCurrentTheme } from '../utils/common-utils';
+import { EMPTY_NAME, LABEL_CONFIG_CHANGED, TITLE_AMOUNT } from '../constants';
 const propTypes = {
-  isPreview: _propTypes.default.bool,
-  isEdit: _propTypes.default.bool,
-  statItem: _propTypes.default.object,
-  labelColorConfigs: _propTypes.default.array,
-  chartCalculator: _propTypes.default.object,
-  eventBus: _propTypes.default.object,
-  colorThemeName: _propTypes.default.string,
-  toggleStatisticRecordsDialog: _propTypes.default.func
+  isPreview: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  statItem: PropTypes.object,
+  labelColorConfigs: PropTypes.array,
+  chartCalculator: PropTypes.object,
+  eventBus: PropTypes.object,
+  colorThemeName: PropTypes.string,
+  toggleStatisticRecordsDialog: PropTypes.func
 };
-class CustomBar extends _baseChart.default {
+class CustomBar extends BaseChart {
   constructor(props) {
     super(props);
     this.drawChart = originalData => {
@@ -51,7 +44,7 @@ class CustomBar extends _baseChart.default {
       const {
         width
       } = this.chart.coordinateBBox;
-      const chartData = (0, _basicChartUtils.getChartGroups)(data);
+      const chartData = getChartGroups(data);
       const ticks = this.getTicks(chartData, width);
       if (ticks.length > 0) {
         this.chart.scale('name', {
@@ -69,7 +62,7 @@ class CustomBar extends _baseChart.default {
       });
 
       // 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'],
@@ -82,7 +75,7 @@ class CustomBar extends _baseChart.default {
           type: 'cat'
         }
       });
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
+      const currentTheme = getCurrentTheme(colorThemeName);
       const themeColors = this.getThemeColors();
       this.drawBar({
         themeColors,
@@ -112,7 +105,7 @@ class CustomBar extends _baseChart.default {
         config.height = 400;
         config.width = 700;
       }
-      this.chart = new _customG.Chart(config);
+      this.chart = new Chart(config);
     };
     this.drawBar = _ref => {
       let {
@@ -136,9 +129,9 @@ class CustomBar 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) => {
         let nameContent = group_name;
         if (!group_name && typeof group_name !== 'number') {
-          nameContent = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+          nameContent = intl.get(EMPTY_NAME);
         }
-        const title = !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+        const title = !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
         return {
           value,
           title,
@@ -208,7 +201,7 @@ class CustomBar extends _baseChart.default {
           },
           formatter: name => {
             if (!name && typeof name !== 'number') {
-              return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+              return intl.get(EMPTY_NAME);
             }
             return name;
           }
@@ -258,7 +251,7 @@ class CustomBar 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);
@@ -276,7 +269,7 @@ class CustomBar extends _baseChart.default {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'statistic-chart-axis-label';
-        div.innerHTML = title_name || _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
+        div.innerHTML = title_name || intl.get(TITLE_AMOUNT);
         const containerHeight = chartContainer.offsetHeight;
         let textAlign = 'center';
         if (y_axis_label_position === 'bottom') textAlign = 'left';
@@ -311,7 +304,7 @@ class CustomBar 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);
     });
     chartCalculator.calculate(statItem).then(data => {
@@ -405,7 +398,7 @@ class CustomBar 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
@@ -415,4 +408,4 @@ class CustomBar extends _baseChart.default {
   }
 }
 CustomBar.propTypes = propTypes;
-var _default = exports.default = CustomBar;
+export default CustomBar;

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

@@ -1,23 +1,16 @@
-"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 _baseChart = _interopRequireDefault(require("./base-chart"));
-var _customG = require("../custom-g2");
-var _utils = require("../utils");
+import React from 'react';
+import PropTypes from 'prop-types';
+import BaseChart from './base-chart';
+import { Chart, registerShape } from '../custom-g2';
+import { isMobile } from '../utils';
 const propTypes = {
-  isPreview: _propTypes.default.bool,
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object
+  isPreview: PropTypes.bool,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object
 };
 const WIDTH = 700;
 const HEIGHT = 400;
-class DashboardChart extends _baseChart.default {
+class DashboardChart extends BaseChart {
   constructor(props) {
     super(props);
     this.componentDidMount = async () => {
@@ -130,10 +123,10 @@ class DashboardChart extends _baseChart.default {
         config.width = WIDTH;
         config.height = HEIGHT;
       }
-      this.chart = new _customG.Chart(config);
+      this.chart = new Chart(config);
     };
     this.registerShape = () => {
-      (0, _customG.registerShape)('point', 'pointer', {
+      registerShape('point', 'pointer', {
         draw(cfg, container) {
           const group = container.addGroup();
           const center = this.parsePoint({
@@ -216,7 +209,7 @@ class DashboardChart extends _baseChart.default {
         position: ['50%', '85%'],
         content: statItem.name,
         style: {
-          fontSize: _utils.isMobile ? 16 : 20,
+          fontSize: isMobile ? 16 : 20,
           fill: '#545454',
           textAlign: 'center'
         }
@@ -231,7 +224,7 @@ class DashboardChart extends _baseChart.default {
         position: ['50%', '90%'],
         content: "".concat(shownValue, " %"),
         style: {
-          fontSize: _utils.isMobile ? 20 : 36,
+          fontSize: isMobile ? 20 : 36,
           fill: themeColors.textColor,
           textAlign: 'center'
         },
@@ -256,11 +249,11 @@ class DashboardChart 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 d-flex justify-content-around align-items-center"
     }));
   }
 }
 DashboardChart.propTypes = propTypes;
-var _default = exports.default = DashboardChart;
+export default DashboardChart;

package/es/stat-view/heat-map.js

@@ -1,23 +1,16 @@
-"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 _dayjs = _interopRequireDefault(require("dayjs"));
-var _weekOfYear = _interopRequireDefault(require("dayjs/plugin/weekOfYear"));
-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 _statisticCustomModule = _interopRequireDefault(require("../assets/css/statistic-custom.module.css"));
-_dayjs.default.extend(_weekOfYear.default);
-class HeatMap extends _baseChart.default {
+import React from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import intl from 'react-intl-universal';
+import { TableUtils } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart, registerShape, getRectWithCornerRadius } from '../custom-g2';
+import { isShapeEqual } from '../utils/common-utils';
+import { COLOR_OPTIONS, DEFAULT_GRID_DISTANCE, DEFAULT_GRID_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, FILL_BORDER_COLOR_MAP, MONTH_MIRROR, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
+import styles from '../assets/css/statistic-custom.module.css';
+dayjs.extend(weekOfYear);
+class HeatMap extends BaseChart {
   constructor(props) {
     super(props);
     this.destroyChart = () => {
@@ -26,7 +19,7 @@ class HeatMap extends _baseChart.default {
     };
     this.transformData = statData => {
       let data = {};
-      let yearFirstDate = (0, _dayjs.default)(statData[0].name);
+      let yearFirstDate = dayjs(statData[0].name);
       this.firstDate = yearFirstDate.year() + '-01-01';
       statData.forEach(item => {
         data[item.name] = data[item.name] ? data[item.name] + item.value : item.value;
@@ -34,7 +27,7 @@ class HeatMap extends _baseChart.default {
       return data;
     };
     this.generateBackgroundGridData = statData => {
-      let momentDate = (0, _dayjs.default)(this.firstDate);
+      let momentDate = dayjs(this.firstDate);
       const year = momentDate.year();
       const gridData = [];
       const isLeapYear = year % 4 > 0 ? false : true;
@@ -64,7 +57,7 @@ class HeatMap extends _baseChart.default {
       return gridData;
     };
     this.getLabel = val => {
-      const currentDate = (0, _dayjs.default)(this.firstDate).add(val * 7, 'days');
+      const currentDate = dayjs(this.firstDate).add(val * 7, 'days');
       let month = currentDate.month();
       let monthDate = currentDate.date();
       let isFirst = monthDate <= 7 || false;
@@ -72,7 +65,7 @@ class HeatMap extends _baseChart.default {
       // if the week is the first week of a month
       // mark it to axis
       if (isFirst) {
-        return _reactIntlUniversal.default.get(_constants.MONTH_MIRROR[month]);
+        return intl.get(MONTH_MIRROR[month]);
       }
       return '';
     };
@@ -82,7 +75,7 @@ class HeatMap extends _baseChart.default {
         getTableById,
         statItem
       } = this.props;
-      const currentColorOption = _constants.COLOR_OPTIONS.filter(item => item.name === statItem.data_color)[0] || _constants.COLOR_OPTIONS[0];
+      const currentColorOption = COLOR_OPTIONS.filter(item => item.name === statItem.data_color)[0] || COLOR_OPTIONS[0];
       const {
         exampleColors
       } = currentColorOption;
@@ -99,12 +92,12 @@ class HeatMap extends _baseChart.default {
         grid_size,
         grid_distance
       } = statItem;
-      grid_size = grid_size || _constants.DEFAULT_GRID_SIZE;
-      grid_distance = grid_distance || _constants.DEFAULT_GRID_DISTANCE;
+      grid_size = grid_size || DEFAULT_GRID_SIZE;
+      grid_distance = grid_distance || DEFAULT_GRID_DISTANCE;
       // height for 1 year
       const yearHeight = grid_size * 7 + grid_distance * 6 + 8;
       const chartHeight = (yearHeight + 30) * count + 30 + (count - 1) * 15;
-      this.chart = new _customG.Chart({
+      this.chart = new Chart({
         container: this.container,
         autoFit: false,
         height: chartHeight,
@@ -123,7 +116,7 @@ class HeatMap extends _baseChart.default {
         showTitle: false,
         shared: true,
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-        itemTpl: "<div class=\"g2-tooltip-content\"><div style=\"width: max-content; text-align: left;\" class=\"tooltip-name\">{date}<div><div style=\"word-break: keep-all;\"  class=\"tooltip-item\">".concat(_reactIntlUniversal.default.get(_constants.TITLE_AMOUNT), " : {value}<div></div>"),
+        itemTpl: "<div class=\"g2-tooltip-content\"><div style=\"width: max-content; text-align: left;\" class=\"tooltip-name\">{date}<div><div style=\"word-break: keep-all;\"  class=\"tooltip-item\">".concat(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
         domStyles: {
           'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
           'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
@@ -132,17 +125,17 @@ class HeatMap extends _baseChart.default {
       this.chart.axis(false);
       this.chart.data(statData.data);
       const themeColors = this.getThemeColors();
-      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       const {
         table_id,
         summary_type,
         summary_column,
         summary_method
       } = statItem;
-      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
         const table = getTableById(table_id);
-        const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column) || {};
-        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       this.chart.facet('list', {
         fields: ['year'],
@@ -196,7 +189,7 @@ class HeatMap extends _baseChart.default {
           gridView.scale({
             day: {
               type: 'cat',
-              values: [_reactIntlUniversal.default.get('Sun'), _reactIntlUniversal.default.get('Mon'), _reactIntlUniversal.default.get('Tue'), _reactIntlUniversal.default.get('Wed'), _reactIntlUniversal.default.get('Thu'), _reactIntlUniversal.default.get('Fri'), _reactIntlUniversal.default.get('Sat')]
+              values: [intl.get('Sun'), intl.get('Mon'), intl.get('Tue'), intl.get('Wed'), intl.get('Thu'), intl.get('Fri'), intl.get('Sat')]
             },
             week: {
               type: 'cat'
@@ -254,7 +247,7 @@ class HeatMap extends _baseChart.default {
       context.font = font;
       return Math.ceil(context.measureText(text).width);
     };
-    _dayjs.default.locale('en');
+    dayjs.locale('en');
     this.state = {
       isCalculatingData: true,
       showResultDescription: true
@@ -267,14 +260,14 @@ class HeatMap extends _baseChart.default {
       statItem,
       chartCalculator
     } = this.props;
-    (0, _customG.registerShape)('polygon', 'boundary-polygon', {
+    registerShape('polygon', 'boundary-polygon', {
       draw(cfg, container) {
         if (cfg && cfg.points && cfg.points.length > 0) {
           const group = container.addGroup();
           let attrs = {
             fill: cfg.color,
             lineWidth: 1,
-            stroke: _constants.FILL_BORDER_COLOR_MAP[cfg.color]
+            stroke: FILL_BORDER_COLOR_MAP[cfg.color]
           };
           const {
             points,
@@ -296,7 +289,7 @@ class HeatMap extends _baseChart.default {
           p3.x = p0.x + offset;
           p3.y = p0.y;
           // get cell path that has radius, the cell radius is 2;
-          const path = (0, _customG.getRectWithCornerRadius)(parsedPoint, this.coordinate, 2);
+          const path = getRectWithCornerRadius(parsedPoint, this.coordinate, 2);
           attrs.path = path;
           group.addShape('path', {
             attrs,
@@ -328,7 +321,7 @@ class HeatMap extends _baseChart.default {
       statItem
     } = this.props;
     if (this.canUpdate(this.props, nextProps)) {
-      if (!(0, _commonUtils.isShapeEqual)(nextProps.statItem.layout, statItem.layout)) {
+      if (!isShapeEqual(nextProps.statItem.layout, statItem.layout)) {
         return false;
       }
       return true;
@@ -377,7 +370,7 @@ class HeatMap extends _baseChart.default {
     this.container = null;
   }
   getLegendItems(colors) {
-    const text = _reactIntlUniversal.default.get('Less');
+    const text = intl.get('Less');
     const textWidth = this.getTextWidthInCanvas(text);
     const items = [{
       name: text,
@@ -400,13 +393,13 @@ class HeatMap extends _baseChart.default {
           style: {
             fill: color,
             lineWidth: 1,
-            stroke: _constants.FILL_BORDER_COLOR_MAP[color],
+            stroke: FILL_BORDER_COLOR_MAP[color],
             r: 5
           }
         }
       });
     });
-    items[9].name = _reactIntlUniversal.default.get('More');
+    items[9].name = intl.get('More');
     items[9].marker.spacing = 22;
     return items;
   }
@@ -434,7 +427,7 @@ class HeatMap extends _baseChart.default {
       x: p0.x + 12,
       y: p0.y
     };
-    const path = (0, _customG.getRectWithCornerRadius)([p0, p1, p2, p3], this.chart.coordinateInstance, 2);
+    const path = getRectWithCornerRadius([p0, p1, p2, p3], this.chart.coordinateInstance, 2);
     return path;
   }
   render() {
@@ -442,7 +435,7 @@ class HeatMap 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", {
       style: {
         overflow: 'auto',
         height: '100%',
@@ -450,14 +443,14 @@ class HeatMap extends _baseChart.default {
         padding: 15
       },
       ref: ref => this.container = ref,
-      className: "".concat(_statisticCustomModule.default['statistic-heatmap-container'], " statistic-chart-container")
+      className: "".concat(styles['statistic-heatmap-container'], " statistic-chart-container")
     }));
   }
 }
 HeatMap.propTypes = {
-  statItem: _propTypes.default.object,
-  chartCalculator: _propTypes.default.object,
-  getTableById: _propTypes.default.func,
-  toggleStatisticRecordsDialog: _propTypes.default.func
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
 };
-var _default = exports.default = HeatMap;
+export default HeatMap;