dtable-statistic 4.4.24 → 5.0.0-alpha.2

package/es/assets/css/dashboard.css

@@ -153,6 +153,7 @@
   align-items: center;
   overflow: hidden;
   position: relative;
+  padding: 20px;
 }
 
 .mobile-statistic-panel .statistic-chart-container,

package/es/assets/css/dialog.css

@@ -2,6 +2,7 @@
   max-width: 1102px;
   width: 1102px;
   height: calc(100% - 56px);
+  transform: none !important;
 }
 
 .statistic-enlarge-dialog .header-close-list {
@@ -43,6 +44,40 @@
   overflow: hidden;
 }
 
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container {
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+  padding: 16px;
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: scroll;
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render .sea-chart-editor {
+  flex: 1;
+  height: 100%;
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render .sea-chart-settings {
+  width: 300px;
+  height: 100%;
+  background-color: #f8f8f8;
+  margin-left: 16px;
+  border-top: 0px;
+  border-left: 0px;
+  border-right: 0px;
+  border-radius: 3px
+}
+
+.statistic-chart-addition-dialog .statistic-modal-body .statistic-chart-render-container .statistic-chart-render .sea-chart-settings .sea-chart-settings-type {
+  background: #f8f8f8;
+}
+
 .statistic-chart-addition-dialog .statistic-chart-settings {
   height: 100%;
   width: 300px;

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _seaChart = require("sea-chart");
+var _reactstrap = require("reactstrap");
+class ChartEditDialog extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.modifyChart = update => {
+      const {
+        chart
+      } = this.state;
+      this.setState({
+        chart: {
+          ...chart,
+          ...update
+        }
+      });
+    };
+    this.onSettingChange = (update, type) => {
+      this.modifyChart(update);
+    };
+    this.state = {
+      chart: props.editingChart || null
+    };
+    this.value = props.getValue();
+  }
+  componentWillUnmount() {
+    const {
+      statistics,
+      selectedDashboardIdx
+    } = this.props;
+    const {
+      chart
+    } = this.state;
+    if (chart) {
+      const dashboard = statistics[selectedDashboardIdx];
+      const hasChart = dashboard.stat_items.find(item => item.config._id === chart.config._id);
+      if (hasChart) {
+        this.props.modifyChart(chart);
+      } else {
+        this.props.addChart(chart);
+      }
+    }
+  }
+  render() {
+    const {
+      api,
+      colorThemeName,
+      theme
+    } = this.props;
+    const {
+      chart
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      isOpen: true,
+      toggle: () => {
+        this.props.onToggleEditChart();
+      },
+      className: "statistic-chart-addition-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+      toggle: () => {
+        this.props.onToggleEditChart();
+      }
+    }, _reactIntlUniversal.default.get('Edit_the_chart')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "statistic-modal-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-render-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-render"
+    }, /*#__PURE__*/_react.default.createElement(_seaChart.Editor, {
+      chart: chart,
+      config: window.dtable,
+      api: api,
+      tables: this.value.tables,
+      collaborators: this.value.collaborators,
+      dataSources: "view",
+      theme: theme,
+      chartColorTheme: colorThemeName,
+      isCalculateByView: true,
+      onChange: this.onSettingChange
+    })))));
+  }
+}
+var _default = exports.default = ChartEditDialog;

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

@@ -10,8 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _html2canvas = _interopRequireDefault(require("html2canvas"));
 var _reactstrap = require("reactstrap");
+var _seaChart = require("sea-chart");
 var _statView = _interopRequireDefault(require("../../stat-view"));
-var _constants = require("../../constants");
 class EnlargeChartDialog extends _react.Component {
   constructor() {
     super(...arguments);
@@ -25,23 +25,18 @@ class EnlargeChartDialog extends _react.Component {
     this.renderStatisticView = () => {
       const {
         colorThemeName,
-        dtableChangedTime,
         statItem,
-        eventBus,
-        chartCalculator,
         getTableById,
-        toggleStatisticRecordsDialog
+        toggleStatisticRecordsDialog,
+        api,
+        value
       } = this.props;
       const viewProps = {
-        isEnlarge: true,
-        isPreview: true,
-        dtableChangedTime,
         colorThemeName,
         statItem,
-        eventBus,
-        chartCalculator,
+        api,
+        value,
         getTableById,
-        queryMapJson: this.props.queryMapJson,
         toggleStatisticRecordsDialog
       };
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -73,7 +68,7 @@ class EnlargeChartDialog extends _react.Component {
         }).then(canvas => {
           let eleA = document.createElement('a');
           eleA.href = canvas.toDataURL('image/png');
-          eleA.download = "".concat(this.props.statItem.name || 'image', ".png");
+          eleA.download = "".concat(this.props.statItem.style_config.title.text || 'image', ".png");
           eleA.click();
           document.body.removeChild(exportContainer);
         });
@@ -105,7 +100,7 @@ class EnlargeChartDialog extends _react.Component {
       }, /*#__PURE__*/_react.default.createElement("i", {
         className: "item-icon dtable-font dtable-icon-x"
       })))
-    }, /*#__PURE__*/_react.default.createElement("span", null, statItem.type === _constants.STAT_TYPE.BASIC_NUMBER_CARD ? '' : statItem.name)), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+    }, /*#__PURE__*/_react.default.createElement("span", null, statItem.config.type === _seaChart.CHART_TYPE.BASIC_NUMBER_CARD ? '' : this.props.statItem.style_config.title.text)), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
       className: 'statistic-body-container statistic-microscope-content'
     }, this.renderStatisticView()));
   }

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

@@ -9,13 +9,14 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _reactstrap = require("reactstrap");
+var _DTableSearchInput = _interopRequireDefault(require("dtable-ui-component/lib/DTableSearchInput"));
+var _Loading = _interopRequireDefault(require("dtable-ui-component/lib/Loading"));
 var _dtableUtils = require("dtable-utils");
 var _dtableDbApi = _interopRequireDefault(require("../../../api/dtable-db-api"));
-var _index = require("../../index");
-var _utils = require("../../../utils");
-var _sqlUtils = require("../../../utils/sql-utils");
 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);
@@ -46,29 +47,16 @@ class StatisticRecordDialog extends _react.default.Component {
       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 = (0, _sqlUtils.getSqlString)(chart, statisticRecord, {
-          isColumn,
-          isCurrentView,
-          isRow,
-          getTableById,
-          username,
-          userId,
-          userDepartmentIdsMap
-        });
-        _dtableDbApi.default.sqlQuery(sqlString).then(res => {
-          const {
-            results: rows
-          } = res.data;
-          this.processDrilledRows(rows);
-        });
-        return;
-      }
+      // 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 => {
@@ -138,11 +126,16 @@ class StatisticRecordDialog extends _react.default.Component {
     };
     this.getSearchedRows = (rows, searchVal) => {
       if (!Array.isArray(rows) || rows.length === 0) return [];
-      if (searchVal) {
-        return (0, _utils.searchRows)(rows, (0, _dtableUtils.getViewShownColumns)(this.view, this.table.columns), searchVal, row => {
-          return row;
-        }).map(row => row._id);
-      }
+      // 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 => {
@@ -322,7 +315,7 @@ class StatisticRecordDialog extends _react.default.Component {
       className: "search-input-container"
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "header-search-icon dtable-font dtable-icon-search"
-    }), /*#__PURE__*/_react.default.createElement(_index.DtableSearchInput, {
+    }), /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
       autoFocus: true,
       isClearable: true,
       className: "search-tables-input",
@@ -345,7 +338,7 @@ class StatisticRecordDialog extends _react.default.Component {
       className: "statistic-records-container"
     }, loading ? /*#__PURE__*/_react.default.createElement("div", {
       className: "d-flex py-8"
-    }, /*#__PURE__*/_react.default.createElement(_index.Loading, null)) : this.renderRowsCards())));
+    }, /*#__PURE__*/_react.default.createElement(_Loading.default, null)) : this.renderRowsCards())));
   }
 }
 var _default = exports.default = StatisticRecordDialog;

package/es/components/dropdown-menu/statistic-dropdown-menu.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
 var _reactstrap = require("reactstrap");
-var _constants = require("../../constants");
+var _seaChart = require("sea-chart");
 var _icon = _interopRequireDefault(require("../icon"));
 class StatisticDropdownMenu extends _react.default.Component {
   constructor(props) {
@@ -90,7 +90,7 @@ class StatisticDropdownMenu extends _react.default.Component {
       className: "item-icon dtable-font dtable-icon-copy"
     }), /*#__PURE__*/_react.default.createElement("span", {
       className: "item-text"
-    }, _reactIntlUniversal.default.get('Duplicate')))), chartType === _constants.STAT_TYPE.PIVOT_TABLE && !isTableReadOnly && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
+    }, _reactIntlUniversal.default.get('Duplicate')))), chartType === _seaChart.CHART_TYPE.TABLE && !isTableReadOnly && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
       onClick: this.props.onNewTableDialogToggle
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "item-icon dtable-font dtable-icon-export"