sea-chart 0.0.1

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

@@ -0,0 +1,163 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    xLabel = _ref.xLabel,
+    yLabel = _ref.yLabel,
+    onChange = _ref.onChange;
+  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 onYAxisAutoRangeChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var y_axis_auto_range = config.y_axis_auto_range;
+    onChange && onChange({
+      y_axis_auto_range: !y_axis_auto_range
+    });
+  }, [statistic, onChange]);
+  var onYAxisMinChange = useCallback(function (min) {
+    var newMin = parseInt(min);
+    if (Number.isNaN(newMin)) return;
+    var config = statistic.config;
+    var y_axis_min = config.y_axis_min;
+    if (y_axis_min === newMin) return;
+    onChange && onChange({
+      y_axis_min: newMin
+    });
+  }, [statistic, onChange]);
+  var onYAxisMaxChange = useCallback(function (max) {
+    var newMax = parseInt(max);
+    if (Number.isNaN(newMax)) return;
+    var config = statistic.config;
+    var y_axis_max = config.y_axis_max;
+    if (y_axis_max === newMax) return;
+    onChange && onChange({
+      y_axis_max: newMax
+    });
+  }, [statistic, onChange]);
+  var onLabelColorChange = useCallback(function (event, color) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var y_axis_label_color = config.y_axis_label_color;
+    if (y_axis_label_color === color) return;
+    onChange && onChange({
+      y_axis_label_color: color
+    });
+  }, [statistic, 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,
+    y_axis_show_label = config.y_axis_show_label,
+    y_axis_label_position = config.y_axis_label_position,
+    _config$y_axis_auto_r = config.y_axis_auto_range,
+    y_axis_auto_range = _config$y_axis_auto_r === void 0 ? true : _config$y_axis_auto_r,
+    y_axis_min = config.y_axis_min,
+    y_axis_max = config.y_axis_max,
+    y_axis_show_value = config.y_axis_show_value,
+    label_font_size = config.label_font_size,
+    y_axis_label_color = config.y_axis_label_color;
+  var xAxisLabelPosition = xAxisLabelOptions.find(function (option) {
+    return option.value === x_axis_label_position;
+  }) || xAxisLabelOptions[0];
+  var yAxisLabelPosition = yAxisLabelOptions.find(function (option) {
+    return option.value === y_axis_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(yLabel)), /*#__PURE__*/React.createElement(Switch, {
+    key: "y_axis_show_label",
+    checked: y_axis_show_label || false,
+    placeholder: intl.get('Display_title'),
+    onChange: function onChange(event) {
+      return onAxisLabelShowChange(event, 'y_axis_show_label');
+    }
+  }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
+    className: "seastatistic-parameter-container"
+  }, /*#__PURE__*/React.createElement(DTableSelect, {
+    value: yAxisLabelPosition,
+    classNamePrefix: "chart-y-axis-label-position",
+    options: yAxisLabelOptions,
+    onChange: function onChange(option) {
+      return 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/lib/components/settings/basic-number-card/data-settings.js

@@ -0,0 +1,121 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 { 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 onSelectColumnChange = useCallback(function (option) {
+    var config = statistic.config;
+    var numeric_column_key = config.numeric_column_key;
+    var newColumnKey = option.value.key;
+    if (numeric_column_key === newColumnKey) return;
+    onChange && onChange({
+      numeric_column_key: newColumnKey
+    });
+  }, [statistic, onChange]);
+  var onSelectSummaryMethod = useCallback(function (option) {
+    var config = statistic.config;
+    var summary_method = config.summary_method;
+    var newSummaryMethod = option.value;
+    if (newSummaryMethod === summary_method) return;
+    onChange && onChange({
+      summary_method: newSummaryMethod
+    });
+  }, [statistic, onChange]);
+  var getSelectedMethodOption = useCallback(function (method, summaryMethodsOptions) {
+    return summaryMethodsOptions.find(function (m) {
+      return m.value === method;
+    }) || summaryMethodsOptions[0];
+  }, []);
+  var renderSummaryMethod = useCallback(function () {
+    var summary_method = statistic.config.summary_method;
+    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, getSelectedMethodOption, onSelectSummaryMethod, summaryMethodsOptions]);
+  var config = statistic.config;
+  var selectedColumnOption = numericColumnOptions.find(function (option) {
+    return option.value.key === config.numeric_column_key;
+  }) || numericColumnOptions[0];
+  return /*#__PURE__*/React.createElement(React.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('Statistic_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    value: selectedColumnOption,
+    options: numericColumnOptions,
+    placeholder: intl.get('Select_a_column'),
+    onChange: onSelectColumnChange
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-parameter-item"
+  }, renderSummaryMethod()));
+};
+export default DataSettings;

package/lib/components/settings/basic-number-card/index.js

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

package/lib/components/settings/basic-number-card/style-settings.js

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { Input, FormGroup } from 'reactstrap';
+import intl from '../../../intl';
+var StyleSettings = function StyleSettings(_ref) {
+  var statistic = _ref.statistic,
+    onChange = _ref.onChange;
+  var _useState = useState(statistic.config.name || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var onChangeName = useCallback(function (event) {
+    var newName = event.target.value;
+    if (newName === name) return;
+    setName(newName);
+  }, [name]);
+  var onSaveName = useCallback(function () {
+    var oldName = statistic.config.name || '';
+    if (oldName === name) return;
+    onChange && onChange({
+      name: name
+    });
+  }, [name, statistic, onChange]);
+  var onKeyDown = useCallback(function (e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.target.blur();
+    }
+  }, []);
+  var config = statistic.config;
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: "seastatistic-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/lib/components/settings/combination-settings/data-settings.js

@@ -0,0 +1,256 @@
+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 { STATISTIC_SUMMARY_TYPE, STATISTIC_Y_GROUP_TYPE, STATISTIC_SUMMARY_CALCULATION_METHOD, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP, COMBINATION_POSITION } from '../../../constants';
+import intl from '../../../intl';
+var DataSettings = function DataSettings(_ref) {
+  var statistic = _ref.statistic,
+    tables = _ref.tables,
+    xLabel = _ref.xLabel,
+    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;
+    if (x_axis_column_key === validValue) return;
+    var 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'] = STATISTIC_SUMMARY_TYPE.MONTH;
+        update['x_axis_geolocation_granularity'] = null;
+      } else if (type === CellType.GEOLOCATION) {
+        var _ref2 = column.data || {},
+          geo_format = _ref2.geo_format;
+        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);
+  }, [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;
+    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;
+    if (value === x_axis_geolocation_granularity) return;
+    onChange && onChange({
+      x_axis_geolocation_granularity: value
+    });
+  }, [statistic, onChange]);
+  var onIncludeEmptyChange = useCallback(function (event) {
+    eventStopPropagation(event);
+    var config = statistic.config;
+    var x_axis_include_empty_cells = config.x_axis_include_empty_cells;
+    onChange && onChange({
+      x_axis_include_empty_cells: !x_axis_include_empty_cells
+    });
+  }, [statistic, onChange]);
+  var _onChangeSummaryType = useCallback(function (option, position) {
+    var config = statistic.config;
+    var y_axis_right_summary_type = config.y_axis_right_summary_type,
+      y_axis_left_summary_type = config.y_axis_left_summary_type,
+      y_axis_right_summary_column = config.y_axis_right_summary_column,
+      y_axis_left_summary_column = config.y_axis_left_summary_column,
+      y_axis_left_group_by_multiple_numeric_column = config.y_axis_left_group_by_multiple_numeric_column,
+      y_axis_left_summary_method = config.y_axis_left_summary_method,
+      y_axis_left_group_by_numeric_columns = config.y_axis_left_group_by_numeric_columns;
+    var newSummaryType = option === STATISTIC_Y_GROUP_TYPE.COUNT ? STATISTIC_SUMMARY_TYPE.COUNT : STATISTIC_SUMMARY_TYPE.ADVANCED;
+    if (position === COMBINATION_POSITION.LEFT) {
+      if (newSummaryType === STATISTIC_SUMMARY_TYPE.COUNT && y_axis_left_summary_type === STATISTIC_SUMMARY_TYPE.COUNT) return;
+      if (option === STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN && !y_axis_left_group_by_multiple_numeric_column && y_axis_left_summary_type !== STATISTIC_SUMMARY_TYPE.COUNT) return;
+      if (option === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN && y_axis_left_group_by_multiple_numeric_column) return;
+      if (option === STATISTIC_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 === STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+        y_axis_left_summary_column = null;
+        y_axis_left_summary_method = STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+        y_axis_left_group_by_multiple_numeric_column = false;
+        y_axis_left_group_by_numeric_columns = [];
+      }
+      if (option === STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+        y_axis_left_summary_column = null;
+        y_axis_left_summary_method = STATISTIC_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_column,
+        y_axis_left_summary_method: y_axis_left_summary_method,
+        y_axis_left_group_by_multiple_numeric_column: y_axis_left_group_by_multiple_numeric_column,
+        y_axis_left_group_by_numeric_columns: y_axis_left_group_by_numeric_columns
+      });
+      return;
+    }
+    if (y_axis_right_summary_type === newSummaryType) return;
+    y_axis_right_summary_type = newSummaryType;
+    var y_axis_right_summary_method = STATISTIC_SUMMARY_CALCULATION_METHOD[0];
+    if (newSummaryType === STATISTIC_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_column,
+      y_axis_right_summary_method: y_axis_right_summary_method
+    });
+  }, [statistic, onChange]);
+  var _onSelectSummaryColumn = useCallback(function (option, position) {
+    var config = statistic.config;
+    var y_axis_right_summary_column = config.y_axis_right_summary_column,
+      y_axis_left_summary_column = config.y_axis_left_summary_column,
+      y_axis_left_summary_method = config.y_axis_left_summary_method,
+      y_axis_right_summary_method = config.y_axis_right_summary_method;
+    var 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: 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: y_axis_right_summary_method
+    });
+  }, [statistic, onChange]);
+  var _onSelectSummaryMethod = useCallback(function (option, position) {
+    var config = statistic.config;
+    var y_axis_right_summary_method = config.y_axis_right_summary_method,
+      y_axis_left_summary_method = config.y_axis_left_summary_method;
+    var 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
+    });
+  }, [statistic, onChange]);
+  var config = statistic.config;
+  var table_id = config.table_id,
+    x_axis_column_key = config.x_axis_column_key,
+    x_axis_date_granularity = config.x_axis_date_granularity,
+    x_axis_geolocation_granularity = config.x_axis_geolocation_granularity,
+    x_axis_include_empty_cells = config.x_axis_include_empty_cells,
+    y_axis_right_summary_type = config.y_axis_right_summary_type,
+    y_axis_right_summary_method = config.y_axis_right_summary_method,
+    y_axis_right_summary_column = config.y_axis_right_summary_column,
+    y_axis_left_summary_type = config.y_axis_left_summary_type,
+    y_axis_left_summary_method = config.y_axis_left_summary_method,
+    y_axis_left_summary_column = config.y_axis_left_summary_column;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    statistic: statistic,
+    tables: tables,
+    FilterSettings: FilterSettings,
+    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,
+    statistic: statistic,
+    summaryType: y_axis_left_summary_type,
+    summaryMethod: y_axis_left_summary_method,
+    summaryColumn: y_axis_left_summary_column,
+    onChangeSummaryType: function onChangeSummaryType(option) {
+      return _onChangeSummaryType(option, COMBINATION_POSITION.LEFT);
+    },
+    onSelectSummaryColumn: function onSelectSummaryColumn(option) {
+      return _onSelectSummaryColumn(option, COMBINATION_POSITION.LEFT);
+    },
+    onSelectSummaryMethod: function onSelectSummaryMethod(option) {
+      return _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: function onChangeSummaryType(option) {
+      return _onChangeSummaryType(option, COMBINATION_POSITION.RIGHT);
+    },
+    onSelectSummaryColumn: function onSelectSummaryColumn(option) {
+      return _onSelectSummaryColumn(option, COMBINATION_POSITION.RIGHT);
+    },
+    onSelectSummaryMethod: function onSelectSummaryMethod(option) {
+      return _onSelectSummaryMethod(option, COMBINATION_POSITION.RIGHT);
+    },
+    tables: tables,
+    statistic: statistic,
+    onChange: onChange
+  }));
+};
+DataSettings.defaultProps = {
+  xLabel: 'X_axis'
+};
+export default DataSettings;

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

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