dtable-statistic 4.2.2 → 4.3.0

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

@@ -1,92 +1,82 @@
-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 intl from 'react-intl-universal';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import ChartSelector from './chart-addition-widgets/chart-selector';
 import StatEditor from '../../stat-editor';
-var ChartAdditionEditDialog = /*#__PURE__*/function (_Component) {
-  _inherits(ChartAdditionEditDialog, _Component);
-  var _super = _createSuper(ChartAdditionEditDialog);
-  function ChartAdditionEditDialog(props) {
-    var _this;
-    _classCallCheck(this, ChartAdditionEditDialog);
-    _this = _super.call(this, props);
-    _this.addChart = function (chartType) {
-      var chart = _this.props.generateChart(chartType);
-      _this.setState({
-        chart: chart
+class ChartAdditionEditDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.addChart = chartType => {
+      const chart = this.props.generateChart(chartType);
+      this.setState({
+        chart
       });
     };
-    _this.modifyChartName = function (name) {
-      var updatedChart = _objectSpread(_objectSpread({}, _this.state.chart), {}, {
-        name: name
-      });
-      _this.modifyChart(updatedChart);
+    this.modifyChartName = name => {
+      const updatedChart = {
+        ...this.state.chart,
+        name
+      };
+      this.modifyChart(updatedChart);
     };
-    _this.modifyChart = function (chart) {
-      _this.setState({
-        chart: chart
+    this.modifyChart = chart => {
+      this.setState({
+        chart
       });
     };
-    _this.state = {
+    this.state = {
       chart: props.editingChart || null
     };
-    return _this;
   }
-  _createClass(ChartAdditionEditDialog, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var chart = this.state.chart;
-      if (this.props.editingChart) {
-        this.props.modifyChart(chart);
-      } else {
-        this.props.addChart(chart);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        getTableById = _this$props.getTableById,
-        colorThemeName = _this$props.colorThemeName,
-        labelColorConfigs = _this$props.labelColorConfigs,
-        chartCalculator = _this$props.chartCalculator,
-        eventBus = _this$props.eventBus;
-      var chart = this.state.chart;
-      var editMode = !!chart;
-      return /*#__PURE__*/React.createElement(Modal, {
-        isOpen: true,
-        toggle: this.props.hideChartAdditionDialog,
-        className: "statistic-chart-addition-dialog",
-        zIndex: 1048
-      }, /*#__PURE__*/React.createElement(ModalHeader, {
-        toggle: this.props.hideChartAdditionDialog
-      }, 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,
-        chartCalculator: chartCalculator,
-        eventBus: eventBus,
-        getTables: this.props.getTables,
-        getViews: this.props.getViews,
-        getTableById: getTableById,
-        queryMapJson: this.props.queryMapJson,
-        getConvertedChart: this.props.getConvertedChart,
-        modifyChartName: this.modifyChartName,
-        modifyChart: this.modifyChart,
-        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
-      }) : /*#__PURE__*/React.createElement(ChartSelector, {
-        addEditingChart: this.addChart
-      })));
+  componentWillUnmount() {
+    const {
+      chart
+    } = this.state;
+    if (this.props.editingChart) {
+      this.props.modifyChart(chart);
+    } else {
+      this.props.addChart(chart);
     }
-  }]);
-  return ChartAdditionEditDialog;
-}(Component);
+  }
+  render() {
+    const {
+      getTableById,
+      colorThemeName,
+      labelColorConfigs,
+      chartCalculator,
+      eventBus
+    } = this.props;
+    const {
+      chart
+    } = this.state;
+    const editMode = !!chart;
+    return /*#__PURE__*/React.createElement(Modal, {
+      isOpen: true,
+      toggle: this.props.hideChartAdditionDialog,
+      className: "statistic-chart-addition-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/React.createElement(ModalHeader, {
+      toggle: this.props.hideChartAdditionDialog
+    }, 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,
+      chartCalculator: chartCalculator,
+      eventBus: eventBus,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: getTableById,
+      queryMapJson: this.props.queryMapJson,
+      getConvertedChart: this.props.getConvertedChart,
+      modifyChartName: this.modifyChartName,
+      modifyChart: this.modifyChart,
+      toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+    }) : /*#__PURE__*/React.createElement(ChartSelector, {
+      addEditingChart: this.addChart
+    })));
+  }
+}
 export default ChartAdditionEditDialog;

package/es/components/dialog/chart-addition-widgets/chart-selector.js

@@ -1,34 +1,26 @@
-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 from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
 import intl from 'react-intl-universal';
 import { STAT_TYPE } from '../../../constants';
 import { getImageUrl } from '../../../utils/common-utils';
 import styles from './statistic-chart-selector.module.css';
-var ChartSelector = /*#__PURE__*/function (_React$Component) {
-  _inherits(ChartSelector, _React$Component);
-  var _super = _createSuper(ChartSelector);
-  function ChartSelector(props) {
-    var _this;
-    _classCallCheck(this, ChartSelector);
-    _this = _super.call(this, props);
-    _this.setCurrentCatIndex = function (index, e) {
+class ChartSelector extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setCurrentCatIndex = (index, e) => {
       // in `dtable` project, there is `window.addEventListener('popstate', this.onHistoryState);`
       // don't use anchor links here to avoid triggering 'popstate' event
       e.preventDefault();
-      _this.setState({
+      this.setState({
         currentCatIndex: index
       });
       document.getElementById('chart-types-container').scrollTop = document.getElementById("chart-type-".concat(index + 1)).offsetTop - 17;
     };
-    _this.state = {
+    this.state = {
       currentCatIndex: 0
     };
-    var lang = window.dtable && window.dtable.lang || 'zh-cn';
-    _this.chartTypes = [{
+    const lang = window.dtable && window.dtable.lang || 'zh-cn';
+    this.chartTypes = [{
       catTitle: intl.get('Histogram'),
       icon: 'dtable-icon-histogram',
       items: [{
@@ -203,60 +195,58 @@ var ChartSelector = /*#__PURE__*/function (_React$Component) {
         image: 'pivot-table.png'
       }]
     }];
-    return _this;
   }
-  _createClass(ChartSelector, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var selectedType = this.props.selectedType;
-      var currentCatIndex = this.state.currentCatIndex;
+  render() {
+    const {
+      selectedType
+    } = this.props;
+    const {
+      currentCatIndex
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles['statistic-types-container'], " d-flex flex-column h-100")
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: "".concat(styles['chart-categories-nav'], " flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled")
+    }, this.chartTypes.map((item, index) => {
+      return /*#__PURE__*/React.createElement("li", {
+        key: index,
+        className: 'px-4 py-2 chart-cat-nav-item'
+      }, /*#__PURE__*/React.createElement("i", {
+        id: item.icon,
+        className: "".concat(styles['chart-icon'], " dtable-font ").concat(item.icon, " ").concat(currentCatIndex === index ? "".concat(styles['icon-highlight']) : ''),
+        onClick: this.setCurrentCatIndex.bind(this, index)
+      }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+        placement: "bottom",
+        target: item.icon
+      }, item.catTitle));
+    })), /*#__PURE__*/React.createElement("div", {
+      id: "chart-types-container",
+      className: "flex-fill o-auto ".concat(styles['statistic-type'])
+    }, this.chartTypes.map((item, index) => {
       return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(styles['statistic-types-container'], " d-flex flex-column h-100")
-      }, /*#__PURE__*/React.createElement("ul", {
-        className: "".concat(styles['chart-categories-nav'], " flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled")
-      }, this.chartTypes.map(function (item, index) {
-        return /*#__PURE__*/React.createElement("li", {
-          key: index,
-          className: 'px-4 py-2 chart-cat-nav-item'
-        }, /*#__PURE__*/React.createElement("i", {
-          id: item.icon,
-          className: "".concat(styles['chart-icon'], " dtable-font ").concat(item.icon, " ").concat(currentCatIndex === index ? "".concat(styles['icon-highlight']) : ''),
-          onClick: _this2.setCurrentCatIndex.bind(_this2, index)
-        }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
-          placement: "bottom",
-          target: item.icon
-        }, item.catTitle));
-      })), /*#__PURE__*/React.createElement("div", {
-        id: "chart-types-container",
-        className: "flex-fill o-auto ".concat(styles['statistic-type'])
-      }, this.chartTypes.map(function (item, index) {
+        key: "chart-type-".concat(index),
+        className: "mb-7"
+      }, /*#__PURE__*/React.createElement("h3", {
+        className: "".concat(styles['statistic-type-title'], " m-0"),
+        id: "chart-type-".concat(index + 1)
+      }, item.catTitle), /*#__PURE__*/React.createElement("div", {
+        className: 'd-flex flex-wrap'
+      }, item.items.map((chart, index) => {
         return /*#__PURE__*/React.createElement("div", {
-          key: "chart-type-".concat(index),
-          className: "mb-7"
-        }, /*#__PURE__*/React.createElement("h3", {
-          className: "".concat(styles['statistic-type-title'], " m-0"),
-          id: "chart-type-".concat(index + 1)
-        }, item.catTitle), /*#__PURE__*/React.createElement("div", {
-          className: 'd-flex flex-wrap'
-        }, item.items.map(function (chart, index) {
-          return /*#__PURE__*/React.createElement("div", {
-            key: index,
-            onClick: _this2.props.addEditingChart.bind(_this2, chart.type),
-            className: "".concat(styles['statistic-type-item'], " ").concat(selectedType === chart.type ? styles['statistic-type-item-selected'] : '', " ").concat(chart.hide ? 'd-none' : '')
-          }, /*#__PURE__*/React.createElement("p", {
-            className: "".concat(styles['statistic-type-description'])
-          }, chart.title), /*#__PURE__*/React.createElement("div", {
-            className: "".concat(styles['statistic-type-image-container'])
-          }, /*#__PURE__*/React.createElement("img", {
-            src: getImageUrl(chart.image),
-            alt: "",
-            className: "".concat(styles['statistic-type-demo-chart-image'])
-          })));
+          key: index,
+          onClick: this.props.addEditingChart.bind(this, chart.type),
+          className: "".concat(styles['statistic-type-item'], " ").concat(selectedType === chart.type ? styles['statistic-type-item-selected'] : '', " ").concat(chart.hide ? 'd-none' : '')
+        }, /*#__PURE__*/React.createElement("p", {
+          className: "".concat(styles['statistic-type-description'])
+        }, chart.title), /*#__PURE__*/React.createElement("div", {
+          className: "".concat(styles['statistic-type-image-container'])
+        }, /*#__PURE__*/React.createElement("img", {
+          src: getImageUrl(chart.image),
+          alt: "",
+          className: "".concat(styles['statistic-type-demo-chart-image'])
         })));
       })));
-    }
-  }]);
-  return ChartSelector;
-}(React.Component);
+    })));
+  }
+}
 export default ChartSelector;

package/es/components/dialog/color-theme-dialog.js

@@ -1,41 +1,34 @@
-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 from 'react';
 import classnames from 'classnames';
 import intl from 'react-intl-universal';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { CHART_STYLE_COLORS } from '../../constants';
 import '../../assets/css/color-theme-dialog.css';
-var ColorThemeDialog = /*#__PURE__*/function (_React$Component) {
-  _inherits(ColorThemeDialog, _React$Component);
-  var _super = _createSuper(ColorThemeDialog);
-  function ColorThemeDialog() {
-    var _this;
-    _classCallCheck(this, ColorThemeDialog);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.onColorItemClick = function (colorThemeName) {
-      if (colorThemeName === _this.props.colorThemeName) return;
-      _this.props.modifyColorTheme(colorThemeName);
+class ColorThemeDialog extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.onColorItemClick = colorThemeName => {
+      if (colorThemeName === this.props.colorThemeName) return;
+      this.props.modifyColorTheme(colorThemeName);
     };
-    _this.renderColorItem = function (item) {
-      var colorThemeName = _this.props.colorThemeName;
-      var name = item.name,
-        colors = item.colors;
-      var isActive = name === colorThemeName;
+    this.renderColorItem = item => {
+      const {
+        colorThemeName
+      } = this.props;
+      const {
+        name,
+        colors
+      } = item;
+      const isActive = name === colorThemeName;
       return /*#__PURE__*/React.createElement("div", {
         key: name,
         className: classnames('color-theme-item', {
           'active': isActive
         }),
-        onClick: function onClick() {
-          _this.onColorItemClick(name);
+        onClick: () => {
+          this.onColorItemClick(name);
         }
-      }, colors.map(function (color, index) {
+      }, colors.map((color, index) => {
         return /*#__PURE__*/React.createElement("span", {
           className: "statistic-color-block",
           key: "color-theme-".concat(index),
@@ -45,27 +38,21 @@ var ColorThemeDialog = /*#__PURE__*/function (_React$Component) {
         });
       }));
     };
-    return _this;
   }
-  _createClass(ColorThemeDialog, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      return /*#__PURE__*/React.createElement(Modal, {
-        isOpen: true,
-        autoFocus: false,
-        className: "color-theme-setting-dialog",
-        zIndex: 1048,
-        toggle: this.props.onToggleColorThemeDialog
-      }, /*#__PURE__*/React.createElement(ModalHeader, {
-        toggle: this.props.onToggleColorThemeDialog
-      }, intl.get('Settings')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("label", null, intl.get('Chart_color_scheme')), /*#__PURE__*/React.createElement("div", {
-        className: "color-theme-container"
-      }, CHART_STYLE_COLORS.map(function (item) {
-        return _this2.renderColorItem(item);
-      }))));
-    }
-  }]);
-  return ColorThemeDialog;
-}(React.Component);
+  render() {
+    return /*#__PURE__*/React.createElement(Modal, {
+      isOpen: true,
+      autoFocus: false,
+      className: "color-theme-setting-dialog",
+      zIndex: 1048,
+      toggle: this.props.onToggleColorThemeDialog
+    }, /*#__PURE__*/React.createElement(ModalHeader, {
+      toggle: this.props.onToggleColorThemeDialog
+    }, intl.get('Settings')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("label", null, intl.get('Chart_color_scheme')), /*#__PURE__*/React.createElement("div", {
+      className: "color-theme-container"
+    }, CHART_STYLE_COLORS.map(item => {
+      return this.renderColorItem(item);
+    }))));
+  }
+}
 export default ColorThemeDialog;

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

@@ -2,10 +2,12 @@ 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;
+  const {
+    header,
+    name,
+    onDelete,
+    onToggle
+  } = props;
   return /*#__PURE__*/React.createElement(Modal, {
     isOpen: true,
     toggle: onToggle
@@ -14,7 +16,7 @@ function DeleteConfirmationDialog(props) {
   }, header), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
     className: "pb-6"
   }, intl.get('Delete_xxx_tip', {
-    name: name
+    name
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     color: "secondary",
     onClick: onToggle

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

@@ -1,118 +1,105 @@
-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 html2canvas from 'html2canvas';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import StatView from '../../stat-view';
 import { STAT_TYPE } from '../../constants';
-var EnlargeChartDialog = /*#__PURE__*/function (_Component) {
-  _inherits(EnlargeChartDialog, _Component);
-  var _super = _createSuper(EnlargeChartDialog);
-  function EnlargeChartDialog() {
-    var _this;
-    _classCallCheck(this, EnlargeChartDialog);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.toggle = function () {
-      _this.props.onEnlargeToggle();
+class EnlargeChartDialog extends Component {
+  constructor() {
+    super(...arguments);
+    this.toggle = () => {
+      this.props.onEnlargeToggle();
     };
-    _this.onClick = function (e) {
+    this.onClick = e => {
       e.stopPropagation();
       e.preventDefault();
     };
-    _this.renderStatisticView = function () {
-      var _this$props = _this.props,
-        colorThemeName = _this$props.colorThemeName,
-        dtableChangedTime = _this$props.dtableChangedTime,
-        statItem = _this$props.statItem,
-        eventBus = _this$props.eventBus,
-        chartCalculator = _this$props.chartCalculator,
-        getTableById = _this$props.getTableById,
-        toggleStatisticRecordsDialog = _this$props.toggleStatisticRecordsDialog;
-      var viewProps = {
+    this.renderStatisticView = () => {
+      const {
+        colorThemeName,
+        dtableChangedTime,
+        statItem,
+        eventBus,
+        chartCalculator,
+        getTableById,
+        toggleStatisticRecordsDialog
+      } = this.props;
+      const viewProps = {
         isEnlarge: true,
         isPreview: true,
-        dtableChangedTime: dtableChangedTime,
-        colorThemeName: colorThemeName,
-        statItem: statItem,
-        eventBus: eventBus,
-        chartCalculator: chartCalculator,
-        getTableById: getTableById,
-        queryMapJson: _this.props.queryMapJson,
-        toggleStatisticRecordsDialog: toggleStatisticRecordsDialog
+        dtableChangedTime,
+        colorThemeName,
+        statItem,
+        eventBus,
+        chartCalculator,
+        getTableById,
+        queryMapJson: this.props.queryMapJson,
+        toggleStatisticRecordsDialog
       };
       return /*#__PURE__*/React.createElement("div", {
         className: "view-wrapper",
-        onClick: _this.onClick,
+        onClick: this.onClick,
         draggable: false
       }, /*#__PURE__*/React.createElement(StatView, viewProps));
     };
-    _this.onExportChart = function () {
-      var exportContainerID = 'exported-chart-container';
-      var exportContainer = document.createElement('div');
+    this.onExportChart = () => {
+      const exportContainerID = 'exported-chart-container';
+      const exportContainer = document.createElement('div');
       exportContainer.setAttribute('id', exportContainerID);
 
       // for charts rendered with `<canvas>`
-      var originalElement = document.querySelector('.statistic-enlarge-modal .statistic-chart-container > div');
+      const originalElement = document.querySelector('.statistic-enlarge-modal .statistic-chart-container > div');
       if (originalElement) {
-        var containerWidth = originalElement.scrollWidth + 15 * 2;
-        var containerHeight = originalElement.scrollHeight + 15 * 2;
+        const containerWidth = originalElement.scrollWidth + 15 * 2;
+        const 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"));
+      ReactDOM.render(this.renderStatisticView(), exportContainer);
+      setTimeout(() => {
+        const 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');
+        }).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.name || 'image', ".png");
           eleA.click();
           document.body.removeChild(exportContainer);
         });
       }, 1000);
     };
-    return _this;
   }
-  _createClass(EnlargeChartDialog, [{
-    key: "render",
-    value: function render() {
-      var statItem = this.props.statItem;
-      return /*#__PURE__*/React.createElement(Modal, {
-        isOpen: true,
-        toggle: this.toggle,
-        className: "statistic-enlarge-modal",
-        modalClassName: "statistic-enlarge-dialog",
-        zIndex: 1048
-      }, /*#__PURE__*/React.createElement(ModalHeader, {
-        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()));
-    }
-  }]);
-  return EnlargeChartDialog;
-}(Component);
+  render() {
+    const {
+      statItem
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Modal, {
+      isOpen: true,
+      toggle: this.toggle,
+      className: "statistic-enlarge-modal",
+      modalClassName: "statistic-enlarge-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/React.createElement(ModalHeader, {
+      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()));
+  }
+}
 export default EnlargeChartDialog;