dtable-statistic 4.2.0 → 4.2.2

package/es/assets/css/dialog.css

@@ -4,6 +4,36 @@
   height: calc(100% - 56px);
 }
 
+.statistic-enlarge-dialog .header-close-list {
+  display: flex;
+}
+
+.statistic-enlarge-dialog .op-item-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.statistic-enlarge-dialog .op-item-icon-wrapper.header-btn-close {
+  margin-right: 0;
+}
+
+.statistic-enlarge-dialog .op-item-icon-wrapper .item-icon {
+  color: rgba(0, 0, 0, .5);
+}
+
+.statistic-enlarge-dialog .header-btn-close .item-icon {
+  font-weight: 700;
+}
+
+.statistic-enlarge-dialog .op-item-icon-wrapper:hover .item-icon {
+  color: #404040;
+}
+
 .statistic-chart-addition-dialog .modal-content {
   height: 100%;
 }
@@ -297,7 +327,8 @@
   overflow: auto;
 }
 
-.statistic-enlarge-dialog .view-wrapper {
+.statistic-enlarge-dialog .view-wrapper,
+#exported-chart-container .view-wrapper {
   height: 100%;
   width: calc(100% - 20px);
   padding: 0 30px;

package/es/components/dialog/delete-confirmation-dialog.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+function DeleteConfirmationDialog(props) {
+  var header = props.header,
+    name = props.name,
+    onDelete = props.onDelete,
+    onToggle = props.onToggle;
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    toggle: onToggle
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    toggle: onToggle
+  }, header), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+    className: "pb-6"
+  }, intl.get('Delete_xxx_tip', {
+    name: name
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: onToggle
+  }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    onClick: onDelete
+  }, intl.get('Delete'))));
+}
+export default DeleteConfirmationDialog;

package/es/components/dialog/enlarged-chart-dialog.js

@@ -3,6 +3,8 @@ 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 ReactDOM from 'react-dom';
+import html2canvas from 'html2canvas';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import StatView from '../../stat-view';
 import { STAT_TYPE } from '../../constants';
@@ -50,6 +52,35 @@ var EnlargeChartDialog = /*#__PURE__*/function (_Component) {
         draggable: false
       }, /*#__PURE__*/React.createElement(StatView, viewProps));
     };
+    _this.onExportChart = function () {
+      var exportContainerID = 'exported-chart-container';
+      var exportContainer = document.createElement('div');
+      exportContainer.setAttribute('id', exportContainerID);
+
+      // for charts rendered with `<canvas>`
+      var originalElement = document.querySelector('.statistic-enlarge-modal .statistic-chart-container > div');
+      if (originalElement) {
+        var containerWidth = originalElement.scrollWidth + 15 * 2;
+        var containerHeight = originalElement.scrollHeight + 15 * 2;
+        exportContainer.setAttribute('style', "width: ".concat(containerWidth, "px; height: ").concat(containerHeight, "px;"));
+      }
+      document.body.appendChild(exportContainer);
+      ReactDOM.render(_this.renderStatisticView(), exportContainer);
+      setTimeout(function () {
+        var ele = document.querySelector("#".concat(exportContainerID, " .statistic-chart-container"));
+        if (!ele) return;
+        html2canvas(ele, {
+          windowWidth: ele.scrollWidth,
+          windowHeight: ele.scrollHeight
+        }).then(function (canvas) {
+          var eleA = document.createElement('a');
+          eleA.href = canvas.toDataURL('image/png');
+          eleA.download = "".concat(_this.props.statItem.name || 'image', ".png");
+          eleA.click();
+          document.body.removeChild(exportContainer);
+        });
+      }, 1000);
+    };
     return _this;
   }
   _createClass(EnlargeChartDialog, [{
@@ -63,7 +94,20 @@ var EnlargeChartDialog = /*#__PURE__*/function (_Component) {
         modalClassName: "statistic-enlarge-dialog",
         zIndex: 1048
       }, /*#__PURE__*/React.createElement(ModalHeader, {
-        toggle: this.toggle
+        toggle: this.toggle,
+        close: /*#__PURE__*/React.createElement("div", {
+          className: "header-close-list"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "op-item op-item-icon-wrapper",
+          onClick: this.onExportChart
+        }, /*#__PURE__*/React.createElement("i", {
+          className: "item-icon dtable-font dtable-icon-download"
+        })), /*#__PURE__*/React.createElement("div", {
+          className: "op-item op-item-icon-wrapper header-btn-close",
+          onClick: this.toggle
+        }, /*#__PURE__*/React.createElement("i", {
+          className: "item-icon dtable-font dtable-icon-x"
+        })))
       }, /*#__PURE__*/React.createElement("span", null, statItem.type === STAT_TYPE.BASIC_NUMBER_CARD ? '' : statItem.name)), /*#__PURE__*/React.createElement(ModalBody, {
         className: 'statistic-body-container statistic-microscope-content'
       }, this.renderStatisticView()));

package/es/dashboard.js

@@ -15,7 +15,7 @@ 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 { hasOwnProperty, isMobile } from './utils';
 import { generatorUniqueId } from './utils/common-utils';
 import { CommonEventTypes, DASHBOARD_ACTION_TYPE, KEY_SELECTED_DASHBOARD, LABEL_COLORS } from './constants';
 import './locale';
@@ -94,12 +94,13 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       });
       _this.initLabelColorConfigs();
       var statistics = _this.dashboardService.getStatistics();
+      var validStatistics = _this.dashboardService.getValidStatistics(statistics);
       var selectedDashboardIdx = _this.getSelectedDashboardIdxFromLocal(KEY_SELECTED_DASHBOARD) || 0;
       if (!statistics[selectedDashboardIdx]) {
         selectedDashboardIdx = 0;
       }
       return {
-        statistics: statistics,
+        statistics: validStatistics,
         selectedDashboardIdx: selectedDashboardIdx
       };
     };
@@ -364,7 +365,11 @@ var DashBoard = /*#__PURE__*/function (_Component) {
     _this.updateStatistics = function (updates, callback) {
       var statistics = updates.statistics;
       _this.updatingLocalStatistics = true;
-      _this.setState(updates, function () {
+      var validUpdates = _objectSpread({}, updates);
+      if (hasOwnProperty(updates, 'statistics')) {
+        validUpdates.statistics = _this.dashboardService.getValidStatistics(statistics);
+      }
+      _this.setState(validUpdates, function () {
         callback && callback();
         _this.props.updateStatistics(statistics);
       });

package/es/locale/lang/de.js

@@ -8,11 +8,12 @@ var de = {
   'Cancel_full_screen': 'Vollbildmodus beenden',
   'Default_dashboard': 'Dashboard',
   'New_dashboard': 'Neues Dashboard',
+  'Delete_dashboard': 'Delete dashboard',
   'Name': 'Name',
   'Submit': 'Einreichen',
   'Cancel': 'Abbrechen',
   'Name_is_required': 'Der Name ist erforderlich.',
-  'Name_cannot_contain_backtick': 'Name cannot contain backtick.',
+  'Name_cannot_contain_backtick': 'Der Name darf kein rückwärts geneigtes Hochkomma ( ` ) enthalten.',
   'Name_cannot_contain_slash': 'Der Name darf keinen Schrägstrich ( / ) enthalten.',
   'Name_cannot_contain_backslash': 'Der Name darf keinen Backslash ( \\ ) enthalten.',
   'Rename_dashboard': 'Dashboard umbenennen',
@@ -204,6 +205,7 @@ var de = {
   'Add_rule': 'Regel hinzufügen',
   'Added_1_rule': '1 Regel wurde hinzugefügt.',
   'Added_xxx_rules': '{rules_count} Regeln wurden hinzugefügt.',
+  'Delete_xxx_tip': 'Are you sure you want to delete {name}?',
   'Define_rule': 'Regel definieren',
   'Or': 'Oder',
   'And': 'Und',
@@ -244,7 +246,7 @@ var de = {
   'Select_table': 'Tabelle auswählen',
   'Update_to_a_table': 'Aktualisierung in eine Tabelle',
   'Export_to_a_new_table': 'In neue Tabelle exportieren',
-  'Move_to': 'Move to...',
-  'Table_xxx_exist': 'Table {name} exist'
+  'Move_to': 'Verschieben nach',
+  'Table_xxx_exist': 'Die Tabelle {name} existiert.'
 };
 export default de;

package/es/locale/lang/en.js

@@ -8,6 +8,7 @@ var en = {
   'Cancel_full_screen': 'Cancel full screen',
   'Default_dashboard': 'Default dashboard',
   'New_dashboard': 'New dashboard',
+  'Delete_dashboard': 'Delete dashboard',
   'Name': 'Name',
   'Submit': 'Submit',
   'Cancel': 'Cancel',
@@ -204,6 +205,7 @@ var en = {
   'Add_rule': 'Add rule',
   'Added_1_rule': 'Added 1 rule',
   'Added_xxx_rules': 'Added {rules_count} rules',
+  'Delete_xxx_tip': 'Are you sure you want to delete {name}?',
   'Define_rule': 'Define rule',
   'Or': 'Or',
   'And': 'And',

package/es/locale/lang/fr.js

@@ -8,11 +8,12 @@ var fr = {
   'Cancel_full_screen': 'Quitter mode plein écran',
   'Default_dashboard': 'Tableau de bord standard',
   'New_dashboard': 'Nouveau tableau de bord',
+  'Delete_dashboard': 'Delete dashboard',
   'Name': 'Nom',
   'Submit': 'Soumettre',
   'Cancel': 'Annuler',
   'Name_is_required': 'Le nom est nécessaire.',
-  'Name_cannot_contain_backtick': 'Name cannot contain backtick.',
+  'Name_cannot_contain_backtick': 'Le nom ne doit pas contenir d\'accent grave ( ` ).',
   'Name_cannot_contain_slash': 'Le nom ne doit pas contenir de barre oblique ( / ).',
   'Name_cannot_contain_backslash': 'Le nom ne doit pas contenir de barre oblique inverse ( \\ ).',
   'Rename_dashboard': 'Renommer le tableau de bord',
@@ -204,6 +205,7 @@ var fr = {
   'Add_rule': 'Ajouter une règle',
   'Added_1_rule': '1 règle a été ajoutée.',
   'Added_xxx_rules': '{rules_count} règles ont été ajoutées.',
+  'Delete_xxx_tip': 'Are you sure you want to delete {name}?',
   'Define_rule': 'Définir une règle',
   'Or': 'Ou',
   'And': 'Et',
@@ -244,7 +246,7 @@ var fr = {
   'Select_table': 'Sélectionner un tableau',
   'Update_to_a_table': 'Mettre à jour vers un tableau',
   'Export_to_a_new_table': 'Exporter dans un nouveau tableau',
-  'Move_to': 'Move to...',
-  'Table_xxx_exist': 'Table {name} exist'
+  'Move_to': 'Déplacer vers',
+  'Table_xxx_exist': 'Le tableau {name} existe.'
 };
 export default fr;

package/es/locale/lang/zh_CN.js

@@ -8,6 +8,7 @@ var zh_CN = {
   'Cancel_full_screen': '取消全屏',
   'Default_dashboard': '默认仪表盘',
   'New_dashboard': '新建仪表盘',
+  'Delete_dashboard': '删除仪表盘',
   'Name': '名称',
   'Submit': '提交',
   'Cancel': '取消',
@@ -204,6 +205,7 @@ var zh_CN = {
   'Add_rule': '新增规则',
   'Added_1_rule': '已添加 1 个规则',
   'Added_xxx_rules': '已添加 {rules_count} 个规则',
+  'Delete_xxx_tip': '你确定要删除 {name} 吗?',
   'Define_rule': '定义规则',
   'Or': '或者',
   'And': '并且',

package/es/service/dashboard-service.js

@@ -51,7 +51,6 @@ var DashBoardService = /*#__PURE__*/function () {
       if (hasAdvancedStatistics) {
         this.mergeAdvancedStatistics(advancedStatistics, deletePluginSettings);
       }
-      this.filterInvalidCharts();
       if (this.needSave) {
         this.needSave = false;
         updateStatistics(this.statistics);
@@ -201,10 +200,10 @@ var DashBoardService = /*#__PURE__*/function () {
       deletePluginSettings(ADVANCED_STATISTICS_NAME);
     }
   }, {
-    key: "filterInvalidCharts",
-    value: function filterInvalidCharts() {
+    key: "getValidStatistics",
+    value: function getValidStatistics(statistics) {
       var _this2 = this;
-      this.statistics = this.statistics.map(function (dashboard) {
+      return statistics.map(function (dashboard) {
         var charts = dashboard.stat_items || dashboard.statItems;
         if (!Array.isArray(charts) || charts.length === 0) {
           return dashboard;

package/es/stat-list/chart-preview.js

@@ -29,12 +29,17 @@ var ChartPreview = /*#__PURE__*/function (_Component) {
       var exportContainerID = 'exported-chart-container';
       var exportContainer = document.createElement('div');
       exportContainer.setAttribute('id', exportContainerID);
-      exportContainer.setAttribute('style', "width: ".concat(window.innerWidth, "px; height: ").concat(window.innerHeight, "px;"));
+
+      // for charts rendered with `<canvas>`
+      var id = statItem._id;
+      var originalElement = document.querySelector("#stat-item-".concat(id, " .statistic-chart-container > div"));
+      if (originalElement) {
+        var containerWidth = originalElement.scrollWidth + 15 * 2;
+        var containerHeight = originalElement.scrollHeight + 15 * 2;
+        exportContainer.setAttribute('style', "width: ".concat(containerWidth, "px; height: ").concat(containerHeight, "px;"));
+      }
       document.body.appendChild(exportContainer);
-      ReactDOM.render(_this.renderChart(statItem, {
-        isPreview: false,
-        isEnlarge: true
-      }), exportContainer);
+      ReactDOM.render(_this.renderChart(statItem), exportContainer);
       setTimeout(function () {
         var ele = document.querySelector("#".concat(exportContainerID, " .statistic-chart-container"));
         if (!ele) return;
@@ -62,11 +67,7 @@ var ChartPreview = /*#__PURE__*/function (_Component) {
         statisticalResult: statisticalResult
       });
     };
-    _this.renderChart = function (statItem, _ref) {
-      var _ref$isPreview = _ref.isPreview,
-        isPreview = _ref$isPreview === void 0 ? true : _ref$isPreview,
-        _ref$isEnlarge = _ref.isEnlarge,
-        isEnlarge = _ref$isEnlarge === void 0 ? false : _ref$isEnlarge;
+    _this.renderChart = function (statItem) {
       var _this$props = _this.props,
         dtableChangedTime = _this$props.dtableChangedTime,
         chartCalculator = _this$props.chartCalculator,
@@ -74,11 +75,11 @@ var ChartPreview = /*#__PURE__*/function (_Component) {
         colorThemeName = _this$props.colorThemeName,
         eventBus = _this$props.eventBus;
       return /*#__PURE__*/React.createElement(StatView, {
-        ref: function ref(_ref2) {
-          return _this.chartView = _ref2;
+        ref: function ref(_ref) {
+          return _this.chartView = _ref;
         },
-        isPreview: isPreview,
-        isEnlarge: isEnlarge,
+        isPreview: true,
+        isEnlarge: false,
         dtableChangedTime: dtableChangedTime,
         theme: theme,
         colorThemeName: colorThemeName,
@@ -134,10 +135,7 @@ var ChartPreview = /*#__PURE__*/function (_Component) {
       }))), /*#__PURE__*/React.createElement("div", {
         id: "stat-item-".concat(statItem._id),
         className: "statistic-chart-preview-container"
-      }, this.renderChart(statItem, {
-        isPreview: true,
-        isEnlarge: false
-      })), /*#__PURE__*/React.createElement("div", {
+      }, this.renderChart(statItem)), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-preview-container-resize"
       }));
     }

package/es/tabs/index.js

@@ -4,8 +4,10 @@ import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitial
 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 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';
 var SCROLL_TYPE = {
@@ -134,6 +136,19 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
         isShowRenameViewDialog: !_this.state.isShowRenameViewDialog
       });
     };
+    _this.onToggleDeleteView = function () {
+      if (_this.props.isMobile) return;
+      _this.setState({
+        isShowDeleteViewDialog: !_this.state.isShowDeleteViewDialog
+      });
+    };
+    _this.onDeleteDashBoard = function () {
+      var selectedDashboardIdx = _this.props.selectedDashboardIdx;
+      _this.props.deleteDashboard(selectedDashboardIdx);
+      _this.setState({
+        isShowDeleteViewDialog: false
+      });
+    };
     _this.hideRenameViewDialog = function () {
       _this.setState({
         isShowRenameViewDialog: false
@@ -167,7 +182,7 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
           },
           onSelectDashboard: _this.selectDashboard.bind(_assertThisInitialized(_this), index),
           onToggleRenameView: _this.onToggleRenameView,
-          onDeleteDashboard: _this.props.deleteDashboard.bind(_assertThisInitialized(_this), index),
+          onDeleteDashboard: _this.onToggleDeleteView,
           onMoveDashboard: _this.props.moveDashboard
         });
       });
@@ -175,6 +190,7 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
     _this.state = {
       isShowNewViewDialog: false,
       isShowRenameViewDialog: false,
+      isShowDeleteViewDialog: false,
       canScrollPrev: false,
       canScrollNext: false,
       canViewsScroll: true
@@ -202,6 +218,7 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
       var _this$state2 = this.state,
         isShowNewViewDialog = _this$state2.isShowNewViewDialog,
         isShowRenameViewDialog = _this$state2.isShowRenameViewDialog,
+        isShowDeleteViewDialog = _this$state2.isShowDeleteViewDialog,
         canScrollPrev = _this$state2.canScrollPrev,
         canScrollNext = _this$state2.canScrollNext;
       var _this$props2 = this.props,
@@ -241,6 +258,11 @@ var DashboardTabs = /*#__PURE__*/function (_Component) {
         viewName: statistics[selectedDashboardIdx].name,
         onRenameDashboard: this.props.renameDashboard,
         hideRenameViewDialog: this.hideRenameViewDialog
+      }), isShowDeleteViewDialog && /*#__PURE__*/React.createElement(DeleteConfirmationDialog, {
+        header: intl.get('Delete_dashboard'),
+        name: statistics[selectedDashboardIdx].name,
+        onToggle: this.onToggleDeleteView,
+        onDelete: this.onDeleteDashBoard
       }));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",