sea-chart 2.0.36 → 2.0.38

package/dist/settings/widgets/basic-summary/index.js

@@ -1,21 +1,13 @@
-"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 _utils = require("../../../utils");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _stacksSettings = _interopRequireDefault(require("../../stacks-settings"));
-var _constants = require("../../../constants");
-require("./index.css");
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableColumnIcon from "dtable-ui-component/lib/DTableColumnIcon";
+import React, { useCallback, useMemo } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { CellType, getTableById } from 'dtable-utils';
+import { BaseUtils } from '../../../utils';
+import intl from '../../../intl';
+import StacksSettings from '../../stacks-settings';
+import { CHART_TYPE, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPES, CHART_SUMMARY_TYPE, CHART_SUMMARY_CALCULATION_METHOD, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../../constants';
+import './index.css';
 const BasicSummary = _ref => {
   let {
     tables,
@@ -25,66 +17,66 @@ const BasicSummary = _ref => {
     summaryTypeKey = 'y_axis_summary_type',
     summaryMethodKey = 'y_axis_summary_method',
     summaryColumnKey = 'y_axis_summary_column_key',
-    supportColumnTypes = [_dtableUtils.CellType.NUMBER, _dtableUtils.CellType.DATE],
-    summaryTypeOptions: oldSummaryTypeOptions = _constants.CHART_SUMMARY_TYPES,
+    supportColumnTypes = [CellType.NUMBER, CellType.DATE],
+    summaryTypeOptions: oldSummaryTypeOptions = CHART_SUMMARY_TYPES,
     label
   } = _ref;
-  const selectedTable = (0, _react.useMemo)(() => {
+  const selectedTable = useMemo(() => {
     const {
       table_id
     } = chart.config;
-    return (0, _dtableUtils.getTableById)(tables, table_id);
+    return getTableById(tables, table_id);
   }, [tables, chart.config]);
-  const numericColumns = (0, _react.useMemo)(() => {
+  const numericColumns = useMemo(() => {
     if (!selectedTable) return [];
     const {
       columns
     } = selectedTable;
     return columns.filter(column => {
-      const supportNum = supportColumnTypes.includes(_dtableUtils.CellType.NUMBER) && _utils.BaseUtils.isNumericSummaryColumn(column) && column.type !== _dtableUtils.CellType.DURATION;
-      const supportDate = supportColumnTypes.includes(_dtableUtils.CellType.DATE) && _utils.BaseUtils.isDateSummaryColumn(column);
+      const supportNum = supportColumnTypes.includes(CellType.NUMBER) && BaseUtils.isNumericSummaryColumn(column) && column.type !== CellType.DURATION;
+      const supportDate = supportColumnTypes.includes(CellType.DATE) && BaseUtils.isDateSummaryColumn(column);
       return supportNum || supportDate;
     });
   }, [selectedTable, supportColumnTypes]);
-  const numericColumnOptions = (0, _react.useMemo)(() => {
+  const numericColumnOptions = useMemo(() => {
     return numericColumns.map(column => {
       return {
         value: column.key,
         column: 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))
       };
     });
   }, [numericColumns]);
-  const summaryTypeOptions = (0, _react.useMemo)(() => {
-    const summaryExplanation = _utils.BaseUtils.getSummaryExplanation(chart);
+  const summaryTypeOptions = useMemo(() => {
+    const summaryExplanation = BaseUtils.getSummaryExplanation(chart);
     return Array.isArray(oldSummaryTypeOptions) ? oldSummaryTypeOptions.map(summaryType => {
       return {
         value: summaryType,
-        label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        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[summaryType])), /*#__PURE__*/_react.default.createElement("div", {
+        }, intl.get(CHART_SUMMARY_SHOW[summaryType])), /*#__PURE__*/React.createElement("div", {
           className: "summary-type-explanation"
         }, summaryExplanation[summaryType]))
       };
     }) : [];
   }, [chart, oldSummaryTypeOptions]);
-  const summaryMethodOptions = (0, _react.useMemo)(() => {
+  const summaryMethodOptions = useMemo(() => {
     const summaryColumn = numericColumns.find(column => column.key === chart.config[summaryColumnKey]);
-    const methods = _utils.BaseUtils.isNumericSummaryColumn(summaryColumn) ? _constants.CHART_SUMMARY_CALCULATION_METHOD : _constants.CHART_DATE_SUMMARY_CALCULATION_METHOD;
+    const methods = BaseUtils.isNumericSummaryColumn(summaryColumn) ? CHART_SUMMARY_CALCULATION_METHOD : CHART_DATE_SUMMARY_CALCULATION_METHOD;
     return methods.map(item => {
       return {
         value: item,
-        label: _intl.default.get(_constants.CHART_SUMMARY_SHOW[item])
+        label: intl.get(CHART_SUMMARY_SHOW[item])
       };
     });
   }, [chart, numericColumns, summaryColumnKey]);
-  const onSummaryTypeChange = (0, _react.useCallback)(option => {
+  const onSummaryTypeChange = useCallback(option => {
     const summaryType = option.value;
     const {
       config
@@ -96,15 +88,15 @@ const BasicSummary = _ref => {
       [summaryColumnKey]: '',
       [summaryMethodKey]: ''
     };
-    if (summaryType === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-      update[summaryMethodKey] = _constants.CHART_SUMMARY_CALCULATION_METHOD[0];
+    if (summaryType === CHART_SUMMARY_TYPE.ADVANCED) {
+      update[summaryMethodKey] = CHART_SUMMARY_CALCULATION_METHOD[0];
     }
-    if (summaryType === _constants.CHART_SUMMARY_TYPE.ADVANCED && numericColumns[0]) {
+    if (summaryType === CHART_SUMMARY_TYPE.ADVANCED && numericColumns[0]) {
       update[summaryColumnKey] = numericColumns[0].key;
     }
     onChange && onChange(update);
   }, [chart, summaryTypeKey, summaryColumnKey, summaryMethodKey, onChange, numericColumns]);
-  const onSummaryColumnChange = (0, _react.useCallback)(option => {
+  const onSummaryColumnChange = useCallback(option => {
     const value = option.value;
     const {
       config
@@ -117,16 +109,16 @@ const BasicSummary = _ref => {
     };
     const oldColumn = numericColumns.find(column => column.key === oldValue);
     const newColumn = numericColumns.find(column => column.key === value);
-    const isDateColumn = _utils.BaseUtils.isDateSummaryColumn(newColumn);
-    if (_utils.BaseUtils.isDateSummaryColumn(oldColumn) !== isDateColumn) {
-      const methods = isDateColumn ? _constants.CHART_DATE_SUMMARY_CALCULATION_METHOD : _constants.CHART_SUMMARY_CALCULATION_METHOD;
+    const isDateColumn = BaseUtils.isDateSummaryColumn(newColumn);
+    if (BaseUtils.isDateSummaryColumn(oldColumn) !== isDateColumn) {
+      const methods = isDateColumn ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
       if (!methods.includes(config[summaryMethodKey])) {
         update[summaryMethodKey] = methods[0];
       }
     }
     onChange && onChange(update);
   }, [chart, summaryColumnKey, summaryMethodKey, onChange, numericColumns]);
-  const onSummaryMethodChange = (0, _react.useCallback)(option => {
+  const onSummaryMethodChange = useCallback(option => {
     const value = option.value;
     const {
       config
@@ -137,58 +129,58 @@ const BasicSummary = _ref => {
       [summaryMethodKey]: value
     });
   }, [chart, summaryMethodKey, onChange]);
-  const renderNumericColumn = (0, _react.useCallback)(() => {
+  const renderNumericColumn = useCallback(() => {
     const column_key = chart.config[summaryColumnKey];
     const selectedColumnOption = numericColumnOptions.find(option => option.value === column_key);
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+    return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.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,
       onChange: onSummaryColumnChange,
       options: numericColumnOptions,
-      placeholder: _intl.default.get('Select_a_column'),
+      placeholder: intl.get('Select_a_column'),
       noOptionsMessage: () => {
-        return /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('No_options'));
+        return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
       }
     }));
   }, [chart, summaryColumnKey, numericColumnOptions, onSummaryColumnChange]);
-  const renderSummaryMethod = (0, _react.useCallback)(() => {
+  const renderSummaryMethod = useCallback(() => {
     const summaryMethod = chart.config[summaryMethodKey];
     const selectedMethodOption = summaryMethodOptions.find(option => option.value === summaryMethod);
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+    return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.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: onSummaryMethodChange,
       options: summaryMethodOptions
     }));
   }, [chart, summaryMethodKey, onSummaryMethodChange, summaryMethodOptions]);
-  const renderOtherSummaries = (0, _react.useCallback)(() => {
-    const summaryType = chart.config[summaryTypeKey] || _constants.CHART_SUMMARY_TYPE.COUNT;
-    if (summaryType !== _constants.CHART_SUMMARY_TYPE.ADVANCED) return null;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderNumericColumn(), renderSummaryMethod());
+  const renderOtherSummaries = useCallback(() => {
+    const summaryType = chart.config[summaryTypeKey] || CHART_SUMMARY_TYPE.COUNT;
+    if (summaryType !== CHART_SUMMARY_TYPE.ADVANCED) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, renderNumericColumn(), renderSummaryMethod());
   }, [summaryTypeKey, chart, renderNumericColumn, renderSummaryMethod]);
   const {
     type
   } = chart.config;
-  const summaryType = chart.config[summaryTypeKey] || _constants.CHART_SUMMARY_TYPE.COUNT;
+  const summaryType = chart.config[summaryTypeKey] || CHART_SUMMARY_TYPE.COUNT;
   const selectedSummaryTypeOption = summaryTypeOptions.find(item => item.value === summaryType) || summaryTypeOptions[0];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSummaryTypes && /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showSummaryTypes && /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, label), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(_DTableSelect, {
     menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: selectedSummaryTypeOption,
     onChange: onSummaryTypeChange,
     options: summaryTypeOptions
-  })), renderOtherSummaries(), type === _constants.CHART_TYPE.BAR_CUSTOM && /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  })), renderOtherSummaries(), type === CHART_TYPE.BAR_CUSTOM && /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, label), /*#__PURE__*/_react.default.createElement(_stacksSettings.default, {
+  }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(StacksSettings, {
     chart: chart,
     numericColumnsOptions: numericColumnOptions,
     updateStatItem: onChange
   })));
 };
-var _default = exports.default = BasicSummary;
+export default BasicSummary;

package/dist/settings/widgets/chart-type/index.js

@@ -1,18 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _constants = require("../../../constants");
-var _utils = require("../../../utils");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _components = require("../../../components");
-require("./index.css");
+import React, { useCallback, useState } from 'react';
+import { Label, FormGroup } from 'reactstrap';
+import { CHART_TYPE_SHOW } from '../../../constants';
+import { eventStopPropagation } from '../../../utils';
+import intl from '../../../intl';
+import { Icon, TypesDialog } from '../../../components';
+import './index.css';
 const ChartType = _ref => {
   let {
     chart,
@@ -20,15 +12,15 @@ const ChartType = _ref => {
     onChange,
     dataSources
   } = _ref;
-  const [isDialogShow, setDialogShow] = (0, _react.useState)(false);
-  const openTypesDialog = (0, _react.useCallback)(event => {
-    (0, _utils.eventStopPropagation)(event);
+  const [isDialogShow, setDialogShow] = useState(false);
+  const openTypesDialog = useCallback(event => {
+    eventStopPropagation(event);
     setDialogShow(true);
   }, []);
-  const closeTypesDialog = (0, _react.useCallback)(() => {
+  const closeTypesDialog = useCallback(() => {
     setDialogShow(false);
   }, []);
-  const onTypeChange = (0, _react.useCallback)(type => {
+  const onTypeChange = useCallback(type => {
     const {
       config
     } = chart;
@@ -55,22 +47,22 @@ const ChartType = _ref => {
   const {
     type
   } = config;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item",
     id: "sea-chart-type-container"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Chart_type')), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Chart_type')), /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-selected-type-container d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(_constants.CHART_TYPE_SHOW[type])), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, intl.get(CHART_TYPE_SHOW[type])), /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-type-icon-container",
     onClick: openTypesDialog
-  }, /*#__PURE__*/_react.default.createElement(_components.Icon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     symbol: "type-change",
     className: "sea-chart-type-icon"
-  })))), isDialogShow && /*#__PURE__*/_react.default.createElement(_components.TypesDialog, {
+  })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
     dataSources: dataSources,
     type: type,
     onToggle: closeTypesDialog,
     onChange: onTypeChange
   }));
 };
-var _default = exports.default = ChartType;
+export default ChartType;

package/dist/settings/widgets/color-settings/index.js

@@ -1,51 +1,43 @@
-"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 _DTableColorPicker2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableColorPicker"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactstrap = require("reactstrap");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _colorRulesPopover = _interopRequireDefault(require("../../../components/color-popover/color-rules-popover"));
-var _colorUtils = require("../../../utils/color-utils");
-var _constants = require("../../../constants");
-var _colorRules = require("../../../constants/color-rules");
-require("./index.css");
-class ColorUseTypeSelector extends _react.Component {
+import _DTableCustomizeSelect from "dtable-ui-component/lib/DTableCustomizeSelect";
+import _DTableColorPicker from "dtable-ui-component/lib/DTableColorPicker";
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { Input, FormGroup, Label } from 'reactstrap';
+import intl from '../../../intl';
+import ColorRulesPopover from '../../../components/color-popover/color-rules-popover';
+import { getValidColorRules } from '../../../utils/color-utils';
+import { CHART_TYPE, TYPE_COLOR_USING, TYPE_DISPLAY_COLOR_USING } from '../../../constants';
+import { COLOR_RULE_FILTER_TYPE_MAP } from '../../../constants/color-rules';
+import './index.css';
+class ColorUseTypeSelector extends Component {
   constructor(props) {
     super(props);
     this.getUsableColorTypes = chartType => {
       switch (chartType) {
-        case _constants.CHART_TYPE.BAR_GROUP:
-        case _constants.CHART_TYPE.BAR_STACK:
-        case _constants.CHART_TYPE.HORIZONTAL_GROUP_BAR:
-        case _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR:
-        case _constants.CHART_TYPE.PIE:
-        case _constants.CHART_TYPE.RING:
-        case _constants.CHART_TYPE.LINE_GROUP:
-        case _constants.CHART_TYPE.AREA_GROUP:
+        case CHART_TYPE.BAR_GROUP:
+        case CHART_TYPE.BAR_STACK:
+        case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+        case CHART_TYPE.STACKED_HORIZONTAL_BAR:
+        case CHART_TYPE.PIE:
+        case CHART_TYPE.RING:
+        case CHART_TYPE.LINE_GROUP:
+        case CHART_TYPE.AREA_GROUP:
           {
-            return [_constants.TYPE_COLOR_USING.USE_DEFAULT, _constants.TYPE_COLOR_USING.USE_COLUMN_COLORS];
+            return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_COLUMN_COLORS];
           }
-        case _constants.CHART_TYPE.AREA:
-        case _constants.CHART_TYPE.LINE:
+        case CHART_TYPE.AREA:
+        case CHART_TYPE.LINE:
           {
-            return [_constants.TYPE_COLOR_USING.USE_DEFAULT, _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS];
+            return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_SPECIFIC_COLORS];
           }
-        case _constants.CHART_TYPE.BAR:
-        case _constants.CHART_TYPE.HORIZONTAL_BAR:
+        case CHART_TYPE.BAR:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
-            return [_constants.TYPE_COLOR_USING.USE_DEFAULT, _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS, _constants.TYPE_COLOR_USING.USE_RULES];
+            return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_SPECIFIC_COLORS, TYPE_COLOR_USING.USE_RULES];
           }
         default:
           {
-            return [_constants.TYPE_COLOR_USING.USE_DEFAULT];
+            return [TYPE_COLOR_USING.USE_DEFAULT];
           }
       }
     };
@@ -60,9 +52,9 @@ class ColorUseTypeSelector extends _react.Component {
       return useableColorTypes.map(colorType => {
         return {
           value: colorType,
-          label: /*#__PURE__*/_react.default.createElement("span", {
+          label: /*#__PURE__*/React.createElement("span", {
             className: "select-module"
-          }, _intl.default.get(_constants.TYPE_DISPLAY_COLOR_USING[colorType]))
+          }, intl.get(TYPE_DISPLAY_COLOR_USING[colorType]))
         };
       });
     };
@@ -75,10 +67,10 @@ class ColorUseTypeSelector extends _react.Component {
         type
       } = chart;
       switch (type) {
-        case _constants.CHART_TYPE.LINE:
-        case _constants.CHART_TYPE.AREA:
-        case _constants.CHART_TYPE.BAR:
-        case _constants.CHART_TYPE.HORIZONTAL_BAR:
+        case CHART_TYPE.LINE:
+        case CHART_TYPE.AREA:
+        case CHART_TYPE.BAR:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
             const {
               y_axis_label_color
@@ -102,13 +94,13 @@ class ColorUseTypeSelector extends _react.Component {
         type
       } = chart;
       switch (type) {
-        case _constants.CHART_TYPE.BAR:
+        case CHART_TYPE.BAR:
           {
-            return (0, _colorUtils.getValidColorRules)(chart.y_axis_label_color_rules);
+            return getValidColorRules(chart.y_axis_label_color_rules);
           }
-        case _constants.CHART_TYPE.HORIZONTAL_BAR:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
-            return (0, _colorUtils.getValidColorRules)(chart.horizontal_axis_label_color_rules);
+            return getValidColorRules(chart.horizontal_axis_label_color_rules);
           }
         default:
           {
@@ -124,10 +116,10 @@ class ColorUseTypeSelector extends _react.Component {
         type
       } = chart;
       switch (type) {
-        case _constants.CHART_TYPE.BAR:
-        case _constants.CHART_TYPE.HORIZONTAL_BAR:
+        case CHART_TYPE.BAR:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
-            return [_colorRules.COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE];
+            return [COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE];
           }
         default:
           {
@@ -143,15 +135,15 @@ class ColorUseTypeSelector extends _react.Component {
       let updatedChart = {
         color_option
       };
-      if (color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
+      if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
         this.setState({
           specificColor: updatedChart.y_axis_label_color || labelColorConfigs[0].color
         });
         switch (chart.type) {
-          case _constants.CHART_TYPE.HORIZONTAL_BAR:
-          case _constants.CHART_TYPE.BAR:
-          case _constants.CHART_TYPE.LINE:
-          case _constants.CHART_TYPE.AREA:
+          case CHART_TYPE.HORIZONTAL_BAR:
+          case CHART_TYPE.BAR:
+          case CHART_TYPE.LINE:
+          case CHART_TYPE.AREA:
             {
               updatedChart.y_axis_label_color = updatedChart.y_axis_label_color || labelColorConfigs[0].color;
               break;
@@ -162,7 +154,7 @@ class ColorUseTypeSelector extends _react.Component {
             }
         }
       }
-      if (color_option === _constants.TYPE_COLOR_USING.USE_DEFAULT) {
+      if (color_option === TYPE_COLOR_USING.USE_DEFAULT) {
         updatedChart.y_axis_label_color = labelColorConfigs[0].color;
       }
       this.props.updateChart(updatedChart);
@@ -195,10 +187,10 @@ class ColorUseTypeSelector extends _react.Component {
       } = this.props;
       let updatedChart = {};
       switch (chart.type) {
-        case _constants.CHART_TYPE.BAR:
-        case _constants.CHART_TYPE.AREA:
-        case _constants.CHART_TYPE.LINE:
-        case _constants.CHART_TYPE.HORIZONTAL_BAR:
+        case CHART_TYPE.BAR:
+        case CHART_TYPE.AREA:
+        case CHART_TYPE.LINE:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
             updatedChart.y_axis_label_color = color;
             break;
@@ -225,12 +217,12 @@ class ColorUseTypeSelector extends _react.Component {
       } = this.props;
       let updatedChart = {};
       switch (chart.type) {
-        case _constants.CHART_TYPE.BAR:
+        case CHART_TYPE.BAR:
           {
             updatedChart.y_axis_label_color_rules = colorRules;
             break;
           }
-        case _constants.CHART_TYPE.HORIZONTAL_BAR:
+        case CHART_TYPE.HORIZONTAL_BAR:
           {
             updatedChart.horizontal_axis_label_color_rules = colorRules;
             break;
@@ -247,24 +239,24 @@ class ColorUseTypeSelector extends _react.Component {
         specificColor
       } = this.state;
       const id = 'statistic_selected_specific_color';
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         id: id,
         className: "selected-specific-color mt-1",
         ref: ref => this.colorSpecialContainerRef = ref
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "selected-specific-color-wrapper"
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         className: "specific-color-show",
         style: {
           backgroundColor: specificColor
         },
         onClick: this.onToggleColorSelector
-      }), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      }), /*#__PURE__*/React.createElement(Input, {
         type: "text",
         className: "specific-color-input",
         value: specificColor,
         onChange: event => this.modifySpecificColor(event.target.value)
-      }), this.state.isShowColorSelector && /*#__PURE__*/_react.default.createElement(_DTableColorPicker2.default, {
+      }), this.state.isShowColorSelector && /*#__PURE__*/React.createElement(_DTableColorPicker, {
         ref: this.colorPickerRef,
         color: specificColor,
         onSubmit: this.modifyHex,
@@ -283,27 +275,27 @@ class ColorUseTypeSelector extends _react.Component {
       const rulesLen = colorRules ? colorRules.length : 0;
       const hasRules = rulesLen > 0;
       const id = 'statistic_color_rules_toggle';
-      let msg = _intl.default.get('Add_rule');
+      let msg = intl.get('Add_rule');
       if (rulesLen === 1) {
-        msg = _intl.default.get('Added_1_rule');
+        msg = intl.get('Added_1_rule');
       } else if (rulesLen > 1) {
-        msg = _intl.default.get('Added_xxx_rules', {
+        msg = intl.get('Added_xxx_rules', {
           rules_count: rulesLen
         });
       }
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         id: id,
-        className: (0, _classnames.default)('sea-chart-color-rules-toggle', 'mt-1', hasRules ? 'sea-chart-edit-color-rule' : 'sea-chart-add-color-rule'),
+        className: classnames('sea-chart-color-rules-toggle', 'mt-1', hasRules ? 'sea-chart-edit-color-rule' : 'sea-chart-add-color-rule'),
         tabIndex: "0",
         ref: ref => this.colorRulesContainerRef = ref,
         onClick: this.showColorRulesEditor
-      }, hasRules ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, msg), /*#__PURE__*/_react.default.createElement("i", {
+      }, hasRules ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, msg), /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-rename"
-      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
+      })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
         className: "dtable-font dtable-icon-add-table"
-      }), /*#__PURE__*/_react.default.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", {
         className: "ml-2"
-      }, msg))), this.state.isShowColorRulesEditor && /*#__PURE__*/_react.default.createElement(_colorRulesPopover.default, {
+      }, msg))), this.state.isShowColorRulesEditor && /*#__PURE__*/React.createElement(ColorRulesPopover, {
         target: id,
         colorRules: colorRules,
         colorRuleTypes: colorRuleTypes,
@@ -319,7 +311,7 @@ class ColorUseTypeSelector extends _react.Component {
     };
     this.colorOptions = this.initColorTypeOptions();
     this.isToggleColorRulesEditor = false;
-    this.colorPickerRef = /*#__PURE__*/_react.default.createRef();
+    this.colorPickerRef = React.createRef();
   }
   render() {
     const {
@@ -329,13 +321,13 @@ class ColorUseTypeSelector extends _react.Component {
       color_option
     } = chart;
     const selectedColorOption = this.colorOptions.find(colorOption => colorOption.value === color_option) || this.colorOptions[0];
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
+    return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-color-type-selector"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Color')), /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect2.default, {
+    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Color')), /*#__PURE__*/React.createElement(_DTableCustomizeSelect, {
       value: selectedColorOption,
       options: this.colorOptions,
       onSelectOption: this.onSelectColorOption
-    }), color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === _constants.TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
+    }), color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
   }
 }
-var _default = exports.default = ColorUseTypeSelector;
+export default ColorUseTypeSelector;