sea-chart 0.0.1 → 0.0.2

package/dist/settings/bar-settings/style-settings.js

@@ -0,0 +1,179 @@
+import React, { useMemo, useCallback } 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 LabelColor from '../widgets/label-color';
+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';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    xLabel,
+    yLabel,
+    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 onLabelColorChange = useCallback((event, color) => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      y_axis_label_color
+    } = config;
+    if (y_axis_label_color === color) return;
+    onChange && onChange({
+      y_axis_label_color: color
+    });
+  }, [chart, onChange]);
+  const onDisplayValueChange = useCallback(update => {
+    onChange && onChange(update);
+  }, [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,
+    label_font_size,
+    y_axis_label_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(xLabel)), /*#__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(yLabel)), /*#__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(LabelColor, {
+    labelColor: y_axis_label_color,
+    onChange: onLabelColorChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+    isShowValueKey: "y_axis_show_value",
+    isShowValue: y_axis_show_value,
+    fontSizeKey: "label_font_size",
+    fontSize: label_font_size,
+    onChange: onDisplayValueChange
+  }));
+};
+StyleSettings.defaultProps = {
+  xLabel: 'X_axis',
+  yLabel: 'Y_axis'
+};
+export default StyleSettings;

package/dist/settings/basic-number-card/data-settings.js

@@ -0,0 +1,126 @@
+import React, { 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 { ChartUtils } from '../../utils';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    tables,
+    chart,
+    onChange
+  } = _ref;
+  const summaryMethodsOptions = useMemo(() => {
+    const numberCardSummaryMethod = [BASIC_NUMBER_CARD_CALCULATION_METHOD, ...CHART_SUMMARY_CALCULATION_METHOD];
+    return numberCardSummaryMethod.map(method => {
+      return {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, intl.get(CHART_SUMMARY_SHOW[method])),
+        value: method
+      };
+    });
+  }, []);
+  const selectedTable = useMemo(() => {
+    const {
+      table_id: selectedTableId
+    } = chart.config;
+    return getTableById(tables, selectedTableId);
+  }, [chart.config, tables]);
+  const validColumns = useMemo(() => {
+    const columns = selectedTable && Array.isArray(selectedTable.columns) ? selectedTable.columns : [];
+    if (!columns || !Array.isArray(columns)) return [];
+    return columns.filter(column => CHART_SUPPORT_COLUMNS.includes(column.type));
+  }, [selectedTable]);
+  const numericColumns = useMemo(() => {
+    return validColumns.filter(column => ChartUtils.isNumericSummaryColumn(column));
+  }, [validColumns]);
+  const numericColumnOptions = useMemo(() => {
+    const options = numericColumns.map(column => {
+      return {
+        value: 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))
+      };
+    });
+    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)'
+      }
+    }, ...options];
+  }, [numericColumns]);
+  const onSelectColumnChange = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      numeric_column_key
+    } = config;
+    const newColumnKey = option.value.key;
+    if (numeric_column_key === newColumnKey) return;
+    onChange && onChange({
+      numeric_column_key: newColumnKey
+    });
+  }, [chart, onChange]);
+  const onSelectSummaryMethod = useCallback(option => {
+    const {
+      config
+    } = chart;
+    const {
+      summary_method
+    } = config;
+    const newSummaryMethod = option.value;
+    if (newSummaryMethod === summary_method) return;
+    onChange && onChange({
+      summary_method: newSummaryMethod
+    });
+  }, [chart, onChange]);
+  const getSelectedMethodOption = useCallback((method, summaryMethodsOptions) => {
+    return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+  }, []);
+  const renderSummaryMethod = useCallback(() => {
+    const {
+      summary_method
+    } = chart.config;
+    const 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
+    }));
+  }, [chart, getSelectedMethodOption, onSelectSummaryMethod, summaryMethodsOptions]);
+  const {
+    config
+  } = chart;
+  const selectedColumnOption = numericColumnOptions.find(option => option.value.key === config.numeric_column_key) || numericColumnOptions[0];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Statistic_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedColumnOption,
+    options: numericColumnOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSelectColumnChange
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, renderSummaryMethod()));
+};
+export default DataSettings;

package/dist/settings/basic-number-card/style-settings.js

@@ -0,0 +1,42 @@
+import React, { useCallback, useState } from 'react';
+import { Input, FormGroup } from 'reactstrap';
+import intl from '../../intl';
+const StyleSettings = _ref => {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const [name, setName] = useState(chart.config.name || '');
+  const onChangeName = useCallback(event => {
+    const newName = event.target.value;
+    if (newName === name) return;
+    setName(newName);
+  }, [name]);
+  const onSaveName = useCallback(() => {
+    const oldName = chart.config.name || '';
+    if (oldName === name) return;
+    onChange && onChange({
+      name
+    });
+  }, [name, chart, onChange]);
+  const onKeyDown = useCallback(e => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.target.blur();
+    }
+  }, []);
+  const {
+    config
+  } = chart;
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Label')), /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    value: name,
+    placeholder: config.name || '',
+    onBlur: onSaveName,
+    onChange: onChangeName,
+    onKeyDown: onKeyDown
+  }));
+};
+export default StyleSettings;

package/dist/settings/combination-settings/data-settings.js

@@ -0,0 +1,279 @@
+import React, { useCallback } from 'react';
+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 SummarySettings from '../widgets/summary-settings';
+import { eventStopPropagation } from '../../utils';
+import { CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, COMBINATION_POSITION } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    xLabel,
+    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 onIncludeEmptyChange = useCallback(event => {
+    eventStopPropagation(event);
+    const {
+      config
+    } = chart;
+    const {
+      x_axis_include_empty_cells
+    } = config;
+    onChange && onChange({
+      x_axis_include_empty_cells: !x_axis_include_empty_cells
+    });
+  }, [chart, onChange]);
+  const onChangeSummaryType = useCallback((option, position) => {
+    const {
+      config
+    } = chart;
+    let {
+      y_axis_right_summary_type,
+      y_axis_left_summary_type,
+      y_axis_right_summary_column,
+      y_axis_left_summary_column,
+      y_axis_left_group_by_multiple_numeric_column,
+      y_axis_left_summary_method,
+      y_axis_left_group_by_numeric_columns
+    } = config;
+    let newSummaryType = option === CHART_Y_GROUP_TYPE.COUNT ? CHART_SUMMARY_TYPE.COUNT : CHART_SUMMARY_TYPE.ADVANCED;
+    if (position === COMBINATION_POSITION.LEFT) {
+      if (newSummaryType === CHART_SUMMARY_TYPE.COUNT && y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT) return;
+      if (option === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN && !y_axis_left_group_by_multiple_numeric_column && y_axis_left_summary_type !== CHART_SUMMARY_TYPE.COUNT) return;
+      if (option === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN && y_axis_left_group_by_multiple_numeric_column) return;
+      if (option === CHART_Y_GROUP_TYPE.COUNT) {
+        y_axis_left_summary_column = null;
+        y_axis_left_summary_method = 'sum';
+        y_axis_left_group_by_multiple_numeric_column = false;
+        y_axis_left_group_by_numeric_columns = [];
+      }
+      if (option === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+        y_axis_left_summary_column = null;
+        y_axis_left_summary_method = CHART_SUMMARY_CALCULATION_METHOD[0];
+        y_axis_left_group_by_multiple_numeric_column = false;
+        y_axis_left_group_by_numeric_columns = [];
+      }
+      if (option === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+        y_axis_left_summary_column = null;
+        y_axis_left_summary_method = CHART_SUMMARY_CALCULATION_METHOD[0];
+        y_axis_left_group_by_multiple_numeric_column = true;
+        y_axis_left_group_by_numeric_columns = [];
+      }
+      onChange && onChange({
+        y_axis_left_summary_type: newSummaryType,
+        y_axis_left_summary_column,
+        y_axis_left_summary_method,
+        y_axis_left_group_by_multiple_numeric_column,
+        y_axis_left_group_by_numeric_columns
+      });
+      return;
+    }
+    if (y_axis_right_summary_type === newSummaryType) return;
+    y_axis_right_summary_type = newSummaryType;
+    let y_axis_right_summary_method = CHART_SUMMARY_CALCULATION_METHOD[0];
+    if (newSummaryType === CHART_SUMMARY_TYPE.COUNT) {
+      y_axis_right_summary_column = null;
+      y_axis_right_summary_method = 'sum';
+    }
+    onChange && onChange({
+      y_axis_right_summary_type: newSummaryType,
+      y_axis_right_summary_column,
+      y_axis_right_summary_method
+    });
+  }, [chart, onChange]);
+  const onSelectSummaryColumn = useCallback((option, position) => {
+    const {
+      config
+    } = chart;
+    let {
+      y_axis_right_summary_column,
+      y_axis_left_summary_column,
+      y_axis_left_summary_method,
+      y_axis_right_summary_method
+    } = config;
+    const newSummaryColumnKey = option;
+    if (position === COMBINATION_POSITION.LEFT) {
+      if (y_axis_left_summary_column === newSummaryColumnKey) return;
+      if (!y_axis_left_summary_method) {
+        y_axis_left_summary_method = 'Sum';
+      }
+      onChange && onChange({
+        y_axis_left_summary_column: newSummaryColumnKey,
+        y_axis_left_summary_method
+      });
+      return;
+    }
+    if (y_axis_right_summary_column === newSummaryColumnKey) return;
+    if (!y_axis_right_summary_method) {
+      y_axis_right_summary_method = 'Sum';
+    }
+    onChange && onChange({
+      y_axis_right_summary_column: newSummaryColumnKey,
+      y_axis_right_summary_method
+    });
+  }, [chart, onChange]);
+  const onSelectSummaryMethod = useCallback((option, position) => {
+    const {
+      config
+    } = chart;
+    const {
+      y_axis_right_summary_method,
+      y_axis_left_summary_method
+    } = config;
+    const newSummaryColumnMethod = option;
+    if (position === COMBINATION_POSITION.LEFT) {
+      if (y_axis_left_summary_method !== newSummaryColumnMethod) {
+        onChange && onChange({
+          y_axis_left_summary_method: newSummaryColumnMethod
+        });
+      }
+      return;
+    }
+    if (y_axis_right_summary_method === newSummaryColumnMethod) return;
+    onChange && onChange({
+      y_axis_right_summary_method: newSummaryColumnMethod
+    });
+  }, [chart, onChange]);
+  const {
+    config
+  } = chart;
+  const {
+    table_id,
+    x_axis_column_key,
+    x_axis_date_granularity,
+    x_axis_geolocation_granularity,
+    x_axis_include_empty_cells,
+    y_axis_right_summary_type,
+    y_axis_right_summary_method,
+    y_axis_right_summary_column,
+    y_axis_left_summary_type,
+    y_axis_left_summary_method,
+    y_axis_left_summary_column
+  } = config;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(GroupBy, {
+    tables: tables,
+    className: "selected-x-axis",
+    label: intl.get(xLabel),
+    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(Switch, {
+    key: "x_axis_include_empty_cells",
+    checked: x_axis_include_empty_cells,
+    placeholder: intl.get('Include_empty'),
+    onChange: onIncludeEmptyChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(SummarySettings, {
+    chartType: 'combination_chart',
+    label: intl.get('Y-axis(left side)'),
+    config: config,
+    chart: chart,
+    summaryType: y_axis_left_summary_type,
+    summaryMethod: y_axis_left_summary_method,
+    summaryColumn: y_axis_left_summary_column,
+    onChangeSummaryType: option => onChangeSummaryType(option, COMBINATION_POSITION.LEFT),
+    onSelectSummaryColumn: option => onSelectSummaryColumn(option, COMBINATION_POSITION.LEFT),
+    onSelectSummaryMethod: option => onSelectSummaryMethod(option, COMBINATION_POSITION.LEFT),
+    useMultipleSummaryColumns: true,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(SummarySettings, {
+    chartType: 'combination_chart',
+    label: intl.get('Y-axis(right side)'),
+    config: config,
+    summaryType: y_axis_right_summary_type,
+    summaryMethod: y_axis_right_summary_method,
+    summaryColumn: y_axis_right_summary_column,
+    onChangeSummaryType: option => onChangeSummaryType(option, COMBINATION_POSITION.RIGHT),
+    onSelectSummaryColumn: option => onSelectSummaryColumn(option, COMBINATION_POSITION.RIGHT),
+    onSelectSummaryMethod: option => onSelectSummaryMethod(option, COMBINATION_POSITION.RIGHT),
+    tables: tables,
+    chart: chart,
+    onChange: onChange
+  }));
+};
+DataSettings.defaultProps = {
+  xLabel: 'X_axis'
+};
+export default DataSettings;