sea-chart 0.0.1-beta

package/dist/model/scatter.js

@@ -0,0 +1,19 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { CHART_TYPE } from '../constants';
+class Scatter extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.SCATTER
+    });
+    this.x_axis_column_key = options.x_axis_column_key;
+    this.y_axis_summary_column_key = options.y_axis_summary_column_key;
+    this.group_column = options.column_groupby_column_key;
+    this.x_axis_show_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.x_axis_label_position = options.x_axis_label_position;
+    this.y_axis_show_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.y_axis_label_position = options.y_axis_label_position;
+  }
+}
+export default Scatter;

package/dist/model/stacked-horizontal-bar.js

@@ -0,0 +1,32 @@
+import BaseModel from './base-model';
+import { isBoolean } from '../utils';
+import { CHART_TYPE } from '../constants';
+class StackedHorizontalGroupBar extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.STACKED_HORIZONTAL_BAR
+    });
+    this.vertical_axis_column_key = options.x_axis_column_key;
+    this.vertical_axis_date_granularity = options.x_axis_date_granularity;
+    this.vertical_axis_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.vertical_axis_include_empty = options.x_axis_include_empty_cells;
+    this.horizontal_axis_summary_type = options.y_axis_summary_type;
+    this.show_vertical_axis_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
+    this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
+    this.vertical_axis_label_position = options.x_axis_label_position;
+    this.horizontal_axis_label_position = options.y_axis_label_position;
+    this.horizontal_axis_column_key = options.y_axis_summary_column_key;
+    this.horizontal_axis_summary_method = options.y_axis_summary_method;
+    this.horizontal_axis_label_color = options.y_axis_label_color;
+
+    // column-group
+    this.column_groupby_column_key = options.column_groupby_column_key;
+    this.column_groupby_date_granularity = options.column_groupby_date_granularity;
+    this.column_groupby_geolocation_granularity = options.column_groupby_geolocation_granularity;
+    this.column_groupby_multiple_numeric_column = options.column_groupby_multiple_numeric_column;
+    this.summary_columns = options.summary_columns;
+    this.label_font_size = options.label_font_size;
+  }
+}
+export default StackedHorizontalGroupBar;

package/dist/model/table.js

@@ -0,0 +1,23 @@
+import BaseModel from './base-model';
+import { CHART_SUMMARY_TYPE, CHART_TYPE } from '../constants';
+class Table extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.TABLE
+    });
+    this.groupby_column_key = options.x_axis_column_key;
+    this.groupby_date_granularity = options.x_axis_date_granularity;
+    this.groupby_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.groupby_include_empty_cells = options.x_axis_include_empty_cells;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+    this.summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.column_groupby_multiple_numeric_column = options.column_groupby_multiple_numeric_column;
+    this.summary_columns = options.summary_columns;
+    this.column_groupby_column_key = options.column_groupby_column_key;
+    this.column_groupby_date_granularity = options.column_groupby_date_granularity;
+    this.column_groupby_geolocation_granularity = options.column_groupby_geolocation_granularity;
+  }
+}
+export default Table;

package/dist/model/tree-map.js

@@ -0,0 +1,20 @@
+import BaseModel from './base-model';
+import { CHART_SUMMARY_TYPE, CHART_TYPE } from '../constants';
+class TreeMap extends BaseModel {
+  constructor(options) {
+    super({
+      ...options,
+      type: CHART_TYPE.TREE_MAP
+    });
+    this.groupby_column_key = options.x_axis_column_key;
+    this.groupby_date_granularity = options.x_axis_date_granularity;
+    this.groupby_geolocation_granularity = options.x_axis_geolocation_granularity;
+    this.groupby_include_empty_cells = options.x_axis_include_empty_cells;
+    this.summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.sort_type = options.sort_type;
+    this.minimum_slice_percent = options.minimum_slice_percent;
+  }
+}
+export default TreeMap;

package/dist/model/trend.js

@@ -0,0 +1,24 @@
+import { getTableColumnByKey, isDateColumn } from 'dtable-utils';
+import BaseModel from './base-model';
+import { CHART_TYPE } from '../constants';
+class Trend extends BaseModel {
+  constructor(options, table) {
+    super({
+      ...options,
+      type: CHART_TYPE.TREND
+    });
+    this.date_column_key = options.x_axis_column_key;
+    this.date_granularity = options.x_axis_date_granularity;
+    if (this.date_column_key) {
+      const column = getTableColumnByKey(table, this.date_column_key);
+      if (!column || !isDateColumn(column)) {
+        this.date_column_key = null;
+        this.date_granularity = null;
+      }
+    }
+    this.summary_type = options.y_axis_summary_type;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.summary_method = options.y_axis_summary_method;
+  }
+}
+export default Trend;

package/dist/model/user.js

@@ -0,0 +1,15 @@
+class User {
+  constructor(obj) {
+    this.loaded = obj.loaded || false;
+    this.email = obj.email || '';
+    this.name = obj.name || '';
+    this.avatar_url = obj.avatar_url || '';
+    this.contact_email = obj.contact_email || null;
+    this.name_pinyin = obj.name_pinyin || '';
+    this.id = obj.id_in_org || '';
+  }
+  updateLoaded(loaded) {
+    this.loaded = loaded;
+  }
+}
+export default User;

package/dist/model/world-map-bubble.js

@@ -0,0 +1,26 @@
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import BaseModel from './base-model';
+import { isStatisticWorldMapColumn } from '../utils';
+import { CHART_TYPE } from '../constants';
+class WorldMapBubble extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.WORLD_MAP_BUBBLE
+    });
+    this.column_key = options.x_axis_column_key;
+    if (this.column_key && this.table_id && tables) {
+      const table = getTableById(tables, this.table_id);
+      const column = getTableColumnByKey(table, this.column_key);
+      if (!isStatisticWorldMapColumn(column)) {
+        this.column_key = null;
+      }
+    }
+    this.summary_type = options.y_axis_summary_type;
+    this.summary_method = options.y_axis_summary_method;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.legend_direction = options.legend_direction;
+    this.legend_size = options.legend_size;
+  }
+}
+export default WorldMapBubble;

package/dist/model/world-map.js

@@ -0,0 +1,26 @@
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import BaseModel from './base-model';
+import { isStatisticWorldMapColumn } from '../utils';
+import { CHART_TYPE } from '../constants';
+class WorldMap extends BaseModel {
+  constructor(options, tables) {
+    super({
+      ...options,
+      type: CHART_TYPE.WORLD_MAP
+    });
+    this.column_key = options.x_axis_column_key;
+    if (this.column_key && this.table_id && tables) {
+      const table = getTableById(tables, this.table_id);
+      const column = getTableColumnByKey(table, this.column_key);
+      if (!isStatisticWorldMapColumn(column)) {
+        this.column_key = null;
+      }
+    }
+    this.summary_type = options.y_axis_summary_type;
+    this.summary_method = options.y_axis_summary_method;
+    this.summary_column_key = options.y_axis_summary_column_key;
+    this.legend_direction = options.legend_direction;
+    this.legend_size = options.legend_size;
+  }
+}
+export default WorldMap;

package/dist/settings/advance-bar-settings/data-settings.js

@@ -0,0 +1,143 @@
+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 YAxisGroupSettings from '../widgets/y-axis-group-settings';
+import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import { eventStopPropagation } from '../../utils';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    onChange,
+    tables,
+    xLabel,
+    yLabel
+  } = _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 {
+    config
+  } = chart;
+  const {
+    table_id,
+    x_axis_column_key,
+    x_axis_date_granularity,
+    x_axis_geolocation_granularity,
+    x_axis_include_empty_cells
+  } = 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(YAxisGroupSettings, {
+    className: "selected-y-axis",
+    label: intl.get(yLabel),
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }));
+};
+DataSettings.defaultProps = {
+  xLabel: 'X_axis',
+  yLabel: 'Y_axis'
+};
+export default DataSettings;

package/dist/settings/advance-bar-settings/index.js

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

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

@@ -0,0 +1,161 @@
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import Switch from '../widgets/switch';
+import Divider from '../widgets/divider';
+import MinMaxSetting from '../widgets/min-max-setting';
+import DisplayValuesSettings from '../widgets/display-values-settings';
+import { eventStopPropagation } from '../../utils';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../constants';
+import intl from '../../intl';
+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 onDisplayValueChange = useCallback(update => {
+    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
+  } = 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(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/bar-settings/data-settings.js

@@ -0,0 +1,162 @@
+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 BasicSummary from '../widgets/basic-summary';
+import DataSort from '../widgets/data-sort';
+import { eventStopPropagation } from '../../utils';
+import { CHART_SUMMARY_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, CHART_SUMMARY_TYPES, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
+import intl from '../../intl';
+const DataSettings = _ref => {
+  let {
+    chart,
+    tables,
+    xLabel,
+    yLabel,
+    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 renderDataSort = useCallback(() => {
+    const {
+      config
+    } = chart;
+    if (!SUPPORT_DATA_SORT_CHART_TYPES.includes(config.type)) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
+      className: "mt-4"
+    }), /*#__PURE__*/React.createElement(DataSort, {
+      chart: chart,
+      onChange: onChange
+    }));
+  }, [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
+  } = 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(BasicSummary, {
+    className: "selected-y-axis",
+    label: intl.get(yLabel),
+    summaryTypeKey: 'y_axis_summary_type',
+    summaryMethodKey: 'y_axis_summary_method',
+    summaryColumnKey: 'y_axis_summary_column_key',
+    chart: chart,
+    selectedTableId: table_id,
+    tables: tables,
+    supportColumnTypes: [CellType.NUMBER],
+    summaryTypeOptions: CHART_SUMMARY_TYPES,
+    onChange: onChange
+  }), renderDataSort());
+};
+DataSettings.defaultProps = {
+  xLabel: 'X_axis',
+  yLabel: 'Y_axis'
+};
+export default DataSettings;

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

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