sea-chart 0.0.1

package/lib/components/settings/time-comparison-settings/style-settings.js

@@ -0,0 +1,191 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import Switch from '../widgets/switch';
+import Divider from '../widgets/divider';
+import MinMaxSetting from '../widgets/min-max-setting';
+import { eventStopPropagation } from '../../../utils';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, LABEL_COLORS } from '../../../constants';
+import intl from '../../../intl';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    onChange = _ref.onChange;
+  var xAxisLabelOptions = useMemo(function () {
+    return X_LABEL_POSITIONS.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  var yAxisLabelOptions = useMemo(function () {
+    return Y_LABEL_POSITIONS.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  var onAxisLabelShowChange = useCallback(function (event, labelKey) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var value = config[labelKey];
+    onChange && onChange(_defineProperty({}, labelKey, !value));
+  }, [statistic, onChange]);
+  var onAxisLabelPositionChange = useCallback(function (option, positionKey) {
+    var position = option.value;
+    var config = statistic.config;
+    var oldValue = config[positionKey];
+    if (position === oldValue) return;
+    onChange && onChange(_defineProperty({}, positionKey, position));
+  }, [statistic, onChange]);
+  var onYAxisAutoRangeChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var y_axis_auto_range = config.y_axis_auto_range;
+    onChange && onChange({
+      y_axis_auto_range: !y_axis_auto_range
+    });
+  }, [statistic, onChange]);
+  var onYAxisMinChange = useCallback(function (min) {
+    var newMin = parseInt(min);
+    if (Number.isNaN(newMin)) return;
+    var config = statistic.config;
+    var y_axis_min = config.y_axis_min;
+    if (y_axis_min === newMin) return;
+    onChange && onChange({
+      y_axis_min: newMin
+    });
+  }, [statistic, onChange]);
+  var onYAxisMaxChange = useCallback(function (max) {
+    var newMax = parseInt(max);
+    if (Number.isNaN(newMax)) return;
+    var config = statistic.config;
+    var y_axis_max = config.y_axis_max;
+    if (y_axis_max === newMax) return;
+    onChange && onChange({
+      y_axis_max: newMax
+    });
+  }, [statistic, onChange]);
+  var onDisplayValueChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var y_axis_show_value = config.y_axis_show_value;
+    onChange && onChange({
+      y_axis_show_value: !y_axis_show_value
+    });
+  }, [statistic, onChange]);
+  var onDisplayPercentageIncreaseChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var display_increase_percentage = config.display_increase_percentage;
+    onChange && onChange({
+      display_increase_percentage: !display_increase_percentage
+    });
+  }, [statistic, onChange]);
+  var onIncreaseDisplayColorChang = useCallback(function (event, value) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var increase_display_color = config.increase_display_color;
+    if (increase_display_color === value) return;
+    onChange && onChange({
+      increase_display_color: value
+    });
+  }, [statistic, onChange]);
+  var config = statistic.config;
+  var x_axis_show_label = config.x_axis_show_label,
+    x_axis_label_position = config.x_axis_label_position,
+    y_axis_show_label = config.y_axis_show_label,
+    y_axis_label_position = config.y_axis_label_position,
+    _config$y_axis_auto_r = config.y_axis_auto_range,
+    y_axis_auto_range = _config$y_axis_auto_r === void 0 ? true : _config$y_axis_auto_r,
+    y_axis_min = config.y_axis_min,
+    y_axis_max = config.y_axis_max,
+    y_axis_show_value = config.y_axis_show_value,
+    display_increase = config.display_increase,
+    display_increase_percentage = config.display_increase_percentage,
+    increase_display_color = config.increase_display_color;
+  var xAxisLabelPosition = xAxisLabelOptions.find(function (option) {
+    return option.value === x_axis_label_position;
+  }) || xAxisLabelOptions[0];
+  var yAxisLabelPosition = yAxisLabelOptions.find(function (option) {
+    return option.value === y_axis_label_position;
+  }) || yAxisLabelOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('X_axis')), /*#__PURE__*/React.createElement(Switch, {
+    key: "x_axis_show_label",
+    checked: x_axis_show_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'x_axis_show_label');
+    }
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    value: xAxisLabelPosition,
+    options: xAxisLabelOptions,
+    onChange: function onChange(option) {
+      return onAxisLabelPositionChange(option, 'x_axis_label_position');
+    }
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Y_axis')), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_show_label",
+    checked: y_axis_show_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'y_axis_show_label');
+    }
+  }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: function onChange(option) {
+      return onAxisLabelPositionChange(option, 'y_axis_label_position');
+    }
+  })), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_auto_range",
+    checked: y_axis_auto_range,
+    placeholder: intl.get('Auto_range'),
+    onChange: onYAxisAutoRangeChange
+  }), !y_axis_auto_range && /*#__PURE__*/React.createElement(MinMaxSetting, {
+    min: y_axis_min,
+    max: y_axis_max,
+    onMinChange: onYAxisMinChange,
+    onMaxChange: onYAxisMaxChange
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_show_value",
+    checked: y_axis_show_value,
+    placeholder: intl.get('Display_value'),
+    onChange: onDisplayValueChange
+  }), display_increase && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    key: "display_increase_percentage",
+    checked: display_increase_percentage || false,
+    placeholder: intl.get('Display_percentage_increase'),
+    onChange: onDisplayPercentageIncreaseChange
+  }), /*#__PURE__*/React.createElement(Label, null, intl.get('Color')), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center justify-content-between"
+  }, LABEL_COLORS.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "y-axis-label-color-".concat(index)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "colorinput"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "colorinput-color statistic-colorinput d-flex justify-content-center align-items-center",
+      onClick: function onClick(event) {
+        return onIncreaseDisplayColorChang(event, item);
+      },
+      style: {
+        backgroundColor: item,
+        borderColor: item
+      }
+    }, item === (increase_display_color || LABEL_COLORS[3]) && /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-check-mark statistic-check-mark"
+    }))));
+  })))));
+};
+export default StyleSettings;

package/lib/components/settings/widgets/basic-summary/index.css

@@ -0,0 +1,12 @@
+.seastatistic-settings .summary-type-explanation {
+  color: #9c9c9c;
+  font-size: 12px;
+}
+
+.seastatistic-settings .chart-summary-types__option--is-selected .summary-type-explanation {
+  color: #9c9c9c !important;
+}
+
+.seastatistic-settings .chart-summary-types__value-container .summary-type-explanation {
+  display: none;
+}

package/lib/components/settings/widgets/basic-summary/index.js

@@ -0,0 +1,173 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { COLUMNS_ICON_CONFIG, CellType, getTableById } from 'dtable-utils';
+import { StatisticsUtils } from '../../../../utils';
+import { STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_TYPES, STATISTIC_SUMMARY_TYPE, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD } from '../../../../constants';
+import intl from '../../../../intl';
+import './index.css';
+var BasicSummary = function BasicSummary(_ref) {
+  var tables = _ref.tables,
+    statistic = _ref.statistic,
+    onChange = _ref.onChange,
+    oldSummaryTypeOptions = _ref.summaryTypeOptions,
+    summaryTypeKey = _ref.summaryTypeKey,
+    summaryColumnKey = _ref.summaryColumnKey,
+    summaryMethodKey = _ref.summaryMethodKey,
+    _ref$showSummaryTypes = _ref.showSummaryTypes,
+    showSummaryTypes = _ref$showSummaryTypes === void 0 ? true : _ref$showSummaryTypes,
+    label = _ref.label,
+    supportColumnTypes = _ref.supportColumnTypes;
+  var selectedTable = useMemo(function () {
+    var table_id = statistic.config.table_id;
+    return getTableById(tables, table_id);
+  }, [tables, statistic.config]);
+  var numericColumns = useMemo(function () {
+    if (!selectedTable) return [];
+    var columns = selectedTable.columns;
+    return columns.filter(function (column) {
+      return supportColumnTypes.includes(CellType.NUMBER) && StatisticsUtils.isNumericSummaryColumn(column) || supportColumnTypes.includes(CellType.DATE) && StatisticsUtils.isDateSummaryColumn(column);
+    });
+  }, [selectedTable, supportColumnTypes]);
+  var numericColumnOptions = useMemo(function () {
+    return numericColumns.map(function (column) {
+      return {
+        value: column.key,
+        column: 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))
+      };
+    });
+  }, [numericColumns]);
+  var summaryTypeOptions = useMemo(function () {
+    var summaryExplanation = StatisticsUtils.getSummaryExplanation(statistic);
+    return Array.isArray(oldSummaryTypeOptions) ? oldSummaryTypeOptions.map(function (summaryType) {
+      return {
+        value: summaryType,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "select-module select-module-name ml-0"
+        }, intl.get(STATISTIC_SUMMARY_SHOW[summaryType])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, summaryExplanation[summaryType]))
+      };
+    }) : [];
+  }, [statistic, oldSummaryTypeOptions]);
+  var summaryMethodOptions = useMemo(function () {
+    var summaryColumn = numericColumns.find(function (column) {
+      return column.key === statistic.config[summaryColumnKey];
+    });
+    var methods = StatisticsUtils.isNumericSummaryColumn(summaryColumn) ? STATISTIC_SUMMARY_CALCULATION_METHOD : STATISTIC_DATE_SUMMARY_CALCULATION_METHOD;
+    return methods.map(function (item) {
+      return {
+        value: item,
+        label: intl.get(STATISTIC_SUMMARY_SHOW[item])
+      };
+    });
+  }, [statistic, numericColumns, summaryColumnKey]);
+  var onSummaryTypeChange = useCallback(function (option) {
+    var _update;
+    var summaryType = option.value;
+    var config = statistic.config;
+    var oldValue = config[summaryTypeKey];
+    if (summaryType === oldValue) return;
+    var update = (_update = {}, _defineProperty(_update, summaryTypeKey, summaryType), _defineProperty(_update, summaryColumnKey, ''), _defineProperty(_update, summaryMethodKey, ''), _update);
+    if (summaryType === STATISTIC_SUMMARY_TYPE.ADVANCED) {
+      update[summaryMethodKey] = STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+    }
+    if (summaryType === STATISTIC_SUMMARY_TYPE.ADVANCED && numericColumns[0]) {
+      update[summaryColumnKey] = numericColumns[0].key;
+    }
+    onChange && onChange(update);
+  }, [statistic, summaryTypeKey, summaryColumnKey, summaryMethodKey, onChange, numericColumns]);
+  var onSummaryColumnChange = useCallback(function (option) {
+    var _update2;
+    var value = option.value;
+    var config = statistic.config;
+    var oldValue = config[summaryColumnKey];
+    if (value === oldValue) return;
+    var update = (_update2 = {}, _defineProperty(_update2, summaryColumnKey, value), _defineProperty(_update2, summaryMethodKey, config[summaryMethodKey]), _update2);
+    var oldColumn = numericColumns.find(function (column) {
+      return column.key === oldValue;
+    });
+    var newColumn = numericColumns.find(function (column) {
+      return column.key === value;
+    });
+    var isDateColumn = StatisticsUtils.isDateSummaryColumn(newColumn);
+    if (StatisticsUtils.isDateSummaryColumn(oldColumn) !== isDateColumn) {
+      var methods = isDateColumn ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
+      if (!methods.includes(config[summaryMethodKey])) {
+        update[summaryMethodKey] = methods[0];
+      }
+    }
+    onChange && onChange(update);
+  }, [statistic, summaryColumnKey, summaryMethodKey, onChange, numericColumns]);
+  var onSummaryMethodChange = useCallback(function (option) {
+    var value = option.value;
+    var config = statistic.config;
+    var oldValue = config[summaryMethodKey];
+    if (value === oldValue) return;
+    onChange && onChange(_defineProperty({}, summaryMethodKey, value));
+  }, [statistic, summaryMethodKey, onChange]);
+  var renderNumericColumn = useCallback(function () {
+    var column_key = statistic.config[summaryColumnKey];
+    var selectedColumnOption = numericColumnOptions.find(function (option) {
+      return option.value === column_key;
+    });
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "seastatistic-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedColumnOption,
+      onChange: onSummaryColumnChange,
+      options: numericColumnOptions,
+      placeholder: intl.get('Select_a_column'),
+      noOptionsMessage: function noOptionsMessage() {
+        return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
+      }
+    }));
+  }, [statistic, summaryColumnKey, numericColumnOptions, onSummaryColumnChange]);
+  var renderSummaryMethod = useCallback(function () {
+    var summaryMethod = statistic.config[summaryMethodKey];
+    var selectedMethodOption = summaryMethodOptions.find(function (option) {
+      return option.value === summaryMethod;
+    });
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "seastatistic-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedMethodOption,
+      onChange: onSummaryMethodChange,
+      options: summaryMethodOptions
+    }));
+  }, [statistic, summaryMethodKey, onSummaryMethodChange, summaryMethodOptions]);
+  var renderOtherSummaries = useCallback(function () {
+    var summaryType = statistic.config[summaryTypeKey] || STATISTIC_SUMMARY_TYPE.COUNT;
+    if (summaryType !== STATISTIC_SUMMARY_TYPE.ADVANCED) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderNumericColumn(), renderSummaryMethod());
+  }, [summaryTypeKey, statistic, renderNumericColumn, renderSummaryMethod]);
+  var summaryType = statistic.config[summaryTypeKey] || STATISTIC_SUMMARY_TYPE.COUNT;
+  var selectedSummaryTypeOption = summaryTypeOptions.find(function (item) {
+    return item.value === summaryType;
+  }) || summaryTypeOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSummaryTypes && /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+    classNamePrefix: "chart-summary-types",
+    value: selectedSummaryTypeOption,
+    onChange: onSummaryTypeChange,
+    options: summaryTypeOptions
+  })), renderOtherSummaries());
+};
+BasicSummary.defaultProps = {
+  showSummaryTypes: true,
+  summaryTypeKey: 'y_axis_summary_type',
+  summaryMethodKey: 'y_axis_summary_method',
+  summaryColumnKey: 'y_axis_summary_column_key',
+  supportColumnTypes: [CellType.NUMBER, CellType.DATE],
+  summaryTypeOptions: STATISTIC_SUMMARY_TYPES
+};
+export default BasicSummary;

package/lib/components/settings/widgets/common-data-settings.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import StatisticType from './statistic-type';
+import SelectTable from './select-table';
+import DataFilter from './data-filter';
+import Divider from './divider';
+import { generateChartConfig } from '../../../utils';
+var CommonDataSettings = function CommonDataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    FilterSettings = _ref.FilterSettings,
+    onChange = _ref.onChange;
+  var onTableChange = useCallback(function (option) {
+    var config = statistic.config;
+    var table_id = config.table_id;
+    var selectedTableId = option.value;
+    if (selectedTableId === table_id) return;
+    onChange && onChange({
+      table_id: selectedTableId,
+      filters: [],
+      filter_conjunction: 'And'
+    });
+  }, [statistic, onChange]);
+  var generateConfig = useCallback(function (config) {
+    return generateChartConfig(config, tables);
+  }, [tables]);
+  var table_id = statistic.config.table_id;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticType, {
+    statistic: statistic,
+    generateChartConfig: generateConfig,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(SelectTable, {
+    tables: tables,
+    selectedTableId: table_id,
+    onSettingUpdate: onTableChange
+  }), /*#__PURE__*/React.createElement(DataFilter, {
+    tables: tables,
+    statistic: statistic,
+    onChange: onChange,
+    FilterSettings: FilterSettings
+  }), /*#__PURE__*/React.createElement(Divider, null));
+};
+export default CommonDataSettings;

package/lib/components/settings/widgets/data-filter/index.css

@@ -0,0 +1,17 @@
+.seatable-app-custom-edit-page .seastatistic-data-filter {
+  width: 100%;
+  padding: 3px 4px;
+  border-radius: 4px;
+  line-height: 22px;
+}
+
+.seatable-app-custom-edit-page .seastatistic-data-filter:hover {
+  cursor: pointer;
+  background-color: #efefef;
+}
+
+.seatable-app-custom-edit-page .seastatistic-data-filter .dtable-icon-filter {
+  font-size: 14px;
+  color: #666;
+  margin-right: 10px;
+}

package/lib/components/settings/widgets/data-filter/index.js

@@ -0,0 +1,76 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useMemo, useState } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { getTableById } from 'dtable-utils';
+import { eventStopPropagation, generatorKey } from '../../../../utils';
+import intl from '../../../../intl';
+import './index.css';
+var DataFilter = function DataFilter(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    FilterSettings = _ref.FilterSettings,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFilterSetterShow = _useState2[0],
+    setIsFilterSetterShow = _useState2[1];
+  var toggleFilterPopover = useCallback(function (event) {
+    eventStopPropagation(event);
+    setIsFilterSetterShow(!isFilterSetterShow);
+  }, [isFilterSetterShow]);
+  var updateFilters = useCallback(function (update) {
+    onChange && onChange(update);
+  }, [onChange]);
+  var id = useMemo(function () {
+    return 'seastatistic-data-filter-' + generatorKey();
+  }, []);
+  var table = useMemo(function () {
+    var config = statistic.config;
+    var table_id = config.table_id;
+    return getTableById(tables, table_id);
+  }, [tables, statistic]);
+  var filterMessage = useMemo(function () {
+    var config = statistic.config;
+    var filters = config.filters;
+    var filterMessage = intl.get('Filter');
+    if (filters.length === 1) {
+      filterMessage = intl.get('1 Filter');
+    } else if (filters.length > 1) {
+      filterMessage = filters.length + ' ' + intl.get('Filters');
+    }
+    return filterMessage;
+  }, [statistic]);
+  var filterConjunction = useMemo(function () {
+    var config = statistic.config;
+    var filter_conjunction = config.filter_conjunction;
+    return filter_conjunction || 'And';
+  }, [statistic]);
+  var collaborators = window.seaStatistic.context.getCollaboratorsFromCache();
+  var config = statistic.config;
+  var filters = config.filters;
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Data_settings')), table ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "seastatistic-data-filter",
+    onClick: toggleFilterPopover
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-filter"
+  }), /*#__PURE__*/React.createElement("span", null, filterMessage)), isFilterSetterShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSettings, {
+    isNeedSubmit: true,
+    isPre: true,
+    target: id,
+    filters: filters,
+    filterConjunction: filterConjunction,
+    columns: table.columns,
+    collaborators: collaborators,
+    hidePopover: toggleFilterPopover,
+    update: updateFilters
+  }))) : /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "seastatistic-data-filter disabled"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-filter"
+  }), /*#__PURE__*/React.createElement("span", null, filterMessage)));
+};
+export default DataFilter;

package/lib/components/settings/widgets/data-sort.js

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableRadio from "dtable-ui-component/lib/DTableRadio";
+import { eventStopPropagation } from '../../../utils/';
+import { STATISTIC_DATA_SORT_TYPE, STATISTIC_DATA_SORT_TYPES, STATISTIC_DATA_SORT_TYPE_SHOW } from '../../../constants';
+import intl from '../../../intl';
+var DataSort = function DataSort(_ref) {
+  var statistic = _ref.statistic,
+    onChange = _ref.onChange;
+  var onChangeSortType = useCallback(function (event, sortType) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var sort_type = config.sort_type;
+    var validSortType = sortType === STATISTIC_DATA_SORT_TYPE.NOT_SORTED ? '' : sortType;
+    if (sort_type === validSortType) return;
+    onChange && onChange({
+      sort_type: validSortType
+    });
+  }, [statistic, onChange]);
+  var sortType = statistic.config.sort_type;
+  var selectedSortType = sortType || STATISTIC_DATA_SORT_TYPE.NOT_SORTED;
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Data_sort')), STATISTIC_DATA_SORT_TYPES.map(function (sortType, index) {
+    var isChecked = sortType === selectedSortType;
+    return /*#__PURE__*/React.createElement("div", {
+      key: 'chart-group-item-' + index,
+      className: "chart-group-item"
+    }, /*#__PURE__*/React.createElement(DTableRadio, {
+      isChecked: isChecked,
+      onCheckedChange: function onCheckedChange(event) {
+        return onChangeSortType(event, sortType);
+      },
+      label: intl.get(STATISTIC_DATA_SORT_TYPE_SHOW[sortType])
+    }));
+  }));
+};
+export default DataSort;