dtable-statistic 4.0.2-test-2

package/es/components/dialog/chart-addition-widgets/statistic-chart-selector.module.css

@@ -0,0 +1,74 @@
+.statistic-types-container {
+  position: relative;
+}
+
+.statistic-type-image-container {
+  padding: 0 12px;
+}
+
+.statistic-type {
+  position: relative;
+  padding: 0 16px 16px 16px;
+}
+
+.statistic-type::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 20px;
+}
+
+.statistic-type-demo-chart-image {
+  width: 100%;
+  height: 125px;
+}
+
+.statistic-type-title {
+  font-weight: 600;
+  font-size: 18px;
+  color: #202428;
+}
+
+.chart-categories-nav {
+  border-bottom: 1px solid #e9ecef;
+  background-color: #f9f9f9;
+  height: 50px;
+  box-sizing: border-box;
+  margin: 0;  
+}
+
+.chart-cat-nav-item {
+  font-size: 14px;
+  color: #666;
+}
+
+.statistic-type-item {
+  height: 172px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #dcdade;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgba(0,0,0,.1);
+  margin: 20px 17px 0 0;
+}
+
+.statistic-type-description {
+  font-weight: 500;
+  font-size: 14px;
+  margin-top: 14px;
+  padding: 0 15px;
+  margin-bottom: 10px;
+}
+
+.chart-icon {
+  cursor: pointer;
+  color: #666666;
+}
+
+.chart-icon:not(.icon-highlight):hover {
+  color: #202428;
+}
+
+.icon-highlight {
+  color: #ff8000;
+}

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

@@ -0,0 +1,71 @@
+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);
+    };
+    _this.renderColorItem = function (item) {
+      var colorThemeName = _this.props.colorThemeName;
+      var name = item.name,
+        colors = item.colors;
+      var isActive = name === colorThemeName;
+      return /*#__PURE__*/React.createElement("div", {
+        key: name,
+        className: classnames('color-theme-item', {
+          'active': isActive
+        }),
+        onClick: function onClick() {
+          _this.onColorItemClick(name);
+        }
+      }, colors.map(function (color, index) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: "statistic-color-block",
+          key: "color-theme-".concat(index),
+          style: {
+            background: "".concat(color)
+          }
+        });
+      }));
+    };
+    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);
+export default ColorThemeDialog;

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

@@ -0,0 +1,73 @@
+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 { 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();
+    };
+    _this.onClick = function (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+    _this.renderStatisticView = function () {
+      var _this$props = _this.props,
+        colorThemeName = _this$props.colorThemeName,
+        refresh = _this$props.refresh,
+        statItem = _this$props.statItem,
+        eventBus = _this$props.eventBus,
+        chartCalculator = _this$props.chartCalculator,
+        getTableById = _this$props.getTableById,
+        toggleStatisticRecordsDialog = _this$props.toggleStatisticRecordsDialog;
+      var viewProps = {
+        isEnlarge: true,
+        isPreview: true,
+        refresh: refresh,
+        colorThemeName: colorThemeName,
+        statItem: statItem,
+        eventBus: eventBus,
+        chartCalculator: chartCalculator,
+        getTableById: getTableById,
+        toggleStatisticRecordsDialog: toggleStatisticRecordsDialog
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "view-wrapper",
+        onClick: _this.onClick,
+        draggable: false
+      }, /*#__PURE__*/React.createElement(StatView, viewProps));
+    };
+    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
+      }, /*#__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);
+export default EnlargeChartDialog;

package/es/components/dialog/new-table-dialog.js

@@ -0,0 +1,113 @@
+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 intl from 'react-intl-universal';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
+import { KeyCodes } from '../../constants';
+var NewTableDialog = /*#__PURE__*/function (_React$Component) {
+  _inherits(NewTableDialog, _React$Component);
+  var _super = _createSuper(NewTableDialog);
+  function NewTableDialog(props) {
+    var _this;
+    _classCallCheck(this, NewTableDialog);
+    _this = _super.call(this, props);
+    _this.onHotKey = function (e) {
+      if (e.keyCode === KeyCodes.Enter) {
+        e.preventDefault();
+        _this.handleSubmit();
+      }
+    };
+    _this.handleChange = function (event) {
+      var value = event.target.value;
+      if (value === _this.state.tableName) {
+        return;
+      }
+      _this.setState({
+        tableName: value
+      });
+    };
+    _this.toggle = function () {
+      _this.props.onNewTableCancel();
+    };
+    _this.handleSubmit = function () {
+      var tableName = _this.state.tableName;
+      tableName = tableName.trim();
+      if (!tableName) {
+        _this.setState({
+          errMessage: 'Name_is_required'
+        });
+        return;
+      }
+      if (tableName.indexOf('`') > -1) {
+        _this.setState({
+          errMessage: 'Name_cannot_contain_backtick'
+        });
+        return;
+      }
+      if (tableName.includes('/')) {
+        _this.setState({
+          errMessage: 'Name_cannot_contain_slash'
+        });
+        return;
+      }
+      if (tableName.includes('\\')) {
+        _this.setState({
+          errMessage: 'Name_cannot_contain_backslash'
+        });
+        return;
+      }
+      _this.props.onNewTableConfirm(tableName);
+    };
+    _this.state = {
+      tableName: props.tableName,
+      errMessage: ''
+    };
+    return _this;
+  }
+  _createClass(NewTableDialog, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('keydown', this.onHotKey);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.toggle,
+        autoFocus: false
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: this.toggle
+      }, intl.get('New_Table')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "tableName"
+      }, intl.get('Name')), /*#__PURE__*/React.createElement(Input, {
+        id: "tableName",
+        value: this.state.tableName,
+        innerRef: function innerRef(input) {
+          _this2.newInput = input;
+        },
+        onChange: this.handleChange,
+        autoFocus: true
+      }))), this.state.errMessage && /*#__PURE__*/React.createElement(Alert, {
+        color: "danger",
+        className: "mt-2"
+      }, intl.get(this.state.errMessage))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.toggle
+      }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        onClick: this.handleSubmit
+      }, intl.get('Submit'))));
+    }
+  }]);
+  return NewTableDialog;
+}(React.Component);
+export default NewTableDialog;

package/es/components/dialog/new-view-dialog.js

@@ -0,0 +1,87 @@
+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 intl from 'react-intl-universal';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
+var NewViewDialog = /*#__PURE__*/function (_React$Component) {
+  _inherits(NewViewDialog, _React$Component);
+  var _super = _createSuper(NewViewDialog);
+  function NewViewDialog(props) {
+    var _this;
+    _classCallCheck(this, NewViewDialog);
+    _this = _super.call(this, props);
+    _this.handleChange = function (event) {
+      var value = event.target.value;
+      if (value === _this.state.viewName) {
+        return;
+      }
+      _this.setState({
+        viewName: value
+      });
+    };
+    _this.toggle = function () {
+      _this.props.onNewViewCancel();
+    };
+    _this.handleSubmit = function () {
+      var viewName = _this.state.viewName;
+      viewName = viewName.trim();
+      if (!viewName) {
+        _this.setState({
+          errMessage: intl.get('Name_is_required')
+        });
+        return;
+      }
+      _this.props.onNewViewConfirm(viewName);
+      _this.props.onNewViewCancel();
+    };
+    _this.handleKeyDown = function (e) {
+      if (e.key == 'Enter') {
+        e.preventDefault();
+        _this.handleSubmit();
+      }
+    };
+    _this.state = {
+      viewName: '',
+      errMessage: ''
+    };
+    return _this;
+  }
+  _createClass(NewViewDialog, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.toggle,
+        autoFocus: false
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: this.toggle
+      }, intl.get('New_dashboard')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "viewName"
+      }, intl.get('Name')), /*#__PURE__*/React.createElement(Input, {
+        type: "text",
+        id: "viewName",
+        value: this.state.viewName,
+        innerRef: function innerRef(input) {
+          _this2.newInput = input;
+        },
+        onChange: this.handleChange,
+        autoFocus: true,
+        onKeyDown: this.handleKeyDown
+      }))), this.state.errMessage && /*#__PURE__*/React.createElement(Alert, {
+        color: "danger",
+        className: "mt-2"
+      }, this.state.errMessage)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.toggle
+      }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        onClick: this.handleSubmit
+      }, intl.get('Submit'))));
+    }
+  }]);
+  return NewViewDialog;
+}(React.Component);
+export default NewViewDialog;

package/es/components/dialog/rename-view-dialog.js

@@ -0,0 +1,87 @@
+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, ModalFooter, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
+var RenameViewDialog = /*#__PURE__*/function (_Component) {
+  _inherits(RenameViewDialog, _Component);
+  var _super = _createSuper(RenameViewDialog);
+  function RenameViewDialog(props) {
+    var _this;
+    _classCallCheck(this, RenameViewDialog);
+    _this = _super.call(this, props);
+    _this.handleChange = function (event) {
+      var viewName = _this.state.viewName;
+      var value = event.target.value;
+      if (value === viewName) {
+        return;
+      } else {
+        _this.setState({
+          viewName: value
+        });
+      }
+    };
+    _this.handleKeyDown = function (e) {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        _this.handleSubmit();
+        return false;
+      }
+    };
+    _this.handleSubmit = function () {
+      var viewName = _this.state.viewName;
+      viewName = viewName.trim();
+      if (!viewName) {
+        _this.setState({
+          errMessage: intl.get('Name_is_required')
+        });
+        return;
+      }
+      if (viewName !== _this.props.viewName) {
+        _this.props.onRenameDashboard(viewName);
+      }
+      _this.props.hideRenameViewDialog();
+    };
+    _this.toggle = function () {
+      _this.props.hideRenameViewDialog();
+    };
+    _this.state = {
+      viewName: props.viewName || '',
+      errMessage: ''
+    };
+    return _this;
+  }
+  _createClass(RenameViewDialog, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.toggle,
+        autoFocus: false
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: this.toggle
+      }, intl.get('Rename_dashboard')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "viewName"
+      }, intl.get('Name')), /*#__PURE__*/React.createElement(Input, {
+        id: "viewName",
+        autoFocus: true,
+        value: this.state.viewName,
+        onChange: this.handleChange,
+        onKeyDown: this.handleKeyDown
+      }))), this.state.errMessage && /*#__PURE__*/React.createElement(Alert, {
+        color: "danger",
+        className: "mt-2"
+      }, this.state.errMessage)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.toggle
+      }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        onClick: this.handleSubmit
+      }, intl.get('Submit'))));
+    }
+  }]);
+  return RenameViewDialog;
+}(Component);
+export default RenameViewDialog;

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

@@ -0,0 +1,114 @@
+.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;
+}
+
+.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;
+}