dtable-statistic 4.3.3 → 4.3.4

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

@@ -1,33 +1,26 @@
-"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"));
+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';
 const propTypes = {
-  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
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
 };
-class TreemapChart extends _baseChart.default {
+class TreemapChart extends BaseChart {
   constructor(props) {
     super(props);
     this.componentDidMount = async () => {
@@ -90,14 +83,14 @@ class TreemapChart extends _baseChart.default {
         summary_column_key
       } = statItem;
       const table = getTableById(table_id);
-      const selectedNumericColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key);
+      const selectedNumericColumn = TableUtils.getTableColumnByKey(table, summary_column_key);
       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
@@ -106,20 +99,20 @@ class TreemapChart extends _baseChart.default {
       this.chart.on('element:click', e => {
         this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
       });
-      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
-      const newData = (0, _commonUtils.formatPieChartData)(data, statItem, table, currentTheme);
+      const currentTheme = getCurrentTheme(colorThemeName);
+      const newData = formatPieChartData(data, statItem, table, currentTheme);
       const colorSet = newData.colorSet;
       const {
         DataView
-      } = _dataSet.default;
+      } = DataSet;
       const dv = new DataView();
       const fullData = {
         name: 'root',
         children: newData.map(item => {
           let name = item.name;
-          item.name = name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+          item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
           if (name === 'Others') {
-            item.name = _reactIntlUniversal.default.get('Others');
+            item.name = intl.get('Others');
           }
           return item;
         })
@@ -174,7 +167,7 @@ class TreemapChart extends _baseChart.default {
       chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', (name, value, percent) => {
         return {
           name,
-          info: summary_type === _constants.STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
+          info: summary_type === STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
         };
       }).style({
         lineWidth: 1,
@@ -203,22 +196,22 @@ class TreemapChart extends _baseChart.default {
 
     // customize label layout: show ellipsis for long labels
     function limitInShape(items, labels, shapes, region) {
-      (0, _util.each)(labels, (label, index) => {
+      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 = (0, _util.pick)(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
+            const style = pick(textShape.attr(), ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'fontVariant']);
             const textBox = textShape.getCanvasBBox();
-            const text = (0, _text.getEllipsisText)(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
+            const text = getEllipsisText(textShape.attr('text'), textBox.width - Math.abs(translateX), style);
             textShape.attr('text', text);
           });
         }
       });
     }
-    (0, _customG.registerGeometryLabelLayout)('custom-limit-in-shape', limitInShape);
+    registerGeometryLabelLayout('custom-limit-in-shape', limitInShape);
   }
   shouldComponentUpdate(nextProps, nextState) {
     const {
@@ -242,11 +235,11 @@ class TreemapChart 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 ".concat(_statisticChartModule.default['statistic-treemap-chart-container'])
+      className: "statistic-chart-container ".concat(chartStyles['statistic-treemap-chart-container'])
     }));
   }
 }
 TreemapChart.propTypes = propTypes;
-var _default = exports.default = TreemapChart;
+export default TreemapChart;

package/es/stat-view/trend-chart.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 { DATE_GRANULARITY, EMPTY_NAME, STATISTICS_COUNT_TYPE, 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,
@@ -90,7 +83,7 @@ class BasicNumericCard extends _baseChart.default {
         summary_method
       } = statItem;
       const latest = data && data.latest;
-      const content = summary_method === _constants.SUMMARY_METHOD_MAP.Distinct_values ? latest : this.formatData(latest);
+      const content = summary_method === SUMMARY_METHOD_MAP.Distinct_values ? latest : this.formatData(latest);
       const fontSize = this.getFontSize(content);
       let labelFontSize = fontSize - 32;
       const themeColors = this.getThemeColors();
@@ -106,15 +99,15 @@ class BasicNumericCard extends _baseChart.default {
         getTableById,
         statItem
       } = this.props;
-      if (typeof data !== 'number') return _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+      if (typeof data !== 'number') return intl.get(EMPTY_NAME);
       const {
         table_id,
         summary_type,
         summary_column
       } = statItem;
-      if (summary_type !== _constants.STATISTICS_COUNT_TYPE.COUNT) {
+      if (summary_type !== STATISTICS_COUNT_TYPE.COUNT) {
         const table = getTableById(table_id);
-        const selectedColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column);
+        const selectedColumn = TableUtils.getTableColumnByKey(table, summary_column);
         return this.getNumberDisplayString(data, selectedColumn.data || {});
       }
       let string = data + '';
@@ -174,20 +167,20 @@ class BasicNumericCard extends _baseChart.default {
         date_granularity
       } = statItem;
       let conjunctions = '';
-      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');
+      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');
       } else if (date_granularity === 'days_7') {
-        conjunctions = _reactIntlUniversal.default.get('Previous_7_days');
+        conjunctions = intl.get('Previous_7_days');
       } else if (date_granularity === 'days_30') {
-        conjunctions = _reactIntlUniversal.default.get('Previous_30_days');
+        conjunctions = intl.get('Previous_30_days');
       } else {
-        conjunctions = _reactIntlUniversal.default.get('The_day_before_yesterday');
+        conjunctions = intl.get('The_day_before_yesterday');
       }
       const {
         result,
@@ -202,7 +195,7 @@ class BasicNumericCard extends _baseChart.default {
       }
       let resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%•").concat(conjunctions).concat(previous);
       if (!previous) {
-        resultText = _reactIntlUniversal.default.get('Can_not_compare_with_var', {
+        resultText = intl.get('Can_not_compare_with_var', {
           var: conjunctions.toLowerCase()
         });
       }
@@ -239,11 +232,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;

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

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

package/es/tabs/index.js

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

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