dtable-statistic 4.0.13 → 4.1.0

package/es/components/dialog/chart-addition-edit-dialog.js

@@ -68,6 +68,7 @@ var ChartAdditionEditDialog = /*#__PURE__*/function (_Component) {
       }, intl.get(editMode ? 'Edit_the_chart' : 'Choose_a_chart')), /*#__PURE__*/React.createElement(ModalBody, {
         className: "statistic-modal-body"
       }, editMode ? /*#__PURE__*/React.createElement(StatEditor, {
+        dtableChangedTime: this.props.dtableChangedTime,
         colorThemeName: colorThemeName,
         statItem: chart,
         labelColorConfigs: labelColorConfigs,

package/es/components/dialog/statistic-record-dialog/index.js

@@ -1,3 +1,4 @@
+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";
@@ -10,6 +11,7 @@ import dtableDbAPI from '../../../api/dtable-db-api';
 import { DtableSearchInput, Loading } from '../../index';
 import { searchRows } from '../../../utils';
 import { getSqlString } from '../../../utils/sql-utils';
+import { CommonEventTypes } from '../../../constants';
 import './index.css';
 export var UNSHOWN_COLUMN_TYPES = [CellType.LINK, CellType.LONG_TEXT, CellType.FORMULA, CellType.LINK_FORMULA];
 var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
@@ -21,21 +23,21 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.init = function () {
       var chartRecordsParams = _this.props.chartRecordsParams;
+      if (!chartRecordsParams) return;
       var _ref = chartRecordsParams || {},
         statisticRecord = _ref.statisticRecord,
         chart = _ref.chart,
         isColumn = _ref.isColumn,
         isCurrentView = _ref.isCurrentView,
         isRow = _ref.isRow;
-      var records = statisticRecord.rows,
-        title = statisticRecord.name;
+      var records = statisticRecord.rows;
       var getTableById = _this.props.getTableById;
       var table_id = chart.table_id,
         view_id = chart.view_id;
-      var table = getTableById(table_id);
-      var view = Views.getViewById(table.views, view_id);
-      var isArchiveView = Views.isArchiveView(view);
-      if (isArchiveView || !records) {
+      _this.table = getTableById(table_id);
+      _this.view = Views.getViewById(_this.table.views, view_id);
+      _this.isArchiveView = Views.isArchiveView(_this.view);
+      if (_this.isArchiveView || !records) {
         var sqlString = getSqlString(chart, statisticRecord, {
           isColumn: isColumn,
           isCurrentView: isCurrentView,
@@ -44,29 +46,33 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
         });
         dtableDbAPI.sqlQuery(sqlString).then(function (res) {
           var rows = res.data.results;
-          var searchedRows = Array.isArray(rows) && rows.length > 0 ? _this.getSearchedRows(rows) : [];
-          _this.setState({
-            loading: false,
-            title: title,
-            rows: rows,
-            searchedRows: searchedRows
-          });
+          _this.processDrilledRows(rows);
         });
         return;
       }
-      var searchedRows = Array.isArray(records) && records.length > 0 ? _this.getSearchedRows(records) : [];
+      _this.processDrilledRows(records);
+    };
+    _this.processDrilledRows = function (drilledRows) {
+      var statisticRecord = _this.props.chartRecordsParams.statisticRecord;
+      var name = statisticRecord.name;
+      var searchedRowsIds = _this.getSearchedRows(drilledRows);
+      var idRowMap = {};
+      drilledRows.forEach(function (row) {
+        idRowMap[row._id] = row;
+      });
       _this.setState({
         loading: false,
-        title: title,
-        rows: records,
-        searchedRows: searchedRows
+        title: name,
+        rows: drilledRows,
+        idRowMap: idRowMap,
+        searchedRowsIds: searchedRowsIds
       });
     };
     _this.onSearch = function (searchVal) {
       var rows = _this.state.rows;
-      var searchedRows = _this.getSearchedRows(rows, searchVal);
+      var searchedRowsIds = _this.getSearchedRows(rows, searchVal);
       _this.setState({
-        searchedRows: searchedRows,
+        searchedRowsIds: searchedRowsIds,
         searchVal: searchVal
       });
     };
@@ -76,58 +82,116 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
         _this.timer = null;
       }
     };
-    _this.getStatisticTable = function () {
-      var _this$props = _this.props,
-        chartRecordsParams = _this$props.chartRecordsParams,
-        getTableById = _this$props.getTableById;
-      var table_id = chartRecordsParams.chart.table_id;
-      return getTableById(table_id);
-    };
-    _this.getStatisticView = function (table) {
-      var chartRecordsParams = _this.props.chartRecordsParams;
-      var view_id = chartRecordsParams.chart.view_id;
-      return Views.getViewById(table.views, view_id);
-    };
-    _this.getStatisticColumns = function () {
-      var table = _this.getStatisticTable();
-      var view = _this.getStatisticView(table);
-      return Views.getColumns(view, table);
-    };
     _this.clearSearch = function () {
       var rows = _this.state.rows;
+      var searchedRowsIds = _this.getSearchedRows(rows);
       _this.setState({
-        searchedRows: rows,
+        searchedRowsIds: searchedRowsIds,
         searchVal: ''
       });
     };
     _this.getSearchedRows = function (rows, searchVal) {
+      if (!Array.isArray(rows) || rows.length === 0) return [];
       if (searchVal) {
-        return searchRows(rows, _this.getStatisticColumns(), searchVal, function (row) {
+        return searchRows(rows, Views.getColumns(_this.view, _this.table), searchVal, function (row) {
           return row;
+        }).map(function (row) {
+          return row._id;
         });
       }
-      return rows;
+      return rows.map(function (row) {
+        return row._id;
+      });
+    };
+    _this.getRowsByIds = function (rowsIds) {
+      if (!Array.isArray(rowsIds) || rowsIds.length === 0) {
+        return [];
+      }
+      var idRowMap = _this.state.idRowMap;
+      return rowsIds.map(function (rowId) {
+        return idRowMap[rowId];
+      }).filter(Boolean);
     };
     _this.toggle = function () {
+      if (_this.valueChanged) {
+        _this.props.eventBus.dispatch(CommonEventTypes.REFRESH_CHARTS);
+      }
       _this.props.toggleStatisticRecordsDialog();
     };
-    _this.renderRowsCards = function () {
-      var searchedRows = _this.state.searchedRows;
-      if (!Array.isArray(searchedRows) || searchedRows.length === 0) {
-        return null;
+    _this.expandRowUpdated = function (_ref2) {
+      var table_id = _ref2.table_id,
+        updatedRow = _ref2.updatedRow;
+      // none-matched
+      if (table_id !== _this.table._id) return;
+      var _this$state = _this.state,
+        rows = _this$state.rows,
+        searchedRowsIds = _this$state.searchedRowsIds,
+        idRowMap = _this$state.idRowMap,
+        searchVal = _this$state.searchVal;
+      var updatedSearchedRowsIds = searchedRowsIds;
+      var updatedRows = _toConsumableArray(rows);
+      var updatedIdRowMap = idRowMap;
+      rows.forEach(function (row, index) {
+        var rowId = row._id;
+        if (rowId === updatedRow._id) {
+          updatedRows[index] = updatedRow;
+          updatedIdRowMap[rowId] = updatedRow;
+        }
+      });
+      if (searchedRowsIds.length > 0) {
+        var searchedRows = _this.getRowsByIds(searchedRowsIds);
+        updatedSearchedRowsIds = _this.getSearchedRows(searchedRows, searchVal);
       }
+      _this.valueChanged = true;
+      _this.setState({
+        rows: updatedRows,
+        idRowMap: updatedIdRowMap,
+        searchedRowsIds: updatedSearchedRowsIds
+      });
+    };
+    _this.expandRowDeleted = function (_ref3) {
+      var table_id = _ref3.table_id,
+        row_id = _ref3.row_id;
+      // none-matched
+      if (table_id !== _this.table._id) return;
+      var _this$state2 = _this.state,
+        rows = _this$state2.rows,
+        searchedRowsIds = _this$state2.searchedRowsIds,
+        idRowMap = _this$state2.idRowMap;
+      var updatedSearchedRowsIds = searchedRowsIds;
+      var updatedIdRowMap = idRowMap;
+      var updatedRows = rows.filter(function (row) {
+        return row._id !== row_id;
+      });
+      delete updatedIdRowMap[row_id];
+      if (searchedRowsIds.length > 0) {
+        updatedSearchedRowsIds = searchedRowsIds.filter(function (rowId) {
+          return rowId !== row_id;
+        });
+      }
+      _this.valueChanged = true;
+      _this.setState({
+        rows: updatedRows,
+        idRowMap: updatedIdRowMap,
+        searchedRowsIds: updatedSearchedRowsIds
+      });
+    };
+    _this.renderRowsCards = function () {
+      var searchedRowsIds = _this.state.searchedRowsIds;
+      var searchedRows = _this.getRowsByIds(searchedRowsIds);
+      if (searchedRows.length === 0) return null;
       var unShowColumnKeyList = ['0000'];
-      var table = _this.getStatisticTable();
-      var renderedColumns = table.columns.filter(function (column) {
+      var allColumns = _this.table.columns;
+      var renderedColumns = allColumns.filter(function (column) {
         return !unShowColumnKeyList.includes(column.key) && !UNSHOWN_COLUMN_TYPES.includes(column.type);
       });
       if (!window.app || !window.app.renderRowsCards) return null;
       return window.app.renderRowsCards({
-        table: table,
+        table: _this.table,
         renderedColumns: renderedColumns,
         unShowColumnKeyList: unShowColumnKeyList,
         isShowRowCardHeader: true,
-        columns: table.columns,
+        columns: allColumns,
         rows: searchedRows,
         rowCardType: 'statistic'
       });
@@ -136,22 +200,35 @@ var StatisticRecordDialog = /*#__PURE__*/function (_React$Component) {
       loading: true,
       title: '',
       rows: [],
+      idRowMap: {},
       searchVal: '',
-      searchedRows: []
+      searchedRowsIds: []
     };
+    _this.table = null;
+    _this.view = null;
+    _this.isArchiveView = false;
+    _this.valueChanged = false;
     return _this;
   }
   _createClass(StatisticRecordDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.unsubscribeExpandRowUpdated = this.props.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_UPDATED, this.expandRowUpdated);
+      this.unsubscribeExpandRowDeleted = this.props.eventBus.subscribe(CommonEventTypes.EXPAND_ROW_DELETED, this.expandRowDeleted);
       this.init();
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeExpandRowUpdated();
+      this.unsubscribeExpandRowDeleted();
+    }
   }, {
     key: "render",
     value: function render() {
-      var _this$state = this.state,
-        loading = _this$state.loading,
-        title = _this$state.title;
+      var _this$state3 = this.state,
+        loading = _this$state3.loading,
+        title = _this$state3.title;
       return /*#__PURE__*/React.createElement(Modal, {
         isOpen: true,
         autoFocus: false,

package/es/constants/event-types.js

@@ -1 +1,4 @@
-export var OPEN_SELECT = 'OPEN_SELECT';
+export var OPEN_SELECT = 'OPEN_SELECT';
+export var EXPAND_ROW_UPDATED = 'EXPAND_ROW_UPDATED';
+export var EXPAND_ROW_DELETED = 'EXPAND_ROW_DELETED';
+export var REFRESH_CHARTS = 'REFRESH_CHARTS';

package/es/dashboard.js

@@ -16,7 +16,7 @@ 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 { CommonEventTypes, DASHBOARD_ACTION_TYPE, KEY_SELECTED_DASHBOARD, LABEL_COLORS } from './constants';
 import './locale';
 import './assets/css/dashboard.css';
 import './assets/css/theme.css';
@@ -46,12 +46,17 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         _this.updatingLocalStatistics = false;
         return;
       }
-      _this.onDTableChanged(value);
+      _this.onDTableChanged({
+        value: value
+      });
     };
     _this.onServerDTableChanged = function (value) {
-      _this.onDTableChanged(value);
+      _this.onDTableChanged({
+        value: value
+      });
     };
-    _this.onDTableChanged = function (value) {
+    _this.onDTableChanged = function (_ref) {
+      var value = _ref.value;
       _this.value = value;
       _this.disabledUpdateLayout = true;
       var _this$initDashboard = _this.initDashboard(),
@@ -59,7 +64,11 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         selectedDashboardIdx = _this$initDashboard.selectedDashboardIdx;
       _this.setState({
         statistics: statistics,
-        selectedDashboardIdx: selectedDashboardIdx,
+        selectedDashboardIdx: selectedDashboardIdx
+      });
+    };
+    _this.refreshCharts = function () {
+      _this.setState({
         dtableChangedTime: Date.now()
       });
     };
@@ -141,11 +150,11 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       if (!activeViewId) return selectedTable.views[0];
       return Views.getViewById(selectedTable.views, activeViewId);
     };
-    _this.getInitChart = function (_ref) {
-      var chartType = _ref.chartType,
-        dashboard = _ref.dashboard,
-        activeTable = _ref.activeTable,
-        activeView = _ref.activeView;
+    _this.getInitChart = function (_ref2) {
+      var chartType = _ref2.chartType,
+        dashboard = _ref2.dashboard,
+        activeTable = _ref2.activeTable,
+        activeView = _ref2.activeView;
       return _this.chartService.getInitChart({
         type: chartType,
         dashboard: dashboard,
@@ -153,10 +162,10 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         activeView: activeView
       });
     };
-    _this.getConvertedChart = function (_ref2) {
-      var originalStatistic = _ref2.originalStatistic,
-        targetStatisticType = _ref2.targetStatisticType,
-        activeTable = _ref2.activeTable;
+    _this.getConvertedChart = function (_ref3) {
+      var originalStatistic = _ref3.originalStatistic,
+        targetStatisticType = _ref3.targetStatisticType,
+        activeTable = _ref3.activeTable;
       return _this.chartService.getConvertedChart({
         originalStatistic: originalStatistic,
         targetStatisticType: targetStatisticType,
@@ -225,7 +234,6 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       var nextSelectedDashboardIdx = selectedDashboardIdx;
       if (index === statistics.length - 1) {
         nextSelectedDashboardIdx--;
-        _this.clearCalculations();
       }
       var updatedStatistics = _this.dashboardService.update({
         action: DASHBOARD_ACTION_TYPE.DELETE_DASHBOARD,
@@ -234,6 +242,7 @@ var DashBoard = /*#__PURE__*/function (_Component) {
         }
       });
       _this.setSelectedDashboardIdx(nextSelectedDashboardIdx);
+      _this.clearCalculations();
       _this.updateStatistics({
         statistics: updatedStatistics,
         selectedDashboardIdx: nextSelectedDashboardIdx
@@ -389,12 +398,14 @@ var DashBoard = /*#__PURE__*/function (_Component) {
       var eventBus = this.props.eventBus;
       this.unsubscribeLocalDtableChanged = eventBus.subscribe('local-dtable-changed', this.onLocalDTableChanged);
       this.unsubscribeRemoteDtableChange = eventBus.subscribe('remote-dtable-changed', this.onServerDTableChanged);
+      this.unsubscribeRefreshCharts = eventBus.subscribe(CommonEventTypes.REFRESH_CHARTS, this.refreshCharts);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.unsubscribeLocalDtableChanged();
       this.unsubscribeRemoteDtableChange();
+      this.unsubscribeRefreshCharts();
       this.clearCalculations();
     }
   }, {

package/es/desktop-dashboard.js

@@ -235,6 +235,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         onCloseDashboard: this.props.onCloseDashboard,
         toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
       })), this.state.isShowChartAdditionDialog && /*#__PURE__*/React.createElement(ChartAdditionEditDialog, {
+        dtableChangedTime: dtableChangedTime,
         colorThemeName: colorThemeName,
         editingChart: editingChart,
         labelColorConfigs: labelColorConfigs,
@@ -254,6 +255,7 @@ var DesktopDashboard = /*#__PURE__*/function (_Component) {
         onToggleColorThemeDialog: this.onToggleColorThemeDialog,
         modifyColorTheme: this.props.modifyColorTheme
       }), !!chartRecordsParams && /*#__PURE__*/React.createElement(StatisticRecordDialog, {
+        eventBus: this.props.eventBus,
         chartRecordsParams: chartRecordsParams,
         getTableById: getTableById,
         toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog

package/es/model/generic-model.js

@@ -6,7 +6,7 @@ import BaseModel from './base-model';
 import { getChartConfigValueFromKey, getChartConfigValueFromKeys } from '../utils/model';
 import { isBoolean } from '../utils/common-utils';
 import { DATE_GRANULARITY, DATE_GRANULARITY_LIST, DEFAULT_LABEL_FONT_SIZE, GEOLOCATION_GRANULARITY, GEOLOCATION_GRANULARITY_LIST } from '../constants';
-import { COLUMN_DATE_GRANULARITY_KEYS, COLUMN_GEO_GRANULARITY_KEYS, COLUMN_GROUPBY_KEYS, LABEL_FRONT_SIZE_KEYS, X_DATE_GRANULARITY_KEYS, X_GEO_GRANULARITY_KEYS, X_GROUPBY_KEYS, X_INCLUDE_EMPTY_KEYS, X_LABEL_POSITION_KEYS, Y_AUTO_RANGE_KEYS, Y_AUTO_RANGE_MAX_KEYS, Y_AUTO_RANGE_MIN_KEYS, Y_LABEL_COLOR_KEYS, Y_LABEL_COLOR_RULES_KEYS, Y_LABEL_POSITION_KEYS, Y_SHOW_AXIS_LABEL_KEYS, Y_SUMMARY_BY_KEYS, Y_SUMMARY_METHOD_KEYS, Y_SUMMARY_TYPE_KEYS } from '../constants/model';
+import { COLUMN_DATE_GRANULARITY_KEYS, COLUMN_GEO_GRANULARITY_KEYS, COLUMN_GROUPBY_KEYS, LABEL_FRONT_SIZE_KEYS, X_DATE_GRANULARITY_KEYS, X_GEO_GRANULARITY_KEYS, X_GROUPBY_KEYS, X_INCLUDE_EMPTY_KEYS, X_LABEL_POSITION_KEYS, X_SHOW_AXIS_LABEL, Y_AUTO_RANGE_KEYS, Y_AUTO_RANGE_MAX_KEYS, Y_AUTO_RANGE_MIN_KEYS, Y_LABEL_COLOR_KEYS, Y_LABEL_COLOR_RULES_KEYS, Y_LABEL_POSITION_KEYS, Y_SHOW_AXIS_LABEL_KEYS, Y_SUMMARY_BY_KEYS, Y_SUMMARY_METHOD_KEYS, Y_SUMMARY_TYPE_KEYS } from '../constants/model';
 var GenericModel = /*#__PURE__*/function (_BaseModel) {
   _inherits(GenericModel, _BaseModel);
   var _super = _createSuper(GenericModel);
@@ -35,7 +35,7 @@ var GenericModel = /*#__PURE__*/function (_BaseModel) {
     _this.x_axis_compared_date_range_end = getChartConfigValueFromKey('x_axis_compared_date_range_end', object);
 
     // x style
-    _this.show_x_axis_label = getChartConfigValueFromKeys(X_INCLUDE_EMPTY_KEYS, object);
+    _this.show_x_axis_label = getChartConfigValueFromKeys(X_SHOW_AXIS_LABEL, object);
     if (!isBoolean(_this.show_x_axis_label)) {
       _this.show_x_axis_label = null;
     }

package/es/stat-editor/index.js

@@ -42,6 +42,7 @@ var StatEditor = /*#__PURE__*/function (_Component) {
         isEdit: true,
         isPreview: false,
         isEnlarge: false,
+        dtableChangedTime: this.props.dtableChangedTime,
         colorThemeName: colorThemeName,
         statItem: statItem,
         labelColorConfigs: labelColorConfigs,

package/es/stat-list/index.js

@@ -13,7 +13,7 @@ import { NewTableDialog, toaster } from '../components';
 import EnlargeChartDialog from '../components/dialog/enlarged-chart-dialog';
 import TableSelectDialog from '../components/dialog/table-select-dialog';
 import { exportStatisticToTable, updateStatisticToTable } from '../utils/export-table-utils';
-import { STAT_TYPE } from '../constants';
+import { CommonEventTypes, STAT_TYPE } from '../constants';
 var ReactGridLayout = WidthProvider(GridLayout);
 var StatList = /*#__PURE__*/function (_Component) {
   _inherits(StatList, _Component);
@@ -155,6 +155,11 @@ var StatList = /*#__PURE__*/function (_Component) {
           rowIds: rowIds,
           oldRows: oldRows
         });
+
+        // refresh charts if has updates
+        if (Array.isArray(rowIds) && rowIds.length > 0 || Array.isArray(newRows) && newRows.length > 0) {
+          _this.props.eventBus.dispatch(CommonEventTypes.REFRESH_CHARTS);
+        }
       }
       _this.statisticalResult4Update = null;
       _this.closeSelectTableDialog();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.0.13",
+  "version": "4.1.0",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",
@@ -12,7 +12,7 @@
     "@seafile/seafile-calendar": "0.0.24",
     "comlink": "^4.3.1",
     "dayjs": "1.10.7",
-    "dtable-store": "4.0.12",
+    "dtable-store": "4.1.0",
     "dtable-web-api": "4.0.5",
     "glamor": "^2.20.40",
     "html2canvas": "^1.4.1",