sea-chart 0.0.1-beta

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

@@ -0,0 +1,172 @@
+import React, { useCallback } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { CellType, DATE_COLUMN_OPTIONS } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import Divider from '../widgets/divider';
+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 { 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;
+    let update = {
+      x_axis_column_key: validValue
+    };
+    if (!validValue) {
+      update['x_axis_date_granularity'] = null;
+      update['x_axis_geolocation_granularity'] = null;
+    } else {
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['x_axis_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
+        update['x_axis_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        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) {
+          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
+        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+          update['x_axis_geolocation_granularity'] = 'district';
+        } else {
+          update['x_axis_geolocation_granularity'] = null;
+        }
+        update['x_axis_date_granularity'] = null;
+      }
+    }
+    onChange && onChange(update);
+  }, [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
+    });
+  }, [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
+    });
+  }, [chart, onChange]);
+  const onDateChange = useCallback((key, value) => {
+    const {
+      config
+    } = chart;
+    const oldValue = config[key];
+    if (value === oldValue) return;
+    onChange && onChange({
+      [key]: value
+    });
+  }, [chart, onChange]);
+  const onDisplayIncreaseChange = useCallback(event => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      display_increase
+    } = config;
+    onChange && onChange({
+      display_increase: !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, {
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get('X_axis'),
+    selectedTableId: table_id,
+    selectedColumnKey: x_axis_column_key,
+    selectedDateGranularity: x_axis_date_granularity,
+    selectedGeolocationGranularity: x_axis_geolocation_granularity,
+    onGroupByChange: onXAxisColumnChange,
+    onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
+    onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
+  }), /*#__PURE__*/React.createElement(FormGroup, {
+    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: 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: value => onDateChange('x_axis_date_range_end', value),
+    value: x_axis_date_range_end
+  }))), /*#__PURE__*/React.createElement(FormGroup, {
+    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: 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: 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'),
+    chart: chart,
+    selectedTableId: table_id,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Switch, {
+    checked: display_increase || false,
+    placeholder: intl.get('Display_increase'),
+    onChange: onDisplayIncreaseChange
+  }));
+};
+export default DataSettings;

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

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

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/dist/settings/widgets/chart-type/index.css

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

package/dist/settings/widgets/chart-type/index.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { CHART_TYPE_SHOW } from '../../../constants';
+import { eventStopPropagation } from '../../../utils';
+import intl from '../../../intl';
+import { Icon, TypesDialog } from '../../../components';
+import './index.css';
+const ChartType = _ref => {
+  let {
+    chart,
+    generateChartConfig,
+    onChange
+  } = _ref;
+  const [isDialogShow, setDialogShow] = useState(false);
+  const openTypesDialog = useCallback(event => {
+    eventStopPropagation(event);
+    setDialogShow(true);
+  }, []);
+  const closeTypesDialog = useCallback(() => {
+    setDialogShow(false);
+  }, []);
+  const onTypeChange = useCallback(type => {
+    const {
+      config
+    } = chart;
+    const {
+      type: oldType
+    } = config;
+    if (type === oldType) return;
+    const convertedChart = generateChartConfig({
+      ...config,
+      type
+    });
+    onChange && onChange(convertedChart);
+  }, [chart, generateChartConfig, onChange]);
+  const {
+    config
+  } = chart;
+  const {
+    type
+  } = config;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item",
+    id: "sea-chart-type-container"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Chart_type')), /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-selected-type-container d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("span", null, intl.get(CHART_TYPE_SHOW[type])), /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-type-icon-container",
+    onClick: openTypesDialog
+  }, /*#__PURE__*/React.createElement(Icon, {
+    symbol: "type-change",
+    className: "sea-chart-type-icon"
+  })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
+    type: type,
+    onToggle: closeTypesDialog,
+    onChange: onTypeChange
+  }));
+};
+export default ChartType;