sea-chart 0.0.1 → 0.0.2

package/{lib/components → dist}/settings/table-settings/data-settings.js

@@ -8,31 +8,34 @@ import GroupBy from '../widgets/group-by';
 import Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import NumericSummaryItem from '../widgets/numeric-summary-item';
-import { eventStopPropagation, StatisticsUtils } from '../../../utils';
-import { STATISTIC_SUMMARY_TYPE, STATISTIC_Y_GROUP_TYPE, STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../../constants';
-import intl from '../../../intl';
-var DataSettings = function DataSettings(_ref) {
-  var statistic = _ref.statistic,
-    tables = _ref.tables,
-    FilterSettings = _ref.FilterSettings,
-    onChange = _ref.onChange;
-  var selectedTable = useMemo(function () {
-    var table_id = statistic.config.table_id;
+import { eventStopPropagation, ChartUtils } from '../../utils';
+import { CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_DATE_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const selectedTable = useMemo(() => {
+    const {
+      table_id
+    } = chart.config;
     return getTableById(tables, table_id);
-  }, [tables, statistic.config]);
-  var numericColumns = useMemo(function () {
+  }, [tables, chart.config]);
+  const numericColumns = useMemo(() => {
     if (!selectedTable) return [];
-    var columns = selectedTable.columns;
-    return columns.filter(function (column) {
-      return StatisticsUtils.isNumericSummaryColumn(column) || StatisticsUtils.isDateSummaryColumn(column);
-    });
+    const {
+      columns
+    } = selectedTable;
+    return columns.filter(column => ChartUtils.isNumericSummaryColumn(column) || ChartUtils.isDateSummaryColumn(column));
   }, [selectedTable]);
-  var numericColumnOptions = useMemo(function () {
-    return numericColumns.map(function (column) {
+  const numericColumnOptions = useMemo(() => {
+    return numericColumns.map(column => {
       return {
         value: column,
         label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-          className: "header-icon"
+          className: "sea-chart-column-icon"
         }, /*#__PURE__*/React.createElement("i", {
           className: COLUMNS_ICON_CONFIG[column.type]
         })), /*#__PURE__*/React.createElement("span", {
@@ -41,26 +44,28 @@ var DataSettings = function DataSettings(_ref) {
       };
     });
   }, [numericColumns]);
-  var groupTypeOptions = useMemo(function () {
-    var column_groupby_column_key = statistic.config.column_groupby_column_key;
-    var options = [{
-      value: STATISTIC_Y_GROUP_TYPE.COUNT,
+  const groupTypeOptions = useMemo(() => {
+    const {
+      column_groupby_column_key
+    } = chart.config;
+    let options = [{
+      value: CHART_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", {
+      }, intl.get(CHART_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,
+      value: CHART_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", {
+      }, intl.get(CHART_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')))
     }];
     if (!column_groupby_column_key) {
       options.push({
-        value: STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
+        value: CHART_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", {
@@ -69,28 +74,35 @@ var DataSettings = function DataSettings(_ref) {
       });
     }
     return options;
-  }, [statistic.config]);
-  var onGroupByColumnChange = useCallback(function (option) {
-    var config = statistic.config;
-    var groupby_column_key = config.groupby_column_key;
-    var column = option.value;
-    var newColumnKey = column.key,
-      type = column.type;
-    var validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+  }, [chart.config]);
+  const onGroupByColumnChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_column_key
+    } = config;
+    const column = option.value;
+    const {
+      key: newColumnKey,
+      type
+    } = column;
+    const validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
     if (groupby_column_key === validValue) return;
-    var update = {
+    let update = {
       groupby_column_key: validValue
     };
     if (!validValue) {
       update['groupby_date_granularity'] = null;
       update['groupby_geolocation_granularity'] = null;
     } else {
-      if (StatisticsUtils.isDateSummaryColumn(column)) {
-        update['groupby_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+      if (ChartUtils.isDateSummaryColumn(column)) {
+        update['groupby_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['groupby_geolocation_granularity'] = null;
       } else if (type === CellType.GEOLOCATION) {
-        var _ref2 = column.data || {},
-          geo_format = _ref2.geo_format;
+        const {
+          geo_format
+        } = column.data || {};
         if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
           update['groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
         } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
@@ -104,34 +116,48 @@ var DataSettings = function DataSettings(_ref) {
       }
     }
     onChange && onChange(update);
-  }, [statistic, onChange]);
-  var onGroupbyDateGranularityChange = useCallback(function (option) {
-    var config = statistic.config;
-    var groupby_date_granularity = config.groupby_date_granularity;
-    var value = option.value;
+  }, [chart, onChange]);
+  const onGroupbyDateGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_date_granularity
+    } = config;
+    const value = option.value;
     if (value === groupby_date_granularity) return;
     onChange && onChange({
       groupby_date_granularity: value
     });
-  }, [statistic, onChange]);
-  var onGroupbyGeolocationGranularityChange = useCallback(function (option) {
-    var config = statistic.config;
-    var groupby_geolocation_granularity = config.groupby_geolocation_granularity;
-    var value = option.value;
+  }, [chart, onChange]);
+  const onGroupbyGeolocationGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      groupby_geolocation_granularity
+    } = config;
+    const value = option.value;
     if (value === groupby_geolocation_granularity) return;
     onChange && onChange({
       groupby_geolocation_granularity: value
     });
-  }, [statistic, onChange]);
-  var onColumnGroupByColumnChange = useCallback(function (option) {
-    var config = statistic.config;
-    var column_groupby_column_key = config.column_groupby_column_key;
-    var column = option.value;
-    var newColumnKey = column.key,
-      type = column.type;
-    var validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
+  }, [chart, onChange]);
+  const onColumnGroupByColumnChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_column_key
+    } = config;
+    const column = option.value;
+    const {
+      key: newColumnKey,
+      type
+    } = column;
+    const validValue = newColumnKey === 'Groupby_null' ? null : newColumnKey;
     if (column_groupby_column_key === validValue) return;
-    var update = {
+    let update = {
       column_groupby_column_key: validValue,
       summary_columns: []
     };
@@ -140,11 +166,12 @@ var DataSettings = function DataSettings(_ref) {
       update['column_groupby_geolocation_granularity'] = null;
     } else {
       if (DATE_COLUMN_OPTIONS.includes(type)) {
-        update['column_groupby_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['column_groupby_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['column_groupby_geolocation_granularity'] = null;
       } else if (type === CellType.GEOLOCATION) {
-        var _ref3 = column.data || {},
-          geo_format = _ref3.geo_format;
+        const {
+          geo_format
+        } = column.data || {};
         if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
           update['column_groupby_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
         } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
@@ -158,115 +185,137 @@ var DataSettings = function DataSettings(_ref) {
       }
     }
     onChange && onChange(update);
-  }, [statistic, onChange]);
-  var onColumnGroupbyDateGranularityChange = useCallback(function (option) {
-    var config = statistic.config;
-    var column_groupby_date_granularity = config.column_groupby_date_granularity;
-    var value = option.value;
+  }, [chart, onChange]);
+  const onColumnGroupbyDateGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_date_granularity
+    } = config;
+    const value = option.value;
     if (value === column_groupby_date_granularity) return;
     onChange && onChange({
       column_groupby_date_granularity: value
     });
-  }, [statistic, onChange]);
-  var onColumnGroupbyGeolocationGranularityChange = useCallback(function (option) {
-    var config = statistic.config;
-    var column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity;
-    var value = option.value;
+  }, [chart, onChange]);
+  const onColumnGroupbyGeolocationGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_geolocation_granularity
+    } = config;
+    const value = option.value;
     if (value === column_groupby_geolocation_granularity) return;
     onChange && onChange({
       column_groupby_geolocation_granularity: value
     });
-  }, [statistic, onChange]);
-  var onIncludeEmptyChange = useCallback(function (event) {
+  }, [chart, onChange]);
+  const onIncludeEmptyChange = useCallback(event => {
     eventStopPropagation(event);
-    var config = statistic.config;
-    var groupby_include_empty_cells = config.groupby_include_empty_cells;
+    const {
+      config
+    } = chart;
+    const {
+      groupby_include_empty_cells
+    } = config;
     onChange && onChange({
       groupby_include_empty_cells: !groupby_include_empty_cells
     });
-  }, [statistic, onChange]);
-  var onGroupTypeChange = useCallback(function (option) {
-    var value = option.value;
-    var config = statistic.config;
-    var column_groupby_column_key = config.column_groupby_column_key,
-      column_groupby_date_granularity = config.column_groupby_date_granularity,
-      column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity,
-      column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
-      summary_columns = config.summary_columns,
-      summary_type = config.summary_type,
-      summary_method = config.summary_method,
-      summary_column_key = config.summary_column_key;
+  }, [chart, onChange]);
+  const onGroupTypeChange = useCallback(option => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    let {
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column,
+      summary_columns,
+      summary_type,
+      summary_method,
+      summary_column_key
+    } = config;
     column_groupby_column_key = column_groupby_column_key || null;
     column_groupby_date_granularity = column_groupby_date_granularity || null;
     column_groupby_geolocation_granularity = column_groupby_geolocation_granularity || null;
-    if (value === STATISTIC_Y_GROUP_TYPE.COUNT) {
-      summary_type = STATISTIC_SUMMARY_TYPE.COUNT;
+    if (value === CHART_Y_GROUP_TYPE.COUNT) {
+      summary_type = CHART_SUMMARY_TYPE.COUNT;
       column_groupby_multiple_numeric_column = false;
       summary_columns = [];
       summary_column_key = null;
       summary_method = '';
-    } else if (value === STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
-      summary_type = STATISTIC_SUMMARY_TYPE.ADVANCED;
+    } else if (value === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+      summary_type = CHART_SUMMARY_TYPE.ADVANCED;
       column_groupby_multiple_numeric_column = false;
       summary_columns = [];
-      summary_method = summary_method || STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+      summary_method = summary_method || CHART_SUMMARY_CALCULATION_METHOD[0];
       summary_column_key = null;
       if (numericColumns && numericColumns[0]) {
         summary_column_key = numericColumns[0].key;
-        summary_method = StatisticsUtils.isDateSummaryColumn(numericColumns[0]) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD[0] : STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+        summary_method = ChartUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
       }
-    } else if (value === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
-      summary_type = STATISTIC_SUMMARY_TYPE.ADVANCED;
+    } else if (value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+      summary_type = CHART_SUMMARY_TYPE.ADVANCED;
       column_groupby_multiple_numeric_column = true;
       summary_columns = [];
       column_groupby_column_key = null;
       column_groupby_date_granularity = null;
       column_groupby_geolocation_granularity = null;
-      summary_method = summary_method || STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+      summary_method = summary_method || CHART_SUMMARY_CALCULATION_METHOD[0];
       summary_column_key = null;
       if (numericColumns && numericColumns[0]) {
         summary_column_key = numericColumns[0].key;
-        summary_method = StatisticsUtils.isDateSummaryColumn(numericColumns[0]) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD[0] : STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+        summary_method = ChartUtils.isDateSummaryColumn(numericColumns[0]) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
       }
     }
-    var update = {
-      column_groupby_column_key: column_groupby_column_key,
-      column_groupby_date_granularity: column_groupby_date_granularity,
-      column_groupby_geolocation_granularity: column_groupby_geolocation_granularity,
-      column_groupby_multiple_numeric_column: column_groupby_multiple_numeric_column,
-      summary_columns: summary_columns,
-      summary_type: summary_type,
-      summary_method: summary_method,
-      summary_column_key: summary_column_key
+    const update = {
+      column_groupby_column_key,
+      column_groupby_date_granularity,
+      column_groupby_geolocation_granularity,
+      column_groupby_multiple_numeric_column,
+      summary_columns,
+      summary_type,
+      summary_method,
+      summary_column_key
     };
     onChange && onChange(update);
-  }, [statistic, numericColumns, onChange]);
-  var getSelectedGroupType = useCallback(function () {
-    var config = statistic.config;
-    var column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
-      summary_type = config.summary_type,
-      column_groupby_column_key = config.column_groupby_column_key;
-    if (summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED && column_groupby_column_key) {
+  }, [chart, numericColumns, onChange]);
+  const getSelectedGroupType = useCallback(() => {
+    const {
+      config
+    } = chart;
+    const {
+      column_groupby_multiple_numeric_column,
+      summary_type,
+      column_groupby_column_key
+    } = config;
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED && column_groupby_column_key) {
       return groupTypeOptions[1];
     }
     if (column_groupby_multiple_numeric_column) {
-      return groupTypeOptions.find(function (item) {
-        return item.value === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN;
-      });
+      return groupTypeOptions.find(item => item.value === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN);
     }
-    if (summary_type === STATISTIC_SUMMARY_TYPE.COUNT) {
+    if (summary_type === CHART_SUMMARY_TYPE.COUNT) {
       return groupTypeOptions[0];
     }
-    if (summary_type === STATISTIC_SUMMARY_TYPE.ADVANCED) {
+    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
       return groupTypeOptions[1];
     }
-  }, [statistic, groupTypeOptions]);
-  var onAddNumericColumn = useCallback(function (column) {
-    var config = statistic.config;
-    var summary_columns = config.summary_columns;
-    var columnKey = column.key;
-    var newSummaryColumns = [];
-    var summaryMethod = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD[0] : STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+  }, [chart, groupTypeOptions]);
+  const onAddNumericColumn = useCallback(column => {
+    const {
+      config
+    } = chart;
+    let {
+      summary_columns
+    } = config;
+    const columnKey = column.key;
+    let newSummaryColumns = [];
+    const summaryMethod = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD[0] : CHART_SUMMARY_CALCULATION_METHOD[0];
     if (Array.isArray(summary_columns)) {
       newSummaryColumns = summary_columns.slice(0);
       newSummaryColumns.push({
@@ -282,36 +331,47 @@ var DataSettings = function DataSettings(_ref) {
     onChange && onChange({
       summary_columns: newSummaryColumns
     });
-  }, [statistic, onChange]);
-  var onDeleteNumericColumnItem = useCallback(function (index) {
-    var config = statistic.config;
-    var summary_columns = config.summary_columns;
+  }, [chart, onChange]);
+  const onDeleteNumericColumnItem = useCallback(index => {
+    const {
+      config
+    } = chart;
+    let {
+      summary_columns
+    } = config;
     summary_columns = summary_columns || [];
-    var newSummaryColumns = summary_columns.slice(0);
+    let newSummaryColumns = summary_columns.slice(0);
     newSummaryColumns.splice(index - 1, 1);
     onChange && onChange({
       summary_columns: newSummaryColumns
     });
-  }, [statistic, onChange]);
-  var onGroupbyNumericColumnChange = useCallback(function (option, index) {
-    var column = option.value;
-    var config = statistic.config;
-    var summaryMethods = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
+  }, [chart, onChange]);
+  const onGroupbyNumericColumnChange = useCallback((option, index) => {
+    const column = option.value;
+    const {
+      config
+    } = chart;
+    const summaryMethods = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
     if (index === 0) {
-      var _summary_method = config.summary_method;
-      var summaryMethod = summaryMethods.includes(_summary_method) ? _summary_method : summaryMethods[0];
+      const {
+        summary_method
+      } = config;
+      const summaryMethod = summaryMethods.includes(summary_method) ? summary_method : summaryMethods[0];
       onChange && onChange({
         summary_column_key: column.key,
         summary_method: summaryMethod
       });
       return;
     }
-    var summary_columns = config.summary_columns;
+    let {
+      summary_columns
+    } = config;
     summary_columns = summary_columns || [];
-    var newSummaryColumns = summary_columns.slice(0);
-    var selectedItem = summary_columns[index - 1];
-    var _selectedItem = selectedItem,
-      summary_method = _selectedItem.summary_method;
+    let newSummaryColumns = summary_columns.slice(0);
+    let selectedItem = summary_columns[index - 1];
+    const {
+      summary_method
+    } = selectedItem;
     if (summaryMethods.includes(summary_method)) {
       selectedItem = Object.assign({}, selectedItem, {
         column_key: column.key
@@ -326,20 +386,24 @@ var DataSettings = function DataSettings(_ref) {
     onChange && onChange({
       summary_columns: newSummaryColumns
     });
-  }, [statistic, onChange]);
-  var onSummaryMethodChange = useCallback(function (option, index) {
-    var value = option.value;
-    var config = statistic.config;
+  }, [chart, onChange]);
+  const onSummaryMethodChange = useCallback((option, index) => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
     if (index === 0) {
       onChange && onChange({
         summary_method: value
       });
       return;
     }
-    var summary_columns = config.summary_columns;
+    let {
+      summary_columns
+    } = config;
     summary_columns = summary_columns || [];
-    var newSummaryColumns = summary_columns.slice(0);
-    var selectedItem = summary_columns[index - 1];
+    let newSummaryColumns = summary_columns.slice(0);
+    let selectedItem = summary_columns[index - 1];
     selectedItem = Object.assign({}, selectedItem, {
       summary_method: value
     });
@@ -347,26 +411,24 @@ var DataSettings = function DataSettings(_ref) {
     onChange && onChange({
       summary_columns: newSummaryColumns
     });
-  }, [statistic, onChange]);
-  var renderGroupbyNumericColumns = useCallback(function () {
-    var config = statistic.config;
-    var summary_columns = config.summary_columns,
-      summary_column_key = config.summary_column_key;
+  }, [chart, onChange]);
+  const renderGroupbyNumericColumns = useCallback(() => {
+    const {
+      config
+    } = chart;
+    let {
+      summary_columns,
+      summary_column_key
+    } = config;
     if (!summary_columns || !Array.isArray(summary_columns)) return null;
-    var usedSummaryColumnKeys = summary_columns.map(function (item) {
-      return item.column_key;
-    });
+    let usedSummaryColumnKeys = summary_columns.map(item => item.column_key);
     usedSummaryColumnKeys.push(summary_column_key);
-    return summary_columns.map(function (item, index) {
-      var currentUsedSummaryColumnKeys = usedSummaryColumnKeys.filter(function (columnKey) {
-        return item.column_key !== columnKey;
-      });
+    return summary_columns.map((item, index) => {
+      const currentUsedSummaryColumnKeys = usedSummaryColumnKeys.filter(columnKey => item.column_key !== columnKey);
       return /*#__PURE__*/React.createElement(NumericSummaryItem, {
         key: "number-column-".concat(index),
-        statistic: statistic,
-        numericColumnOptions: numericColumnOptions.filter(function (item) {
-          return !currentUsedSummaryColumnKeys.includes(item.value.key);
-        }),
+        chart: chart,
+        numericColumnOptions: numericColumnOptions.filter(item => !currentUsedSummaryColumnKeys.includes(item.value.key)),
         index: index + 1,
         value: item,
         onDelete: onDeleteNumericColumnItem,
@@ -374,44 +436,40 @@ var DataSettings = function DataSettings(_ref) {
         onSummaryMethodChange: onSummaryMethodChange
       });
     });
-  }, [statistic, numericColumnOptions, onDeleteNumericColumnItem, onGroupbyNumericColumnChange, onSummaryMethodChange]);
-  var renderAdvancedStatistic = useCallback(function () {
-    var config = statistic.config;
-    var table_id = config.table_id,
-      column_groupby_column_key = config.column_groupby_column_key,
-      summary_type = config.summary_type,
-      column_groupby_multiple_numeric_column = config.column_groupby_multiple_numeric_column,
-      summary_column_key = config.summary_column_key,
-      summary_method = config.summary_method,
-      summary_columns = config.summary_columns;
-    if (summary_type !== STATISTIC_SUMMARY_TYPE.ADVANCED) return null;
+  }, [chart, numericColumnOptions, onDeleteNumericColumnItem, onGroupbyNumericColumnChange, onSummaryMethodChange]);
+  const renderAdvancedStatistic = useCallback(() => {
+    const {
+      config
+    } = chart;
+    const {
+      table_id,
+      column_groupby_column_key,
+      summary_type,
+      column_groupby_multiple_numeric_column,
+      summary_column_key,
+      summary_method,
+      summary_columns
+    } = config;
+    if (summary_type !== CHART_SUMMARY_TYPE.ADVANCED) return null;
     if (column_groupby_multiple_numeric_column) {
-      var columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
-      var usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(function (item) {
-        return item.column_key;
-      }) : [];
-      var unUsedSummaryColumns = numericColumns.filter(function (column) {
-        return column.key !== summary_column_key && !usedSummaryColumnKeys.includes(column.key);
-      });
+      const columnGroupbyColumn = getTableColumnByKey(selectedTable, column_groupby_column_key);
+      const usedSummaryColumnKeys = Array.isArray(summary_columns) ? summary_columns.map(item => item.column_key) : [];
+      const unUsedSummaryColumns = numericColumns.filter(column => column.key !== summary_column_key && !usedSummaryColumnKeys.includes(column.key));
       return /*#__PURE__*/React.createElement(React.Fragment, null, !columnGroupbyColumn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
         index: 0,
         value: {
           column_key: summary_column_key,
           summary_method: summary_method
         },
-        statistic: statistic,
-        numericColumnOptions: numericColumnOptions.filter(function (item) {
-          return !usedSummaryColumnKeys.includes(item.value.key);
-        }),
+        chart: chart,
+        numericColumnOptions: numericColumnOptions.filter(item => !usedSummaryColumnKeys.includes(item.value.key)),
         onColumnOptionChange: onGroupbyNumericColumnChange,
         onSummaryMethodChange: onSummaryMethodChange
       }), /*#__PURE__*/React.createElement("div", {
-        className: "statistics-add-number"
+        className: "statistic-add-number"
       }, 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 onAddNumericColumn(unUsedSummaryColumns[0]);
-        }
+        className: "statistic-add-number-columns d-flex align-items-center",
+        onClick: () => onAddNumericColumn(unUsedSummaryColumns[0])
       }, /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-add-table mr-2"
       }), /*#__PURE__*/React.createElement("span", {
@@ -422,7 +480,7 @@ var DataSettings = function DataSettings(_ref) {
       showSummaryTypes: false,
       className: "selected-y-axis",
       label: intl.get('Summary_field'),
-      statistic: statistic,
+      chart: chart,
       selectedTableId: table_id,
       tables: tables,
       summaryTypeKey: 'summary_type',
@@ -430,21 +488,24 @@ var DataSettings = function DataSettings(_ref) {
       summaryColumnKey: 'summary_column_key',
       onChange: onChange
     });
-  }, [statistic, tables, numericColumns, selectedTable, onChange, numericColumnOptions, onGroupbyNumericColumnChange, onSummaryMethodChange, renderGroupbyNumericColumns, onAddNumericColumn]);
-  var config = statistic.config;
-  var table_id = config.table_id,
-    groupby_column_key = config.groupby_column_key,
-    groupby_date_granularity = config.groupby_date_granularity,
-    groupby_geolocation_granularity = config.groupby_geolocation_granularity,
-    groupby_include_empty_cells = config.groupby_include_empty_cells,
-    column_groupby_column_key = config.column_groupby_column_key,
-    column_groupby_date_granularity = config.column_groupby_date_granularity,
-    column_groupby_geolocation_granularity = config.column_groupby_geolocation_granularity;
+  }, [chart, tables, numericColumns, selectedTable, onChange, numericColumnOptions, onGroupbyNumericColumnChange, onSummaryMethodChange, renderGroupbyNumericColumns, onAddNumericColumn]);
+  const {
+    config
+  } = chart;
+  const {
+    table_id,
+    groupby_column_key,
+    groupby_date_granularity,
+    groupby_geolocation_granularity,
+    groupby_include_empty_cells,
+    column_groupby_column_key,
+    column_groupby_date_granularity,
+    column_groupby_geolocation_granularity
+  } = config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
-    statistic: statistic,
+    chart: chart,
     tables: tables,
-    onChange: onChange,
-    FilterSettings: FilterSettings
+    onChange: onChange
   }), /*#__PURE__*/React.createElement(GroupBy, {
     tables: tables,
     className: "selected-x-axis",
@@ -477,7 +538,7 @@ var DataSettings = function DataSettings(_ref) {
   }), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
   }), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
     classNamePrefix: "chart-summary-types",
     value: getSelectedGroupType(),