sea-chart 2.0.43 → 2.0.45

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

@@ -1,20 +1,12 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
-var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _commonDataSettings = _interopRequireDefault(require("../widgets/common-data-settings"));
-var _divider = _interopRequireDefault(require("../widgets/divider"));
-var _groupBy = _interopRequireDefault(require("../widgets/group-by"));
-var _summarySettings = _interopRequireDefault(require("../widgets/summary-settings"));
-var _constants = require("../../constants");
-var _intl = _interopRequireDefault(require("../../intl"));
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+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 SummarySettings from '../widgets/summary-settings';
+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,
@@ -23,7 +15,7 @@ const DataSettings = _ref => {
     xLabel = 'X_axis',
     onChange
   } = _ref;
-  const onXAxisColumnChange = (0, _react.useCallback)(column => {
+  const onXAxisColumnChange = useCallback(column => {
     const {
       config
     } = chart;
@@ -43,18 +35,18 @@ const DataSettings = _ref => {
       update['x_axis_date_granularity'] = null;
       update['x_axis_geolocation_granularity'] = null;
     } else {
-      if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(type)) {
-        update['x_axis_date_granularity'] = _constants.CHART_SUMMARY_TYPE.MONTH;
+      if (DATE_COLUMN_OPTIONS.includes(type)) {
+        update['x_axis_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
         update['x_axis_geolocation_granularity'] = null;
-      } else if (type === _dtableUtils.CellType.GEOLOCATION) {
+      } else if (type === CellType.GEOLOCATION) {
         const {
           geo_format
         } = column.data || {};
-        if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.PROVINCE) {
-          update['x_axis_geolocation_granularity'] = _constants.GEOLOCATION_FORMAT_MAP.PROVINCE;
-        } else if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
-          update['x_axis_geolocation_granularity'] = _constants.GEOLOCATION_FORMAT_CITY;
-        } else if (geo_format === _constants.GEOLOCATION_FORMAT_MAP.GEOLOCATION || !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;
@@ -64,7 +56,7 @@ const DataSettings = _ref => {
     }
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onGroupbyDateGranularityChange = (0, _react.useCallback)(option => {
+  const onGroupbyDateGranularityChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -77,7 +69,7 @@ const DataSettings = _ref => {
       x_axis_date_granularity: value
     });
   }, [chart, onChange]);
-  const onGroupbyGeolocationGranularityChange = (0, _react.useCallback)(option => {
+  const onGroupbyGeolocationGranularityChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -90,7 +82,7 @@ const DataSettings = _ref => {
       x_axis_geolocation_granularity: value
     });
   }, [chart, onChange]);
-  const onIncludeEmptyChange = (0, _react.useCallback)(event => {
+  const onIncludeEmptyChange = useCallback(event => {
     const {
       config
     } = chart;
@@ -101,7 +93,7 @@ const DataSettings = _ref => {
       x_axis_include_empty_cells: !x_axis_include_empty_cells
     });
   }, [chart, onChange]);
-  const onChangeSummaryType = (0, _react.useCallback)((option, position) => {
+  const onChangeSummaryType = useCallback((option, position) => {
     const {
       config
     } = chart;
@@ -114,26 +106,26 @@ const DataSettings = _ref => {
       y_axis_left_summary_method,
       y_axis_left_group_by_numeric_columns
     } = config;
-    let newSummaryType = option === _constants.CHART_Y_GROUP_TYPE.COUNT ? _constants.CHART_SUMMARY_TYPE.COUNT : _constants.CHART_SUMMARY_TYPE.ADVANCED;
-    if (position === _constants.COMBINATION_POSITION.LEFT) {
-      if (newSummaryType === _constants.CHART_SUMMARY_TYPE.COUNT && y_axis_left_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) return;
-      if (option === _constants.CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN && !y_axis_left_group_by_multiple_numeric_column && y_axis_left_summary_type !== _constants.CHART_SUMMARY_TYPE.COUNT) return;
-      if (option === _constants.CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN && y_axis_left_group_by_multiple_numeric_column) return;
-      if (option === _constants.CHART_Y_GROUP_TYPE.COUNT) {
+    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 === _constants.CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
+      if (option === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN) {
         y_axis_left_summary_column = null;
-        y_axis_left_summary_method = _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+        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 === _constants.CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
+      if (option === CHART_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN) {
         y_axis_left_summary_column = null;
-        y_axis_left_summary_method = _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+        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 = [];
       }
@@ -148,8 +140,8 @@ const DataSettings = _ref => {
     }
     if (y_axis_right_summary_type === newSummaryType) return;
     y_axis_right_summary_type = newSummaryType;
-    let y_axis_right_summary_method = _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
-    if (newSummaryType === _constants.CHART_SUMMARY_TYPE.COUNT) {
+    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';
     }
@@ -159,7 +151,7 @@ const DataSettings = _ref => {
       y_axis_right_summary_method
     });
   }, [chart, onChange]);
-  const onSelectSummaryColumn = (0, _react.useCallback)((option, position) => {
+  const onSelectSummaryColumn = useCallback((option, position) => {
     const {
       config
     } = chart;
@@ -170,7 +162,7 @@ const DataSettings = _ref => {
       y_axis_right_summary_method
     } = config;
     const newSummaryColumnKey = option;
-    if (position === _constants.COMBINATION_POSITION.LEFT) {
+    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';
@@ -190,7 +182,7 @@ const DataSettings = _ref => {
       y_axis_right_summary_method
     });
   }, [chart, onChange]);
-  const onSelectSummaryMethod = (0, _react.useCallback)((option, position) => {
+  const onSelectSummaryMethod = useCallback((option, position) => {
     const {
       config
     } = chart;
@@ -199,7 +191,7 @@ const DataSettings = _ref => {
       y_axis_left_summary_method
     } = config;
     const newSummaryColumnMethod = option;
-    if (position === _constants.COMBINATION_POSITION.LEFT) {
+    if (position === COMBINATION_POSITION.LEFT) {
       if (y_axis_left_summary_method !== newSummaryColumnMethod) {
         onChange && onChange({
           y_axis_left_summary_method: newSummaryColumnMethod
@@ -228,15 +220,15 @@ const DataSettings = _ref => {
     y_axis_left_summary_method,
     y_axis_left_summary_column
   } = config;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commonDataSettings.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
     chart: chart,
     dataSources: dataSources,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement(_groupBy.default, {
+  }), /*#__PURE__*/React.createElement(GroupBy, {
     tables: tables,
     className: "selected-x-axis",
-    label: _intl.default.get(xLabel),
+    label: intl.get(xLabel),
     selectedTableId: table_id,
     selectedColumnKey: x_axis_column_key,
     selectedDateGranularity: x_axis_date_granularity,
@@ -244,39 +236,39 @@ const DataSettings = _ref => {
     onGroupByChange: onXAxisColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: x_axis_include_empty_cells,
-    placeholder: _intl.default.get('Include_empty'),
+    placeholder: intl.get('Include_empty'),
     onChange: onIncludeEmptyChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  }), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+  }), /*#__PURE__*/React.createElement(SummarySettings, {
     chartType: 'combination_chart',
-    label: _intl.default.get('Y-axis(left side)'),
+    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, _constants.COMBINATION_POSITION.LEFT),
-    onSelectSummaryColumn: option => onSelectSummaryColumn(option, _constants.COMBINATION_POSITION.LEFT),
-    onSelectSummaryMethod: option => onSelectSummaryMethod(option, _constants.COMBINATION_POSITION.LEFT),
+    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.default.createElement(_summarySettings.default, {
+  }), /*#__PURE__*/React.createElement(SummarySettings, {
     chartType: 'combination_chart',
-    label: _intl.default.get('Y-axis(right side)'),
+    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, _constants.COMBINATION_POSITION.RIGHT),
-    onSelectSummaryColumn: option => onSelectSummaryColumn(option, _constants.COMBINATION_POSITION.RIGHT),
-    onSelectSummaryMethod: option => onSelectSummaryMethod(option, _constants.COMBINATION_POSITION.RIGHT),
+    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
   }));
 };
-var _default = exports.default = DataSettings;
+export default DataSettings;

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

@@ -1,20 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CombinationDataSettings", {
-  enumerable: true,
-  get: function () {
-    return _dataSettings.default;
-  }
-});
-Object.defineProperty(exports, "CombinationStyleSettings", {
-  enumerable: true,
-  get: function () {
-    return _styleSettings.default;
-  }
-});
-var _dataSettings = _interopRequireDefault(require("./data-settings"));
-var _styleSettings = _interopRequireDefault(require("./style-settings"));
+import CombinationDataSettings from './data-settings';
+import CombinationStyleSettings from './style-settings';
+export { CombinationDataSettings, CombinationStyleSettings };

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

@@ -1,24 +1,17 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _DTableCustomizeSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableCustomizeSelect"));
-var _CollapsibleSettingLayout2 = _interopRequireDefault(require("dtable-ui-component/lib/CollapsibleSettingLayout"));
-var _DTableRadioGroup2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableRadioGroup"));
-var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _divider = _interopRequireDefault(require("../widgets/divider"));
-var _minMaxSetting = _interopRequireDefault(require("../widgets/min-max-setting"));
-var _constants = require("../../constants");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _selectLineType = _interopRequireDefault(require("../widgets/select-line-type"));
-var _goalLineSetting = _interopRequireDefault(require("../../components/goal-line-setting"));
-var _fontSettings = require("../widgets/font-settings");
+import _DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
+import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
+import _DTableRadioGroup from "dtable-ui-component/lib/DTableRadioGroup";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React, { useCallback } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import Divider from '../widgets/divider';
+import MinMaxSetting from '../widgets/min-max-setting';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT_GOAL_LINE_CHART_TYPES, COMBINATION_DISPLAY_FIELDS_LIST } from '../../constants';
+import intl from '../../intl';
+import SelectLineType from '../widgets/select-line-type';
+import GoalLineSetting from '../../components/goal-line-setting';
+import AxisTitleFontSettings from '../widgets/axis-title-font-settings';
+import { FontSizeSettings } from '../widgets/font-settings';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -26,15 +19,15 @@ const StyleSettings = _ref => {
     onStyleChange,
     xLabel = 'X_axis'
   } = _ref;
-  const xAxisLabelOptions = _constants.X_LABEL_POSITIONS;
-  const yAxisLabelOptions = _constants.Y_LABEL_POSITIONS;
-  const displayFieldOptions = _constants.COMBINATION_DISPLAY_FIELDS_LIST.map(field => {
+  const xAxisLabelOptions = X_LABEL_POSITIONS;
+  const yAxisLabelOptions = Y_LABEL_POSITIONS;
+  const displayFieldOptions = COMBINATION_DISPLAY_FIELDS_LIST.map(field => {
     return {
-      label: /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(field)),
+      label: /*#__PURE__*/React.createElement("span", null, intl.get(field)),
       value: field
     };
   });
-  const onAxisLabelShowChange = (0, _react.useCallback)(labelKey => {
+  const onAxisLabelShowChange = useCallback(labelKey => {
     const {
       config
     } = chart;
@@ -43,7 +36,7 @@ const StyleSettings = _ref => {
       [labelKey]: !value
     });
   }, [chart, onChange]);
-  const onAxisLabelPositionChange = (0, _react.useCallback)((position, positionKey) => {
+  const onAxisLabelPositionChange = useCallback((position, positionKey) => {
     const {
       config
     } = chart;
@@ -53,7 +46,7 @@ const StyleSettings = _ref => {
       [positionKey]: position
     });
   }, [chart, onChange]);
-  const onToggleYAxisAutoRange = (0, _react.useCallback)(key => {
+  const onToggleYAxisAutoRange = useCallback(key => {
     const {
       config
     } = chart;
@@ -62,7 +55,7 @@ const StyleSettings = _ref => {
     };
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onYAxisMinChange = (0, _react.useCallback)((key, min) => {
+  const onYAxisMinChange = useCallback((key, min) => {
     const newMin = parseFloat(min);
     if (Number.isNaN(newMin)) return;
     const update = {
@@ -70,7 +63,7 @@ const StyleSettings = _ref => {
     };
     onChange && onChange(update);
   }, [onChange]);
-  const onYAxisMaxChange = (0, _react.useCallback)((key, max) => {
+  const onYAxisMaxChange = useCallback((key, max) => {
     const newMax = parseFloat(max);
     if (Number.isNaN(newMax)) return;
     const update = {
@@ -78,18 +71,18 @@ const StyleSettings = _ref => {
     };
     onChange && onChange(update);
   }, [onChange]);
-  const onDisplayValueChange = (0, _react.useCallback)(() => {
+  const onDisplayValueChange = useCallback(() => {
     var _chart$config;
     onChange && onChange({
-      display_data: !((_chart$config = chart.config) !== null && _chart$config !== void 0 && _chart$config.display_data)
+      display_data: !((_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.display_data)
     });
   }, [chart.config.display_data, onChange]);
-  const onFontSizeChange = (0, _react.useCallback)(value => {
+  const onFontSizeChange = useCallback(value => {
     onChange && onChange({
       label_font_size: value
     });
   }, [onChange]);
-  const onDisplayFieldChange = (0, _react.useCallback)(value => {
+  const onDisplayFieldChange = useCallback(value => {
     onChange && onChange({
       display_data_field: value
     });
@@ -98,7 +91,7 @@ const StyleSettings = _ref => {
     return options.reduce((optionDisplayMap, position) => {
       return {
         ...optionDisplayMap,
-        [position]: _intl.default.get(_constants.LABEL_POSITION_TYPE_SHOW[position])
+        [position]: intl.get(LABEL_POSITION_TYPE_SHOW[position])
       };
     }, {});
   };
@@ -114,10 +107,16 @@ const StyleSettings = _ref => {
   const {
     x_axis_show_label,
     x_axis_label_position,
+    x_axis_label_font_size,
+    x_axis_label_font_color,
     show_y_axis_left_label,
     y_axis_left_label_position,
+    y_axis_left_label_font_size,
+    y_axis_left_label_font_color,
     y_axis_right_label_position,
     show_y_axis_right_label,
+    y_axis_right_label_font_size,
+    y_axis_right_label_font_color,
     y_axis_min_left,
     y_axis_auto_range_left,
     y_axis_max_left,
@@ -134,106 +133,124 @@ const StyleSettings = _ref => {
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yLeftAxisLabelPosition = y_axis_left_label_position || yAxisLabelOptions[0];
   const yRightAxisLabelPosition = y_axis_right_label_position || yAxisLabelOptions[0];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_selectLineType.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectLineType, {
     selectedLineType: line_type,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get(xLabel),
-    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get(xLabel),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "x_axis_show_label",
       checked: x_axis_show_label || false,
-      placeholder: _intl.default.get('Display_title'),
+      placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('x_axis_show_label')
-    }), x_axis_show_label && /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Alignment')), /*#__PURE__*/_react.default.createElement(_DTableRadioGroup2.default, {
+    }), x_axis_show_label && /*#__PURE__*/React.createElement("div", {
+      className: "mt-3 settings-text-horizontal-align sea-chart-select-group"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Alignment')), /*#__PURE__*/React.createElement(_DTableRadioGroup, {
       activeOption: xAxisLabelPosition,
       options: xAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(xAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'x_axis_label_position')
-    })))
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get('Y-axis(left side)'),
-    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    })), x_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      fontSizeKey: "x_axis_label_font_size",
+      fontColorKey: "x_axis_label_font_color",
+      fontSize: x_axis_label_font_size,
+      fontColor: x_axis_label_font_color,
+      onChange: onChange
+    }))
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Y-axis(left side)'),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "show_y_axis_left_label",
       checked: show_y_axis_left_label || false,
-      placeholder: _intl.default.get('Display_title'),
+      placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('show_y_axis_left_label')
-    }), show_y_axis_left_label && /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Alignment')), /*#__PURE__*/_react.default.createElement(_DTableRadioGroup2.default, {
+    }), show_y_axis_left_label && /*#__PURE__*/React.createElement("div", {
+      className: "mt-3 settings-text-horizontal-align sea-chart-select-group"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Alignment')), /*#__PURE__*/React.createElement(_DTableRadioGroup, {
       activeOption: yLeftAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_left_label_position')
-    })), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    })), show_y_axis_left_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      fontSizeKey: "y_axis_left_label_font_size",
+      fontColorKey: "y_axis_left_label_font_color",
+      fontSize: y_axis_left_label_font_size,
+      fontColor: y_axis_left_label_font_color,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_auto_range_left",
       switchClassName: "mt-3",
       checked: y_axis_auto_range_left,
-      placeholder: _intl.default.get('Auto_range'),
+      placeholder: intl.get('Auto_range'),
       onChange: () => onToggleYAxisAutoRange('y_axis_auto_range_left')
-    }), !y_axis_auto_range_left && /*#__PURE__*/_react.default.createElement("div", {
+    }), !y_axis_auto_range_left && /*#__PURE__*/React.createElement("div", {
       className: "mt-3"
-    }, /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+    }, /*#__PURE__*/React.createElement(MinMaxSetting, {
       min: y_axis_min_left,
       max: y_axis_max_left,
       onMinChange: value => onYAxisMinChange('y_axis_min_left', value),
       onMaxChange: value => onYAxisMaxChange('y_axis_max_left', value)
     })))
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get('Y-axis(right side)'),
-    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Y-axis(right side)'),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "show_y_axis_right_label",
       checked: show_y_axis_right_label || false,
-      placeholder: _intl.default.get('Display_title'),
+      placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('show_y_axis_right_label')
-    }), show_y_axis_right_label && /*#__PURE__*/_react.default.createElement(_reactstrap.Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Alignment')), /*#__PURE__*/_react.default.createElement(_DTableRadioGroup2.default, {
+    }), show_y_axis_right_label && /*#__PURE__*/React.createElement("div", {
+      className: "mt-3 settings-text-horizontal-align sea-chart-select-group"
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Alignment')), /*#__PURE__*/React.createElement(_DTableRadioGroup, {
       activeOption: yRightAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_right_label_position')
-    })), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    })), show_y_axis_right_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      fontSizeKey: "y_axis_right_label_font_size",
+      fontColorKey: "y_axis_right_label_font_color",
+      fontSize: y_axis_right_label_font_size,
+      fontColor: y_axis_right_label_font_color,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_auto_range_right",
       switchClassName: "mt-3",
       checked: y_axis_auto_range_right,
-      placeholder: _intl.default.get('Auto_range'),
+      placeholder: intl.get('Auto_range'),
       onChange: () => onToggleYAxisAutoRange('y_axis_auto_range_right')
-    }), !y_axis_auto_range_right && /*#__PURE__*/_react.default.createElement("div", {
+    }), !y_axis_auto_range_right && /*#__PURE__*/React.createElement("div", {
       className: "mt-3"
-    }, /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+    }, /*#__PURE__*/React.createElement(MinMaxSetting, {
       min: y_axis_min_right,
       max: y_axis_max_right,
       onMinChange: value => onYAxisMinChange('y_axis_min_right', value),
       onMaxChange: value => onYAxisMaxChange('y_axis_max_right', value)
     })))
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), _constants.SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_goalLineSetting.default, {
+  }), /*#__PURE__*/React.createElement(Divider, null), SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GoalLineSetting, {
     displayGoalLine: display_goal_line,
     goalLabel: goal_label,
     goalValue: goal_value,
     onChange: onStyleChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null)), /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get('Label')
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Label')
+  }, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     switchClassName: "display-value-settings",
     checked: display_data,
     disabled: false,
-    placeholder: _intl.default.get('Display_value'),
+    placeholder: intl.get('Display_value'),
     onChange: onDisplayValueChange
-  }), display_data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }), display_data && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "combination-label-value-setting"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Label_value')), /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_value')), /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
     value: selectedDisplayFieldOption,
     options: displayFieldOptions,
     onSelectOption: onDisplayFieldChange
-  })), /*#__PURE__*/_react.default.createElement(_fontSettings.FontSizeSettings, {
-    title: _intl.default.get('Label_font_size'),
+  })), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    title: intl.get('Label_font_size'),
     fontSize: label_font_size,
     defaultFontSize: 12,
     modifyFontSize: onFontSizeChange
   })))));
 };
-var _default = exports.default = StyleSettings;
+export default StyleSettings;