dtable-statistic 4.0.2-test-2

package/es/stat-editor/stat-settings/public-setting/column-settings.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+function ColumnSettings(props) {
+  var columnsOptions = props.columnsOptions,
+    selectedColumnOption = props.selectedColumnOption,
+    onChangeSelectedColumn = props.onChangeSelectedColumn;
+  return /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedColumnOption,
+    options: columnsOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onChangeSelectedColumn
+  });
+}
+export default ColumnSettings;

package/es/stat-editor/stat-settings/public-setting/custom-title-setting.js

@@ -0,0 +1,60 @@
+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 { Input } from 'reactstrap';
+import intl from 'react-intl-universal';
+import styles from '../../../assets/css/statistic-custom-title.module.css';
+var CustomTitleSetting = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomTitleSetting, _React$Component);
+  var _super = _createSuper(CustomTitleSetting);
+  function CustomTitleSetting(props) {
+    var _this;
+    _classCallCheck(this, CustomTitleSetting);
+    _this = _super.call(this, props);
+    _this.onKeyDown = function (event) {
+      if (event.keyCode === 13) {
+        _this.onBlur();
+      }
+    };
+    _this.onBlur = function () {
+      var titleName = _this.props.titleName;
+      var newName = _this.state.titleName;
+      if (newName === titleName) return;
+      var setting = {
+        'title_name': newName
+      };
+      _this.props.updateTitleName(setting);
+    };
+    _this.onChange = function (event) {
+      var value = event.target.value;
+      var titleName = _this.state.titleName;
+      if (value === titleName) return;
+      _this.setState({
+        titleName: value
+      });
+    };
+    _this.state = {
+      titleName: props.titleName || ''
+    };
+    return _this;
+  }
+  _createClass(CustomTitleSetting, [{
+    key: "render",
+    value: function render() {
+      var titleName = this.state.titleName;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles['custom-title']
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Custom_title')), /*#__PURE__*/React.createElement(Input, {
+        autoComplete: "off",
+        value: titleName,
+        onChange: this.onChange,
+        onKeyDown: this.onKeyDown,
+        onBlur: this.onBlur
+      }));
+    }
+  }]);
+  return CustomTitleSetting;
+}(React.Component);
+export default CustomTitleSetting;

package/es/stat-editor/stat-settings/public-setting/data-sort-setting.js

@@ -0,0 +1,57 @@
+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 { SeaTableRadio } from '../../../components';
+import { DATA_SORT_TYPE, DATA_SORT_TYPES, DATA_SORT_TYPE_LABEL } from '../../../constants';
+var DataSort = /*#__PURE__*/function (_Component) {
+  _inherits(DataSort, _Component);
+  var _super = _createSuper(DataSort);
+  function DataSort(props) {
+    var _this;
+    _classCallCheck(this, DataSort);
+    _this = _super.call(this, props);
+    _this.onChangeSortType = function (type) {
+      var statItem = _this.props.statItem;
+      var sort_type = statItem.sort_type;
+      if (type === sort_type) return;
+      _this.setState({
+        sortType: type
+      }, function () {
+        _this.props.updateStatItem(Object.assign({}, statItem, {
+          sort_type: type === DATA_SORT_TYPE.NOT_SORTED ? '' : type
+        }));
+      });
+    };
+    var _statItem = props.statItem;
+    var _sort_type = _statItem.sort_type;
+    _this.state = {
+      sortType: _sort_type || DATA_SORT_TYPE.NOT_SORTED
+    };
+    return _this;
+  }
+  _createClass(DataSort, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var sortType = this.state.sortType;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Data_sorting')), DATA_SORT_TYPES.map(function (item, index) {
+        var isChecked = sortType === item;
+        return /*#__PURE__*/React.createElement("div", {
+          key: 'chart-group-item-' + index,
+          className: 'chart-group-item'
+        }, /*#__PURE__*/React.createElement(SeaTableRadio, {
+          isChecked: isChecked,
+          onCheckedChange: _this2.onChangeSortType.bind(_this2, item),
+          label: intl.get(DATA_SORT_TYPE_LABEL[item])
+        }));
+      }));
+    }
+  }]);
+  return DataSort;
+}(Component);
+export default DataSort;

package/es/stat-editor/stat-settings/public-setting/ind-toggle-setting.js

@@ -0,0 +1,41 @@
+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';
+var IndToggleSetting = /*#__PURE__*/function (_Component) {
+  _inherits(IndToggleSetting, _Component);
+  var _super = _createSuper(IndToggleSetting);
+  function IndToggleSetting() {
+    _classCallCheck(this, IndToggleSetting);
+    return _super.apply(this, arguments);
+  }
+  _createClass(IndToggleSetting, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        handleToggleChange = _this$props.handleToggleChange,
+        isChecked = _this$props.isChecked,
+        label = _this$props.label;
+      var value = isChecked || false;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-toggle-parameter individual-toggle-parameter d-block"
+      }, /*#__PURE__*/React.createElement("label", {
+        className: "custom-switch d-flex justify-content-between align-items-start"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        className: "custom-switch-input",
+        checked: value,
+        value: value,
+        onChange: handleToggleChange,
+        name: "custom-switch-checkbox"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "custom-switch-description m-0"
+      }, label), /*#__PURE__*/React.createElement("span", {
+        className: "custom-switch-indicator ml-2"
+      })));
+    }
+  }]);
+  return IndToggleSetting;
+}(Component);
+export default IndToggleSetting;

package/es/stat-editor/stat-settings/public-setting/min-max-setting.js

@@ -0,0 +1,64 @@
+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 { Form, FormGroup, Label, Input } from 'reactstrap';
+import intl from 'react-intl-universal';
+var MinMaxSetting = /*#__PURE__*/function (_Component) {
+  _inherits(MinMaxSetting, _Component);
+  var _super = _createSuper(MinMaxSetting);
+  function MinMaxSetting(props) {
+    var _this;
+    _classCallCheck(this, MinMaxSetting);
+    _this = _super.call(this, props);
+    _this.onMinChange = function (e) {
+      var min = e.target.value;
+      _this.setState({
+        min: min
+      });
+      _this.props.onMinChange(min);
+    };
+    _this.onMaxChange = function (e) {
+      var max = e.target.value;
+      _this.setState({
+        max: max
+      });
+      _this.props.onMaxChange(max);
+    };
+    _this.state = {
+      min: props.min || props.min === 0 ? props.min : '',
+      max: props.max || props.max === 0 ? props.max : ''
+    };
+    return _this;
+  }
+  _createClass(MinMaxSetting, [{
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        min = _this$state.min,
+        max = _this$state.max;
+      return /*#__PURE__*/React.createElement(Form, {
+        className: "mt-2"
+      }, /*#__PURE__*/React.createElement(FormGroup, {
+        className: "mb-2"
+      }, /*#__PURE__*/React.createElement(Label, {
+        for: "min"
+      }, intl.get('Min')), /*#__PURE__*/React.createElement(Input, {
+        id: "min",
+        type: "number",
+        value: min,
+        onChange: this.onMinChange
+      })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "max"
+      }, intl.get('Max')), /*#__PURE__*/React.createElement(Input, {
+        id: "max",
+        type: "number",
+        value: max,
+        onChange: this.onMaxChange
+      })));
+    }
+  }]);
+  return MinMaxSetting;
+}(Component);
+export default MinMaxSetting;

package/es/stat-editor/stat-settings/public-setting/numeric-summary-item.js

@@ -0,0 +1,118 @@
+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 { DTableSelect } from '../../../components';
+import { TIME_COLUMN_LIST, STAT_TYPE } from '../../../constants';
+import style from '../../../assets/css/statistic-numeric-column-item.module.css';
+var NumericSummaryItem = /*#__PURE__*/function (_Component) {
+  _inherits(NumericSummaryItem, _Component);
+  var _super = _createSuper(NumericSummaryItem);
+  function NumericSummaryItem(_props) {
+    var _this;
+    _classCallCheck(this, NumericSummaryItem);
+    _this = _super.call(this, _props);
+    _this.getSelectedColumnOption = function (props) {
+      var numericColumnItem = props.numericColumnItem;
+      var column_key = numericColumnItem.column_key,
+        key = numericColumnItem.key;
+      return _this.props.numericColumnsOptions.find(function (item) {
+        return item.value.key === column_key || item.value.key === key;
+      });
+    };
+    _this.getSummaryMethodOptions = function (props) {
+      var summaryMethodOptions = props.summaryMethodOptions;
+      var selectedColumnOption = _this.getSelectedColumnOption(props);
+      if (selectedColumnOption && TIME_COLUMN_LIST.includes(selectedColumnOption.value.type)) {
+        return summaryMethodOptions.filter(function (option) {
+          return option.value !== 'Mean' && option.value !== 'Sum';
+        });
+      }
+      return summaryMethodOptions;
+    };
+    _this.getSelectedSummaryMethodOption = function () {
+      var numericColumnItem = _this.props.numericColumnItem;
+      var summary_method = numericColumnItem.summary_method,
+        method = numericColumnItem.method;
+      return _this.summaryMethodOptions.find(function (item) {
+        return item.value === summary_method || item.value === method;
+      });
+    };
+    _this.onToggleExpand = function () {
+      _this.setState({
+        isExpand: !_this.state.isExpand
+      });
+    };
+    _this.onDeleteNumericColumnItem = function (index) {
+      _this.props.onDeleteNumericColumnItem(index);
+    };
+    _this.state = {
+      isExpand: true
+    };
+    _this.summaryMethodOptions = _this.getSummaryMethodOptions(_props);
+    return _this;
+  }
+  _createClass(NumericSummaryItem, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var numericColumnItem = nextProps.numericColumnItem;
+      if (numericColumnItem !== this.props.numericColumnItem) {
+        this.summaryMethodOptions = this.getSummaryMethodOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        index = _this$props.index,
+        onChangeColumnOption = _this$props.onChangeColumnOption,
+        onChangeSummaryMethod = _this$props.onChangeSummaryMethod,
+        numericColumnsOptions = _this$props.numericColumnsOptions,
+        statItem = _this$props.statItem;
+      var selectedColumnOption = this.getSelectedColumnOption(this.props);
+      var selectedSummaryMethodOption = this.getSelectedSummaryMethodOption();
+      var isExpand = this.state.isExpand;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          paddingBottom: isExpand ? '14px' : '7px'
+        },
+        className: "".concat(style['container'], "  statistic-chart-parameter-item")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: style['item-title']
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "title-item title-left"
+      }, /*#__PURE__*/React.createElement("i", {
+        onClick: this.onToggleExpand,
+        className: "".concat(style['icon'], " dtable-font ").concat(isExpand ? 'dtable-icon-drop-down' : 'dtable-icon-right-slide')
+      }), /*#__PURE__*/React.createElement("label", null, (statItem.type === STAT_TYPE.PIVOT_TABLE ? intl.get('Summary_column') : intl.get('Numeric_column')) + (1 + index))), /*#__PURE__*/React.createElement("span", {
+        className: "title-item title-right"
+      }, index !== 0 && /*#__PURE__*/React.createElement("i", {
+        onClick: function onClick() {
+          return _this2.onDeleteNumericColumnItem(index);
+        },
+        className: "".concat(style['close-icon'], " dtable-font dtable-icon-fork-number")
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: isExpand ? style['expanded-numeric-summary-content'] : style['collapsed-numeric-summary-content']
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(style['select-item'], " numeric-column")
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        className: 'number-column-selector',
+        value: selectedColumnOption,
+        placeholder: intl.get('Select_a_column'),
+        onChange: onChangeColumnOption.bind(this, index),
+        options: numericColumnsOptions
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(style['select-item'], " ").concat(style['summary-method'])
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedSummaryMethodOption,
+        onChange: onChangeSummaryMethod.bind(this, index),
+        options: this.summaryMethodOptions
+      }))));
+    }
+  }]);
+  return NumericSummaryItem;
+}(Component);
+export default NumericSummaryItem;

package/es/stat-editor/stat-settings/public-setting/toggle-setting.js

@@ -0,0 +1,39 @@
+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';
+var ToggleSetting = /*#__PURE__*/function (_Component) {
+  _inherits(ToggleSetting, _Component);
+  var _super = _createSuper(ToggleSetting);
+  function ToggleSetting() {
+    _classCallCheck(this, ToggleSetting);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ToggleSetting, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        handleToggleChange = _this$props.handleToggleChange,
+        isChecked = _this$props.isChecked,
+        label = _this$props.label;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-toggle-parameter"
+      }, /*#__PURE__*/React.createElement("label", {
+        className: "custom-switch"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        className: "custom-switch-input",
+        checked: isChecked,
+        onChange: handleToggleChange,
+        name: "custom-switch-checkbox"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "custom-switch-indicator"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "custom-switch-description text-truncate"
+      }, label)));
+    }
+  }]);
+  return ToggleSetting;
+}(Component);
+export default ToggleSetting;

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

@@ -0,0 +1,139 @@
+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 html2canvas from 'html2canvas';
+import StatView from '../stat-view';
+import StatisticDropdownMenu from '../components/dropdown-menu/statistic-dropdown-menu';
+import { STAT_TYPE } from '../constants';
+var ChartPreview = /*#__PURE__*/function (_Component) {
+  _inherits(ChartPreview, _Component);
+  var _super = _createSuper(ChartPreview);
+  function ChartPreview() {
+    var _this;
+    _classCallCheck(this, ChartPreview);
+    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.onToggleShowEnlarged = function (event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      _this.props.enlargeChart();
+    };
+    _this.onExportChart = function (statItem) {
+      var exportContainerID = 'exported-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.renderChart(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.onNewTableDialogToggle = function () {
+      var statisticalResult = _this.chartView && _this.chartView.getStatData();
+      statisticalResult && _this.props.showNewTableDialog({
+        statisticalResult: statisticalResult
+      });
+    };
+    _this.onUpdateTableDialogToggle = function () {
+      var statisticalResult = _this.chartView && _this.chartView.getStatData();
+      statisticalResult && _this.props.showSelectTableDialog({
+        statisticalResult: statisticalResult
+      });
+    };
+    _this.renderChart = function (statItem) {
+      var _this$props = _this.props,
+        refresh = _this$props.refresh,
+        chartCalculator = _this$props.chartCalculator,
+        theme = _this$props.theme,
+        colorThemeName = _this$props.colorThemeName,
+        eventBus = _this$props.eventBus;
+      return /*#__PURE__*/React.createElement(StatView, {
+        ref: function ref(_ref) {
+          return _this.chartView = _ref;
+        },
+        isPreview: true,
+        refresh: refresh,
+        isEnlarge: false,
+        theme: theme,
+        colorThemeName: colorThemeName,
+        statItem: _objectSpread({}, statItem),
+        chartCalculator: chartCalculator,
+        eventBus: eventBus,
+        getTableById: _this.props.getTableById,
+        toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+      });
+    };
+    return _this;
+  }
+  _createClass(ChartPreview, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        isTableReadOnly = _this$props2.isTableReadOnly,
+        statItem = _this$props2.statItem;
+      var statId = statItem._id,
+        statName = statItem.name,
+        type = statItem.type;
+      var showStatName = !(type === STAT_TYPE.BASIC_NUMBER_CARD || type === STAT_TYPE.DASHBOARD);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-preview-header"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "statistic-chart-preview-name"
+      }, showStatName ? statName : ''), /*#__PURE__*/React.createElement("span", {
+        className: "statistic-chart-preview-operations"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "statistic-chart-preview-microscope",
+        onClick: this.onToggleShowEnlarged
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-open"
+      })), /*#__PURE__*/React.createElement(StatisticDropdownMenu, {
+        isTableReadOnly: isTableReadOnly,
+        chartType: type,
+        onExportChart: function onExportChart() {
+          return _this2.onExportChart(statItem);
+        },
+        deleteStatItem: this.props.deleteChart.bind(this, statId),
+        editStatItem: this.props.onToggleEditChart.bind(this, statId),
+        copyStatItem: this.props.copyChart.bind(this, statId),
+        onNewTableDialogToggle: this.onNewTableDialogToggle,
+        onUpdateTableDialogToggle: this.onUpdateTableDialogToggle
+      }))), /*#__PURE__*/React.createElement("div", {
+        id: "stat-item-".concat(statItem._id),
+        className: "statistic-chart-preview-container"
+      }, this.renderChart(statItem)), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-preview-container-resize"
+      }));
+    }
+  }]);
+  return ChartPreview;
+}(Component);
+export default ChartPreview;