dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,443 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+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, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, STAT_ITEM_THEME_COLORS, STAT_TYPE, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
+var WIDTH = 798;
+var HEIGHT = 394;
+var WorldMap = /*#__PURE__*/function (_BaseChart) {
+  _inherits(WorldMap, _BaseChart);
+  var _super = _createSuper(WorldMap);
+  function WorldMap(props) {
+    var _this;
+    _classCallCheck(this, WorldMap);
+    _this = _super.call(this, props);
+    _this.fixData = function (statisticData) {
+      if (!statisticData) return [];
+      var statisticNewData = [];
+      var sum = 0;
+      var statItem = _this.props.statItem;
+      var type = statItem.type;
+      statisticData.forEach(function (item, index) {
+        if (item && item.name) {
+          var nameType, name, name_cn;
+          if (_this.reg.test(item.name)) {
+            nameType = 'en';
+            name = item.name;
+            name_cn = _this.countryMap.get(name);
+          } else {
+            nameType = 'zh-cn';
+            name = _this.countryMap.get(item.name);
+            name_cn = item.name;
+          }
+          var value = item.value;
+          if (name_cn && name) {
+            statisticNewData.push({
+              name_cn: name_cn,
+              name: name,
+              nameType: nameType,
+              value: value || 0
+            });
+            if (type === STAT_TYPE.WORLD_MAP_BUBBLE) {
+              sum += item.value;
+            }
+          }
+        }
+      });
+      if (type === STAT_TYPE.WORLD_MAP_BUBBLE) {
+        statisticNewData.sum = sum;
+      }
+      return statisticNewData;
+    };
+    _this.renderCommonMap = function (data) {
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        statItem = _this$props.statItem,
+        theme = _this$props.theme,
+        isEnlarge = _this$props.isEnlarge,
+        isPreview = _this$props.isPreview;
+      var userDataView = _this.dataSet.getView('statisticViewModel').source(data).transform({
+        geoDataView: _this.dataSet.getView('mapDataModel'),
+        field: 'name',
+        type: 'geo.region',
+        as: ['longitude', 'latitude']
+      });
+      var _this$props$statItem = _this.props.statItem,
+        table_id = _this$props$statItem.table_id,
+        data_color = _this$props$statItem.data_color,
+        summary_type = _this$props$statItem.summary_type,
+        summary_column = _this$props$statItem.summary_column;
+      var currentColorOption = COLOR_OPTIONS.filter(function (item) {
+        return item.name == data_color;
+      })[0] || COLOR_OPTIONS[0];
+      var exampleColors = currentColorOption.exampleColors,
+        highlightedBorderColor = currentColorOption.highlightedBorderColor;
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      _this.statisticView = _this.chart.createView();
+      _this.statisticView.data(userDataView.rows);
+      _this.statisticView.polygon().position('longitude*latitude').color('value', "".concat(exampleColors[0], "-").concat(exampleColors[4], "-").concat(exampleColors[8])).style({
+        lineWidth: 1,
+        stroke: '#bdbdbd',
+        strokeOpacity: 0.5
+      }).state({
+        active: {
+          style: {
+            lineWidth: 1,
+            stroke: highlightedBorderColor
+          }
+        }
+      }).tooltip('name*value*color*nameType*name_cn', function (name, value, color, nameType, name_cn) {
+        return {
+          name: nameType === 'en' ? name : name_cn,
+          value: getNumberDisplayString(value, columnData),
+          color: color
+        };
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var legendDirection = statItem.legend_direction || 'vertical';
+      var size = statItem.legend_size || 1;
+      _this.chart.legend({
+        layout: legendDirection,
+        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
+        rail: {
+          type: 'color',
+          defaultLength: 100 * size
+        },
+        label: {
+          spacing: 2,
+          style: {
+            fill: themeColors.textColor
+          },
+          align: legendDirection === 'vertical' ? 'right' : 'bottom',
+          formatter: function formatter(value) {
+            return getNumberDisplayString(value, columnData);
+          }
+        },
+        handler: {
+          style: {
+            'opacity': 0
+          }
+        }
+      });
+      _this.statisticView.interaction('element-active');
+      _this.statisticView.render();
+    };
+    _this.renderBubbleMap = function (data) {
+      var _this$props2 = _this.props,
+        getTableById = _this$props2.getTableById,
+        statItem = _this$props2.statItem,
+        isPreview = _this$props2.isPreview,
+        isEnlarge = _this$props2.isEnlarge,
+        theme = _this$props2.theme;
+      var userDv = _this.dataSet.createView().source(data).transform({
+        geoDataView: _this.dataSet.getView('mapDataModel'),
+        field: 'name',
+        type: 'geo.centroid',
+        as: ['longitude', 'latitude']
+      });
+      var _this$props$statItem2 = _this.props.statItem,
+        table_id = _this$props$statItem2.table_id,
+        summary_type = _this$props$statItem2.summary_type,
+        summary_column = _this$props$statItem2.summary_column;
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      _this.statisticView = _this.chart.createView();
+      _this.statisticView.data(userDv.rows);
+      _this.statisticView.point().position('longitude*latitude').size('value', function (value) {
+        var percent = value / data.sum;
+        var size = percent * 100;
+        if (isPreview && size > 60) {
+          size = 60;
+        }
+        return size;
+      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*value*color', function (name, value, color) {
+        return {
+          name: name,
+          value: getNumberDisplayString(value, columnData),
+          color: color
+        };
+      }).style({
+        fillOpacity: 0.6,
+        stroke: statItem.bubble_color || '#2a67d1'
+      }).state({
+        active: {
+          style: {
+            lineWidth: 1,
+            stroke: statItem.bubble_color || '#2a67d1',
+            fillOpacity: 0.9
+          }
+        }
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var legendDirection = statItem.legend_direction || 'vertical';
+      var size = statItem.legend_size || 1;
+      _this.chart.legend({
+        layout: legendDirection,
+        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
+        rail: {
+          type: 'size',
+          defaultLength: 100 * size
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          },
+          align: legendDirection === 'vertical' ? 'right' : 'bottom',
+          formatter: function formatter(value) {
+            return getNumberDisplayString(value, columnData);
+          }
+        },
+        handler: {
+          style: {
+            'opacity': 0
+          }
+        }
+      });
+      _this.statisticView.interaction('element-active');
+      _this.statisticView.render();
+    };
+    _this.updateStatisticData = function (data) {
+      // re-render statistic data view;
+      if (_this.statisticView) {
+        _this.statisticView.destroy();
+      }
+      if (data.length === 0) {
+        _this.chart.legend(false);
+        _this.chart.render();
+        return;
+      }
+      var statItem = _this.props.statItem;
+      var type = statItem.type;
+      if (!type.includes('bubble')) {
+        _this.renderCommonMap(data);
+      } else {
+        _this.renderBubbleMap(data);
+      }
+      _this.chart.render();
+    };
+    _this.getCanvasSize = function () {
+      var maxWidth = _this.container.clientWidth;
+      var maxHeight = _this.container.clientHeight;
+      var h = maxHeight;
+      var w = h * (WIDTH / HEIGHT);
+      if (w > maxWidth) {
+        w = maxWidth;
+        h = w * (HEIGHT / WIDTH);
+      }
+      return {
+        w: w,
+        h: h
+      };
+    };
+    _this.initStatisticContext = function (geolocation) {
+      _this.countryMap = new Map();
+      geolocation.features.forEach(function (item) {
+        _this.countryMap.set(item.properties.name, item.properties.name_cn);
+        _this.countryMap.set(item.properties.name_cn, item.properties.name);
+      });
+      if (!_this.container) return;
+      // create chart
+      var canvasSize = _this.getCanvasSize();
+      _this.chart = new Chart({
+        container: _this.container,
+        width: canvasSize.w,
+        height: canvasSize.h,
+        padding: [20, 20]
+      });
+      _this.chart.on('element:click', function (e) {
+        var statItem = _this.props.statItem;
+        var data = e.data.data;
+        var lang = window.dtable ? window.dtable.lang : 'zh-cn';
+        var countryName = lang === 'zh-cn' ? data.name_cn : data.name;
+        var clickData = _this.calculateData.find(function (i) {
+          return i.name === countryName;
+        });
+        if (clickData) {
+          _this.props.toggleStatisticRecordsDialog(clickData, statItem);
+        }
+      });
+      _this.chart.tooltip({
+        showTitle: false,
+        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>"),
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      _this.chart.scale({
+        longitude: {
+          sync: true
+        },
+        latitude: {
+          sync: true
+        }
+      });
+      _this.chart.axis(false);
+      _this.dataSet = new DataSet();
+
+      // transform map data
+      var mapData = _this.dataSet.createView('mapDataModel').source(geolocation, {
+        type: 'GeoJSON'
+      });
+      var mapView = _this.chart.createView();
+
+      // draw background map
+      mapView.data(mapData.rows);
+      mapView.tooltip(false);
+      mapView.polygon().position('longitude*latitude').style({
+        fill: '#e2e2e2',
+        stroke: '#bdbdbd',
+        lineWidth: 1
+      });
+      _this.dataSet.createView('statisticViewModel');
+      mapView.render();
+    };
+    _this.getGeoLocationData = function () {
+      var mediaUrl = window.dtable.mediaUrl;
+      return fetch("".concat(mediaUrl, "dtable-statistic/geolocation/world.json")).catch(function (err) {});
+    };
+    _this.state = {
+      isDataLoaded: false,
+      isCalculatingData: true
+    };
+    _this.reg = /^([A-Za-z])/;
+    _this.calculateData = null;
+    _this.countryMap = null;
+    return _this;
+  }
+  _createClass(WorldMap, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
+      this.getGeoLocationData().then(function (res) {
+        return res && res.json();
+      }).then(function (data) {
+        _this2.setState({
+          isDataLoaded: true
+        });
+        if (!data) return;
+        _this2.initStatisticContext(data);
+        if (_this2.container) {
+          chartCalculator.calculate(statItem).then(function (data) {
+            _this2.setState({
+              isCalculatingData: false
+            });
+            _this2.calculateData = data;
+            _this2.updateStatisticData(_this2.fixData(data));
+          });
+        }
+      });
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.canUpdate(this.props, nextProps) && nextState.isDataLoaded === this.state.isDataLoaded) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps, preState) {
+      var _this3 = this;
+      if (!this.chart || !this.dataSet) return;
+      var _this$props4 = this.props,
+        statItem = _this$props4.statItem,
+        chartCalculator = _this$props4.chartCalculator;
+      var isCalculatingData = this.state.isCalculatingData;
+      if (isCalculatingData !== preState.isCalculatingData) return;
+      if (this.shouldCalculateStatItem(preProps, this.props)) {
+        this.setState({
+          isCalculatingData: true
+        });
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(function (data) {
+            _this3.calculateData = data;
+            _this3.updateStatisticData(_this3.fixData(data));
+            if (_this3.props.isPreview) {
+              var canvasSize = _this3.getCanvasSize();
+              _this3.chart.changeSize(canvasSize.w, canvasSize.h);
+            }
+          });
+        }
+      } else {
+        this.updateStatisticData(this.fixData(this.calculateData));
+        if (this.props.isPreview) {
+          var canvasSize = this.getCanvasSize();
+          this.chart.changeSize(canvasSize.w, canvasSize.h);
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+      this.setState = function () {};
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var _this$state = this.state,
+        isDataLoaded = _this$state.isDataLoaded,
+        isCalculatingData = _this$state.isCalculatingData;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, !isDataLoaded && isCalculatingData && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this4.container = _ref;
+        },
+        className: "statistic-chart-container d-flex justify-content-around align-items-center w-100 h-100"
+      }));
+    }
+  }]);
+  return WorldMap;
+}(BaseChart);
+WorldMap.propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+export default WorldMap;

package/es/tabs/index.js

@@ -0,0 +1,252 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import NewViewDialog from '../components/dialog/new-view-dialog';
+import RenameViewDialog from '../components/dialog/rename-view-dialog';
+import Tab from './tab';
+import styles from './statistic-tabs.module.css';
+var SCROLL_TYPE = {
+  PREV: 'prev',
+  NEXT: 'next'
+};
+var DashboardTabs = /*#__PURE__*/function (_Component) {
+  _inherits(DashboardTabs, _Component);
+  var _super = _createSuper(DashboardTabs);
+  function DashboardTabs(_props) {
+    var _this;
+    _classCallCheck(this, DashboardTabs);
+    _this = _super.call(this, _props);
+    _this.initSelectedViewScroll = function (props) {
+      if (_this.views.length === 0) {
+        return;
+      }
+      var selectedDashboardIdx = props.selectedDashboardIdx;
+      var _this$views$selectedD = _this.views[selectedDashboardIdx].getBoundingClientRect(),
+        left = _this$views$selectedD.left;
+      var offsetWidth = _this.viewsTabsScroll.offsetWidth;
+      if (left > offsetWidth) {
+        _this.viewsTabsScroll.scrollLeft = left - offsetWidth;
+      } else {
+        _this.checkAvailableScrollType();
+      }
+    };
+    _this.checkAvailableScrollType = function () {
+      var _this$state = _this.state,
+        canScrollPrev = _this$state.canScrollPrev,
+        canScrollNext = _this$state.canScrollNext;
+      var _this$viewsTabsScroll = _this.viewsTabsScroll,
+        offsetWidth = _this$viewsTabsScroll.offsetWidth,
+        scrollWidth = _this$viewsTabsScroll.scrollWidth,
+        scrollLeft = _this$viewsTabsScroll.scrollLeft;
+      var _canScrollPrev = false;
+      var _canScrollNext = false;
+      if (scrollLeft > 0) {
+        _canScrollPrev = true;
+      }
+      if (scrollLeft + offsetWidth < scrollWidth) {
+        _canScrollNext = true;
+      }
+      if (_canScrollPrev !== canScrollPrev || _canScrollNext !== canScrollNext) {
+        _this.setState({
+          canScrollPrev: _canScrollPrev,
+          canScrollNext: _canScrollNext
+        });
+      }
+    };
+    _this.onScrollWithControl = function (type) {
+      var _this$viewsTabsScroll2 = _this.viewsTabsScroll,
+        offsetWidth = _this$viewsTabsScroll2.offsetWidth,
+        scrollWidth = _this$viewsTabsScroll2.scrollWidth,
+        scrollLeft = _this$viewsTabsScroll2.scrollLeft;
+      var targetScrollLeft;
+      if (type === SCROLL_TYPE.PREV) {
+        if (scrollLeft === 0) {
+          return;
+        }
+        targetScrollLeft = scrollLeft - offsetWidth;
+        targetScrollLeft = targetScrollLeft > 0 ? targetScrollLeft : 0;
+      }
+      if (type === SCROLL_TYPE.NEXT) {
+        if (scrollLeft + offsetWidth === scrollWidth) {
+          return;
+        }
+        targetScrollLeft = scrollLeft + offsetWidth;
+        targetScrollLeft = targetScrollLeft > scrollWidth - offsetWidth ? scrollWidth - offsetWidth : targetScrollLeft;
+      }
+      if (_this.state.canViewsScroll) {
+        _this.setState({
+          canViewsScroll: false
+        });
+        var timer = null;
+        timer = setInterval(function () {
+          var step = (targetScrollLeft - scrollLeft) / 10;
+          step = step > 0 ? Math.ceil(step) : Math.floor(step);
+          _this.viewsTabsScroll.scrollLeft = _this.viewsTabsScroll.scrollLeft + step;
+          if (Math.abs(targetScrollLeft - _this.viewsTabsScroll.scrollLeft) <= Math.abs(step)) {
+            _this.viewsTabsScroll.scrollLeft = targetScrollLeft;
+            clearInterval(timer);
+            _this.setState({
+              canViewsScroll: true
+            });
+          }
+        }, 15);
+      }
+    };
+    _this.setViewItem = function (idx, viewItem) {
+      _this.views[idx] = viewItem;
+    };
+    _this.selectDashboard = function (index, event) {
+      event.stopPropagation();
+      event.preventDefault();
+      var selectedDashboardIdx = _this.props.selectedDashboardIdx;
+      if (index === selectedDashboardIdx) return;
+      _this.props.selectDashboard(index);
+    };
+    _this.onViewsScroll = function () {
+      _this.checkAvailableScrollType();
+    };
+    _this.setViewsTabsScroll = function () {
+      if (!_this.viewsTabsScroll) return;
+      var _this$viewsTabsScroll3 = _this.viewsTabsScroll,
+        offsetWidth = _this$viewsTabsScroll3.offsetWidth,
+        scrollWidth = _this$viewsTabsScroll3.scrollWidth;
+      if (scrollWidth > offsetWidth) {
+        _this.viewsTabsScroll.scrollLeft = scrollWidth - offsetWidth;
+      }
+    };
+    _this.onNewViewToggle = function () {
+      if (_this.props.isMobile) return;
+      _this.setState({
+        isShowNewViewDialog: !_this.state.isShowNewViewDialog
+      });
+    };
+    _this.onNewViewCancel = function () {
+      _this.setState({
+        isShowNewViewDialog: false
+      });
+    };
+    _this.onToggleRenameView = function () {
+      if (_this.props.isMobile) return;
+      _this.setState({
+        isShowRenameViewDialog: !_this.state.isShowRenameViewDialog
+      });
+    };
+    _this.hideRenameViewDialog = function () {
+      _this.setState({
+        isShowRenameViewDialog: false
+      });
+    };
+    _this.onAddDashboard = function (viewName) {
+      _this.props.addDashboard(viewName, function () {
+        _this.setViewsTabsScroll();
+      });
+      _this.onNewViewToggle();
+    };
+    _this.renderTabs = function () {
+      var _this$props = _this.props,
+        statistics = _this$props.statistics,
+        selectedDashboardIdx = _this$props.selectedDashboardIdx,
+        theme = _this$props.theme;
+      if (!statistics) {
+        return null;
+      }
+      var canDelete = statistics.length > 1;
+      return statistics.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Tab, {
+          key: "statistic-view-".concat(index),
+          item: item,
+          theme: theme,
+          canDelete: canDelete,
+          selectedDashboardIdx: selectedDashboardIdx,
+          selected: index === selectedDashboardIdx,
+          setViewItem: function setViewItem(ref) {
+            return _this.setViewItem(index, ref);
+          },
+          onSelectDashboard: _this.selectDashboard.bind(_assertThisInitialized(_this), index),
+          onToggleRenameView: _this.onToggleRenameView,
+          onDeleteDashboard: _this.props.deleteDashboard.bind(_assertThisInitialized(_this), index),
+          onMoveDashboard: _this.props.moveDashboard
+        });
+      });
+    };
+    _this.state = {
+      isShowNewViewDialog: false,
+      isShowRenameViewDialog: false,
+      canScrollPrev: false,
+      canScrollNext: false,
+      canViewsScroll: true
+    };
+    _this.views = [];
+    return _this;
+  }
+  _createClass(DashboardTabs, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.initSelectedViewScroll(this.props);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var statistics = this.props.statistics;
+      if (!prevProps.statistics && statistics !== prevProps.statistics) {
+        this.initSelectedViewScroll(this.props);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$state2 = this.state,
+        isShowNewViewDialog = _this$state2.isShowNewViewDialog,
+        isShowRenameViewDialog = _this$state2.isShowRenameViewDialog,
+        canScrollPrev = _this$state2.canScrollPrev,
+        canScrollNext = _this$state2.canScrollNext;
+      var _this$props2 = this.props,
+        isMobile = _this$props2.isMobile,
+        statistics = _this$props2.statistics,
+        selectedDashboardIdx = _this$props2.selectedDashboardIdx;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles['tabs-container']
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(styles['views-tabs-scroll'], " d-flex pr-1"),
+        ref: function ref(_ref) {
+          return _this2.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']),
+        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']),
+        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'],
+        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, {
+        onNewViewConfirm: this.onAddDashboard,
+        onNewViewCancel: this.onNewViewCancel
+      }), isShowRenameViewDialog && /*#__PURE__*/React.createElement(RenameViewDialog, {
+        viewName: statistics[selectedDashboardIdx].name,
+        onRenameDashboard: this.props.renameDashboard,
+        hideRenameViewDialog: this.hideRenameViewDialog
+      }));
+    }
+  }]);
+  return DashboardTabs;
+}(Component);
+DashboardTabs.defaultProps = {
+  isMobile: false
+};
+export default DashboardTabs;