dtable-statistic 4.3.4 → 4.3.6

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);
+          item.name = name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
           if (name === 'Others') {
-            item.name = intl.get('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;

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

@@ -1,15 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import DataSet from '@antv/data-set/lib/index';
-import intl from 'react-intl-universal';
-import { TableUtils } from 'dtable-store';
-import BaseChart from './base-chart';
-import { Chart } from '../custom-g2';
-import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, STAT_TYPE, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
-import { MAP_LEVEL } from '../constants/map';
+"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 _index = _interopRequireDefault(require("@antv/data-set/lib/index"));
+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");
+var _map = require("../constants/map");
 const WIDTH = 798;
 const HEIGHT = 394;
-class WorldMap extends BaseChart {
+class WorldMap extends _baseChart.default {
   constructor(props) {
     super(props);
     this.rerenderChart = () => {
@@ -46,13 +53,13 @@ class WorldMap extends BaseChart {
               value: value || 0,
               formatted_value: item.formatted_value
             });
-            if (type === STAT_TYPE.WORLD_MAP_BUBBLE) {
+            if (type === _constants.STAT_TYPE.WORLD_MAP_BUBBLE) {
               sum += item.value;
             }
           }
         }
       });
-      if (type === STAT_TYPE.WORLD_MAP_BUBBLE) {
+      if (type === _constants.STAT_TYPE.WORLD_MAP_BUBBLE) {
         statisticNewData.sum = sum;
       }
       return statisticNewData;
@@ -75,16 +82,16 @@ class WorldMap extends BaseChart {
         summary_method,
         summary_column
       } = this.props.statItem;
-      const currentColorOption = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
+      const currentColorOption = _constants.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _constants.COLOR_OPTIONS[0];
       const {
         exampleColors,
         highlightedBorderColor
       } = currentColorOption;
-      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
         const table = getTableById(table_id);
-        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
-        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column) || {};
+        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       this.statisticView = this.chart.createView();
       this.statisticView.data(userDataView.rows);
@@ -149,11 +156,11 @@ class WorldMap extends BaseChart {
         summary_method,
         summary_column
       } = this.props.statItem;
-      let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
         const table = getTableById(table_id);
-        const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
-        summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+        const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column) || {};
+        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
       }
       this.statisticView = this.chart.createView();
       this.statisticView.data(userDv.rows);
@@ -262,7 +269,7 @@ class WorldMap extends BaseChart {
       } = this.getSize();
       const horizontalPadding = (containerWidth - mapWidth) / 4;
       const leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
-      this.chart = new Chart({
+      this.chart = new _customG.Chart({
         container: this.container,
         width: containerWidth,
         height: containerHeight,
@@ -285,7 +292,7 @@ class WorldMap extends BaseChart {
         showMarkers: false,
         shared: true,
         containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-        itemTpl: "<div class=\"g2-tooltip-content\"><div class=\"tooltip-name\">{name}<div><div class=\"tooltip-item\">".concat(intl.get(TITLE_AMOUNT), " : {value}<div></div>"),
+        itemTpl: "<div class=\"g2-tooltip-content\"><div class=\"tooltip-name\">{name}<div><div class=\"tooltip-item\">".concat(_reactIntlUniversal.default.get(_constants.TITLE_AMOUNT), " : {value}<div></div>"),
         domStyles: {
           'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
           'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
@@ -300,7 +307,7 @@ class WorldMap extends BaseChart {
         }
       });
       this.chart.axis(false);
-      this.dataSet = new DataSet();
+      this.dataSet = new _index.default();
 
       // transform map data
       const mapData = this.dataSet.createView('mapDataModel').source(geolocation, {
@@ -339,7 +346,7 @@ class WorldMap extends BaseChart {
       chartCalculator
     } = this.props;
     this.props.queryMapJson({
-      map_level: MAP_LEVEL.WORLD
+      map_level: _map.MAP_LEVEL.WORLD
     }, mapJson => {
       this.setState({
         isDataLoaded: true
@@ -407,18 +414,18 @@ class WorldMap extends BaseChart {
       isDataLoaded,
       isCalculatingData
     } = this.state;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (!isDataLoaded || isCalculatingData) && this.renderLoading(), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!isDataLoaded || isCalculatingData) && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
       ref: ref => this.container = ref,
       className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
     }));
   }
 }
 WorldMap.propTypes = {
-  isPreview: PropTypes.bool,
-  statItem: PropTypes.object,
-  chartCalculator: PropTypes.object,
-  getTableById: PropTypes.func,
-  queryMapJson: PropTypes.func.isRequired,
-  toggleStatisticRecordsDialog: PropTypes.func
+  isPreview: _propTypes.default.bool,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  queryMapJson: _propTypes.default.func.isRequired,
+  toggleStatisticRecordsDialog: _propTypes.default.func
 };
-export default WorldMap;
+var _default = exports.default = WorldMap;

package/es/tabs/index.js

@@ -1,15 +1,23 @@
-import React, { Component } from 'react';
-import intl from 'react-intl-universal';
-import NewViewDialog from '../components/dialog/new-view-dialog';
-import RenameViewDialog from '../components/dialog/rename-view-dialog';
-import DeleteConfirmationDialog from '../components/dialog/delete-confirmation-dialog';
-import Tab from './tab';
-import styles from './statistic-tabs.module.css';
+"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 _newViewDialog = _interopRequireDefault(require("../components/dialog/new-view-dialog"));
+var _renameViewDialog = _interopRequireDefault(require("../components/dialog/rename-view-dialog"));
+var _deleteConfirmationDialog = _interopRequireDefault(require("../components/dialog/delete-confirmation-dialog"));
+var _tab = _interopRequireDefault(require("./tab"));
+var _statisticTabsModule = _interopRequireDefault(require("./statistic-tabs.module.css"));
 const SCROLL_TYPE = {
   PREV: 'prev',
   NEXT: 'next'
 };
-class DashboardTabs extends Component {
+class DashboardTabs extends _react.Component {
   constructor(_props) {
     super(_props);
     this.initSelectedViewScroll = props => {
@@ -175,7 +183,7 @@ class DashboardTabs extends Component {
       }
       const canDelete = statistics.length > 1;
       return statistics.map((item, index) => {
-        return /*#__PURE__*/React.createElement(Tab, {
+        return /*#__PURE__*/_react.default.createElement(_tab.default, {
           key: "statistic-view-".concat(index),
           item: item,
           theme: theme,
@@ -224,39 +232,39 @@ class DashboardTabs extends Component {
       statistics,
       selectedDashboardIdx
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles['tabs-container']
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles['views-tabs-scroll'], " d-flex pr-1"),
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _statisticTabsModule.default['tabs-container']
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_statisticTabsModule.default['views-tabs-scroll'], " d-flex pr-1"),
       ref: ref => this.viewsTabsScroll = ref,
       onScroll: this.onViewsScroll
-    }, this.renderTabs()), (canScrollPrev || canScrollNext) && !isMobile && /*#__PURE__*/React.createElement("div", {
-      className: styles['views-scroll-control']
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(styles['scroll-control-btn'], " ").concat(styles['scroll-prev'], " ").concat(canScrollPrev && styles['scroll-active']),
+    }, this.renderTabs()), (canScrollPrev || canScrollNext) && !isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      className: _statisticTabsModule.default['views-scroll-control']
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(_statisticTabsModule.default['scroll-control-btn'], " ").concat(_statisticTabsModule.default['scroll-prev'], " ").concat(canScrollPrev && _statisticTabsModule.default['scroll-active']),
       onClick: this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-left-slide ".concat(styles['btn-scroll-icon'])
-    })), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(styles['scroll-control-btn'], " ").concat(styles['scroll-next'], " ").concat(canScrollNext && styles['scroll-active']),
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-left-slide ".concat(_statisticTabsModule.default['btn-scroll-icon'])
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(_statisticTabsModule.default['scroll-control-btn'], " ").concat(_statisticTabsModule.default['scroll-next'], " ").concat(canScrollNext && _statisticTabsModule.default['scroll-active']),
       onClick: this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "dtable-font dtable-icon-right-slide ".concat(styles['btn-scroll-icon'])
-    }))), !isMobile && /*#__PURE__*/React.createElement("div", {
-      className: styles['btn-add-view'],
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-right-slide ".concat(_statisticTabsModule.default['btn-scroll-icon'])
+    }))), !isMobile && /*#__PURE__*/_react.default.createElement("div", {
+      className: _statisticTabsModule.default['btn-add-view'],
       key: 'btn-add-view',
       onClick: this.onNewViewToggle
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "".concat(styles['add-map-view-icon'], " dtable-font dtable-icon-add-table")
-    })), isShowNewViewDialog && /*#__PURE__*/React.createElement(NewViewDialog, {
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "".concat(_statisticTabsModule.default['add-map-view-icon'], " dtable-font dtable-icon-add-table")
+    })), isShowNewViewDialog && /*#__PURE__*/_react.default.createElement(_newViewDialog.default, {
       onNewViewConfirm: this.onAddDashboard,
       onNewViewCancel: this.onNewViewCancel
-    }), isShowRenameViewDialog && /*#__PURE__*/React.createElement(RenameViewDialog, {
+    }), isShowRenameViewDialog && /*#__PURE__*/_react.default.createElement(_renameViewDialog.default, {
       viewName: statistics[selectedDashboardIdx].name,
       onRenameDashboard: this.props.renameDashboard,
       hideRenameViewDialog: this.hideRenameViewDialog
-    }), isShowDeleteViewDialog && /*#__PURE__*/React.createElement(DeleteConfirmationDialog, {
-      header: intl.get('Delete_dashboard'),
+    }), isShowDeleteViewDialog && /*#__PURE__*/_react.default.createElement(_deleteConfirmationDialog.default, {
+      header: _reactIntlUniversal.default.get('Delete_dashboard'),
       name: statistics[selectedDashboardIdx].name,
       onToggle: this.onToggleDeleteView,
       onDelete: this.onDeleteDashBoard
@@ -266,4 +274,4 @@ class DashboardTabs extends Component {
 DashboardTabs.defaultProps = {
   isMobile: false
 };
-export default DashboardTabs;
+var _default = exports.default = DashboardTabs;

package/es/tabs/tab.js

@@ -1,10 +1,18 @@
-import React, { Component } from 'react';
-import intl from 'react-intl-universal';
-import { ModalPortal } from '../components';
-import { isMobile } from '../utils';
-import { THEME_NAME_MAP } from '../constants';
-import styles from './statistic-tabs.module.css';
-class DashBoardTab extends Component {
+"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 _components = require("../components");
+var _utils = require("../utils");
+var _constants = require("../constants");
+var _statisticTabsModule = _interopRequireDefault(require("./statistic-tabs.module.css"));
+class DashBoardTab extends _react.Component {
   constructor(props) {
     super(props);
     this.onHideViewDropdown = () => {
@@ -106,7 +114,7 @@ class DashBoardTab extends Component {
       dropdownMenuPosition,
       dropRelativePosition
     } = this.state;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: ref => this.itemRef = ref,
       draggable: "true",
       onDragStart: this.onDragStart,
@@ -114,40 +122,40 @@ class DashBoardTab extends Component {
       onDragOver: this.onDragOver,
       onDragLeave: this.onDragLeave,
       onDrop: this.onDrop,
-      className: "\n          ".concat(styles['dashboard-tab'], "\n          ").concat(dropRelativePosition === 'before' ? styles['dashboard-tab-can-drop-before'] : '', "\n          ").concat(dropRelativePosition === 'after' ? styles['dashboard-tab-can-drop-after'] : '', "\n        ")
-    }, /*#__PURE__*/React.createElement("div", {
+      className: "\n          ".concat(_statisticTabsModule.default['dashboard-tab'], "\n          ").concat(dropRelativePosition === 'before' ? _statisticTabsModule.default['dashboard-tab-can-drop-before'] : '', "\n          ").concat(dropRelativePosition === 'after' ? _statisticTabsModule.default['dashboard-tab-can-drop-after'] : '', "\n        ")
+    }, /*#__PURE__*/_react.default.createElement("div", {
       ref: this.props.setViewItem,
       onClick: this.props.onSelectDashboard,
-      className: "".concat(styles['dashboard-tab-content'], " ").concat(selected ? isMobile ? styles['tab-item-active-mobile'] : styles['tab-item-active'] : '')
-    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(_statisticTabsModule.default['dashboard-tab-content'], " ").concat(selected ? _utils.isMobile ? _statisticTabsModule.default['tab-item-active-mobile'] : _statisticTabsModule.default['tab-item-active'] : '')
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "view-name"
-    }, item.name), selected && !isMobile && /*#__PURE__*/React.createElement("div", {
+    }, item.name), selected && !_utils.isMobile && /*#__PURE__*/_react.default.createElement("div", {
       onClick: this.onDropdownToggle,
       ref: ref => this.btnViewDropdown = ref,
-      className: "".concat(styles['btn-view-dropdown'])
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "".concat(styles['icon'], " dtable-font dtable-icon-drop-down")
-    }), isShowViewDropdown && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(theme === THEME_NAME_MAP.DARK ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
+      className: "".concat(_statisticTabsModule.default['btn-view-dropdown'])
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "".concat(_statisticTabsModule.default['icon'], " dtable-font dtable-icon-drop-down")
+    }), isShowViewDropdown && /*#__PURE__*/_react.default.createElement(_components.ModalPortal, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(theme === _constants.THEME_NAME_MAP.DARK ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
       style: {
         ...dropdownMenuPosition,
         zIndex: 1500
       }
-    }, /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/_react.default.createElement("button", {
       className: "dropdown-item",
       onClick: this.props.onToggleRenameView
-    }, /*#__PURE__*/React.createElement("i", {
+    }, /*#__PURE__*/_react.default.createElement("i", {
       className: "item-icon dtable-font dtable-icon-rename"
-    }), /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: "item-text"
-    }, intl.get('Rename'))), canDelete && /*#__PURE__*/React.createElement("button", {
+    }, _reactIntlUniversal.default.get('Rename'))), canDelete && /*#__PURE__*/_react.default.createElement("button", {
       className: "dropdown-item",
       onClick: this.props.onDeleteDashboard
-    }, /*#__PURE__*/React.createElement("i", {
+    }, /*#__PURE__*/_react.default.createElement("i", {
       className: "item-icon dtable-font dtable-icon-delete"
-    }), /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: "item-text"
-    }, intl.get('Delete'))))))));
+    }, _reactIntlUniversal.default.get('Delete'))))))));
   }
 }
-export default DashBoardTab;
+var _default = exports.default = DashBoardTab;