dtable-statistic 5.0.10-alpha.1 → 5.0.10-alpha.3

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

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _seaChart = require("sea-chart");
 var _reactstrap = require("reactstrap");
-var _constants = require("../../constants");
 class ChartEditDialog extends _react.Component {
   constructor(props) {
     super(props);
@@ -55,8 +54,7 @@ class ChartEditDialog extends _react.Component {
     const {
       api,
       colorThemeName,
-      theme,
-      eventBus
+      theme
     } = this.props;
     const {
       chart
@@ -82,15 +80,12 @@ class ChartEditDialog extends _react.Component {
       chart: chart,
       config: window.dtable,
       api: api,
-      dtableStoreValue: this.value,
       tables: this.value.tables,
       collaborators: this.value.collaborators,
       dataSources: "view",
       theme: theme,
       chartColorTheme: colorThemeName,
       isCalculateByView: true,
-      integratedEventTypes: _constants.CommonEventTypes,
-      integratedEventBus: eventBus,
       onChange: this.onSettingChange
     })))));
   }

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

@@ -27,6 +27,7 @@ class EnlargeChartDialog extends _react.Component {
         colorThemeName,
         statItem,
         getTableById,
+        toggleStatisticRecordsDialog,
         api,
         value
       } = this.props;
@@ -35,7 +36,8 @@ class EnlargeChartDialog extends _react.Component {
         statItem,
         api,
         value,
-        getTableById
+        getTableById,
+        toggleStatisticRecordsDialog
       };
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "view-wrapper",

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

@@ -0,0 +1,120 @@
+.statistic-records-dialog {
+  width: 800px;
+  max-width: 800px;
+  height: calc(100% - 56px);
+}
+
+.statistic-records-dialog .modal-content {
+  width: 100%;
+  height: 100%;
+}
+
+.statistic-records-dialog .search-header {
+  height: 46px;
+  line-height: 46px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e9ecef;
+  align-items: center;
+  padding: 0 20px;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.statistic-records-dialog .no-search-result {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  background-position: 50% 140px;
+  background-size: 132px 132px;
+  line-height: 600px;
+  color: #aaa;
+}
+
+.statistic-records-dialog .search-input-container .close {
+  height: 24px !important;
+  width: 24px;
+  line-height: 24px;
+  position: absolute;
+  right: 14px;
+  top: 22px;
+  padding: 0;
+  margin: 0;
+}
+
+.statistic-records-dialog .search-input-container {
+  margin-top: 10px;
+  padding: 0 20px;
+  height: 48px;
+  position: relative;
+}
+
+.statistic-records-dialog .search-input-container .search-tables-input {
+  height: 38px;
+  line-height: 38px;
+  padding-left: 30px;
+  border-bottom: 0;
+  background: #f5f5f5;
+  border-radius: 3px;
+  border: 1px solid #dedede;
+}
+
+.statistic-records-dialog .search-input-container .search-tables-input:focus {
+  outline: none;
+  box-shadow: unset;
+}
+
+.statistic-records-dialog .search-input-container .header-search-icon {
+  line-height: 38px;
+  text-align: center;
+  color: #aaa;
+  margin-left: 11px;
+  position: absolute;
+  left: unset;
+}
+
+.statistic-records-dialog .search-input-container .clear-search-text {
+  display: inline-block;
+  position: absolute;
+  right: 30px;
+  top: 10px;
+  height: 12px;
+  width: 12px;
+  line-height: 12px;
+  color: #ccc;
+}
+
+.statistic-records-dialog .search-input-container .clear-search-text .dtable-font {
+  font-size: 12px;
+}
+
+.statistic-records-dialog .search-input-container .clear-search-text:hover {
+  cursor: pointer;
+}
+
+.statistic-records-dialog .statistic-records-container {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow-y: hidden;
+  background-color: #f8f8f8;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.statistic-records-dialog.statistic-records-container .records-list {
+  height: calc(100% - 47px);
+  width: fit-content;
+  min-width: 100%;
+  padding: 10px 20px;
+  overflow-y: auto;
+  margin-top: 3px;
+}
+
+.statistic-records-dialog .statistic-records-container .records-list .records-container {
+  height: auto;
+}
+
+.statistic-records-dialog .row-card-item-content .grid-cell-type-button .grid-cell-type-button-inner {
+  justify-content: flex-start;
+}

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

@@ -0,0 +1,344 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Loading2 = _interopRequireDefault(require("dtable-ui-component/lib/Loading"));
+var _DTableSearchInput2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSearchInput"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _reactstrap = require("reactstrap");
+var _dtableUtils = require("dtable-utils");
+var _dtableDbApi = _interopRequireDefault(require("../../../api/dtable-db-api"));
+var _constants = require("../../../constants");
+require("./index.css");
+// import { searchRows } from '../../../utils';
+// import { getSqlString } from '../../../utils/sql-utils';
+class StatisticRecordDialog extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.init = () => {
+      const {
+        chartRecordsParams
+      } = this.props;
+      if (!chartRecordsParams) return;
+      const {
+        statisticRecord,
+        chart,
+        isColumn,
+        isCurrentView,
+        isRow
+      } = chartRecordsParams || {};
+      const {
+        rows: records
+      } = statisticRecord;
+      const {
+        getTableById
+      } = this.props;
+      const {
+        table_id,
+        view_id
+      } = chart;
+      this.table = getTableById(table_id);
+      this.view = (0, _dtableUtils.getViewById)(this.table.views, view_id);
+      this.isArchiveView = (0, _dtableUtils.isArchiveView)(this.view);
+      this.unShowColumnKeyList = this.getUnShowColumnKeyList(this.view);
+      this.renderedColumns = this.getRenderedColumns(this.table);
+      // if (this.isArchiveView || !records) {
+      //   const { username, userId, userDepartmentIdsMap } = window.dtable || {};
+      //   const sqlString = getSqlString(chart, statisticRecord, { isColumn, isCurrentView, isRow, getTableById, username, userId, userDepartmentIdsMap });
+      //   dtableDbAPI.sqlQuery(sqlString).then(res => {
+      //     const { results: rows } = res.data;
+      //     this.processDrilledRows(rows);
+      //   });
+      //   return;
+      // }
+
+      this.processDrilledRows(records);
+    };
+    this.processDrilledRows = drilledRows => {
+      const {
+        statisticRecord
+      } = this.props.chartRecordsParams;
+      const {
+        name
+      } = statisticRecord;
+      const searchedRowsIds = this.getSearchedRows(drilledRows);
+      let idRowMap = {};
+      drilledRows.forEach(row => {
+        idRowMap[row._id] = row;
+      });
+      this.initComputedProperties(drilledRows);
+      this.setState({
+        loading: false,
+        title: name,
+        rows: drilledRows,
+        idRowMap,
+        searchedRowsIds
+      });
+    };
+    this.initComputedProperties = drilledRows => {
+      if (this.isArchiveView) {
+        const formulaColumns = (0, _dtableUtils.getFormulaColumnsContainLinks)(this.table);
+        if (formulaColumns.length === 0) return {};
+        let formulaRows = {};
+        drilledRows.forEach(row => {
+          const rowId = row._id;
+          formulaRows[rowId] = {};
+          formulaColumns.forEach(column => formulaRows[rowId][column.key] = row[column.key]);
+        });
+        this.formulaRows = formulaRows;
+        return;
+      }
+      const {
+        formulaRows
+      } = this.getTableViewFormulaRows();
+      this.formulaRows = formulaRows;
+    };
+    this.onSearch = searchVal => {
+      const {
+        rows
+      } = this.state;
+      const searchedRowsIds = this.getSearchedRows(rows, searchVal);
+      this.setState({
+        searchedRowsIds,
+        searchVal
+      });
+    };
+    this.clearTimer = () => {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    };
+    this.clearSearch = () => {
+      const {
+        rows
+      } = this.state;
+      const searchedRowsIds = this.getSearchedRows(rows);
+      this.setState({
+        searchedRowsIds,
+        searchVal: ''
+      });
+    };
+    this.getSearchedRows = (rows, searchVal) => {
+      if (!Array.isArray(rows) || rows.length === 0) return [];
+      // if (searchVal) {
+      //   return searchRows(
+      //     rows,
+      //     getViewShownColumns(this.view, this.table.columns),
+      //     searchVal,
+      //     (row) => {
+      //       return row;
+      //     },
+      //   ).map((row) => row._id);
+      // }
+      return rows.map(row => row._id);
+    };
+    this.getRowsByIds = rowsIds => {
+      if (!Array.isArray(rowsIds) || rowsIds.length === 0) {
+        return [];
+      }
+      const {
+        idRowMap
+      } = this.state;
+      return rowsIds.map(rowId => idRowMap[rowId]).filter(Boolean);
+    };
+    this.toggle = () => {
+      if (this.valueChanged) {
+        this.props.eventBus.dispatch(_constants.CommonEventTypes.REFRESH_CHARTS);
+      }
+      this.props.toggleStatisticRecordsDialog();
+    };
+    this.expandRowUpdated = _ref => {
+      let {
+        table_id,
+        updatedRow
+      } = _ref;
+      // none-matched
+      if (table_id !== this.table._id) return;
+      const {
+        rows,
+        searchedRowsIds,
+        idRowMap,
+        searchVal
+      } = this.state;
+      let updatedSearchedRowsIds = searchedRowsIds;
+      let updatedRows = [...rows];
+      let updatedIdRowMap = idRowMap;
+      rows.forEach((row, index) => {
+        const rowId = row._id;
+        if (rowId === updatedRow._id) {
+          updatedRows[index] = updatedRow;
+          updatedIdRowMap[rowId] = updatedRow;
+        }
+      });
+      if (searchedRowsIds.length > 0) {
+        const searchedRows = this.getRowsByIds(searchedRowsIds);
+        updatedSearchedRowsIds = this.getSearchedRows(searchedRows, searchVal);
+      }
+      this.valueChanged = true;
+      this.setState({
+        rows: updatedRows,
+        idRowMap: updatedIdRowMap,
+        searchedRowsIds: updatedSearchedRowsIds
+      });
+    };
+    this.expandRowDeleted = _ref2 => {
+      let {
+        table_id,
+        row_id
+      } = _ref2;
+      // none-matched
+      if (table_id !== this.table._id) return;
+      const {
+        rows,
+        searchedRowsIds,
+        idRowMap
+      } = this.state;
+      let updatedSearchedRowsIds = searchedRowsIds;
+      let updatedIdRowMap = idRowMap;
+      const updatedRows = rows.filter(row => row._id !== row_id);
+      delete updatedIdRowMap[row_id];
+      if (searchedRowsIds.length > 0) {
+        updatedSearchedRowsIds = searchedRowsIds.filter(rowId => rowId !== row_id);
+      }
+      this.valueChanged = true;
+      this.setState({
+        rows: updatedRows,
+        idRowMap: updatedIdRowMap,
+        searchedRowsIds: updatedSearchedRowsIds
+      });
+    };
+    this.getUnShowColumnKeyList = view => {
+      const firstColumnKey = '0000';
+      const {
+        hidden_columns = []
+      } = view;
+      return [firstColumnKey, ...hidden_columns];
+    };
+    this.getRenderedColumns = table => {
+      const {
+        columns
+      } = table;
+      return columns.filter(column => !this.unShowColumnKeyList.includes(column.key));
+    };
+    this.getTableViewFormulaRows = () => {
+      const {
+        table,
+        view
+      } = this;
+      const value = this.props.getValue();
+      if (view.formula_rows && Object.keys(view.formula_rows).length > 0) {
+        return {
+          formulaRows: view.formula_rows
+        };
+      }
+      if (window.app && window.app.cacheFormulaResults) {
+        window.app.cacheFormulaResults(table.rows, {
+          targetViewId: view._id,
+          table,
+          value
+        });
+      }
+      return {
+        formulaRows: view.formula_rows
+      };
+    };
+    this.renderRowsCards = () => {
+      const {
+        searchedRowsIds
+      } = this.state;
+      const searchedRows = this.getRowsByIds(searchedRowsIds);
+      if (searchedRows.length === 0) return null;
+      if (!window.app || !window.app.renderRowsCards) return null;
+      return window.app.renderRowsCards({
+        table: this.table,
+        renderedColumns: this.renderedColumns,
+        unShowColumnKeyList: this.unShowColumnKeyList,
+        isShowRowCardHeader: true,
+        formulaRows: this.formulaRows,
+        columns: this.renderedColumns,
+        rows: searchedRows,
+        rowCardType: 'statistic'
+      });
+    };
+    this.state = {
+      loading: true,
+      title: '',
+      rows: [],
+      idRowMap: {},
+      searchVal: '',
+      searchedRowsIds: []
+    };
+    this.table = null;
+    this.view = null;
+    this.isArchiveView = false;
+    this.valueChanged = false;
+    this.renderedColumns = [];
+    this.formulaRows = null;
+    this.unShowColumnKeyList = null;
+  }
+  componentDidMount() {
+    this.unsubscribeExpandRowUpdated = this.props.eventBus.subscribe(_constants.CommonEventTypes.EXPAND_ROW_UPDATED, this.expandRowUpdated);
+    this.unsubscribeExpandRowDeleted = this.props.eventBus.subscribe(_constants.CommonEventTypes.EXPAND_ROW_DELETED, this.expandRowDeleted);
+    this.init();
+  }
+  componentWillUnmount() {
+    this.unsubscribeExpandRowUpdated();
+    this.unsubscribeExpandRowDeleted();
+  }
+  render() {
+    const {
+      loading,
+      title
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      isOpen: true,
+      autoFocus: false,
+      toggle: this.toggle,
+      className: "statistic-records-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-header"
+    }, /*#__PURE__*/_react.default.createElement("span", null, title), /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "close",
+      "aria-label": "Close",
+      onClick: this.toggle
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true"
+    }, "\xD7"))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-input-container"
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "header-search-icon dtable-font dtable-icon-search"
+    }), /*#__PURE__*/_react.default.createElement(_DTableSearchInput2.default, {
+      autoFocus: true,
+      isClearable: true,
+      className: "search-tables-input",
+      placeholder: _reactIntlUniversal.default.get('Search_records'),
+      onChange: this.onSearch,
+      clearValue: this.clearSearch,
+      components: {
+        ClearIndicator: props => {
+          return /*#__PURE__*/_react.default.createElement("span", {
+            className: "clear-search-text",
+            onClick: props.clearValue,
+            title: _reactIntlUniversal.default.get('Clear_search_text'),
+            "aria-label": _reactIntlUniversal.default.get('Clear_search_text')
+          }, /*#__PURE__*/_react.default.createElement("i", {
+            className: "dtable-font dtable-icon-x-"
+          }));
+        }
+      }
+    })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "statistic-records-container"
+    }, loading ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "d-flex py-8"
+    }, /*#__PURE__*/_react.default.createElement(_Loading2.default, null)) : this.renderRowsCards())));
+  }
+}
+var _default = exports.default = StatisticRecordDialog;

package/es/constants/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "KeyCodes", {
     return _keyCodes.default;
   }
 });
-exports.THEME_NAME_MAP = exports.SUMMARY_TYPE = exports.SUMMARY_METHOD_MAP = exports.SUMMARY_METHOD = exports.STATISTICS_COUNT_TYPE = void 0;
+exports.THEME_NAME_MAP = exports.SUMMARY_TYPE = exports.SUMMARY_METHOD_MAP = exports.SUMMARY_METHOD = exports.STAT_TYPE = exports.STATISTICS_COUNT_TYPE = void 0;
 var _keyCodes = _interopRequireDefault(require("./key-codes"));
 var CommonEventTypes = _interopRequireWildcard(require("./event-types"));
 exports.CommonEventTypes = CommonEventTypes;
@@ -29,6 +29,37 @@ const DASHBOARD_ACTION_TYPE = exports.DASHBOARD_ACTION_TYPE = {
   MOVE_CHART_TO_VIEW: 'move_chart_to_view',
   DELETE_CHART: 'delete_chart'
 };
+const STAT_TYPE = exports.STAT_TYPE = {
+  MAP: 'map',
+  MAP_BUBBLE: 'map_bubble',
+  HEAT_MAP: 'heat_map',
+  WORLD_MAP: 'world_map',
+  WORLD_MAP_BUBBLE: 'world_map_bubble',
+  MIRROR: 'mirror',
+  BAR: 'chart_bar',
+  BAR_GROUP: 'chart_bar_group',
+  BAR_STACK: 'chart_bar_stack',
+  LINE: 'chart_line',
+  GROUP_LINE: 'chart_group_line',
+  PIE: 'chart_pie',
+  RING: 'chart_ring',
+  SCATTER: 'scatter_chart',
+  BASIC_NUMBER_CARD: 'basic_number_card',
+  HORIZONTAL_BAR: 'horizontal_bar',
+  HORIZONTAL_GROUP_BAR: 'horizontal_group_bar',
+  STACKED_HORIZONTAL_BAR: 'stacked_horizontal_bar',
+  COMBINATION_CHART: 'combination_chart',
+  TREND_CHART: 'trend_chart',
+  AREA_CHART: 'area_chart',
+  AREA_GROUP_CHART: 'area_group_chart',
+  COMPARE_BAR: 'compare_bar',
+  COMPLETENESS_CHART: 'completeness_chart',
+  DASHBOARD: 'dashboard',
+  GROUP_COMPLETENESS_CHART: 'group_completeness_chart',
+  TREEMAP: 'treemap',
+  PIVOT_TABLE: 'pivot_table',
+  CUSTOM_BAR: 'custom_bar'
+};
 const SUMMARY_TYPE = exports.SUMMARY_TYPE = {
   COUNT: 'count',
   ADVANCED: 'advanced'

package/es/dashboard.js

@@ -66,6 +66,11 @@ class DashBoard extends _react.Component {
         selectedDashboardIdx
       });
     };
+    this.refreshCharts = () => {
+      this.setState({
+        dtableChangedTime: Date.now()
+      });
+    };
     this.initDashboard = () => {
       const value = this.value;
       this.dashboardService = new _dashboardService.default({
@@ -358,7 +363,8 @@ class DashBoard extends _react.Component {
     } = this.initDashboard();
     this.state = {
       statistics: _statistics,
-      selectedDashboardIdx: _selectedDashboardIdx
+      selectedDashboardIdx: _selectedDashboardIdx,
+      dtableChangedTime: null
     };
     this.isInitDashboard = true;
     this.updatingLocalStatistics = false;
@@ -371,10 +377,12 @@ class DashBoard extends _react.Component {
     } = this.props;
     this.unsubscribeLocalDtableChanged = eventBus.subscribe('local-dtable-changed', this.onLocalDTableChanged);
     this.unsubscribeRemoteDtableChange = eventBus.subscribe('remote-dtable-changed', this.onServerDTableChanged);
+    this.unsubscribeRefreshCharts = eventBus.subscribe(_constants.CommonEventTypes.REFRESH_CHARTS, this.refreshCharts);
   }
   componentWillUnmount() {
     this.unsubscribeLocalDtableChanged();
     this.unsubscribeRemoteDtableChange();
+    this.unsubscribeRefreshCharts();
   }
   render() {
     const {
@@ -382,13 +390,15 @@ class DashBoard extends _react.Component {
     } = this.props;
     const {
       statistics,
-      selectedDashboardIdx
+      selectedDashboardIdx,
+      dtableChangedTime
     } = this.state;
     const isTableReadOnly = this.isTableReadOnly();
     const colorThemeName = this.dashboardService.getColorThemeName();
     return _utils.isMobile ? /*#__PURE__*/_react.default.createElement(_mobileDashboard.default, {
       isTableReadOnly: isTableReadOnly,
       colorThemeName: colorThemeName,
+      dtableChangedTime: dtableChangedTime,
       statistics: statistics,
       selectedDashboardIdx: selectedDashboardIdx,
       eventBus: eventBus,
@@ -403,6 +413,7 @@ class DashBoard extends _react.Component {
     }) : /*#__PURE__*/_react.default.createElement(_desktopDashboard.default, {
       isTableReadOnly: isTableReadOnly,
       colorThemeName: colorThemeName,
+      dtableChangedTime: dtableChangedTime,
       statistics: statistics,
       selectedDashboardIdx: selectedDashboardIdx,
       eventBus: eventBus,

package/es/desktop-dashboard.js

@@ -15,6 +15,7 @@ var _tabs = _interopRequireDefault(require("./tabs"));
 var _statList = _interopRequireDefault(require("./stat-list"));
 var _colorThemeDialog = _interopRequireDefault(require("./components/dialog/color-theme-dialog"));
 var _chartEditDialog = _interopRequireDefault(require("./components/dialog/chart-edit-dialog"));
+var _statisticRecordDialog = _interopRequireDefault(require("./components/dialog/statistic-record-dialog"));
 var _dtableDbApi = _interopRequireDefault(require("./api/dtable-db-api"));
 var _chartService = _interopRequireDefault(require("./service/chart-service"));
 var _constants = require("./constants");
@@ -22,7 +23,9 @@ var _icon = _interopRequireDefault(require("./assets/images/icon.png"));
 const KEY_LOCAL_THEME_MODE = 'statistics-theme-mode';
 class DesktopDashboard extends _react.Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.onToggleColorThemeDialog = () => {
       this.setState({
         isShowColorThemeDialog: !this.state.isShowColorThemeDialog
@@ -92,6 +95,28 @@ class DesktopDashboard extends _react.Component {
       const uuidThemeModeMap = this.getThemeModeMap();
       return uuidThemeModeMap[dtableUuid];
     };
+    this.toggleStatisticRecordsDialog = function (statisticRecord, chart) {
+      let {
+        isColumn = false,
+        isCurrentView = false,
+        isRow = false
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      if (_this.state.chartRecordsParams) {
+        _this.setState({
+          chartRecordsParams: null
+        });
+      } else {
+        _this.setState({
+          chartRecordsParams: {
+            statisticRecord,
+            chart,
+            isColumn,
+            isCurrentView,
+            isRow
+          }
+        });
+      }
+    };
     this.generateChart = chartType => {
       const {
         statistics,
@@ -125,7 +150,8 @@ class DesktopDashboard extends _react.Component {
       isShowChartEditDialog: false,
       isShowChartAddDialog: false,
       isShowColorThemeDialog: false,
-      editingChart: null
+      editingChart: null,
+      chartRecordsParams: null
     };
     this.api = {
       sqlQuery: this.sqlQuery,
@@ -139,8 +165,10 @@ class DesktopDashboard extends _react.Component {
   }
   render() {
     const {
+      getTableById,
       getValue,
       isTableReadOnly,
+      dtableChangedTime,
       colorThemeName,
       statistics,
       selectedDashboardIdx,
@@ -150,6 +178,7 @@ class DesktopDashboard extends _react.Component {
       theme,
       isFullScreen,
       editingChart,
+      chartRecordsParams,
       isShowChartAddDialog
     } = this.state;
     const darkMode = theme === _constants.THEME_NAME_MAP.DARK;
@@ -231,6 +260,7 @@ class DesktopDashboard extends _react.Component {
       className: "statistic-main"
     }, /*#__PURE__*/_react.default.createElement(_statList.default, {
       isTableReadOnly: isTableReadOnly,
+      dtableChangedTime: dtableChangedTime,
       theme: theme,
       colorThemeName: colorThemeName,
       statItems: statItems,
@@ -245,19 +275,20 @@ class DesktopDashboard extends _react.Component {
       deleteChart: this.props.deleteChart,
       modifyDashboardLayout: this.props.modifyDashboardLayout,
       onToggleEditChart: this.onToggleEditChart,
-      onCloseDashboard: this.props.onCloseDashboard
+      onCloseDashboard: this.props.onCloseDashboard,
+      toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
     })), this.state.isShowChartEditDialog && /*#__PURE__*/_react.default.createElement(_chartEditDialog.default, {
       theme: theme,
       colorThemeName: colorThemeName,
       editingChart: editingChart,
-      eventBus: eventBus,
       api: this.api,
       getValue: getValue,
       statistics: statistics,
       selectedDashboardIdx: selectedDashboardIdx,
       addChart: this.props.addChart,
       modifyChart: this.props.modifyChart,
-      onToggleEditChart: this.onToggleEditChart
+      onToggleEditChart: this.onToggleEditChart,
+      toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
     }), isShowChartAddDialog && /*#__PURE__*/_react.default.createElement(_seaChart.TypesDialog, {
       type: "",
       onToggle: this.onToggleAddChart,
@@ -266,6 +297,12 @@ class DesktopDashboard extends _react.Component {
       colorThemeName: colorThemeName,
       onToggleColorThemeDialog: this.onToggleColorThemeDialog,
       modifyColorTheme: this.props.modifyColorTheme
+    }), !!chartRecordsParams && /*#__PURE__*/_react.default.createElement(_statisticRecordDialog.default, {
+      eventBus: this.props.eventBus,
+      chartRecordsParams: chartRecordsParams,
+      getTableById: getTableById,
+      getValue: getValue,
+      toggleStatisticRecordsDialog: this.toggleStatisticRecordsDialog
     }));
   }
 }

package/es/mobile-dashboard.js

@@ -65,13 +65,13 @@ class MobileDashboard extends _react.Component {
     })))), /*#__PURE__*/_react.default.createElement("div", {
       className: _mobileDashboardModule.default['mobile-statistic-dashboard-wrapper']
     }, statItems.map(statItem => {
+      var _style_config$title, _style_config$title$t;
       const {
         _id,
-        type
+        type,
+        style_config = {}
       } = statItem.config;
-      const {
-        name
-      } = statItem.style_config.title.text;
+      const name = (style_config === null || style_config === void 0 ? void 0 : (_style_config$title = style_config.title) === null || _style_config$title === void 0 ? void 0 : (_style_config$title$t = _style_config$title.text) === null || _style_config$title$t === void 0 ? void 0 : _style_config$title$t.name) || '';
       const showStatName = !(type === _seaChart.CHART_TYPE.BASIC_NUMBER_CARD || type === _seaChart.CHART_TYPE.DASHBOARD);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: "mobile-statistic-chart-".concat(_id),

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

@@ -75,8 +75,8 @@ class ChartPreview extends _react.Component {
         colorThemeName,
         api,
         value,
-        eventBus,
-        getTableById
+        getTableById,
+        toggleStatisticRecordsDialog
       } = this.props;
       return /*#__PURE__*/_react.default.createElement(_statView.default, {
         ref: ref => this.chartView = ref,
@@ -85,8 +85,8 @@ class ChartPreview extends _react.Component {
         statItem: statItem,
         api: api,
         value: value,
-        eventBus: eventBus,
-        getTableById: getTableById
+        getTableById: getTableById,
+        toggleStatisticRecordsDialog: toggleStatisticRecordsDialog
       });
     };
     this.moveChartToView = viewId => {

package/es/stat-list/index.js

@@ -132,7 +132,7 @@ class StatList extends _react.Component {
 
         // refresh charts if has updates
         if (Array.isArray(rowIds) && rowIds.length > 0 || Array.isArray(newRows) && newRows.length > 0) {
-          _seaChart.EventBus.dispatch(_constants.CommonEventTypes.REFRESH_CHARTS);
+          this.props.eventBus.dispatch(_constants.CommonEventTypes.REFRESH_CHARTS);
         }
       }
       this.statisticalResult4Update = null;
@@ -168,8 +168,7 @@ class StatList extends _react.Component {
       theme,
       colorThemeName,
       statItems,
-      api,
-      eventBus
+      api
     } = this.props;
     const {
       layout,
@@ -207,7 +206,6 @@ class StatList extends _react.Component {
         colorThemeName: colorThemeName,
         statItem: item,
         api: api,
-        eventBus: eventBus,
         value: this.value,
         getOtherStatistics: this.props.getOtherStatistics,
         getTableById: this.props.getTableById,
@@ -227,7 +225,8 @@ class StatList extends _react.Component {
           } = _ref2;
           return this.showSelectTableDialog(index, statisticalResult);
         },
-        onToggleEditChart: this.props.onToggleEditChart
+        onToggleEditChart: this.props.onToggleEditChart,
+        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
       }));
     })), enlargedChart && /*#__PURE__*/_react.default.createElement(_enlargedChartDialog.default, {
       colorThemeName: colorThemeName,
@@ -235,7 +234,8 @@ class StatList extends _react.Component {
       api: api,
       value: this.value,
       getTableById: this.props.getTableById,
-      onEnlargeToggle: this.closeEnlargedChart
+      onEnlargeToggle: this.closeEnlargedChart,
+      toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
     }), chartExport2Table && /*#__PURE__*/_react.default.createElement(_newTableDialog.default, {
       getTables: this.props.getTables,
       tableName: chartExport2Table.name,

package/es/stat-view/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _seaChart = require("sea-chart");
 var _dtableUtils = require("dtable-utils");
-var _constants = require("../constants");
 class StatView extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -46,8 +45,7 @@ class StatView extends _react.default.Component {
       api,
       value,
       theme,
-      colorThemeName,
-      eventBus
+      colorThemeName
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "statistic-chart-container"
@@ -55,15 +53,12 @@ class StatView extends _react.default.Component {
       chart: statItem,
       api: api,
       config: window.dtable,
-      dtableStoreValue: value,
       tables: value.tables,
       collaborators: value.collaborators,
       hideTitle: true,
       globalTheme: theme,
       chartColorTheme: colorThemeName,
       isCalculateByView: true,
-      integratedEventTypes: _constants.CommonEventTypes,
-      integratedEventBus: eventBus,
       onViewRef: this.getViewRef
     }));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "5.0.10-alpha.1",
+  "version": "5.0.10-alpha.3",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",
@@ -18,7 +18,7 @@
     "react-grid-layout": "^1.2.5",
     "react-intl-universal": "^2.4.8",
     "reactstrap": "8.9.0",
-    "sea-chart": "0.0.56-alpha.0"
+    "sea-chart": "^0.0.56"
   },
   "peerDependencies": {
     "dtable-ui-component": "~5.0.*",