dtable-statistic 4.0.2-test-2

package/es/stat-list/index.js

@@ -0,0 +1,275 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 ReactDOM from 'react-dom';
+import GridLayout, { WidthProvider } from 'react-grid-layout';
+import html2canvas from 'html2canvas';
+import intl from 'react-intl-universal';
+import ChartPreview from './chart-preview';
+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';
+var ReactGridLayout = WidthProvider(GridLayout);
+var StatList = /*#__PURE__*/function (_Component) {
+  _inherits(StatList, _Component);
+  var _super = _createSuper(StatList);
+  function StatList(props) {
+    var _this;
+    _classCallCheck(this, StatList);
+    _this = _super.call(this, props);
+    _this.getStatItemsLayout = function (statItems) {
+      return Array.isArray(statItems) ? statItems.map(function (chart) {
+        return chart.layout;
+      }) : [];
+    };
+    _this.editStatItem = function (id) {
+      _this.props.editStatItem(id);
+    };
+    _this.onLayoutChange = function (layout) {
+      _this.props.modifyDashboardLayout(layout);
+    };
+    _this.onExportChart = function (statItem) {
+      var exportContainerID = 'exported-statistic-chart-container';
+      var exportContainer = document.createElement('div');
+      exportContainer.setAttribute('id', exportContainerID);
+
+      // 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.renderView(statItem), 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(statItem.name || 'image', ".png");
+          eleA.click();
+          document.body.removeChild(exportContainer);
+        });
+      }, 1000);
+    };
+    _this.enlargeChart = function (chartIndex) {
+      _this.setState({
+        enlargedChartIndex: chartIndex
+      });
+    };
+    _this.closeEnlargedChart = function (event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      _this.setState({
+        enlargedChartIndex: -1
+      });
+    };
+    _this.showNewTableDialog = function (chartIndexExport2Table, statisticalResult) {
+      _this.statisticalResult4Export = statisticalResult;
+      _this.setState({
+        chartIndexExport2Table: chartIndexExport2Table
+      });
+    };
+    _this.exportChart2Table = function (tableName, chart) {
+      if (chart.type !== STAT_TYPE.PIVOT_TABLE) {
+        _this.statisticalResult4Export = null;
+        toaster.danger(intl.get('Failed_export_statistic_to_Table'));
+        _this.closeNewTableDialog();
+        return;
+      }
+      _this.closeNewTableDialog();
+      if (!_this.statisticalResult4Export) {
+        return;
+      }
+      var _exportStatisticToTab = exportStatisticToTable({
+          statisticalResult: _this.statisticalResult4Export,
+          t: intl
+        }),
+        columns = _exportStatisticToTab.columns,
+        rows = _exportStatisticToTab.rows;
+      if (window.app && window.app.onExportStatisticToTable) {
+        window.app.onExportStatisticToTable({
+          tableName: tableName,
+          columns: columns,
+          rows: rows
+        });
+      }
+      _this.statisticalResult4Export = null;
+      _this.props.onCloseDashboard();
+    };
+    _this.closeNewTableDialog = function () {
+      _this.setState({
+        chartIndexExport2Table: -1
+      });
+    };
+    _this.showSelectTableDialog = function (chartIndexUpdate2Table, statisticalResult) {
+      _this.statisticalResult4Update = statisticalResult;
+      _this.setState({
+        chartIndexUpdate2Table: chartIndexUpdate2Table
+      });
+    };
+    _this.updateChart2Table = function (selectedTableId, chartUpdate2Table) {
+      var getTableById = _this.props.getTableById;
+      if (chartUpdate2Table.type !== STAT_TYPE.PIVOT_TABLE) {
+        _this.statisticalResult4Update = null;
+        toaster.danger(intl.get('Failed_export_statistic_to_Table'));
+        _this.closeSelectTableDialog();
+        return;
+      }
+      var updateTable = getTableById(selectedTableId);
+      _this.closeSelectTableDialog();
+      if (!_this.statisticalResult4Update || !updateTable) {
+        return;
+      }
+      var _updateStatisticToTab = updateStatisticToTable({
+          updateTable: updateTable,
+          statisticalResult: _this.statisticalResult4Update,
+          t: intl
+        }),
+        newRows = _updateStatisticToTab.newRows,
+        updatedRows = _updateStatisticToTab.updatedRows,
+        rowIds = _updateStatisticToTab.rowIds,
+        oldRows = _updateStatisticToTab.oldRows;
+      if (window.app && window.app.onUpdateStatisticToTable) {
+        window.app.onUpdateStatisticToTable({
+          tableId: selectedTableId,
+          newRows: newRows,
+          updatedRows: updatedRows,
+          rowIds: rowIds,
+          oldRows: oldRows
+        });
+      }
+      _this.statisticalResult4Update = null;
+      _this.closeSelectTableDialog();
+    };
+    _this.closeSelectTableDialog = function () {
+      _this.setState({
+        chartIndexUpdate2Table: -1
+      });
+    };
+    var _statItems = props.statItems;
+    _this.state = {
+      layout: _this.getStatItemsLayout(_statItems),
+      enlargedChartIndex: -1,
+      chartIndexExport2Table: -1,
+      chartIndexUpdate2Table: -1
+    };
+    return _this;
+  }
+  _createClass(StatList, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var statItems = nextProps.statItems;
+      this.setState({
+        layout: this.getStatItemsLayout(statItems)
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        isTableReadOnly = _this$props.isTableReadOnly,
+        refresh = _this$props.refresh,
+        theme = _this$props.theme,
+        colorThemeName = _this$props.colorThemeName,
+        statItems = _this$props.statItems,
+        chartCalculator = _this$props.chartCalculator,
+        eventBus = _this$props.eventBus;
+      var _this$state = this.state,
+        layout = _this$state.layout,
+        enlargedChartIndex = _this$state.enlargedChartIndex,
+        chartIndexExport2Table = _this$state.chartIndexExport2Table,
+        chartIndexUpdate2Table = _this$state.chartIndexUpdate2Table;
+      var enlargedChart = enlargedChartIndex > -1 && statItems[enlargedChartIndex];
+      var chartExport2Table = chartIndexExport2Table > -1 && statItems[chartIndexExport2Table];
+      var chartUpdate2Table = chartIndexUpdate2Table > -1 && statItems[chartIndexUpdate2Table];
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-list"
+      }, Array.isArray(statItems) && /*#__PURE__*/React.createElement(ReactGridLayout, {
+        className: "statistic-layout layout",
+        isDraggable: true,
+        rowHeight: 35,
+        layout: layout,
+        containerPadding: [15, 15],
+        margin: [10, 10],
+        draggableHandle: '.statistic-chart-preview-header',
+        onLayoutChange: this.onLayoutChange,
+        cols: 4,
+        useCSSTransforms: false
+      }, statItems.map(function (statItem, index) {
+        var statId = statItem._id;
+        if (!statId) return null;
+        return /*#__PURE__*/React.createElement("div", {
+          id: statId,
+          key: statId,
+          className: "statistic-chart-preview"
+        }, /*#__PURE__*/React.createElement(ChartPreview, {
+          isTableReadOnly: isTableReadOnly,
+          refresh: refresh,
+          theme: theme,
+          colorThemeName: colorThemeName,
+          statItem: _objectSpread({}, statItem),
+          chartCalculator: chartCalculator,
+          eventBus: eventBus,
+          getTableById: _this2.props.getTableById,
+          getTables: _this2.props.getTables,
+          copyChart: _this2.props.copyChart,
+          deleteChart: _this2.props.deleteChart,
+          enlargeChart: function enlargeChart() {
+            return _this2.enlargeChart(index);
+          },
+          showNewTableDialog: function showNewTableDialog(_ref) {
+            var statisticalResult = _ref.statisticalResult;
+            return _this2.showNewTableDialog(index, statisticalResult);
+          },
+          showSelectTableDialog: function showSelectTableDialog(_ref2) {
+            var statisticalResult = _ref2.statisticalResult;
+            return _this2.showSelectTableDialog(index, statisticalResult);
+          },
+          onToggleEditChart: _this2.props.onToggleEditChart,
+          onCloseDashboard: _this2.props.onCloseDashboard,
+          toggleStatisticRecordsDialog: _this2.props.toggleStatisticRecordsDialog
+        }));
+      })), enlargedChart && /*#__PURE__*/React.createElement(EnlargeChartDialog, {
+        refresh: refresh,
+        colorThemeName: colorThemeName,
+        statItem: enlargedChart,
+        eventBus: eventBus,
+        chartCalculator: chartCalculator,
+        getTableById: this.props.getTableById,
+        onEnlargeToggle: this.closeEnlargedChart,
+        onToggleShowEnlarged: this.closeEnlargedChart,
+        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+      }), chartExport2Table && /*#__PURE__*/React.createElement(NewTableDialog, {
+        tableName: chartExport2Table.name,
+        onNewTableConfirm: function onNewTableConfirm(tableName) {
+          return _this2.exportChart2Table(tableName, chartExport2Table);
+        },
+        onNewTableCancel: this.closeNewTableDialog
+      }), chartUpdate2Table && /*#__PURE__*/React.createElement(TableSelectDialog, {
+        tables: this.props.getTables(),
+        title: intl.get('Update_to_a_table'),
+        toggle: this.closeSelectTableDialog,
+        onSelectTable: function onSelectTable(selectedTableId) {
+          return _this2.updateChart2Table(selectedTableId, chartUpdate2Table);
+        }
+      }));
+    }
+  }]);
+  return StatList;
+}(Component);
+export default StatList;