sea-chart 0.0.1 → 0.0.2

package/lib/components/settings/widgets/y-axis-group-settings.js

@@ -1,399 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-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 { FormGroup, Label } from 'reactstrap';
-import DTableSelect from "dtable-ui-component/lib/DTableSelect";
-import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
-import NumericSummaryItem from './numeric-summary-item';
-import SummaryMethodSettings from './summary-method-setting';
-import Groupby from './group-by';
-import { STATISTIC_Y_GROUP_TYPE, STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_SUMMARY_TYPE, DATE_GRANULATES, GEOLOCATION_GRANULATES, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD, STATISTIC_SUPPORT_COLUMNS } from '../../../constants';
-import { StatisticsUtils } from '../../../utils';
-import intl from '../../../intl';
-var YAxisGroupSettings = /*#__PURE__*/function (_Component) {
-  _inherits(YAxisGroupSettings, _Component);
-  var _super = _createSuper(YAxisGroupSettings);
-  function YAxisGroupSettings(_props) {
-    var _this;
-    _classCallCheck(this, YAxisGroupSettings);
-    _this = _super.call(this, _props);
-    _this.initTable = function (props) {
-      var statistic = props.statistic,
-        tables = props.tables;
-      var table_id = statistic.config.table_id;
-      _this.selectedTable = getTableById(tables, table_id);
-    };
-    _this.initGroupTypeOptions = function () {
-      _this.groupTypeOptions = [{
-        value: STATISTIC_Y_GROUP_TYPE.COUNT,
-        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: "select-module select-module-name ml-0"
-        }, intl.get(STATISTIC_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
-          className: "summary-type-explanation"
-        }, intl.get('Count_the_number_of_records_in_each_group')))
-      }, {
-        value: STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
-        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: "select-module select-module-name ml-0"
-        }, intl.get(STATISTIC_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
-          className: "summary-type-explanation"
-        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
-      }, {
-        value: STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
-        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-          className: "select-module select-module-name ml-0"
-        }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
-          className: "summary-type-explanation"
-        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
-      }];
-    };
-    _this.initColumns = function () {
-      if (!_this.selectedTable) {
-        _this.numericColumns = [];
-        _this.numericColumnOptions = [];
-        _this.columnGroupbyColumnsOptions = [];
-        return;
-      }
-      var columns = Array.isArray(_this.selectedTable.columns) ? _this.selectedTable.columns : [];
-      _this.columns = _this.getAvailableColumns(columns);
-      _this.columnGroupbyColumnsOptions = _this.getColumnOptions(_this.columns);
-      _this.numericColumns = _this.columns.filter(function (column) {
-        return StatisticsUtils.isNumericSummaryColumn(column);
-      });
-      _this.numericColumnOptions = _this.getColumnOptions(_this.numericColumns);
-    };
-    _this.getAvailableColumns = function (columns) {
-      if (!columns || !Array.isArray(columns)) return [];
-      return columns.filter(function (column) {
-        return STATISTIC_SUPPORT_COLUMNS.includes(column.type);
-      });
-    };
-    _this.getColumnOptions = function (columns) {
-      var options = columns.map(function (column) {
-        return {
-          value: column,
-          label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-            className: "header-icon"
-          }, /*#__PURE__*/React.createElement("i", {
-            className: COLUMNS_ICON_CONFIG[column.type]
-          })), /*#__PURE__*/React.createElement("span", {
-            className: 'select-module select-module-name ml-0'
-          }, column.name))
-        };
-      });
-      return [{
-        value: {
-          key: 'Groupby_null'
-        },
-        label: /*#__PURE__*/React.createElement("span", {
-          className: 'select-module select-module-name null-option-name ml-0'
-        }, intl.get('Select_a_column')),
-        style: {
-          color: 'rgba(0, 0, 0, .25)'
-        }
-      }].concat(_toConsumableArray(options));
-    };
-    _this.onGroupTypeChange = function (option) {
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var value = option.value;
-      var update = {};
-      if (value === STATISTIC_Y_GROUP_TYPE.COUNT) {
-        update.column_groupby_multiple_numeric_column = false;
-        update.summary_columns = [];
-        update.y_axis_summary_type = STATISTIC_SUMMARY_TYPE.COUNT;
-        update.y_axis_summary_column_key = null;
-        update.y_axis_summary_method = STATISTIC_SUMMARY_CALCULATION_METHOD[0];
-        update.column_groupby_column_key = config.column_groupby_column_key || null;
-        update.column_groupby_date_granularity = config.column_groupby_date_granularity || null;
-        update.column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity || null;
-      } else if (value === STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
-        update.column_groupby_multiple_numeric_column = false;
-        update.summary_columns = [];
-        update.y_axis_summary_type = STATISTIC_SUMMARY_TYPE.ADVANCED;
-        update.y_axis_summary_column_key = _this.numericColumns[0] ? _this.numericColumns[0].key : null;
-        update.y_axis_summary_method = STATISTIC_SUMMARY_CALCULATION_METHOD[0];
-        update.column_groupby_column_key = config.column_groupby_column_key || null;
-        update.column_groupby_date_granularity = config.column_groupby_date_granularity || null;
-        update.column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity || null;
-      } else if (value === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
-        update.column_groupby_multiple_numeric_column = true;
-        update.summary_columns = [];
-        update.y_axis_summary_type = STATISTIC_SUMMARY_TYPE.ADVANCED;
-        update.y_axis_summary_column_key = _this.numericColumns[0] ? _this.numericColumns[0].key : null;
-        update.y_axis_summary_method = STATISTIC_SUMMARY_CALCULATION_METHOD[0];
-        update.column_groupby_date_granularity = null;
-        update.column_groupby_geolocation_granularity = null;
-        update.column_groupby_geolocation_granularity = null;
-      }
-      _this.props.onChange(update);
-    };
-    _this.getSelectedGroupType = function () {
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
-        y_axis_summary_type = config.y_axis_summary_type;
-      if (column_groupby_multiple_numeric_column) {
-        return _this.groupTypeOptions.find(function (item) {
-          return item.value === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN;
-        });
-      }
-      if (y_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
-        return _this.groupTypeOptions[0];
-      }
-      if (y_axis_summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED) {
-        return _this.groupTypeOptions[1];
-      }
-      return _this.groupTypeOptions[0];
-    };
-    _this.onDeleteNumericColumnItem = function (index) {
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var summary_columns = config.summary_columns;
-      summary_columns = summary_columns || [];
-      summary_columns = _toConsumableArray(summary_columns);
-      summary_columns.splice(index - 1, 1);
-      _this.props.onChange({
-        summary_columns: _toConsumableArray(summary_columns)
-      });
-    };
-    _this.onGroupbyNumericColumnChange = function (option, index) {
-      var column = option.value;
-      var newXAxisColumnKey = column.key;
-      var validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var summaryMethods = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
-      if (index === 0) {
-        var y_axis_summary_method = config.y_axis_summary_method;
-        if (!summaryMethods.includes(y_axis_summary_method)) {
-          y_axis_summary_method = summaryMethods[0];
-        }
-        _this.props.onChange({
-          y_axis_summary_column_key: validValue,
-          y_axis_summary_method: y_axis_summary_method
-        });
-        return;
-      }
-      var summary_columns = config.summary_columns;
-      summary_columns = summary_columns || [];
-      summary_columns = _toConsumableArray(summary_columns);
-      var selectedItem = summary_columns[index - 1];
-      var _selectedItem = selectedItem,
-        summary_method = _selectedItem.summary_method;
-      if (summaryMethods.includes(summary_method)) {
-        selectedItem = Object.assign({}, selectedItem, {
-          column_key: validValue
-        });
-      } else {
-        selectedItem = Object.assign({}, selectedItem, {
-          column_key: validValue,
-          summary_method: summaryMethods[0]
-        });
-      }
-      summary_columns[index - 1] = selectedItem;
-      _this.props.onChange({
-        summary_columns: summary_columns
-      });
-    };
-    _this.onSummaryMethodChange = function (option, index) {
-      var value = option.value;
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      if (index === 0) {
-        _this.props.onChange({
-          y_axis_summary_method: value
-        });
-        return;
-      }
-      var summary_columns = config.summary_columns;
-      summary_columns = summary_columns || [];
-      summary_columns = _toConsumableArray(summary_columns);
-      var selectedItem = summary_columns[index - 1];
-      selectedItem = Object.assign({}, selectedItem, {
-        summary_method: value
-      });
-      summary_columns[index - 1] = selectedItem;
-      _this.props.onChange({
-        summary_columns: summary_columns
-      });
-    };
-    _this.onAddNumericColumn = function (column) {
-      if (!column) return;
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var summary_columns = config.summary_columns;
-      var newNumericColumnKey = column.key;
-      var summaryMethods = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
-      if (Array.isArray(summary_columns)) {
-        summary_columns = _toConsumableArray(summary_columns);
-        summary_columns.push({
-          column_key: newNumericColumnKey,
-          summary_method: summaryMethods[0]
-        });
-      } else {
-        summary_columns = [{
-          column_key: newNumericColumnKey,
-          summary_method: summaryMethods[0]
-        }];
-      }
-      _this.props.onChange({
-        summary_columns: _toConsumableArray(summary_columns)
-      });
-    };
-    _this.onGroupByChange = function (option) {
-      var column = option.value;
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var column_groupby_column_key = config.column_groupby_column_key;
-      if (column_groupby_column_key === column.key) return;
-      _this.props.onChange({
-        column_groupby_column_key: column.key,
-        column_groupby_date_granularity: DATE_GRANULATES[0],
-        column_groupby_geolocation_granularity: GEOLOCATION_GRANULATES[0]
-      });
-    };
-    _this.onGroupbyDateGranularityChange = function (option) {
-      var value = option.value;
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var column_groupby_date_granularity = config.column_groupby_date_granularity;
-      if (column_groupby_date_granularity === value) return;
-      _this.props.onChange({
-        column_groupby_date_granularity: value
-      });
-    };
-    _this.onGroupbyGeolocationGranularityChange = function (option) {
-      var value = option.value;
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity;
-      if (column_groupby_geolocation_granularity === value) return;
-      _this.props.onChange({
-        column_groupby_geolocation_granularity: value
-      });
-    };
-    _this.renderGroupbyNumericColumns = function () {
-      var statistic = _this.props.statistic;
-      var config = statistic.config;
-      var summary_columns = config.summary_columns;
-      if (!summary_columns || !Array.isArray(summary_columns)) return null;
-      return summary_columns.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
-          key: "number-column-".concat(index),
-          index: index + 1,
-          value: item,
-          statistic: statistic,
-          numericColumnOptions: _this.numericColumnOptions,
-          onDelete: _this.onDeleteNumericColumnItem,
-          onColumnOptionChange: _this.onGroupbyNumericColumnChange,
-          onSummaryMethodChange: _this.onSummaryMethodChange
-        });
-      });
-    };
-    _this.renderColumnGroupbyMultipleNumericColumn = function () {
-      var statistic = _this.props.statistic;
-      var _statistic$config = statistic.config,
-        column_groupby_multiple_numeric_column = _statistic$config.column_groupby_multiple_numeric_column,
-        y_axis_summary_column_key = _statistic$config.y_axis_summary_column_key,
-        summary_columns = _statistic$config.summary_columns;
-      if (!column_groupby_multiple_numeric_column) return null;
-      var usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(function (item) {
-        return item.column_key;
-      }) : [];
-      var unUsedSummaryColumns = _this.numericColumns.filter(function (column) {
-        return column.key !== y_axis_summary_column_key && !usedSummaryColumnKeys.includes(column.key);
-      });
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number"
-      }, _this.renderGroupbyNumericColumns()), Array.isArray(unUsedSummaryColumns) && unUsedSummaryColumns.length > 0 && /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number-columns d-flex align-items-center",
-        onClick: function onClick() {
-          return _this.onAddNumericColumn(unUsedSummaryColumns[0]);
-        }
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "dtable-font dtable-icon-add-table mr-2"
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "number-column-item add-number-column-description"
-      }, intl.get('Add_new_field'))));
-    };
-    _this.initGroupTypeOptions();
-    _this.initTable(_props);
-    _this.initColumns();
-    return _this;
-  }
-  _createClass(YAxisGroupSettings, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.statistic.config.table_id !== this.props.statistic.config.table_id) {
-        this.initTable(nextProps);
-        this.initColumns();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        label = _this$props.label,
-        statistic = _this$props.statistic,
-        tables = _this$props.tables;
-      var selectedTypeOption = this.getSelectedGroupType();
-      var _statistic$config2 = statistic.config,
-        y_axis_summary_type = _statistic$config2.y_axis_summary_type,
-        column_groupby_multiple_numeric_column = _statistic$config2.column_groupby_multiple_numeric_column,
-        y_axis_summary_column_key = _statistic$config2.y_axis_summary_column_key,
-        y_axis_summary_method = _statistic$config2.y_axis_summary_method,
-        table_id = _statistic$config2.table_id,
-        column_groupby_column_key = _statistic$config2.column_groupby_column_key,
-        column_groupby_date_granularity = _statistic$config2.column_groupby_date_granularity,
-        column_groupby_geolocation_granularity = _statistic$config2.column_groupby_geolocation_granularity;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
-        className: "seastatistic-parameter-item"
-      }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
-        classNamePrefix: "chart-summary-types",
-        value: selectedTypeOption,
-        onChange: this.onGroupTypeChange,
-        options: this.groupTypeOptions
-      })), y_axis_summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(NumericSummaryItem, {
-        index: 0,
-        value: {
-          column_key: y_axis_summary_column_key,
-          summary_method: y_axis_summary_method
-        },
-        statistic: statistic,
-        numericColumnOptions: this.numericColumnOptions,
-        onColumnOptionChange: this.onGroupbyNumericColumnChange,
-        onSummaryMethodChange: this.onSummaryMethodChange
-      }) : /*#__PURE__*/React.createElement(SummaryMethodSettings, {
-        value: {
-          column_key: y_axis_summary_column_key,
-          summary_method: y_axis_summary_method
-        },
-        statistic: statistic,
-        numericColumnOptions: this.numericColumnOptions,
-        onColumnOptionChange: function onColumnOptionChange(option) {
-          return _this2.onGroupbyNumericColumnChange(option, 0);
-        },
-        onSummaryMethodChange: function onSummaryMethodChange(option) {
-          return _this2.onSummaryMethodChange(option, 0);
-        }
-      })), this.renderColumnGroupbyMultipleNumericColumn(), (!column_groupby_multiple_numeric_column && y_axis_summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED || y_axis_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) && /*#__PURE__*/React.createElement(Groupby, {
-        label: intl.get('Group_by'),
-        tables: tables,
-        selectedTableId: table_id,
-        selectedColumnKey: column_groupby_column_key,
-        selectedDateGranularity: column_groupby_date_granularity,
-        selectedGeolocationGranularity: column_groupby_geolocation_granularity,
-        onGroupByChange: this.onGroupByChange,
-        onGroupbyDateGranularityChange: this.onGroupbyDateGranularityChange,
-        onGroupbyGeolocationGranularityChange: this.onGroupbyGeolocationGranularityChange
-      }));
-    }
-  }]);
-  return YAxisGroupSettings;
-}(Component);
-export default YAxisGroupSettings;

package/lib/components/types-dialog/index.css

@@ -1,97 +0,0 @@
-.seastatistic-types-dialog {
-  max-width: 1102px;
-  width: 1102px;
-  height: calc(100% - 56px);
-}
-
-.seastatistic-types-dialog .modal-content {
-  height: 100%;
-}
-
-.seastatistic-types-dialog .seastatistic-types-body {
-  padding: 0;
-  overflow: hidden;
-}
-
-.seastatistic-types-dialog .seastatistic-chart-categories-nav {
-  border-bottom: 1px solid #e9ecef;
-  background-color: #f9f9f9;
-  height: 50px;
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.seastatistic-types-dialog .seastatistic-chart-categories-nav .seastatistic-chart-cat-nav-item {
-  height: 40px;
-  width: 48px;
-}
-
-.seastatistic-types-dialog .seastatistic-chart-categories-nav .seastatistic-chart-cat-nav-item-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.seastatistic-types-dialog .seastatistic-chart-categories-nav .seastatistic-chart-cat-nav-item-container.seastatistic-icon-highlight .chart-icon {
-  color: #ff8000;
-}
-
-.seastatistic-types-dialog .seastatistic-chart-categories-nav .chart-icon {
-  cursor: pointer;
-  color: #666;
-}
-
-.seastatistic-types-dialog .seastatistic-type-container {
-  padding: 0 16px 16px;
-}
-
-.seastatistic-types-dialog .seastatistic-type-container:before {
-  content: "";
-  display: block;
-  width: 100%;
-  height: 20px;
-}
-
-.seastatistic-types-dialog .statistic-type-title {
-  font-weight: 600;
-  font-size: 18px;
-  color: #202428;
-}
-
-.seastatistic-types-dialog .statistic-type-item {
-  height: 172px;
-  width: 250px;
-  
-  border: 1px solid #dcdade;
-  border-radius: 4px;
-  box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
-  margin: 20px 17px 0 0;
-}
-
-.seastatistic-types-dialog .statistic-type-item:hover {
-  cursor: pointer;
-  border-color: #FFBF7F;
-}
-
-.seastatistic-types-dialog .statistic-type-item.selected {
-  border-color: #FF8000;
-}
-
-.seastatistic-types-dialog .statistic-type-description {
-  font-weight: 500;
-  font-size: 14px;
-  margin-top: 14px;
-  padding: 0 15px;
-  margin-bottom: 10px;
-}
-
-.seastatistic-types-dialog .statistic-type-image-container {
-  padding: 0 12px;
-}
-
-.seastatistic-types-dialog .statistic-type-image-container .statistic-type-demo-image {
-  width: 100%;
-  height: 125px;
-}

package/lib/components/types-dialog/index.js

@@ -1,127 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Modal, ModalHeader, ModalBody, ModalFooter, UncontrolledTooltip, Button } from 'reactstrap';
-import classnames from 'classnames';
-import { STATISTIC_TYPES, STATISTIC_TYPE_SHOW, ZH_CN_SUPPORT_STATISTICS, STATISTIC_TYPE_IMAGE } from '../../constants';
-import { eventStopPropagation } from '../../utils';
-import intl from '../../intl';
-import Icon from '../icon';
-import './index.css';
-var TypesDialog = function TypesDialog(_ref) {
-  var type = _ref.type,
-    propsOnToggle = _ref.onToggle,
-    onChange = _ref.onChange;
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentCatIndex = _useState2[0],
-    setCurrentCatIndex = _useState2[1];
-  var _useState3 = useState(type),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedType = _useState4[0],
-    setType = _useState4[1];
-  var notSupportStatisticTypes = useMemo(function () {
-    var lang = window.seaStatistic.context.getSetting('lang');
-    return lang !== 'zh-cn' ? ZH_CN_SUPPORT_STATISTICS : [];
-  }, []);
-  var statisticTypeContainerRef = useRef(null);
-  useEffect(function () {
-    var selectStatisticIndex = STATISTIC_TYPES.findIndex(function (item) {
-      return item.children.includes(type);
-    });
-    var currentCatIndex = selectStatisticIndex < 0 ? 0 : selectStatisticIndex;
-    if (currentCatIndex === 0) return;
-    if (!statisticTypeContainerRef.current) return;
-    statisticTypeContainerRef.current.scrollTop = document.getElementById("chart-type-".concat(currentCatIndex + 1)).offsetTop - 60;
-  }, [type]);
-  var onToggle = useCallback(function () {
-    propsOnToggle();
-  }, [propsOnToggle]);
-  var modifyCurrentCatIndex = useCallback(function (event, index) {
-    eventStopPropagation(event);
-    setCurrentCatIndex(index);
-    if (!statisticTypeContainerRef.current) return;
-    statisticTypeContainerRef.current.scrollTop = document.getElementById("chart-type-".concat(index + 1)).offsetTop - 60;
-  }, [statisticTypeContainerRef]);
-  var onTypeChange = useCallback(function (event, type, index) {
-    eventStopPropagation(event);
-    if (type === selectedType) return;
-    setType(type);
-    setCurrentCatIndex(index);
-  }, [selectedType]);
-  var onSubmit = useCallback(function () {
-    onChange(selectedType);
-    onToggle();
-  }, [selectedType, onToggle, onChange]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    isOpen: true,
-    toggle: onToggle,
-    className: "seastatistic-types-dialog",
-    zIndex: 1048
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
-    toggle: onToggle
-  }, intl.get('Edit_type')), /*#__PURE__*/React.createElement(ModalBody, {
-    className: "seastatistic-types-body"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "seastatistic-types-container d-flex flex-column h-100"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "seastatistic-chart-categories-nav flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled"
-  }, STATISTIC_TYPES.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: index,
-      className: "px-4 py-2 seastatistic-chart-cat-nav-item"
-    }, /*#__PURE__*/React.createElement("div", {
-      id: "seastatistic-icon-".concat(item.icon, "-container"),
-      className: classnames('seastatistic-chart-cat-nav-item-container', {
-        'seastatistic-icon-highlight': currentCatIndex === index
-      }),
-      onClick: function onClick(event) {
-        return modifyCurrentCatIndex(event, index);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      symbol: item.icon,
-      className: "chart-icon w-100 h-100"
-    })), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
-      placement: "bottom",
-      target: "seastatistic-icon-".concat(item.icon, "-container"),
-      delay: 0,
-      fade: false
-    }, intl.get(item.name)));
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-fill o-auto seastatistic-type-container",
-    ref: statisticTypeContainerRef
-  }, STATISTIC_TYPES.map(function (item, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "statistic-type-".concat(index),
-      className: "mb-7"
-    }, /*#__PURE__*/React.createElement("h3", {
-      className: "statistic-type-title m-0",
-      id: "chart-type-".concat(index + 1)
-    }, intl.get(item.name)), /*#__PURE__*/React.createElement("div", {
-      className: "d-flex flex-wrap"
-    }, item.children.map(function (chartType) {
-      if (notSupportStatisticTypes.includes(chartType)) return null;
-      return /*#__PURE__*/React.createElement("div", {
-        key: chartType,
-        onClick: function onClick(event) {
-          return onTypeChange(event, chartType, index);
-        },
-        className: "statistic-type-item ".concat(selectedType === chartType ? 'selected' : '')
-      }, /*#__PURE__*/React.createElement("p", {
-        className: "statistic-type-description"
-      }, intl.get(STATISTIC_TYPE_SHOW[chartType])), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-type-image-container"
-      }, /*#__PURE__*/React.createElement("img", {
-        src: STATISTIC_TYPE_IMAGE[chartType],
-        alt: "",
-        className: "statistic-type-demo-image"
-      })));
-    })));
-  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    onClick: onToggle
-  }, intl.get('Cancel')), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    onClick: onSubmit
-  }, intl.get('Submit'))));
-};
-export default TypesDialog;