sea-chart 2.0.43 → 2.0.44

package/dist/settings/bar-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 _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 _displayValuesSettings = _interopRequireDefault(require("../widgets/display-values-settings"));
-var _colorSettings = _interopRequireDefault(require("../widgets/color-settings"));
-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"));
+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, { useMemo, useCallback } from 'react';
+import { Label } from 'reactstrap';
+import Divider from '../widgets/divider';
+import MinMaxSetting from '../widgets/min-max-setting';
+import DisplayValuesSettings from '../widgets/display-values-settings';
+import ColorUseTypeSelector from '../widgets/color-settings';
+import AxisTitleFontSettings from '../widgets/axis-title-font-settings';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, CHART_TYPE, SUPPORT_GOAL_LINE_CHART_TYPES } from '../../constants';
+import intl from '../../intl';
+import SelectLineType from '../widgets/select-line-type';
+import GoalLineSetting from '../../components/goal-line-setting';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -28,19 +21,19 @@ const StyleSettings = _ref => {
     onStyleChange,
     labelColorConfigs
   } = _ref;
-  const xAxisLabelOptions = (0, _react.useMemo)(() => {
+  const xAxisLabelOptions = useMemo(() => {
     if (xLabel === 'Vertical_axis') {
-      return _constants.Y_LABEL_POSITIONS;
+      return Y_LABEL_POSITIONS;
     }
-    return _constants.X_LABEL_POSITIONS;
+    return X_LABEL_POSITIONS;
   }, [xLabel]);
-  const yAxisLabelOptions = (0, _react.useMemo)(() => {
+  const yAxisLabelOptions = useMemo(() => {
     if (yLabel === 'Horizontal_axis') {
-      return _constants.X_LABEL_POSITIONS;
+      return X_LABEL_POSITIONS;
     }
-    return _constants.Y_LABEL_POSITIONS;
+    return Y_LABEL_POSITIONS;
   }, [yLabel]);
-  const onAxisLabelShowChange = (0, _react.useCallback)(labelKey => {
+  const onAxisLabelShowChange = useCallback(labelKey => {
     const {
       config
     } = chart;
@@ -49,7 +42,7 @@ const StyleSettings = _ref => {
       [labelKey]: !value
     });
   }, [chart, onChange]);
-  const onAxisLabelPositionChange = (0, _react.useCallback)((position, positionKey) => {
+  const onAxisLabelPositionChange = useCallback((position, positionKey) => {
     const {
       config
     } = chart;
@@ -59,7 +52,7 @@ const StyleSettings = _ref => {
       [positionKey]: position
     });
   }, [chart, onChange]);
-  const onYAxisAutoRangeChange = (0, _react.useCallback)(() => {
+  const onYAxisAutoRangeChange = useCallback(() => {
     const {
       config
     } = chart;
@@ -70,7 +63,7 @@ const StyleSettings = _ref => {
       y_axis_auto_range: !y_axis_auto_range
     });
   }, [chart, onChange]);
-  const onYAxisMinChange = (0, _react.useCallback)(min => {
+  const onYAxisMinChange = useCallback(min => {
     const newMin = parseFloat(min);
     if (Number.isNaN(newMin)) return;
     const {
@@ -84,7 +77,7 @@ const StyleSettings = _ref => {
       y_axis_min: newMin
     });
   }, [chart, onChange]);
-  const onYAxisMaxChange = (0, _react.useCallback)(max => {
+  const onYAxisMaxChange = useCallback(max => {
     const newMax = parseFloat(max);
     if (Number.isNaN(newMax)) return;
     const {
@@ -98,10 +91,10 @@ const StyleSettings = _ref => {
       y_axis_max: newMax
     });
   }, [chart, onChange]);
-  const onDisplayValueChange = (0, _react.useCallback)(update => {
+  const onDisplayValueChange = useCallback(update => {
     onChange && onChange(update);
   }, [onChange]);
-  const onColorChange = (0, _react.useCallback)(update => {
+  const onColorChange = useCallback(update => {
     onChange && onChange(update);
   }, [onChange]);
   const {
@@ -118,6 +111,10 @@ const StyleSettings = _ref => {
     y_axis_max,
     y_axis_show_value,
     label_font_size,
+    x_axis_label_font_size,
+    x_axis_label_font_color,
+    y_axis_label_font_size,
+    y_axis_label_font_color,
     type,
     line_type
   } = config;
@@ -128,71 +125,83 @@ const StyleSettings = _ref => {
   } = style_config || {};
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yAxisLabelPosition = y_axis_label_position || yAxisLabelOptions[0];
-  const isLineChart = [_constants.CHART_TYPE.LINE, _constants.CHART_TYPE.LINE_GROUP, _constants.CHART_TYPE.AREA, _constants.CHART_TYPE.AREA_GROUP].includes(type);
+  const isLineChart = [CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(type);
   const getLabelOptionsDisplay = options => {
     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])
       };
     }, {});
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLineChart && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_selectLineType.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLineChart && /*#__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(yLabel),
-    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(yLabel),
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_show_label",
       checked: y_axis_show_label || false,
-      placeholder: _intl.default.get('Display_title'),
+      placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('y_axis_show_label')
-    }), y_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, {
+    }), y_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: yAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    })), y_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      fontSizeKey: "y_axis_label_font_size",
+      fontColorKey: "y_axis_label_font_color",
+      fontSize: y_axis_label_font_size,
+      fontColor: y_axis_label_font_color,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,
-      placeholder: _intl.default.get('Auto_range'),
+      placeholder: intl.get('Auto_range'),
       onChange: onYAxisAutoRangeChange
-    }), !y_axis_auto_range && /*#__PURE__*/_react.default.createElement("div", {
+    }), !y_axis_auto_range && /*#__PURE__*/React.createElement("div", {
       className: "mt-3"
-    }, /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
+    }, /*#__PURE__*/React.createElement(MinMaxSetting, {
       min: y_axis_min,
       max: y_axis_max,
       onMinChange: onYAxisMinChange,
       onMaxChange: onYAxisMaxChange
     })))
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_colorSettings.default, {
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
     chart: chart.config,
     labelColorConfigs: labelColorConfigs,
     updateChart: onColorChange
-  }), /*#__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(_displayValuesSettings.default, {
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
     isShowValueKey: "y_axis_show_value",
     isShowValue: y_axis_show_value,
     fontSizeKey: "label_font_size",
@@ -200,4 +209,4 @@ const StyleSettings = _ref => {
     onChange: onDisplayValueChange
   }));
 };
-var _default = exports.default = StyleSettings;
+export default StyleSettings;

package/dist/settings/basic-number-card/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 _DTableSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
-var _DTableColumnIcon2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableColumnIcon"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-var _commonDataSettings = _interopRequireDefault(require("../widgets/common-data-settings"));
-var _utils = require("../../utils");
-var _constants = require("../../constants");
-var _intl = _interopRequireDefault(require("../../intl"));
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableColumnIcon from "dtable-ui-component/lib/DTableColumnIcon";
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup } from 'reactstrap';
+import { getTableById } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import { BaseUtils } from '../../utils';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUPPORT_COLUMNS, CHART_Y_GROUP_TYPE, BASIC_NUMBER_CARD_CALCULATION_METHOD } from '../../constants';
+import intl from '../../intl';
 const DataSettings = _ref => {
   let {
     tables,
@@ -22,55 +14,55 @@ const DataSettings = _ref => {
     chart,
     onChange
   } = _ref;
-  const summaryMethodsOptions = (0, _react.useMemo)(() => {
-    const numberCardSummaryMethod = [..._constants.CHART_SUMMARY_CALCULATION_METHOD];
+  const summaryMethodsOptions = useMemo(() => {
+    const numberCardSummaryMethod = [...CHART_SUMMARY_CALCULATION_METHOD];
     return numberCardSummaryMethod.map(method => {
       return {
-        label: /*#__PURE__*/_react.default.createElement("span", {
+        label: /*#__PURE__*/React.createElement("span", {
           className: "select-option-name"
-        }, _intl.default.get(_constants.CHART_SUMMARY_SHOW[method])),
+        }, intl.get(CHART_SUMMARY_SHOW[method])),
         value: method
       };
     });
   }, []);
   const summaryTypeOptions = [{
-    value: _constants.CHART_Y_GROUP_TYPE.COUNT,
-    label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    value: CHART_Y_GROUP_TYPE.COUNT,
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "select-module select-module-name ml-0"
-    }, _intl.default.get(_constants.CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/_react.default.createElement("div", {
+    }, intl.get(CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
       className: "summary-type-explanation"
-    }, _intl.default.get('Count_description')))
+    }, intl.get('Count_description')))
   }, {
-    value: _constants.CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
-    label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    value: CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
+    label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "select-module select-module-name ml-0"
-    }, _intl.default.get(_constants.CHART_SUMMARY_SHOW['advanced'])), /*#__PURE__*/_react.default.createElement("div", {
+    }, intl.get(CHART_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
       className: "summary-type-explanation"
-    }, _intl.default.get('Summarize_description')))
+    }, intl.get('Summarize_description')))
   }];
-  const selectedTable = (0, _react.useMemo)(() => {
+  const selectedTable = useMemo(() => {
     const {
       table_id: selectedTableId
     } = chart.config;
-    return (0, _dtableUtils.getTableById)(tables, selectedTableId);
+    return getTableById(tables, selectedTableId);
   }, [chart.config, tables]);
-  const validColumns = (0, _react.useMemo)(() => {
+  const validColumns = useMemo(() => {
     const columns = selectedTable && Array.isArray(selectedTable.columns) ? selectedTable.columns : [];
     if (!columns || !Array.isArray(columns)) return [];
-    return columns.filter(column => _constants.CHART_SUPPORT_COLUMNS.includes(column.type));
+    return columns.filter(column => CHART_SUPPORT_COLUMNS.includes(column.type));
   }, [selectedTable]);
-  const numericColumns = (0, _react.useMemo)(() => {
-    return validColumns.filter(column => _utils.BaseUtils.isNumericSummaryColumn(column));
+  const numericColumns = useMemo(() => {
+    return validColumns.filter(column => BaseUtils.isNumericSummaryColumn(column));
   }, [validColumns]);
-  const numericColumnOptions = (0, _react.useMemo)(() => {
+  const numericColumnOptions = useMemo(() => {
     const options = numericColumns.map(column => {
       return {
         value: column,
-        label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           className: "sea-chart-column-icon"
-        }, /*#__PURE__*/_react.default.createElement(_DTableColumnIcon2.default, {
+        }, /*#__PURE__*/React.createElement(_DTableColumnIcon, {
           column: column
-        })), /*#__PURE__*/_react.default.createElement("span", {
+        })), /*#__PURE__*/React.createElement("span", {
           className: 'select-module select-module-name ml-0'
         }, column.name))
       };
@@ -79,15 +71,15 @@ const DataSettings = _ref => {
       value: {
         key: 'Groupby_null'
       },
-      label: /*#__PURE__*/_react.default.createElement("span", {
+      label: /*#__PURE__*/React.createElement("span", {
         className: 'select-module select-module-name null-option-name ml-0'
-      }, _intl.default.get('Select_a_column')),
+      }, intl.get('Select_a_column')),
       style: {
         color: 'rgba(0, 0, 0, .25)'
       }
     }, ...options];
   }, [numericColumns]);
-  const onSummaryTypeChange = (0, _react.useCallback)(option => {
+  const onSummaryTypeChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -100,7 +92,7 @@ const DataSettings = _ref => {
       summary_type: newSummaryType
     });
   }, [chart, onChange]);
-  const onSelectColumnChange = (0, _react.useCallback)(option => {
+  const onSelectColumnChange = useCallback(option => {
     const {
       config
     } = chart;
@@ -113,7 +105,7 @@ const DataSettings = _ref => {
       numeric_column_key: newColumnKey
     });
   }, [chart, onChange]);
-  const onSelectSummaryMethod = (0, _react.useCallback)(option => {
+  const onSelectSummaryMethod = useCallback(option => {
     const {
       config
     } = chart;
@@ -126,7 +118,7 @@ const DataSettings = _ref => {
       summary_method: newSummaryMethod
     });
   }, [chart, onChange]);
-  const getSelectedMethodOption = (0, _react.useCallback)((method, summaryMethodsOptions) => {
+  const getSelectedMethodOption = useCallback((method, summaryMethodsOptions) => {
     return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
   }, []);
   const {
@@ -137,13 +129,13 @@ const DataSettings = _ref => {
     summary_type
   } = config;
   let selectedSummaryTypeOption;
-  if (!summary_type && summary_method === _constants.BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+  if (!summary_type && summary_method === BASIC_NUMBER_CARD_CALCULATION_METHOD) {
     selectedSummaryTypeOption = summaryTypeOptions[0];
   } else {
     // normal case is summary_type exists, but if not and summary_method is not "COUNT", then it's "SINGLE_NUMERIC_COLUMN"
     selectedSummaryTypeOption = summaryTypeOptions.find(option => option.value === summary_type) || summaryTypeOptions[1];
   }
-  const isSummarizeAField = chart.config.summary_type === _constants.CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN;
+  const isSummarizeAField = chart.config.summary_type === CHART_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN;
   const selectedMethodOption = getSelectedMethodOption(summary_method, summaryMethodsOptions);
   let selectedColumnOption;
   if (isSummarizeAField) {
@@ -152,36 +144,36 @@ const DataSettings = _ref => {
     } = chart;
     selectedColumnOption = numericColumnOptions.find(option => option.value.key === config.numeric_column_key) || numericColumnOptions[0];
   }
-  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, {
     dataSources: dataSources,
     chart: chart,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement("label", null, _intl.default.get('Summary_type')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(_DTableSelect, {
     menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: selectedSummaryTypeOption,
     options: summaryTypeOptions,
-    placeholder: _intl.default.get('Select_a_column'),
+    placeholder: intl.get('Select_a_column'),
     onChange: onSummaryTypeChange
-  })), isSummarizeAField && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  })), isSummarizeAField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement("label", null, _intl.default.get('Summary_field')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(_DTableSelect, {
     menuPortalTarget: "#sea-chart-settings-content",
     value: selectedColumnOption,
     options: numericColumnOptions,
     onChange: onSelectColumnChange
-  })), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "dtable-plugin-stat-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement("label", null, _intl.default.get('Summary_method')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(_DTableSelect, {
     menuPortalTarget: "#sea-chart-settings-content",
     value: selectedMethodOption,
     onChange: onSelectSummaryMethod,
     options: summaryMethodsOptions
   })))));
 };
-var _default = exports.default = DataSettings;
+export default DataSettings;

package/dist/settings/basic-number-card/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, "BasicNumberCardDataSettings", {
-  enumerable: true,
-  get: function () {
-    return _dataSettings.default;
-  }
-});
-Object.defineProperty(exports, "BasicNumberCardStyleSettings", {
-  enumerable: true,
-  get: function () {
-    return _styleSettings.default;
-  }
-});
-var _dataSettings = _interopRequireDefault(require("./data-settings"));
-var _styleSettings = _interopRequireDefault(require("./style-settings"));
+import BasicNumberCardDataSettings from './data-settings';
+import BasicNumberCardStyleSettings from './style-settings';
+export { BasicNumberCardDataSettings, BasicNumberCardStyleSettings };

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

@@ -1,26 +1,18 @@
-"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 = StyleSettings;
-var _CollapsibleSettingLayout2 = _interopRequireDefault(require("dtable-ui-component/lib/CollapsibleSettingLayout"));
-var _react = _interopRequireWildcard(require("react"));
-var _intl = _interopRequireDefault(require("../../intl"));
-var _divider = _interopRequireDefault(require("../widgets/divider"));
-var _fontSettings = _interopRequireDefault(require("../../components/font-settings"));
-var _contexts = require("../../utils/contexts");
-var _constants = require("../../constants");
-function StyleSettings(_ref) {
+import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
+import React, { useContext } from 'react';
+import intl from '../../intl';
+import Divider from '../widgets/divider';
+import GeneralFontSetting from '../../components/font-settings';
+import { GlobalThemeContext } from '../../utils/contexts';
+import { DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT, DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT, LABEL_FONT_COLOR_MAP, TITLE_FONT_COLOR_MAP } from '../../constants';
+export default function StyleSettings(_ref) {
   let {
     chart,
     onChange
   } = _ref;
   const {
     globalTheme
-  } = (0, _react.useContext)(_contexts.GlobalThemeContext);
+  } = useContext(GlobalThemeContext);
   const {
     config
   } = chart;
@@ -43,7 +35,7 @@ function StyleSettings(_ref) {
   };
   const defaultNumConfig = {
     font_size: 34,
-    font_color: _constants.TITLE_FONT_COLOR_MAP[globalTheme] || _constants.DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
+    font_color: TITLE_FONT_COLOR_MAP[globalTheme] || DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 700
   };
@@ -56,7 +48,7 @@ function StyleSettings(_ref) {
   };
   const defaultLabelConfig = {
     font_size: 14,
-    font_color: _constants.LABEL_FONT_COLOR_MAP[globalTheme] || _constants.DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
+    font_color: LABEL_FONT_COLOR_MAP[globalTheme] || DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 400
   };
@@ -77,17 +69,17 @@ function StyleSettings(_ref) {
       [key]: value
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get('Number'),
-    children: /*#__PURE__*/_react.default.createElement(_fontSettings.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Number'),
+    children: /*#__PURE__*/React.createElement(GeneralFontSetting, {
       config: numConfig,
       defaultConfig: defaultNumConfig,
       onChange: handleNumChange
     })
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get('Label'),
-    children: /*#__PURE__*/_react.default.createElement(_fontSettings.default, {
-      labelTitle: _intl.default.get('Label'),
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Label'),
+    children: /*#__PURE__*/React.createElement(GeneralFontSetting, {
+      labelTitle: intl.get('Label'),
       config: labelConfig,
       defaultConfig: defaultLabelConfig,
       onChange: handleLabelChange