dtable-statistic 4.0.2-test-2

package/es/dashboard.js

@@ -0,0 +1,408 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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, { Component } from 'react';
+import intl from 'react-intl-universal';
+import { TableUtils, Views } from 'dtable-store';
+import StatisticDashBoard from './model/statistic-dashboard';
+import StatItem from './model/stat-item';
+import DashBoardService from './service/dashboard-service';
+import DesktopDashboard from './desktop-dashboard';
+import MobileDashboard from './mobile-dashboard';
+import ThreadManager from './calculator/thread-manager';
+import ChartCalculator from './calculator';
+import { isMobile } from './utils';
+import { generatorUniqueId } from './utils/common-utils';
+import { DASHBOARD_ACTION_TYPE, KEY_SELECTED_DASHBOARD, LABEL_COLORS } from './constants';
+import './locale';
+import './assets/css/dashboard.css';
+import './assets/css/theme.css';
+import './assets/css/dialog.css';
+var DashBoard = /*#__PURE__*/function (_Component) {
+  _inherits(DashBoard, _Component);
+  var _super = _createSuper(DashBoard);
+  function DashBoard(props) {
+    var _this;
+    _classCallCheck(this, DashBoard);
+    _this = _super.call(this, props);
+    _this.onDTableDataChange = function (value) {
+      _this.clearCalculations();
+      var _this$initDashboard = _this.initDashboard({
+          value: value
+        }),
+        statistics = _this$initDashboard.statistics,
+        selectedDashboardIdx = _this$initDashboard.selectedDashboardIdx;
+      _this.setState({
+        statistics: statistics,
+        selectedDashboardIdx: selectedDashboardIdx,
+        refresh: true
+      }, function () {
+        setTimeout(function () {
+          _this.setState({
+            refresh: false
+          });
+        });
+      });
+    };
+    _this.initDashboard = function (_ref) {
+      var value = _ref.value;
+      var _window$dtable = window.dtable,
+        username = _window$dtable.username,
+        userId = _window$dtable.userId;
+      _this.chartCalculator = new ChartCalculator({
+        username: username,
+        userId: userId,
+        value: value,
+        statisticThreadManager: _this.statisticThreadManager
+      });
+      _this.dashboardService = new DashBoardService({
+        value: value,
+        defaultDashboardName: _this.defaultDashboardName,
+        chartCalculator: _this.chartCalculator,
+        updateStatistics: _this.props.updateStatistics,
+        deletePluginSettings: _this.props.deletePluginSettings
+      });
+      _this.initLabelColorConfigs(value);
+      var statistics = _this.dashboardService.getStatistics();
+      var selectedDashboardIdx = _this.getSelectedDashboardIdxFromLocal(KEY_SELECTED_DASHBOARD) || 0;
+      if (!statistics[selectedDashboardIdx]) {
+        selectedDashboardIdx = 0;
+      }
+      return {
+        statistics: statistics,
+        selectedDashboardIdx: selectedDashboardIdx
+      };
+    };
+    _this.initLabelColorConfigs = function (value) {
+      var systemCustomColors = window.dtable.customColors || [];
+      var baseSettings = value && value.settings;
+      var baseCustomColors = baseSettings && baseSettings.custom_colors || [];
+      _this.labelColorConfigs = [].concat(_toConsumableArray(LABEL_COLORS.map(function (color) {
+        return {
+          color: color.toUpperCase(),
+          text_color: '#fff'
+        };
+      })), _toConsumableArray(systemCustomColors.map(function (customColor) {
+        return _objectSpread(_objectSpread({}, customColor), {}, {
+          color: customColor.color.toUpperCase()
+        });
+      })), _toConsumableArray(baseCustomColors.map(function (customColor) {
+        return {
+          color: customColor.COLOR.toUpperCase(),
+          text_color: customColor.TEXT_COLOR,
+          border_color: customColor.BORDER_COLOR
+        };
+      })));
+    };
+    _this.clearCalculations = function () {
+      _this.statisticThreadManager.clearQueue();
+      _this.statisticThreadManager.terminateWorkers();
+    };
+    _this.getSelectedDashboardIdxFromLocal = function (key) {
+      var dtableUuid = window.dtable.dtableUuid;
+      var selectedViewIdsString = window.localStorage.getItem(key);
+      var selectedViewIds = selectedViewIdsString ? JSON.parse(selectedViewIdsString) : {};
+      return selectedViewIds[dtableUuid];
+    };
+    _this.setSelectedDashboardIdx = function (index) {
+      var dtableUuid = window.dtable.dtableUuid;
+      var selectedViewIdsString = window.localStorage.getItem(KEY_SELECTED_DASHBOARD);
+      var selectedViewIds = selectedViewIdsString ? JSON.parse(selectedViewIdsString) : {};
+      selectedViewIds[dtableUuid] = index;
+      localStorage.setItem(KEY_SELECTED_DASHBOARD, JSON.stringify(selectedViewIds));
+    };
+    _this.getActiveTable = function () {
+      var _this$props = _this.props,
+        value = _this$props.value,
+        activeTableIdx = _this$props.activeTableIdx;
+      return TableUtils.getTableByIndex(value.tables, activeTableIdx);
+    };
+    _this.getActiveView = function () {
+      var activeViewId = _this.props.activeViewId;
+      var selectedTable = _this.getActiveTable();
+      if (!activeViewId) return selectedTable.views[0];
+      return Views.getViewById(selectedTable.views, activeViewId);
+    };
+    _this.selectDashboard = function (selectedDashboardIdx) {
+      _this.isInitDashboard = true;
+      _this.setSelectedDashboardIdx(selectedDashboardIdx);
+      _this.clearCalculations();
+      _this.setState({
+        selectedDashboardIdx: selectedDashboardIdx
+      });
+    };
+    _this.modifyColorTheme = function (colorThemeName) {
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.MODIFY_COLOR_THEME,
+        payload: {
+          colorThemeName: colorThemeName
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      });
+    };
+    _this.addDashboard = function (name, callback) {
+      var statistics = _this.state.statistics;
+      var dashboard = new StatisticDashBoard({
+        _id: generatorUniqueId(statistics),
+        stat_items: [],
+        name: name
+      });
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.ADD_DASHBOARD,
+        payload: {
+          dashboard: dashboard
+        }
+      });
+      _this.clearCalculations();
+      var selectedDashboardIdx = updatedStatistics.length - 1;
+      _this.setSelectedDashboardIdx(selectedDashboardIdx);
+      _this.updateStatistics({
+        statistics: updatedStatistics,
+        selectedDashboardIdx: selectedDashboardIdx
+      }, function () {
+        callback && callback();
+      });
+    };
+    _this.renameDashboard = function (name) {
+      var selectedDashboardIdx = _this.state.selectedDashboardIdx;
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.RENAME_DASHBOARD,
+        payload: {
+          index: selectedDashboardIdx,
+          name: name
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      });
+    };
+    _this.deleteDashboard = function (index) {
+      var _this$state = _this.state,
+        statistics = _this$state.statistics,
+        selectedDashboardIdx = _this$state.selectedDashboardIdx;
+      var nextSelectedDashboardIdx = selectedDashboardIdx;
+      if (index === statistics.length - 1) {
+        nextSelectedDashboardIdx--;
+        _this.clearCalculations();
+      }
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.DELETE_DASHBOARD,
+        payload: {
+          index: index
+        }
+      });
+      _this.setSelectedDashboardIdx(nextSelectedDashboardIdx);
+      _this.updateStatistics({
+        statistics: updatedStatistics,
+        selectedDashboardIdx: nextSelectedDashboardIdx
+      });
+    };
+    _this.moveDashboard = function (draggedDashboardId, targetBoardId, relativePosition) {
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.MOVE_DASHBOARD,
+        payload: {
+          draggedDashboardId: draggedDashboardId,
+          targetBoardId: targetBoardId,
+          relativePosition: relativePosition
+        }
+      });
+      var selectedDashboardIdx = updatedStatistics.findIndex(function (statistic) {
+        return statistic._id === draggedDashboardId;
+      });
+      _this.setSelectedDashboardIdx(selectedDashboardIdx);
+      _this.updateStatistics({
+        statistics: updatedStatistics,
+        selectedDashboardIdx: selectedDashboardIdx
+      });
+    };
+    _this.modifyDashboardLayout = function (layout) {
+      if (_this.isInitDashboard) {
+        _this.isInitDashboard = false;
+        return;
+      }
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.MODIFY_DASHBOARD_LAYOUT,
+        payload: {
+          index: _this.state.selectedDashboardIdx,
+          layout: layout
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      });
+    };
+    _this.copyChart = function (chartId) {
+      var _this$state2 = _this.state,
+        statistics = _this$state2.statistics,
+        selectedDashboardIdx = _this$state2.selectedDashboardIdx;
+      var dashboard = statistics[selectedDashboardIdx];
+      var fromChart = dashboard && dashboard.stat_items.find(function (chart) {
+        return chart._id === chartId;
+      });
+      if (!fromChart) {
+        return;
+      }
+      var newChartId = generatorUniqueId(dashboard.stat_items);
+      var newChart = new StatItem(Object.assign({}, fromChart, {
+        _id: newChartId,
+        name: fromChart.name + '(copy)'
+      }));
+      _this.addChart(newChart);
+    };
+    _this.deleteChart = function (chartId) {
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.DELETE_CHART,
+        payload: {
+          index: _this.state.selectedDashboardIdx,
+          chart_id: chartId
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      });
+    };
+    _this.addChart = function (chart) {
+      if (!_this.chartCalculator.isValidChart(chart)) {
+        return;
+      }
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.ADD_CHART,
+        payload: {
+          index: _this.state.selectedDashboardIdx,
+          chart: chart
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      }, function () {
+        // make the copied stat item display in the view
+        document.getElementById(chart._id).scrollIntoView(true);
+      });
+    };
+    _this.modifyChart = function (chart) {
+      var updatedStatistics = _this.dashboardService.update({
+        action: DASHBOARD_ACTION_TYPE.MODIFY_CHART,
+        payload: {
+          index: _this.state.selectedDashboardIdx,
+          chart: chart
+        }
+      });
+      _this.updateStatistics({
+        statistics: updatedStatistics
+      });
+    };
+    _this.updateStatistics = function (updates, callback) {
+      var statistics = updates.statistics;
+      _this.setState(updates, function () {
+        callback && callback();
+        _this.props.updateStatistics(statistics);
+      });
+    };
+    _this.getTableById = function (tableId) {
+      return TableUtils.getTableById(_this.props.value.tables, tableId);
+    };
+    _this.getTables = function () {
+      return _this.props.value.tables;
+    };
+    _this.getViews = function (table) {
+      return table.views;
+    };
+    _this.isTableReadOnly = function () {
+      if (window.dtable.modulePermission) {
+        return window.dtable.modulePermission.isTableReadOnly;
+      }
+      var permission = window.dtable.permission || '';
+      return permission === 'r' || permission.slice(0, 2) === 'c-';
+    };
+    var _value = props.value;
+    _this.defaultDashboardName = intl.get('Default_dashboard');
+    _this.statisticThreadManager = new ThreadManager((navigator.hardwareConcurrency || 4) - 1);
+    var _this$initDashboard2 = _this.initDashboard({
+        value: _value
+      }),
+      _statistics = _this$initDashboard2.statistics,
+      _selectedDashboardIdx = _this$initDashboard2.selectedDashboardIdx;
+    _this.state = {
+      statistics: _statistics,
+      selectedDashboardIdx: _selectedDashboardIdx,
+      refresh: false
+    };
+    _this.isInitDashboard = true;
+    return _this;
+  }
+  _createClass(DashBoard, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var eventBus = this.props.eventBus;
+      this.unsubscribeRemoteTableDataChange = eventBus.subscribe('remote-dtable-changed', this.onDTableDataChange);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeRemoteTableDataChange();
+      this.clearCalculations();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var eventBus = this.props.eventBus;
+      var _this$state3 = this.state,
+        statistics = _this$state3.statistics,
+        selectedDashboardIdx = _this$state3.selectedDashboardIdx,
+        editingChart = _this$state3.editingChart,
+        refresh = _this$state3.refresh;
+      var isTableReadOnly = this.isTableReadOnly();
+      var colorThemeName = this.dashboardService.getColorThemeName();
+      return isMobile ? /*#__PURE__*/React.createElement(MobileDashboard, {
+        isTableReadOnly: isTableReadOnly,
+        colorThemeName: colorThemeName,
+        refresh: refresh,
+        statistics: statistics,
+        selectedDashboardIdx: selectedDashboardIdx,
+        chartCalculator: this.chartCalculator,
+        labelColorConfigs: this.labelColorConfigs,
+        eventBus: eventBus,
+        onCloseDashboard: this.props.onCloseStatistic,
+        selectDashboard: this.selectDashboard,
+        addDashboard: this.addDashboard,
+        renameDashboard: this.renameDashboard,
+        deleteDashboard: this.deleteDashboard,
+        getTableById: this.getTableById
+      }) : /*#__PURE__*/React.createElement(DesktopDashboard, {
+        isTableReadOnly: isTableReadOnly,
+        colorThemeName: colorThemeName,
+        refresh: refresh,
+        statistics: statistics,
+        editingChart: editingChart,
+        selectedDashboardIdx: selectedDashboardIdx,
+        chartCalculator: this.chartCalculator,
+        labelColorConfigs: this.labelColorConfigs,
+        eventBus: eventBus,
+        getActiveTable: this.getActiveTable,
+        getActiveView: this.getActiveView,
+        onCloseDashboard: this.props.onCloseStatistic,
+        selectDashboard: this.selectDashboard,
+        modifyColorTheme: this.modifyColorTheme,
+        addDashboard: this.addDashboard,
+        renameDashboard: this.renameDashboard,
+        deleteDashboard: this.deleteDashboard,
+        moveDashboard: this.moveDashboard,
+        getTableById: this.getTableById,
+        getTables: this.getTables,
+        getViews: this.getViews,
+        copyChart: this.copyChart,
+        deleteChart: this.deleteChart,
+        modifyDashboardLayout: this.modifyDashboardLayout,
+        addChart: this.addChart,
+        modifyChart: this.modifyChart
+      });
+    }
+  }]);
+  return DashBoard;
+}(Component);
+export default DashBoard;