sea-chart 2.0.36 → 2.0.38

package/dist/settings/data-settings.js

@@ -1,32 +1,25 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _constants = require("../constants");
-var _barSettings = require("./bar-settings");
-var _advanceBarSettings = require("./advance-bar-settings");
-var _timeComparisonSettings = require("./time-comparison-settings");
-var _pieSettings = require("./pie-settings");
-var _tableSettings = require("./table-settings");
-var _horizontalBarSettings = require("./horizontal-bar-settings");
-var _basicNumberCard = require("./basic-number-card");
-var _combinationSettings = require("./combination-settings");
-var _dashboardSettings = require("./dashboard-settings");
-var _completenessSettings = require("./completeness-settings");
-var _scatter = require("./scatter");
-var _mapSettings = require("./map-settings");
-var _heatMapSettings = require("./heat-map-settings");
-var _mirrorSettings = require("./mirror-settings");
-var _trendSettings = require("./trend-settings");
-var _funnelSettings = require("./funnel-settings");
-var _tableElementSettings = require("./table-element-settings");
+import React, { useEffect, useRef, useState } from 'react';
+import { CHART_TYPE } from '../constants';
+import { BarDataSettings } from './bar-settings';
+import { AdvanceBarDataSettings } from './advance-bar-settings';
+import { TimeComparisonDataSettings } from './time-comparison-settings';
+import { PieDataSettings } from './pie-settings';
+import { TableDataSettings } from './table-settings';
+import { HorizontalDataSettings } from './horizontal-bar-settings';
+import { BasicNumberCardDataSettings } from './basic-number-card';
+import { CombinationDataSettings } from './combination-settings';
+import { DashboardDataSettings } from './dashboard-settings';
+import { CompletenessDataSettings } from './completeness-settings';
+import { ScatterDataSettings } from './scatter';
+import { MapDataSettings } from './map-settings';
+import { HeatMapDataSettings } from './heat-map-settings';
+import { MirrorDataSettings } from './mirror-settings';
+import { TrendDataSettings } from './trend-settings';
+import { FunnelDataSettings } from './funnel-settings';
+import { TableElementDataSettings } from './table-element-settings';
 const DataSettings = props => {
-  const [refreshToggle, setRefreshToggle] = (0, _react.useState)(false);
-  const cacheRef = (0, _react.useRef)(props);
+  const [refreshToggle, setRefreshToggle] = useState(false);
+  const cacheRef = useRef(props);
   const {
     chart
   } = props;
@@ -36,7 +29,7 @@ const DataSettings = props => {
   const {
     type
   } = config;
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const {
       chart: oldChart
     } = cacheRef.current;
@@ -51,93 +44,93 @@ const DataSettings = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props]);
   switch (type) {
-    case _constants.CHART_TYPE.BAR:
-    case _constants.CHART_TYPE.BAR_CUSTOM:
-    case _constants.CHART_TYPE.LINE:
-    case _constants.CHART_TYPE.AREA:
+    case CHART_TYPE.BAR:
+    case CHART_TYPE.BAR_CUSTOM:
+    case CHART_TYPE.LINE:
+    case CHART_TYPE.AREA:
       {
-        return /*#__PURE__*/_react.default.createElement(_barSettings.BarDataSettings, props);
+        return /*#__PURE__*/React.createElement(BarDataSettings, props);
       }
-    case _constants.CHART_TYPE.COMBINATION:
+    case CHART_TYPE.COMBINATION:
       {
-        return /*#__PURE__*/_react.default.createElement(_combinationSettings.CombinationDataSettings, props);
+        return /*#__PURE__*/React.createElement(CombinationDataSettings, props);
       }
-    case _constants.CHART_TYPE.HORIZONTAL_BAR:
-    case _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR:
-    case _constants.CHART_TYPE.HORIZONTAL_GROUP_BAR:
+    case CHART_TYPE.HORIZONTAL_BAR:
+    case CHART_TYPE.STACKED_HORIZONTAL_BAR:
+    case CHART_TYPE.HORIZONTAL_GROUP_BAR:
       {
-        return /*#__PURE__*/_react.default.createElement(_horizontalBarSettings.HorizontalDataSettings, props);
+        return /*#__PURE__*/React.createElement(HorizontalDataSettings, props);
       }
     // TODO
-    case _constants.CHART_TYPE.COMPLETENESS:
-    case _constants.CHART_TYPE.COMPLETENESS_GROUP:
+    case CHART_TYPE.COMPLETENESS:
+    case CHART_TYPE.COMPLETENESS_GROUP:
       {
-        return /*#__PURE__*/_react.default.createElement(_completenessSettings.CompletenessDataSettings, props);
+        return /*#__PURE__*/React.createElement(CompletenessDataSettings, props);
       }
-    case _constants.CHART_TYPE.BAR_GROUP:
-    case _constants.CHART_TYPE.BAR_STACK:
-    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.LINE_GROUP:
+    case CHART_TYPE.AREA_GROUP:
       {
-        return /*#__PURE__*/_react.default.createElement(_advanceBarSettings.AdvanceBarDataSettings, props);
+        return /*#__PURE__*/React.createElement(AdvanceBarDataSettings, props);
       }
-    case _constants.CHART_TYPE.COMPARE_BAR:
+    case CHART_TYPE.COMPARE_BAR:
       {
-        return /*#__PURE__*/_react.default.createElement(_timeComparisonSettings.TimeComparisonDataSettings, props);
+        return /*#__PURE__*/React.createElement(TimeComparisonDataSettings, props);
       }
-    case _constants.CHART_TYPE.PIE:
-    case _constants.CHART_TYPE.RING:
-    case _constants.CHART_TYPE.TREE_MAP:
+    case CHART_TYPE.PIE:
+    case CHART_TYPE.RING:
+    case CHART_TYPE.TREE_MAP:
       {
-        return /*#__PURE__*/_react.default.createElement(_pieSettings.PieDataSettings, props);
+        return /*#__PURE__*/React.createElement(PieDataSettings, props);
       }
-    case _constants.CHART_TYPE.SCATTER:
+    case CHART_TYPE.SCATTER:
       {
-        return /*#__PURE__*/_react.default.createElement(_scatter.ScatterDataSettings, props);
+        return /*#__PURE__*/React.createElement(ScatterDataSettings, props);
       }
-    case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
+    case CHART_TYPE.BASIC_NUMBER_CARD:
       {
-        return /*#__PURE__*/_react.default.createElement(_basicNumberCard.BasicNumberCardDataSettings, props);
+        return /*#__PURE__*/React.createElement(BasicNumberCardDataSettings, props);
       }
-    case _constants.CHART_TYPE.DASHBOARD:
+    case CHART_TYPE.DASHBOARD:
       {
-        return /*#__PURE__*/_react.default.createElement(_dashboardSettings.DashboardDataSettings, props);
+        return /*#__PURE__*/React.createElement(DashboardDataSettings, props);
       }
-    case _constants.CHART_TYPE.TABLE:
+    case CHART_TYPE.TABLE:
       {
-        return /*#__PURE__*/_react.default.createElement(_tableSettings.TableDataSettings, props);
+        return /*#__PURE__*/React.createElement(TableDataSettings, props);
       }
-    case _constants.CHART_TYPE.MAP:
-    case _constants.CHART_TYPE.MAP_BUBBLE:
+    case CHART_TYPE.MAP:
+    case CHART_TYPE.MAP_BUBBLE:
       {
-        return /*#__PURE__*/_react.default.createElement(_mapSettings.MapDataSettings, props);
+        return /*#__PURE__*/React.createElement(MapDataSettings, props);
       }
-    case _constants.CHART_TYPE.WORLD_MAP:
-    case _constants.CHART_TYPE.WORLD_MAP_BUBBLE:
+    case CHART_TYPE.WORLD_MAP:
+    case CHART_TYPE.WORLD_MAP_BUBBLE:
       {
-        return /*#__PURE__*/_react.default.createElement(_mapSettings.MapDataSettings, Object.assign({}, props, {
+        return /*#__PURE__*/React.createElement(MapDataSettings, Object.assign({}, props, {
           isShowMapLevel: false
         }));
       }
-    case _constants.CHART_TYPE.HEAT_MAP:
+    case CHART_TYPE.HEAT_MAP:
       {
-        return /*#__PURE__*/_react.default.createElement(_heatMapSettings.HeatMapDataSettings, props);
+        return /*#__PURE__*/React.createElement(HeatMapDataSettings, props);
       }
-    case _constants.CHART_TYPE.MIRROR:
+    case CHART_TYPE.MIRROR:
       {
-        return /*#__PURE__*/_react.default.createElement(_mirrorSettings.MirrorDataSettings, props);
+        return /*#__PURE__*/React.createElement(MirrorDataSettings, props);
       }
-    case _constants.CHART_TYPE.TREND:
+    case CHART_TYPE.TREND:
       {
-        return /*#__PURE__*/_react.default.createElement(_trendSettings.TrendDataSettings, props);
+        return /*#__PURE__*/React.createElement(TrendDataSettings, props);
       }
-    case _constants.CHART_TYPE.FUNNEL:
+    case CHART_TYPE.FUNNEL:
       {
-        return /*#__PURE__*/_react.default.createElement(_funnelSettings.FunnelDataSettings, props);
+        return /*#__PURE__*/React.createElement(FunnelDataSettings, props);
       }
-    case _constants.CHART_TYPE.TABLE_ELEMENT:
+    case CHART_TYPE.TABLE_ELEMENT:
       {
-        return /*#__PURE__*/_react.default.createElement(_tableElementSettings.TableElementDataSettings, props);
+        return /*#__PURE__*/React.createElement(TableElementDataSettings, props);
       }
     default:
       {
@@ -145,4 +138,4 @@ const DataSettings = props => {
       }
   }
 };
-var _default = exports.default = DataSettings;
+export default DataSettings;

package/dist/settings/funnel-settings/components/dnd-item/dnd-item.js

@@ -1,15 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DndItem;
-var _sortable = require("@dnd-kit/sortable");
-var _utilities = require("@dnd-kit/utilities");
-var _react = _interopRequireDefault(require("react"));
-var _dndItemModule = _interopRequireDefault(require("./dnd-item.module.css"));
-function DndItem(_ref) {
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import React from 'react';
+import styles from './dnd-item.module.css';
+export default function DndItem(_ref) {
   let {
     option
   } = _ref;
@@ -19,7 +12,7 @@ function DndItem(_ref) {
     listeners,
     transform,
     transition
-  } = (0, _sortable.useSortable)({
+  } = useSortable({
     id: option.id,
     transition: {
       duration: 500,
@@ -27,16 +20,16 @@ function DndItem(_ref) {
     }
   });
   const dndStyles = {
-    transform: _utilities.CSS.Transform.toString(transform),
+    transform: CSS.Transform.toString(transform),
     transition
   };
-  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
-    className: _dndItemModule.default['dnd-item'],
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: styles['dnd-item'],
     ref: setNodeRef,
     style: dndStyles
-  }, attributes, listeners), /*#__PURE__*/_react.default.createElement("i", {
+  }, attributes, listeners), /*#__PURE__*/React.createElement("i", {
     className: "dtable-font dtable-icon-drag pr-2"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: _dndItemModule.default['option-name']
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles['option-name']
   }, option.name));
 }

package/dist/settings/funnel-settings/components/dnd-list.js

@@ -1,16 +1,8 @@
-"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 = DndList;
-var _react = _interopRequireWildcard(require("react"));
-var _core = require("@dnd-kit/core");
-var _sortable = require("@dnd-kit/sortable");
-var _modifiers = require("@dnd-kit/modifiers");
-var _dndItem = _interopRequireDefault(require("./dnd-item/dnd-item"));
+import React, { useCallback } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import DndItem from './dnd-item/dnd-item';
 const getIndex = (active, over, array) => {
   let activeIndex = 0;
   let overIndex = 0;
@@ -32,12 +24,12 @@ const getIndex = (active, over, array) => {
     overIndex
   };
 };
-function DndList(_ref) {
+export default function DndList(_ref) {
   let {
     list,
     onListChange
   } = _ref;
-  const handleDragEnd = (0, _react.useCallback)(_ref2 => {
+  const handleDragEnd = useCallback(_ref2 => {
     let {
       active,
       over
@@ -48,20 +40,20 @@ function DndList(_ref) {
         overIndex
       } = getIndex(active, over, list);
       const newList = [...list];
-      const newSortedList = (0, _sortable.arrayMove)(newList, activeIndex, overIndex);
+      const newSortedList = arrayMove(newList, activeIndex, overIndex);
       onListChange(newSortedList);
     }
   }, [list, onListChange]);
-  if (!(list !== null && list !== void 0 && list.length)) return null;
-  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+  if (!(list === null || list === void 0 ? void 0 : list.length)) return null;
+  return /*#__PURE__*/React.createElement(DndContext, {
     onDragEnd: handleDragEnd,
-    modifiers: [_modifiers.restrictToParentElement]
-  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    modifiers: [restrictToParentElement]
+  }, /*#__PURE__*/React.createElement(SortableContext, {
     items: list.map(item => item.id),
-    strategy: _sortable.verticalListSortingStrategy
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React.createElement("div", {
     className: "dnd-list-container"
-  }, list.map(item => /*#__PURE__*/_react.default.createElement(_dndItem.default, {
+  }, list.map(item => /*#__PURE__*/React.createElement(DndItem, {
     option: item,
     key: item.id
   })))));

package/dist/settings/funnel-settings/components/funnel-label-setting.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 = FunnelLabelSetting;
-var _CollapsibleSettingLayout2 = _interopRequireDefault(require("dtable-ui-component/lib/CollapsibleSettingLayout"));
-var _DTableSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
-var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactstrap = require("reactstrap");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _fontSettings = require("../../widgets/font-settings");
-var _constants = require("../../../constants");
-function FunnelLabelSetting(_ref) {
+import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import intl from '../../../intl';
+import { FontSizeSettings } from '../../widgets/font-settings';
+import { FUNNEL_LABEL_FORMAT, FUNNEL_LABEL_POSITIONS, SETTING_DEFAULT_FONT_SIZE } from '../../../constants';
+export default function FunnelLabelSetting(_ref) {
   let {
     onChange,
     funnelLabelPosition,
@@ -23,52 +15,52 @@ function FunnelLabelSetting(_ref) {
     funnelShowOverallRate,
     funnelShowLabels
   } = _ref;
-  const labelPositionOptions = (0, _react.useMemo)(() => [{
-    value: _constants.FUNNEL_LABEL_POSITIONS.INSIDE,
-    label: /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('Inside'))
+  const labelPositionOptions = useMemo(() => [{
+    value: FUNNEL_LABEL_POSITIONS.INSIDE,
+    label: /*#__PURE__*/React.createElement("span", null, intl.get('Inside'))
   }, {
-    value: _constants.FUNNEL_LABEL_POSITIONS.OUTSIDE,
-    label: /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('Outside'))
+    value: FUNNEL_LABEL_POSITIONS.OUTSIDE,
+    label: /*#__PURE__*/React.createElement("span", null, intl.get('Outside'))
   }], []);
-  const labelFormatOptions = (0, _react.useMemo)(() => [{
-    value: _constants.FUNNEL_LABEL_FORMAT.NUMBER,
-    label: /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('Number'))
+  const labelFormatOptions = useMemo(() => [{
+    value: FUNNEL_LABEL_FORMAT.NUMBER,
+    label: /*#__PURE__*/React.createElement("span", null, intl.get('Number'))
   }, {
-    value: _constants.FUNNEL_LABEL_FORMAT.PERCENTAGE,
-    label: /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('Percentage'))
+    value: FUNNEL_LABEL_FORMAT.PERCENTAGE,
+    label: /*#__PURE__*/React.createElement("span", null, intl.get('Percentage'))
   }, {
-    value: _constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE,
-    label: /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('Number_and_percentage'))
+    value: FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE,
+    label: /*#__PURE__*/React.createElement("span", null, intl.get('Number_and_percentage'))
   }], []);
-  const handleChange = (0, _react.useCallback)(function handleChange(value, key) {
+  const handleChange = useCallback(function handleChange(value, key) {
     onChange && onChange({
       [key]: value
     });
   }, [onChange]);
   const selectedLabelPosition = labelPositionOptions.find(option => option.value === funnelLabelPosition);
   const selectedLabelFormat = labelFormatOptions.find(option => option.value === funnelLabelFormat);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
-    title: _intl.default.get('Label')
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Label')
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: funnelShowLabels,
-    placeholder: _intl.default.get('Show_funnel_layer_label'),
+    placeholder: intl.get('Show_funnel_layer_label'),
     onChange: e => handleChange(e.target.checked, 'funnel_show_labels')
-  })), funnelShowLabels && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Label_position')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  })), funnelShowLabels && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_position')), /*#__PURE__*/React.createElement(_DTableSelect, {
     value: selectedLabelPosition || labelPositionOptions[1],
     onChange: e => handleChange(e.value, 'funnel_label_position'),
     options: labelPositionOptions
-  })), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Label_format')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(_DTableSelect, {
     value: selectedLabelFormat || labelFormatOptions[0],
     onChange: e => handleChange(e.value, 'funnel_label_format'),
     options: labelFormatOptions
-  })), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_fontSettings.FontSizeSettings, {
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(FontSizeSettings, {
     className: 'mt-3',
     fontSize: funnelLabelFontSize,
-    defaultFontSize: _constants.SETTING_DEFAULT_FONT_SIZE,
+    defaultFontSize: SETTING_DEFAULT_FONT_SIZE,
     modifyFontSize: e => handleChange(e, 'funnel_label_font_size')
-  })), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: funnelShowOverallRate,
-    placeholder: _intl.default.get('Show_overall_rate'),
+    placeholder: intl.get('Show_overall_rate'),
     onChange: e => handleChange(e.target.checked, 'funnel_show_overall_rate')
   })))));
 }

package/dist/settings/funnel-settings/components/funnel-layer-setting.js

@@ -1,33 +1,25 @@
-"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 = FunnelLayerSetting;
-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 _lodash = require("lodash");
-var _intl = _interopRequireDefault(require("../../../intl"));
-var _dndList = _interopRequireDefault(require("./dnd-list"));
-function FunnelLayerSetting(_ref) {
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableColumnIcon from "dtable-ui-component/lib/DTableColumnIcon";
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { cloneDeep } from 'lodash';
+import intl from '../../../intl';
+import DndList from './dnd-list';
+export default function FunnelLayerSetting(_ref) {
   let {
     selectedColumnKey,
     x_axis_option_list,
     columnList,
     onChange
   } = _ref;
-  const options = (0, _react.useMemo)(() => columnList.map(column => {
+  const options = useMemo(() => columnList.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: "header-icon"
-      }, /*#__PURE__*/_react.default.createElement(_DTableColumnIcon2.default, {
+      }, /*#__PURE__*/React.createElement(_DTableColumnIcon, {
         column: column
-      })), /*#__PURE__*/_react.default.createElement("span", {
+      })), /*#__PURE__*/React.createElement("span", {
         className: 'select-option-name'
       }, column.name))
     };
@@ -43,36 +35,36 @@ function FunnelLayerSetting(_ref) {
   if (selectedColumnKey && selectedColumn) {
     selectedOption = {
       value: selectedColumn,
-      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: "header-icon"
-      }, /*#__PURE__*/_react.default.createElement(_DTableColumnIcon2.default, {
+      }, /*#__PURE__*/React.createElement(_DTableColumnIcon, {
         column: selectedColumn
-      })), /*#__PURE__*/_react.default.createElement("span", {
+      })), /*#__PURE__*/React.createElement("span", {
         className: 'select-option-name'
       }, selectedColumn.name))
     };
     singleSelectOptionsList = x_axis_option_list;
   }
-  const handleXAxisColumnKeyChange = (0, _react.useCallback)(option => {
+  const handleXAxisColumnKeyChange = useCallback(option => {
     const {
       value
     } = option;
-    const newList = (0, _lodash.cloneDeep)(value.data.options);
+    const newList = cloneDeep(value.data.options);
     onChange({
       'x_axis_column_key': value.key,
       'x_axis_option_list': newList
     });
   }, [onChange]);
-  const handleListOrderChange = (0, _react.useCallback)(newList => {
+  const handleListOrderChange = useCallback(newList => {
     onChange({
       'x_axis_option_list': newList
     });
   }, [onChange]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Funnel_layer')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Funnel_layer')), /*#__PURE__*/React.createElement(_DTableSelect, {
     value: selectedOption,
     options: options,
     onChange: handleXAxisColumnKeyChange
-  })), /*#__PURE__*/_react.default.createElement(_dndList.default, {
+  })), /*#__PURE__*/React.createElement(DndList, {
     selectedColumnKey: selectedColumnKey,
     list: singleSelectOptionsList,
     onListChange: handleListOrderChange

package/dist/settings/funnel-settings/data-settings.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 = DataSetting;
-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 _basicSummary = _interopRequireDefault(require("../widgets/basic-summary"));
-var _intl = _interopRequireDefault(require("../../intl"));
-var _constants = require("../../constants");
-var _funnelLayerSetting = _interopRequireDefault(require("./components/funnel-layer-setting"));
-function DataSetting(_ref) {
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React, { useCallback } from 'react';
+import { CellType } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import Divider from '../widgets/divider';
+import BasicSummary from '../widgets/basic-summary';
+import intl from '../../intl';
+import { CHART_SUMMARY_TYPES, CHART_TYPE } from '../../constants';
+import FunnelLayerSetting from './components/funnel-layer-setting';
+export default function DataSetting(_ref) {
   let {
     dataSources,
     chart,
@@ -33,45 +25,45 @@ function DataSetting(_ref) {
   if (table_id) {
     const selectedTable = tables.find(table => table._id === table_id);
     // only use single select columns
-    singleSelectColumns = selectedTable.columns.filter(column => column.type === _dtableUtils.CellType.SINGLE_SELECT);
+    singleSelectColumns = selectedTable.columns.filter(column => column.type === CellType.SINGLE_SELECT);
   } else {
     singleSelectColumns = [];
   }
-  const handleFunnelAccumulateValuesChange = (0, _react.useCallback)(function (e) {
+  const handleFunnelAccumulateValuesChange = useCallback(function (e) {
     onChange && onChange({
       funnel_accumulate_values: e.target.checked
     });
   }, [onChange]);
-  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(_funnelLayerSetting.default, {
+  }), /*#__PURE__*/React.createElement(FunnelLayerSetting, {
     selectedColumnKey: x_axis_column_key,
     x_axis_option_list: x_axis_option_list,
     columnList: singleSelectColumns,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  }), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_basicSummary.default, {
+  }), /*#__PURE__*/React.createElement(BasicSummary, {
     className: "selected-y-axis",
-    label: _intl.default.get('Y_axis'),
-    showSummaryTypes: type === _constants.CHART_TYPE.BAR_CUSTOM ? false : true,
+    label: intl.get('Y_axis'),
+    showSummaryTypes: type === CHART_TYPE.BAR_CUSTOM ? false : true,
     summaryTypeKey: 'y_axis_summary_type',
     summaryMethodKey: 'y_axis_summary_method',
     summaryColumnKey: 'y_axis_summary_column_key',
     chart: chart,
     selectedTableId: table_id,
     tables: tables,
-    supportColumnTypes: [_dtableUtils.CellType.NUMBER],
-    summaryTypeOptions: _constants.CHART_SUMMARY_TYPES,
+    supportColumnTypes: [CellType.NUMBER],
+    summaryTypeOptions: CHART_SUMMARY_TYPES,
     onChange: onChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, {
+  }), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
-  }), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: funnel_accumulate_values,
-    placeholder: _intl.default.get('funnel_accumulate_values'),
+    placeholder: intl.get('funnel_accumulate_values'),
     onChange: handleFunnelAccumulateValuesChange
   }));
 }