sea-chart 0.0.1 → 0.0.2

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

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React, { useCallback } from 'react';
 import { FormGroup, Label } from 'reactstrap';
 import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
@@ -8,23 +7,30 @@ import GroupBy from '../widgets/group-by';
 import Switch from '../widgets/switch';
 import BasicSummary from '../widgets/basic-summary';
 import TimePicker from '../widgets/time-picker';
-import { eventStopPropagation } from '../../../utils';
-import { STATISTIC_SUMMARY_TYPE, 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 onXAxisColumnChange = useCallback(function (option) {
-    var config = statistic.config;
-    var x_axis_column_key = config.x_axis_column_key;
-    var column = option.value;
-    var newXAxisColumnKey = column.key,
-      type = column.type;
-    var validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
+import { eventStopPropagation } from '../../utils';
+import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const onXAxisColumnChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      x_axis_column_key
+    } = config;
+    const column = option.value;
+    const {
+      key: newXAxisColumnKey,
+      type
+    } = column;
+    const validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
     if (x_axis_column_key === validValue) return;
-    var update = {
+    let update = {
       x_axis_column_key: validValue
     };
     if (!validValue) {
@@ -32,11 +38,12 @@ var DataSettings = function DataSettings(_ref) {
       update['x_axis_geolocation_granularity'] = null;
     } else {
       if (DATE_COLUMN_OPTIONS.includes(type)) {
-        update['x_axis_date_granularity'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['x_axis_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['x_axis_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['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
         } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
@@ -50,53 +57,69 @@ var DataSettings = function DataSettings(_ref) {
       }
     }
     onChange && onChange(update);
-  }, [statistic, onChange]);
-  var onGroupbyDateGranularityChange = useCallback(function (option) {
-    var config = statistic.config;
-    var x_axis_date_granularity = config.x_axis_date_granularity;
-    var value = option.value;
+  }, [chart, onChange]);
+  const onGroupbyDateGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      x_axis_date_granularity
+    } = config;
+    const value = option.value;
     if (value === x_axis_date_granularity) return;
     onChange && onChange({
       x_axis_date_granularity: value
     });
-  }, [statistic, onChange]);
-  var onGroupbyGeolocationGranularityChange = useCallback(function (option) {
-    var config = statistic.config;
-    var x_axis_geolocation_granularity = config.x_axis_geolocation_granularity;
-    var value = option.value;
+  }, [chart, onChange]);
+  const onGroupbyGeolocationGranularityChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      x_axis_geolocation_granularity
+    } = config;
+    const value = option.value;
     if (value === x_axis_geolocation_granularity) return;
     onChange && onChange({
       x_axis_geolocation_granularity: value
     });
-  }, [statistic, onChange]);
-  var onDateChange = useCallback(function (key, value) {
-    var config = statistic.config;
-    var oldValue = config[key];
+  }, [chart, onChange]);
+  const onDateChange = useCallback((key, value) => {
+    const {
+      config
+    } = chart;
+    const oldValue = config[key];
     if (value === oldValue) return;
-    onChange && onChange(_defineProperty({}, key, value));
-  }, [statistic, onChange]);
-  var onDisplayIncreaseChange = useCallback(function (event) {
+    onChange && onChange({
+      [key]: value
+    });
+  }, [chart, onChange]);
+  const onDisplayIncreaseChange = useCallback(event => {
     eventStopPropagation(event);
-    var config = statistic.config;
-    var display_increase = config.display_increase;
+    const {
+      config
+    } = chart;
+    const {
+      display_increase
+    } = config;
     onChange && onChange({
       display_increase: !display_increase
     });
-  }, [statistic, onChange]);
-  var _statistic$config = statistic.config,
-    table_id = _statistic$config.table_id,
-    x_axis_column_key = _statistic$config.x_axis_column_key,
-    x_axis_date_granularity = _statistic$config.x_axis_date_granularity,
-    x_axis_geolocation_granularity = _statistic$config.x_axis_geolocation_granularity,
-    x_axis_date_range_start = _statistic$config.x_axis_date_range_start,
-    x_axis_date_range_end = _statistic$config.x_axis_date_range_end,
-    x_axis_compared_date_range_start = _statistic$config.x_axis_compared_date_range_start,
-    x_axis_compared_date_range_end = _statistic$config.x_axis_compared_date_range_end,
-    display_increase = _statistic$config.display_increase;
+  }, [chart, onChange]);
+  const {
+    table_id,
+    x_axis_column_key,
+    x_axis_date_granularity,
+    x_axis_geolocation_granularity,
+    x_axis_date_range_start,
+    x_axis_date_range_end,
+    x_axis_compared_date_range_start,
+    x_axis_compared_date_range_end,
+    display_increase
+  } = chart.config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
-    statistic: statistic,
+    chart: chart,
     tables: tables,
-    FilterSettings: FilterSettings,
     onChange: onChange
   }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(GroupBy, {
     tables: tables,
@@ -110,41 +133,33 @@ var DataSettings = function DataSettings(_ref) {
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
   }), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Date_range')), /*#__PURE__*/React.createElement("div", {
     className: "time-input-container"
   }, /*#__PURE__*/React.createElement(TimePicker, {
-    onChange: function onChange(value) {
-      return onDateChange('x_axis_date_range_start', value);
-    },
+    onChange: value => onDateChange('x_axis_date_range_start', value),
     value: x_axis_date_range_start
   }), /*#__PURE__*/React.createElement("div", {
     className: "concat"
   }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
-    onChange: function onChange(value) {
-      return onDateChange('x_axis_date_range_end', value);
-    },
+    onChange: value => onDateChange('x_axis_date_range_end', value),
     value: x_axis_date_range_end
   }))), /*#__PURE__*/React.createElement(FormGroup, {
-    className: "seastatistic-parameter-item"
+    className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Compare_to_date_range')), /*#__PURE__*/React.createElement("div", {
     className: "time-input-container"
   }, /*#__PURE__*/React.createElement(TimePicker, {
-    onChange: function onChange(value) {
-      return onDateChange('x_axis_compared_date_range_start', value);
-    },
+    onChange: value => onDateChange('x_axis_compared_date_range_start', value),
     value: x_axis_compared_date_range_start
   }), /*#__PURE__*/React.createElement("div", {
     className: "concat"
   }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
-    onChange: function onChange(value) {
-      return onDateChange('x_axis_compared_date_range_end', value);
-    },
+    onChange: value => onDateChange('x_axis_compared_date_range_end', value),
     value: x_axis_compared_date_range_end
   }))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(BasicSummary, {
     className: "selected-y-axis",
     label: intl.get('Y_axis'),
-    statistic: statistic,
+    chart: chart,
     selectedTableId: table_id,
     tables: tables,
     onChange: onChange

package/dist/settings/time-comparison-settings/style-settings.js

@@ -0,0 +1,213 @@
+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';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const xAxisLabelOptions = useMemo(() => {
+    return X_LABEL_POSITIONS.map(item => {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  const yAxisLabelOptions = useMemo(() => {
+    return Y_LABEL_POSITIONS.map(item => {
+      return {
+        value: item,
+        label: intl.get(LABEL_POSITION_TYPE_SHOW[item])
+      };
+    });
+  }, []);
+  const onAxisLabelShowChange = useCallback((event, labelKey) => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const value = config[labelKey];
+    onChange && onChange({
+      [labelKey]: !value
+    });
+  }, [chart, onChange]);
+  const onAxisLabelPositionChange = useCallback((option, positionKey) => {
+    const position = option.value;
+    const {
+      config
+    } = chart;
+    const oldValue = config[positionKey];
+    if (position === oldValue) return;
+    onChange && onChange({
+      [positionKey]: position
+    });
+  }, [chart, onChange]);
+  const onYAxisAutoRangeChange = useCallback(event => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      y_axis_auto_range
+    } = config;
+    onChange && onChange({
+      y_axis_auto_range: !y_axis_auto_range
+    });
+  }, [chart, onChange]);
+  const onYAxisMinChange = useCallback(min => {
+    const newMin = parseInt(min);
+    if (Number.isNaN(newMin)) return;
+    const {
+      config
+    } = chart;
+    const {
+      y_axis_min
+    } = config;
+    if (y_axis_min === newMin) return;
+    onChange && onChange({
+      y_axis_min: newMin
+    });
+  }, [chart, onChange]);
+  const onYAxisMaxChange = useCallback(max => {
+    const newMax = parseInt(max);
+    if (Number.isNaN(newMax)) return;
+    const {
+      config
+    } = chart;
+    const {
+      y_axis_max
+    } = config;
+    if (y_axis_max === newMax) return;
+    onChange && onChange({
+      y_axis_max: newMax
+    });
+  }, [chart, onChange]);
+  const onDisplayValueChange = useCallback(event => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      y_axis_show_value
+    } = config;
+    onChange && onChange({
+      y_axis_show_value: !y_axis_show_value
+    });
+  }, [chart, onChange]);
+  const onDisplayPercentageIncreaseChange = useCallback(event => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      display_increase_percentage
+    } = config;
+    onChange && onChange({
+      display_increase_percentage: !display_increase_percentage
+    });
+  }, [chart, onChange]);
+  const onIncreaseDisplayColorChang = useCallback((event, value) => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      increase_display_color
+    } = config;
+    if (increase_display_color === value) return;
+    onChange && onChange({
+      increase_display_color: value
+    });
+  }, [chart, onChange]);
+  const {
+    config
+  } = chart;
+  const {
+    x_axis_show_label,
+    x_axis_label_position,
+    y_axis_show_label,
+    y_axis_label_position,
+    y_axis_auto_range = true,
+    y_axis_min,
+    y_axis_max,
+    y_axis_show_value,
+    display_increase,
+    display_increase_percentage,
+    increase_display_color
+  } = config;
+  const xAxisLabelPosition = xAxisLabelOptions.find(option => option.value === x_axis_label_position) || xAxisLabelOptions[0];
+  const yAxisLabelPosition = yAxisLabelOptions.find(option => option.value === y_axis_label_position) || yAxisLabelOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-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: event => onAxisLabelShowChange(event, 'x_axis_show_label')
+  }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    value: xAxisLabelPosition,
+    options: xAxisLabelOptions,
+    onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
+  })), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-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: event => onAxisLabelShowChange(event, 'y_axis_show_label')
+  }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: option => 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: "sea-chart-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((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 chart-colorinput d-flex justify-content-center align-items-center",
+      onClick: event => 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 chart-check-mark"
+    }))));
+  })))));
+};
+export default StyleSettings;

package/dist/settings/widgets/basic-summary/index.css

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

package/dist/settings/widgets/basic-summary/index.js

@@ -0,0 +1,176 @@
+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 { ChartUtils } from '../../../utils';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPES, CHART_SUMMARY_TYPE, CHART_SUMMARY_CALCULATION_METHOD, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../../constants';
+import intl from '../../../intl';
+import './index.css';
+const BasicSummary = _ref => {
+  let {
+    tables,
+    chart,
+    onChange,
+    summaryTypeOptions: oldSummaryTypeOptions,
+    summaryTypeKey,
+    summaryColumnKey,
+    summaryMethodKey,
+    showSummaryTypes = true,
+    label,
+    supportColumnTypes
+  } = _ref;
+  const selectedTable = useMemo(() => {
+    const {
+      table_id
+    } = chart.config;
+    return getTableById(tables, table_id);
+  }, [tables, chart.config]);
+  const numericColumns = useMemo(() => {
+    if (!selectedTable) return [];
+    const {
+      columns
+    } = selectedTable;
+    return columns.filter(column => supportColumnTypes.includes(CellType.NUMBER) && ChartUtils.isNumericSummaryColumn(column) || supportColumnTypes.includes(CellType.DATE) && ChartUtils.isDateSummaryColumn(column));
+  }, [selectedTable, supportColumnTypes]);
+  const numericColumnOptions = useMemo(() => {
+    return numericColumns.map(column => {
+      return {
+        value: column.key,
+        column: column,
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+          className: "sea-chart-column-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]);
+  const summaryTypeOptions = useMemo(() => {
+    const summaryExplanation = ChartUtils.getSummaryExplanation(chart);
+    return Array.isArray(oldSummaryTypeOptions) ? oldSummaryTypeOptions.map(summaryType => {
+      return {
+        value: summaryType,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "select-module select-module-name ml-0"
+        }, intl.get(CHART_SUMMARY_SHOW[summaryType])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, summaryExplanation[summaryType]))
+      };
+    }) : [];
+  }, [chart, oldSummaryTypeOptions]);
+  const summaryMethodOptions = useMemo(() => {
+    const summaryColumn = numericColumns.find(column => column.key === chart.config[summaryColumnKey]);
+    const methods = ChartUtils.isNumericSummaryColumn(summaryColumn) ? CHART_SUMMARY_CALCULATION_METHOD : CHART_DATE_SUMMARY_CALCULATION_METHOD;
+    return methods.map(item => {
+      return {
+        value: item,
+        label: intl.get(CHART_SUMMARY_SHOW[item])
+      };
+    });
+  }, [chart, numericColumns, summaryColumnKey]);
+  const onSummaryTypeChange = useCallback(option => {
+    const summaryType = option.value;
+    const {
+      config
+    } = chart;
+    const oldValue = config[summaryTypeKey];
+    if (summaryType === oldValue) return;
+    let update = {
+      [summaryTypeKey]: summaryType,
+      [summaryColumnKey]: '',
+      [summaryMethodKey]: ''
+    };
+    if (summaryType === CHART_SUMMARY_TYPE.ADVANCED) {
+      update[summaryMethodKey] = CHART_SUMMARY_CALCULATION_METHOD[0];
+    }
+    if (summaryType === CHART_SUMMARY_TYPE.ADVANCED && numericColumns[0]) {
+      update[summaryColumnKey] = numericColumns[0].key;
+    }
+    onChange && onChange(update);
+  }, [chart, summaryTypeKey, summaryColumnKey, summaryMethodKey, onChange, numericColumns]);
+  const onSummaryColumnChange = useCallback(option => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    const oldValue = config[summaryColumnKey];
+    if (value === oldValue) return;
+    let update = {
+      [summaryColumnKey]: value,
+      [summaryMethodKey]: config[summaryMethodKey]
+    };
+    const oldColumn = numericColumns.find(column => column.key === oldValue);
+    const newColumn = numericColumns.find(column => column.key === value);
+    const isDateColumn = ChartUtils.isDateSummaryColumn(newColumn);
+    if (ChartUtils.isDateSummaryColumn(oldColumn) !== isDateColumn) {
+      const methods = isDateColumn ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+      if (!methods.includes(config[summaryMethodKey])) {
+        update[summaryMethodKey] = methods[0];
+      }
+    }
+    onChange && onChange(update);
+  }, [chart, summaryColumnKey, summaryMethodKey, onChange, numericColumns]);
+  const onSummaryMethodChange = useCallback(option => {
+    const value = option.value;
+    const {
+      config
+    } = chart;
+    const oldValue = config[summaryMethodKey];
+    if (value === oldValue) return;
+    onChange && onChange({
+      [summaryMethodKey]: value
+    });
+  }, [chart, summaryMethodKey, onChange]);
+  const renderNumericColumn = useCallback(() => {
+    const column_key = chart.config[summaryColumnKey];
+    const selectedColumnOption = numericColumnOptions.find(option => option.value === column_key);
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-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: () => {
+        return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
+      }
+    }));
+  }, [chart, summaryColumnKey, numericColumnOptions, onSummaryColumnChange]);
+  const renderSummaryMethod = useCallback(() => {
+    const summaryMethod = chart.config[summaryMethodKey];
+    const selectedMethodOption = summaryMethodOptions.find(option => option.value === summaryMethod);
+    return /*#__PURE__*/React.createElement(FormGroup, {
+      className: "sea-chart-parameter-item"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      value: selectedMethodOption,
+      onChange: onSummaryMethodChange,
+      options: summaryMethodOptions
+    }));
+  }, [chart, summaryMethodKey, onSummaryMethodChange, summaryMethodOptions]);
+  const renderOtherSummaries = useCallback(() => {
+    const summaryType = chart.config[summaryTypeKey] || CHART_SUMMARY_TYPE.COUNT;
+    if (summaryType !== CHART_SUMMARY_TYPE.ADVANCED) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderNumericColumn(), renderSummaryMethod());
+  }, [summaryTypeKey, chart, renderNumericColumn, renderSummaryMethod]);
+  const summaryType = chart.config[summaryTypeKey] || CHART_SUMMARY_TYPE.COUNT;
+  const selectedSummaryTypeOption = summaryTypeOptions.find(item => item.value === summaryType) || summaryTypeOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSummaryTypes && /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-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: CHART_SUMMARY_TYPES
+};
+export default BasicSummary;

package/{lib/components/settings/widgets/statistic-type → dist/settings/widgets/chart-type}/index.css

@@ -1,4 +1,4 @@
-.seastatistic-settings  .seastatistic-selected-type-container {
+.sea-chart-settings  .sea-chart-selected-type-container {
   height: 38px;
   border: 1px solid hsl(0, 0%, 80%);
   border-radius: 4px;
@@ -7,7 +7,7 @@
   justify-content: space-between;
 }
 
-.seastatistic-settings .seastatistic-type-icon-container {
+.sea-chart-settings .sea-chart-type-icon-container {
   height: 24px;
   width: 24px;
   margin-left: 10px;
@@ -16,16 +16,16 @@
   justify-content: center;
 }
 
-.seastatistic-settings .seastatistic-type-icon-container:hover {
+.sea-chart-settings .sea-chart-type-icon-container:hover {
   cursor: pointer;
 }
 
-.seastatistic-settings .seastatistic-type-icon-container .seastatistic-type-icon {
+.sea-chart-settings .sea-chart-type-icon-container .sea-chart-type-icon {
   height: 14px;
   width: 14px;
   color: #ccc;
 }
 
-.seastatistic-settings .seastatistic-type-icon-container:hover .seastatistic-type-icon {
+.sea-chart-settings .sea-chart-type-icon-container:hover .sea-chart-type-icon {
   color: #999;
 }