sea-chart 0.0.1

package/lib/components/settings/combination-settings/style-settings.js

@@ -0,0 +1,183 @@
+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 DisplayValuesSettings from '../widgets/display-values-settings';
+import { eventStopPropagation } from '../../../utils';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../../constants';
+import intl from '../../../intl';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    onChange = _ref.onChange,
+    xLabel = _ref.xLabel;
+  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 onToggleYAxisAutoRange = useCallback(function (key) {
+    var config = statistic.config;
+    var update = _defineProperty({}, key, config[key] === undefined ? false : !config[key]);
+    onChange && onChange(update);
+  }, [statistic, onChange]);
+  var onYAxisMinChange = useCallback(function (key, min) {
+    var newMin = parseInt(min);
+    if (Number.isNaN(newMin)) return;
+    var update = _defineProperty({}, key, newMin);
+    onChange && onChange(update);
+  }, [onChange]);
+  var onYAxisMaxChange = useCallback(function (key, max) {
+    var newMax = parseInt(max);
+    if (Number.isNaN(newMax)) return;
+    var update = _defineProperty({}, key, newMax);
+    onChange && onChange(update);
+  }, [onChange]);
+  var onDisplayValueChange = useCallback(function (update) {
+    onChange && onChange(update);
+  }, [onChange]);
+  var config = statistic.config;
+  var x_axis_show_label = config.x_axis_show_label,
+    x_axis_label_position = config.x_axis_label_position,
+    show_y_axis_left_label = config.show_y_axis_left_label,
+    y_axis_left_label_position = config.y_axis_left_label_position,
+    y_axis_right_label_position = config.y_axis_right_label_position,
+    show_y_axis_right_label = config.show_y_axis_right_label,
+    y_axis_min_left = config.y_axis_min_left,
+    y_axis_auto_range_left = config.y_axis_auto_range_left,
+    y_axis_max_left = config.y_axis_max_left,
+    y_axis_auto_range_right = config.y_axis_auto_range_right,
+    y_axis_min_right = config.y_axis_min_right,
+    y_axis_max_right = config.y_axis_max_right,
+    display_data = config.display_data,
+    label_font_size = config.label_font_size;
+  var xAxisLabelPosition = xAxisLabelOptions.find(function (option) {
+    return option.value === x_axis_label_position;
+  }) || xAxisLabelOptions[0];
+  var yLeftAxisLabelPosition = yAxisLabelOptions.find(function (option) {
+    return option.value === y_axis_left_label_position;
+  }) || yAxisLabelOptions[0];
+  var yRightAxisLabelPosition = yAxisLabelOptions.find(function (option) {
+    return option.value === y_axis_right_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(xLabel)), /*#__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(left side)')), /*#__PURE__*/React.createElement(Switch, {
+    key: "show_y_axis_left_label",
+    checked: show_y_axis_left_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'show_y_axis_left_label');
+    }
+  }), show_y_axis_left_label && /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yLeftAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: function onChange(option) {
+      return onAxisLabelPositionChange(option, 'y_axis_left_label_position');
+    }
+  })), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_auto_range_left",
+    checked: y_axis_auto_range_left,
+    placeholder: intl.get('Auto_range'),
+    onChange: function onChange() {
+      return onToggleYAxisAutoRange('y_axis_auto_range_left');
+    }
+  }), !y_axis_auto_range_left && /*#__PURE__*/React.createElement(MinMaxSetting, {
+    min: y_axis_min_left,
+    max: y_axis_max_left,
+    onMinChange: function onMinChange(value) {
+      return onYAxisMinChange('y_axis_min_left', value);
+    },
+    onMaxChange: function onMaxChange(value) {
+      return onYAxisMaxChange('y_axis_max_left', value);
+    }
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Y-axis(right side)')), /*#__PURE__*/React.createElement(Switch, {
+    key: "show_y_axis_right_label",
+    checked: show_y_axis_right_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'show_y_axis_right_label');
+    }
+  }), show_y_axis_right_label && /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yRightAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: function onChange(option) {
+      return onAxisLabelPositionChange(option, 'y_axis_right_label_position');
+    }
+  })), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_auto_range_right",
+    checked: y_axis_auto_range_right,
+    placeholder: intl.get('Auto_range'),
+    onChange: function onChange() {
+      return onToggleYAxisAutoRange('y_axis_auto_range_right');
+    }
+  }), !y_axis_auto_range_right && /*#__PURE__*/React.createElement(MinMaxSetting, {
+    min: y_axis_min_right,
+    max: y_axis_max_right,
+    onMinChange: function onMinChange(value) {
+      return onYAxisMinChange('y_axis_min_right', value);
+    },
+    onMaxChange: function onMaxChange(value) {
+      return onYAxisMaxChange('y_axis_max_right', value);
+    }
+  })), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+    isShowValueKey: "display_data",
+    isShowValue: display_data,
+    fontSizeKey: "label_font_size",
+    fontSize: label_font_size,
+    onChange: onDisplayValueChange
+  }));
+};
+StyleSettings.defaultProps = {
+  xLabel: 'X_axis'
+};
+export default StyleSettings;

package/lib/components/settings/dashboard-settings/data-settings.js

@@ -0,0 +1,167 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React, { Fragment, useCallback, useMemo } from 'react';
+import { FormGroup } from 'reactstrap';
+import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import CommonDataSettings from '../widgets/common-data-settings';
+import { StatisticsUtils } from '../../../utils';
+import { STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_SUPPORT_COLUMNS, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../../constants';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var tables = _ref.tables,
+    statistic = _ref.statistic,
+    FilterSettings = _ref.FilterSettings,
+    onChange = _ref.onChange;
+  var summaryMethodsOptions = useMemo(function () {
+    var numberCardSummaryMethod = [BASIC_NUMBER_CARD_CALCULATION_METHOD].concat(_toConsumableArray(STATISTIC_SUMMARY_CALCULATION_METHOD));
+    return numberCardSummaryMethod.map(function (method) {
+      return {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, intl.get(STATISTIC_SUMMARY_SHOW[method])),
+        value: method
+      };
+    });
+  }, []);
+  var selectedTable = useMemo(function () {
+    var selectedTableId = statistic.config.table_id;
+    return getTableById(tables, selectedTableId);
+  }, [statistic.config, tables]);
+  var validColumns = useMemo(function () {
+    var columns = selectedTable && Array.isArray(selectedTable.columns) ? selectedTable.columns : [];
+    if (!columns || !Array.isArray(columns)) return [];
+    return columns.filter(function (column) {
+      return STATISTIC_SUPPORT_COLUMNS.includes(column.type);
+    });
+  }, [selectedTable]);
+  var numericColumns = useMemo(function () {
+    return validColumns.filter(function (column) {
+      return StatisticsUtils.isNumericSummaryColumn(column);
+    });
+  }, [validColumns]);
+  var numericColumnOptions = useMemo(function () {
+    var options = numericColumns.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));
+  }, [numericColumns]);
+  var onSelectTargetValueColumn = useCallback(function (option) {
+    var config = statistic.config;
+    var target_value_column_key = config.target_value_column_key;
+    var newColumnKey = option.value.key;
+    if (target_value_column_key === newColumnKey) return;
+    onChange && onChange({
+      target_value_column_key: newColumnKey
+    });
+  }, [statistic, onChange]);
+  var onSelectTotalValueColumn = useCallback(function (option) {
+    var config = statistic.config;
+    var total_value_column_key = config.total_value_column_key;
+    var newColumnKey = option.value.key;
+    if (total_value_column_key === newColumnKey) return;
+    onChange && onChange({
+      total_value_column_key: newColumnKey
+    });
+  }, [statistic, onChange]);
+  var getSelectedMethodOption = useCallback(function (method, summaryMethodsOptions) {
+    return summaryMethodsOptions.find(function (m) {
+      return m.value === method;
+    }) || summaryMethodsOptions[0];
+  }, []);
+  var onSelectTargetValueColumnSummaryMethod = useCallback(function (option) {
+    var config = statistic.config;
+    var target_value_column_summary_method = config.target_value_column_summary_method;
+    var newSummaryMethod = option.value;
+    if (target_value_column_summary_method === newSummaryMethod) return;
+    onChange && onChange({
+      target_value_column_summary_method: newSummaryMethod
+    });
+  }, [statistic, onChange]);
+  var onSelectTotalValueColumnSummaryMethod = useCallback(function (option) {
+    var config = statistic.config;
+    var total_value_column_summary_method = config.total_value_column_summary_method;
+    var newSummaryMethod = option.value;
+    if (total_value_column_summary_method === newSummaryMethod) return;
+    onChange && onChange({
+      total_value_column_summary_method: newSummaryMethod
+    });
+  }, [statistic, onChange]);
+  var renderSummaryMethod = useCallback(function (option) {
+    var config = statistic.config;
+    var target_value_column_summary_method = config.target_value_column_summary_method,
+      total_value_column_summary_method = config.total_value_column_summary_method;
+    var summary_method, onSelectSummaryMethod;
+    if (option.targetColumn === 'target_value_column') {
+      summary_method = target_value_column_summary_method;
+      onSelectSummaryMethod = onSelectTargetValueColumnSummaryMethod;
+    } else {
+      summary_method = total_value_column_summary_method;
+      onSelectSummaryMethod = onSelectTotalValueColumnSummaryMethod;
+    }
+    var selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dtable-plugin-stat-parameter-item"
+    }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedMethodOption,
+      onChange: onSelectSummaryMethod,
+      options: summaryMethodsOptions
+    }));
+  }, [statistic, summaryMethodsOptions, getSelectedMethodOption, onSelectTargetValueColumnSummaryMethod, onSelectTotalValueColumnSummaryMethod]);
+  var _statistic$config = statistic.config,
+    target_value_column_key = _statistic$config.target_value_column_key,
+    total_value_column_key = _statistic$config.total_value_column_key;
+  var selectedTargetValueColumnOption = numericColumnOptions.filter(function (option) {
+    return option.value.key === target_value_column_key;
+  })[0];
+  var selectedTotalValueColumnOption = numericColumnOptions.filter(function (option) {
+    return option.value.key === total_value_column_key;
+  })[0];
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedTargetValueColumnOption,
+    options: numericColumnOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSelectTargetValueColumn
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, renderSummaryMethod({
+    targetColumn: 'target_value_column'
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedTotalValueColumnOption,
+    options: numericColumnOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSelectTotalValueColumn
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, renderSummaryMethod({
+    targetColumn: 'total_value_column'
+  })));
+};
+export default DataSettings;

package/lib/components/settings/dashboard-settings/index.js

@@ -0,0 +1,2 @@
+import DashboardDataSettings from './data-settings';
+export { DashboardDataSettings };

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { STATISTIC_TYPE } from '../../constants';
+import { BarDataSettings } from './bar-settings';
+import { AdvanceBarDataSettings } from './advance-bar-settings';
+import { TimeComparisonDataSettings } from './time-comparison-settings';
+import { PieDataSettings } from './pie-settings';
+import { TableDataSettings } from './table-settings';
+import { HorizontalDataSettings } from './horizontal-bar-settings';
+import { BasicNumberCardDataSettings } from './basic-number-card';
+import { CombinationDataSettings } from './combination-settings';
+import { DashboardDataSettings } from './dashboard-settings';
+var DataSettings = function DataSettings(props) {
+  var statistic = props.statistic;
+  var config = statistic.config;
+  var type = config.type;
+  switch (type) {
+    case STATISTIC_TYPE.BAR:
+    case STATISTIC_TYPE.LINE:
+    case STATISTIC_TYPE.AREA:
+      {
+        return /*#__PURE__*/React.createElement(BarDataSettings, props);
+      }
+    case STATISTIC_TYPE.COMBINATION:
+      {
+        return /*#__PURE__*/React.createElement(CombinationDataSettings, props);
+      }
+    case STATISTIC_TYPE.HORIZONTAL_BAR:
+    case STATISTIC_TYPE.HORIZONTAL_GROUP_BAR:
+      {
+        return /*#__PURE__*/React.createElement(HorizontalDataSettings, props);
+      }
+    case STATISTIC_TYPE.BAR_GROUP:
+    case STATISTIC_TYPE.BAR_STACK:
+    case STATISTIC_TYPE.LINE_GROUP:
+    case STATISTIC_TYPE.AREA_GROUP:
+      {
+        return /*#__PURE__*/React.createElement(AdvanceBarDataSettings, props);
+      }
+    case STATISTIC_TYPE.COMPARE_BAR:
+      {
+        return /*#__PURE__*/React.createElement(TimeComparisonDataSettings, props);
+      }
+    case STATISTIC_TYPE.PIE:
+    case STATISTIC_TYPE.RING:
+    case STATISTIC_TYPE.TREE_MAP:
+      {
+        return /*#__PURE__*/React.createElement(PieDataSettings, props);
+      }
+    case STATISTIC_TYPE.BASIC_NUMBER_CARD:
+      {
+        return /*#__PURE__*/React.createElement(BasicNumberCardDataSettings, props);
+      }
+    case STATISTIC_TYPE.DASHBOARD:
+      {
+        return /*#__PURE__*/React.createElement(DashboardDataSettings, props);
+      }
+    case STATISTIC_TYPE.TABLE:
+      {
+        return /*#__PURE__*/React.createElement(TableDataSettings, props);
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default DataSettings;

package/lib/components/settings/horizontal-bar-settings/data-settings.js

@@ -0,0 +1,45 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback } from 'react';
+import { BarDataSettings } from '../bar-settings';
+import { AdvanceBarDataSettings } from '../advance-bar-settings';
+import { StatisticsUtils } from '../../../utils';
+import { BAR_MAP_TO_HORIZONTAL_MAP, STATISTIC_TYPE } from '../../../constants/';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    oldOnChange = _ref.onChange;
+  var onChange = useCallback(function (update) {
+    var oldConfig = statistic.config;
+    if (update.type && update.type !== oldConfig.type) {
+      oldOnChange && oldOnChange(update);
+      return;
+    }
+    var updateConfig = {};
+    var newConfig = _objectSpread(_objectSpread({}, oldConfig), update);
+    Object.keys(newConfig).forEach(function (key) {
+      if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
+        updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
+      } else {
+        updateConfig[key] = newConfig[key];
+      }
+    });
+    oldOnChange && oldOnChange(updateConfig);
+  }, [statistic, oldOnChange]);
+  var config = statistic.config,
+    id = statistic.id;
+  var newConfig = StatisticsUtils.convertStatisticConfig(config);
+  var newStatistic = {
+    id: id,
+    config: newConfig
+  };
+  var type = config.type;
+  var BarGroupComponent = type === STATISTIC_TYPE.HORIZONTAL_BAR ? BarDataSettings : AdvanceBarDataSettings;
+  return /*#__PURE__*/React.createElement(BarGroupComponent, {
+    xLabel: 'Vertical_axis',
+    yLabel: 'Horizontal_axis',
+    statistic: newStatistic,
+    tables: tables,
+    onChange: onChange
+  });
+};
+export default DataSettings;

package/lib/components/settings/horizontal-bar-settings/index.js

@@ -0,0 +1,3 @@
+import HorizontalDataSettings from './data-settings';
+import HorizontalStyleSettings from './style-settings';
+export { HorizontalDataSettings, HorizontalStyleSettings };

package/lib/components/settings/horizontal-bar-settings/style-settings.js

@@ -0,0 +1,38 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback } from 'react';
+import { AdvanceBarStyleSettings } from '../advance-bar-settings';
+import { BarStyleSettings } from '../bar-settings';
+import { StatisticsUtils } from '../../../utils';
+import { BAR_MAP_TO_HORIZONTAL_MAP, STATISTIC_TYPE } from '../../../constants';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    oldOnChange = _ref.onChange;
+  var onChange = useCallback(function (update) {
+    var updateConfig = {};
+    var newConfig = _objectSpread(_objectSpread({}, statistic.config), update);
+    Object.keys(newConfig).forEach(function (key) {
+      if (BAR_MAP_TO_HORIZONTAL_MAP[key]) {
+        updateConfig[BAR_MAP_TO_HORIZONTAL_MAP[key]] = newConfig[key];
+      } else {
+        updateConfig[key] = newConfig[key];
+      }
+    });
+    oldOnChange && oldOnChange(updateConfig);
+  }, [statistic, oldOnChange]);
+  var config = statistic.config,
+    id = statistic.id;
+  var newConfig = StatisticsUtils.convertStatisticConfig(config);
+  var newStatistic = {
+    id: id,
+    config: newConfig
+  };
+  var type = config.type;
+  var BarStyleComponent = type === STATISTIC_TYPE.HORIZONTAL_BAR ? BarStyleSettings : AdvanceBarStyleSettings;
+  return /*#__PURE__*/React.createElement(BarStyleComponent, {
+    xLabel: 'Vertical_axis',
+    yLabel: 'Horizontal_axis',
+    statistic: newStatistic,
+    onChange: onChange
+  });
+};
+export default StyleSettings;

package/lib/components/settings/index.css

@@ -0,0 +1,73 @@
+.seastatistic-settings {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+
+.seastatistic-settings .seastatistic-settings-type {
+  height: 49px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  border-bottom: 1px solid #e4e4e4;
+  background: #fff;
+  padding-left: 10px;
+}
+
+.seastatistic-settings .seastatistic-settings-type .seastatistic-settings-type-item {
+  text-align: center;
+  line-height: 48px;
+  height: 48px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.seastatistic-settings .seastatistic-settings-type .seastatistic-settings-type-item.selected {
+  color: #ff8000;
+  border-bottom: 2px solid #ff8000;
+}
+
+.seastatistic-settings .statistic-settings-container {
+  height: calc(100% - 37px);
+  overflow-y: scroll;
+  padding: 16px 16px 150px;
+}
+
+.seastatistic-settings .statistics-add-number-columns {
+  color: #bbb;
+  line-height: 1;
+  margin-bottom: 10px;
+}
+
+.seastatistic-settings .statistics-add-number-columns:hover {
+  cursor: pointer;
+  color: #212529;
+}
+
+.seastatistic-settings .statistics-add-number-columns .dtable-icon-add-table {
+  margin-right: 5px;
+  display: inline-block;
+  transform: scale(.8);
+}
+
+.seastatistic-settings .statistics-add-number-columns .add-number-column-description {
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.seastatistic-settings .delete-numeric-summary-item-content {
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+.seastatistic-settings .delete-numeric-summary-item-content:hover {
+  cursor: pointer;
+}
+
+.seastatistic-settings .delete-numeric-summary-item-content .delete-icon {
+  font-size: 14px;
+}

package/lib/components/settings/index.js

@@ -0,0 +1,74 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import classnames from 'classnames';
+import { eventStopPropagation } from '../../utils';
+import DataSettings from './data-settings';
+import StyleSettings from './style-settings';
+import { STATISTIC_SETTINGS_TYPE } from '../../constants';
+import intl from '../../intl';
+import './index.css';
+var Settings = function Settings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    onChange = _ref.onChange,
+    FilterSettings = _ref.FilterSettings,
+    CustomStyleSettings = _ref.CustomStyleSettings;
+  var _useState = useState(STATISTIC_SETTINGS_TYPE.DATA),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var onChartSettingsTypeChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var newType = event.target.getAttribute('data');
+    if (type === newType) return;
+    setType(newType);
+  }, [type]);
+  var modifyStatistic = useCallback(function (update) {
+    var newStatistic = _objectSpread(_objectSpread({}, statistic), {}, {
+      config: _objectSpread(_objectSpread({}, statistic.config), update)
+    });
+    onChange && onChange(newStatistic, STATISTIC_SETTINGS_TYPE.DATA);
+  }, [statistic, onChange]);
+  var modifyStyle = useCallback(function (update) {
+    var newStatistic = _objectSpread(_objectSpread({}, statistic), update);
+    onChange && onChange(newStatistic, STATISTIC_SETTINGS_TYPE.STYLE);
+  }, [statistic, onChange]);
+  var renderStyleSettings = useCallback(function () {
+    if (CustomStyleSettings) return /*#__PURE__*/React.createElement(CustomStyleSettings, {
+      statistic: statistic,
+      onChange: modifyStyle
+    });
+    return /*#__PURE__*/React.createElement(StyleSettings, {
+      statistic: statistic,
+      onChange: modifyStyle
+    });
+  }, [CustomStyleSettings, statistic, modifyStyle]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-settings"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-settings-type",
+    onClick: onChartSettingsTypeChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('seastatistic-settings-type-item', {
+      'selected': type === STATISTIC_SETTINGS_TYPE.DATA
+    }),
+    data: STATISTIC_SETTINGS_TYPE.DATA
+  }, intl.get('Data_settings')), /*#__PURE__*/React.createElement("div", {
+    className: classnames('seastatistic-settings-type-item ml-4', {
+      'selected': type === STATISTIC_SETTINGS_TYPE.STYLE
+    }),
+    data: STATISTIC_SETTINGS_TYPE.STYLE
+  }, intl.get('Style_settings'))), /*#__PURE__*/React.createElement("div", {
+    className: "statistic-settings-container position-relative"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "statistic-settings-content"
+  }, type === STATISTIC_SETTINGS_TYPE.DATA && /*#__PURE__*/React.createElement(DataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    onChange: modifyStatistic
+  }), type === STATISTIC_SETTINGS_TYPE.STYLE && renderStyleSettings())));
+};
+export default Settings;
+export { StyleSettings };