sea-chart 0.0.1

package/lib/components/settings/widgets/title-settings/index.js

@@ -0,0 +1,58 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useMemo } from 'react';
+import TitleText from './title-text';
+import { FontSizeSettings, FontWeightSettings } from '../font-settings';
+import TextHorizontalSettings from '../text-horizontal-settings';
+import { DEFAULT_STATISTIC_FONT_WEIGHT, DEFAULT_STATISTIC_TITLE_FONT_SIZE, STATISTIC_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN } from '../../../../constants';
+var TitleSetting = function TitleSetting(props) {
+  var initialTitle = useMemo(function () {
+    return props.title || {};
+  }, [props.title]);
+  var modifyTitle = function modifyTitle(updated) {
+    if (!props.title) {
+      props.modifyTitle(updated);
+      return;
+    }
+    props.modifyTitle(_objectSpread(_objectSpread({}, props.title), updated));
+  };
+  var modifyText = function modifyText(updatedText) {
+    if (!updatedText && !initialTitle.text || updatedText === initialTitle.text) {
+      return;
+    }
+    modifyTitle({
+      text: updatedText
+    });
+  };
+  var modifyFontSize = function modifyFontSize(updatedFontSize) {
+    modifyTitle({
+      font_size: updatedFontSize
+    });
+  };
+  var modifyHorizontalAlign = function modifyHorizontalAlign(horizontalAlign) {
+    modifyTitle({
+      horizontal_align: horizontalAlign
+    });
+  };
+  var modifyFontWeight = function modifyFontWeight(updatedFontWeight) {
+    modifyTitle({
+      font_weight: updatedFontWeight
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleText, {
+    text: initialTitle.text,
+    modifyText: modifyText
+  }), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    fontSize: initialTitle.font_size,
+    defaultFontSize: DEFAULT_STATISTIC_TITLE_FONT_SIZE,
+    modifyFontSize: modifyFontSize
+  }), /*#__PURE__*/React.createElement(FontWeightSettings, {
+    fontWeight: initialTitle.font_weight || DEFAULT_STATISTIC_FONT_WEIGHT,
+    supportFontWeights: STATISTIC_SUPPORT_FONT_WEIGHTS,
+    modifyFontWeight: modifyFontWeight
+  }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
+    value: initialTitle.horizontal_align,
+    defaultValue: HORIZONTAL_ALIGN.LEFT,
+    onChange: modifyHorizontalAlign
+  }));
+};
+export default TitleSetting;

package/lib/components/settings/widgets/title-settings/title-text.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { FormGroup, Input, Label } from 'reactstrap';
+import intl from '../../../../intl';
+var TitleText = function TitleText(props) {
+  var _useState = useState(props.text || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    currText = _useState2[0],
+    setCurrText = _useState2[1];
+  var onKeyDown = function onKeyDown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  };
+  var onSaveText = function onSaveText() {
+    props.modifyText(currText);
+  };
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "statistic-title-text"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Title')), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    value: currText,
+    onBlur: onSaveText,
+    onChange: function onChange(event) {
+      return setCurrText(event.target.value);
+    },
+    onKeyDown: onKeyDown
+  }));
+};
+export default TitleText;

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

@@ -0,0 +1,399 @@
+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

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