sea-chart 2.0.47 → 2.0.48

package/dist/settings/time-comparison-settings/data-settings.js

@@ -1,15 +1,23 @@
-import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
-import React, { useCallback } from 'react';
-import { FormGroup, Label } from 'reactstrap';
-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 BasicSummary from '../widgets/basic-summary';
-import TimePicker from '../widgets/time-picker';
-import { CHART_SUMMARY_TYPE, GEOLOCATION_FORMAT_CITY, GEOLOCATION_FORMAT_MAP } from '../../constants';
-import intl from '../../intl';
-import '../../assets/css/time-picker.css';
+"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 _reactstrap = require("reactstrap");
+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 _basicSummary = _interopRequireDefault(require("../widgets/basic-summary"));
+var _timePicker = _interopRequireDefault(require("../widgets/time-picker"));
+var _constants = require("../../constants");
+var _intl = _interopRequireDefault(require("../../intl"));
+require("../../assets/css/time-picker.css");
 const DataSettings = _ref => {
   let {
     chart,
@@ -17,7 +25,7 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const onXAxisColumnChange = useCallback(column => {
+  const onXAxisColumnChange = (0, _react.useCallback)(column => {
     const {
       config
     } = chart;
@@ -37,18 +45,18 @@ const DataSettings = _ref => {
       update['x_axis_date_granularity'] = null;
       update['x_axis_geolocation_granularity'] = null;
     } else {
-      if (DATE_COLUMN_OPTIONS.includes(type)) {
-        update['x_axis_date_granularity'] = CHART_SUMMARY_TYPE.MONTH;
+      if (_dtableUtils.DATE_COLUMN_OPTIONS.includes(type)) {
+        update['x_axis_date_granularity'] = _constants.CHART_SUMMARY_TYPE.MONTH;
         update['x_axis_geolocation_granularity'] = null;
-      } else if (type === CellType.GEOLOCATION) {
+      } else if (type === _dtableUtils.CellType.GEOLOCATION) {
         const {
           geo_format
         } = column.data || {};
-        if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE) {
-          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_MAP.PROVINCE;
-        } else if (geo_format === GEOLOCATION_FORMAT_MAP.PROVINCE_CITY) {
-          update['x_axis_geolocation_granularity'] = GEOLOCATION_FORMAT_CITY;
-        } else if (geo_format === GEOLOCATION_FORMAT_MAP.GEOLOCATION || !geo_format) {
+        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) {
           update['x_axis_geolocation_granularity'] = 'district';
         } else {
           update['x_axis_geolocation_granularity'] = null;
@@ -58,7 +66,7 @@ const DataSettings = _ref => {
     }
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onGroupbyDateGranularityChange = useCallback(option => {
+  const onGroupbyDateGranularityChange = (0, _react.useCallback)(option => {
     const {
       config
     } = chart;
@@ -71,7 +79,7 @@ const DataSettings = _ref => {
       x_axis_date_granularity: value
     });
   }, [chart, onChange]);
-  const onGroupbyGeolocationGranularityChange = useCallback(option => {
+  const onGroupbyGeolocationGranularityChange = (0, _react.useCallback)(option => {
     const {
       config
     } = chart;
@@ -84,7 +92,7 @@ const DataSettings = _ref => {
       x_axis_geolocation_granularity: value
     });
   }, [chart, onChange]);
-  const onDateChange = useCallback((key, value) => {
+  const onDateChange = (0, _react.useCallback)((key, value) => {
     const {
       config
     } = chart;
@@ -94,7 +102,7 @@ const DataSettings = _ref => {
       [key]: value
     });
   }, [chart, onChange]);
-  const onDisplayIncreaseChange = useCallback(event => {
+  const onDisplayIncreaseChange = (0, _react.useCallback)(event => {
     onChange && onChange({
       display_increase: event.target.checked
     });
@@ -116,15 +124,15 @@ const DataSettings = _ref => {
     x_axis_compared_date_range_end,
     display_increase
   } = chart.config;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commonDataSettings.default, {
     chart: chart,
     dataSources: dataSources,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(GroupBy, {
+  }), /*#__PURE__*/_react.default.createElement(_groupBy.default, {
     tables: tables,
     className: "selected-x-axis",
-    label: intl.get('X_axis'),
+    label: _intl.default.get('X_axis'),
     selectedTableId: table_id,
     selectedColumnKey: x_axis_column_key,
     selectedDateGranularity: x_axis_date_granularity,
@@ -133,41 +141,41 @@ const DataSettings = _ref => {
     onGroupByChange: onXAxisColumnChange,
     onGroupbyDateGranularityChange: onGroupbyDateGranularityChange,
     onGroupbyGeolocationGranularityChange: onGroupbyGeolocationGranularityChange
-  }), /*#__PURE__*/React.createElement(FormGroup, {
+  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Date_range')), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Date_range')), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-time-input-container"
-  }, /*#__PURE__*/React.createElement(TimePicker, {
+  }, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     onChange: value => onDateChange('x_axis_date_range_start', value),
     value: x_axis_date_range_start
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-concat"
-  }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
+  }, '   -   '), /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     onChange: value => onDateChange('x_axis_date_range_end', value),
     value: x_axis_date_range_end
-  }))), /*#__PURE__*/React.createElement(FormGroup, {
+  }))), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, {
     className: "sea-chart-parameter-item"
-  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Compare_to_date_range')), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Compare_to_date_range')), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-time-input-container"
-  }, /*#__PURE__*/React.createElement(TimePicker, {
+  }, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     onChange: value => onDateChange('x_axis_compared_date_range_start', value),
     value: x_axis_compared_date_range_start
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-concat"
-  }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
+  }, '   -   '), /*#__PURE__*/_react.default.createElement(_timePicker.default, {
     onChange: value => onDateChange('x_axis_compared_date_range_end', value),
     value: x_axis_compared_date_range_end
-  }))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(BasicSummary, {
+  }))), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_basicSummary.default, {
     className: "selected-y-axis",
-    label: intl.get('Y_axis'),
+    label: _intl.default.get('Y_axis'),
     chart: chart,
     selectedTableId: table_id,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_DTableSwitch, {
+  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
     checked: display_increase,
-    placeholder: intl.get('Display_increase'),
+    placeholder: _intl.default.get('Display_increase'),
     onChange: onDisplayIncreaseChange
   }));
 };
-export default DataSettings;
+var _default = exports.default = DataSettings;

package/dist/settings/time-comparison-settings/index.js

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

package/dist/settings/time-comparison-settings/style-settings.js

@@ -1,23 +1,31 @@
-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 { Label } from 'reactstrap';
-import Divider from '../widgets/divider';
-import MinMaxSetting from '../widgets/min-max-setting';
-import DisplayValuesSettings from '../widgets/display-values-settings';
-import { eventStopPropagation } from '../../utils';
-import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, LABEL_COLORS } from '../../constants';
-import AxisTitleFontSettings from '../widgets/axis-title-font-settings';
-import intl from '../../intl';
+"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 _utils = require("../../utils");
+var _constants = require("../../constants");
+var _axisTitleFontSettings = _interopRequireDefault(require("../widgets/axis-title-font-settings"));
+var _intl = _interopRequireDefault(require("../../intl"));
 const StyleSettings = _ref => {
   let {
     chart,
     onChange
   } = _ref;
-  const xAxisLabelOptions = X_LABEL_POSITIONS;
-  const yAxisLabelOptions = Y_LABEL_POSITIONS;
-  const onAxisLabelShowChange = useCallback(labelKey => {
+  const xAxisLabelOptions = _constants.X_LABEL_POSITIONS;
+  const yAxisLabelOptions = _constants.Y_LABEL_POSITIONS;
+  const onAxisLabelShowChange = (0, _react.useCallback)(labelKey => {
     const {
       config
     } = chart;
@@ -26,7 +34,7 @@ const StyleSettings = _ref => {
       [labelKey]: !value
     });
   }, [chart, onChange]);
-  const onAxisLabelPositionChange = useCallback((position, positionKey) => {
+  const onAxisLabelPositionChange = (0, _react.useCallback)((position, positionKey) => {
     const {
       config
     } = chart;
@@ -36,7 +44,7 @@ const StyleSettings = _ref => {
       [positionKey]: position
     });
   }, [chart, onChange]);
-  const onYAxisAutoRangeChange = useCallback(() => {
+  const onYAxisAutoRangeChange = (0, _react.useCallback)(() => {
     const {
       config
     } = chart;
@@ -47,7 +55,7 @@ const StyleSettings = _ref => {
       y_axis_auto_range: !y_axis_auto_range
     });
   }, [chart, onChange]);
-  const onYAxisMinChange = useCallback(min => {
+  const onYAxisMinChange = (0, _react.useCallback)(min => {
     const newMin = parseFloat(min);
     if (Number.isNaN(newMin)) return;
     const {
@@ -61,7 +69,7 @@ const StyleSettings = _ref => {
       y_axis_min: newMin
     });
   }, [chart, onChange]);
-  const onYAxisMaxChange = useCallback(max => {
+  const onYAxisMaxChange = (0, _react.useCallback)(max => {
     const newMax = parseFloat(max);
     if (Number.isNaN(newMax)) return;
     const {
@@ -75,11 +83,11 @@ const StyleSettings = _ref => {
       y_axis_max: newMax
     });
   }, [chart, onChange]);
-  const onDisplayValueChange = useCallback(update => {
+  const onDisplayValueChange = (0, _react.useCallback)(update => {
     onChange && onChange(update);
   }, [onChange]);
-  const onDisplayPercentageIncreaseChange = useCallback(event => {
-    eventStopPropagation(event);
+  const onDisplayPercentageIncreaseChange = (0, _react.useCallback)(event => {
+    (0, _utils.eventStopPropagation)(event);
     const {
       config
     } = chart;
@@ -90,8 +98,8 @@ const StyleSettings = _ref => {
       display_increase: !display_increase
     });
   }, [chart, onChange]);
-  const onIncreaseDisplayColorChang = useCallback((event, value) => {
-    eventStopPropagation(event);
+  const onIncreaseDisplayColorChang = (0, _react.useCallback)((event, value) => {
+    (0, _utils.eventStopPropagation)(event);
     const {
       config
     } = chart;
@@ -107,7 +115,7 @@ const StyleSettings = _ref => {
     return options.reduce((optionDisplayMap, position) => {
       return {
         ...optionDisplayMap,
-        [position]: intl.get(LABEL_POSITION_TYPE_SHOW[position])
+        [position]: _intl.default.get(_constants.LABEL_POSITION_TYPE_SHOW[position])
       };
     }, {});
   };
@@ -134,62 +142,62 @@ const StyleSettings = _ref => {
   } = config;
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yAxisLabelPosition = y_axis_label_position || yAxisLabelOptions[0];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
-    title: intl.get('X_axis'),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
+    title: _intl.default.get('X_axis'),
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
       key: "x_axis_show_label",
       checked: x_axis_show_label || false,
-      placeholder: intl.get('Display_title'),
+      placeholder: _intl.default.get('Display_title'),
       onChange: () => onAxisLabelShowChange('x_axis_show_label')
-    }), x_axis_show_label && /*#__PURE__*/React.createElement("div", {
+    }), x_axis_show_label && /*#__PURE__*/_react.default.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, {
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Alignment')), /*#__PURE__*/_react.default.createElement(_DTableRadioGroup2.default, {
       activeOption: xAxisLabelPosition,
       options: xAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(xAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'x_axis_label_position')
-    })), x_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+    })), x_axis_show_label && /*#__PURE__*/_react.default.createElement(_axisTitleFontSettings.default, {
       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'),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
+  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_CollapsibleSettingLayout2.default, {
+    title: _intl.default.get('Y_axis'),
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
       key: "y_axis_show_label",
       checked: y_axis_show_label || false,
-      placeholder: intl.get('Display_title'),
+      placeholder: _intl.default.get('Display_title'),
       onChange: () => onAxisLabelShowChange('y_axis_show_label')
-    }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
+    }), y_axis_show_label && /*#__PURE__*/_react.default.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, {
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Alignment')), /*#__PURE__*/_react.default.createElement(_DTableRadioGroup2.default, {
       activeOption: yAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), y_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+    })), y_axis_show_label && /*#__PURE__*/_react.default.createElement(_axisTitleFontSettings.default, {
       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, {
+    }), /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,
-      placeholder: intl.get('Auto_range'),
+      placeholder: _intl.default.get('Auto_range'),
       onChange: onYAxisAutoRangeChange
-    }), !y_axis_auto_range && /*#__PURE__*/React.createElement("div", {
+    }), !y_axis_auto_range && /*#__PURE__*/_react.default.createElement("div", {
       className: "mt-3"
-    }, /*#__PURE__*/React.createElement(MinMaxSetting, {
+    }, /*#__PURE__*/_react.default.createElement(_minMaxSetting.default, {
       min: y_axis_min,
       max: y_axis_max,
       onMinChange: onYAxisMinChange,
       onMaxChange: onYAxisMaxChange
     })))
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+  }), /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_displayValuesSettings.default, {
     isShowValueKey: "display_increase_percentage",
     isShowValue: display_increase_percentage,
     fontSizeKey: "label_font_size",
@@ -197,4 +205,4 @@ const StyleSettings = _ref => {
     onChange: onDisplayValueChange
   }));
 };
-export default StyleSettings;
+var _default = exports.default = StyleSettings;

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

@@ -1,13 +1,21 @@
-import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
-import React, { useCallback } from 'react';
-import { CellType } from 'dtable-utils';
-import { Label, FormGroup } from 'reactstrap';
-import intl from '../../intl';
-import CommonDataSettings from '../widgets/common-data-settings';
-import Divider from '../widgets/divider';
-import GroupBy from '../widgets/group-by';
-import BasicSummary from '../widgets/basic-summary';
-import { CHART_SUMMARY_TYPES } from '../../constants';
+"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 _react = _interopRequireWildcard(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _reactstrap = require("reactstrap");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _commonDataSettings = _interopRequireDefault(require("../widgets/common-data-settings"));
+var _divider = _interopRequireDefault(require("../widgets/divider"));
+var _groupBy = _interopRequireDefault(require("../widgets/group-by"));
+var _basicSummary = _interopRequireDefault(require("../widgets/basic-summary"));
+var _constants = require("../../constants");
 const COMPARE_GRANULARITY = ['day', 'week', 'quarter', 'month', 'year', 'days_7', 'days_30'];
 const COMPARED_LIST = {
   [COMPARE_GRANULARITY[0]]: 'Yesterday_vs_the_day_before_yesterday',
@@ -25,17 +33,17 @@ const DataSettings = _ref => {
     tables,
     onChange
   } = _ref;
-  const getOptions = useCallback(() => {
+  const getOptions = (0, _react.useCallback)(() => {
     return COMPARE_GRANULARITY.map(item => {
       const value = item;
-      const label = /*#__PURE__*/React.createElement("span", null, intl.get(COMPARED_LIST[item]));
+      const label = /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(COMPARED_LIST[item]));
       return {
         value,
         label
       };
     });
   }, []);
-  const onXAxisColumnChange = useCallback(column => {
+  const onXAxisColumnChange = (0, _react.useCallback)(column => {
     const {
       config
     } = chart;
@@ -52,7 +60,7 @@ const DataSettings = _ref => {
     };
     onChange && onChange(update);
   }, [chart, onChange]);
-  const onGroupbyDateGranularityChange = useCallback(option => {
+  const onGroupbyDateGranularityChange = (0, _react.useCallback)(option => {
     const {
       config
     } = chart;
@@ -74,40 +82,40 @@ const DataSettings = _ref => {
     date_granularity
   } = config;
   const selectedGeolocationGranularity = date_granularity ? getOptions().find(option => option.value === date_granularity) : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commonDataSettings.default, {
     dataSources: dataSources,
     chart: chart,
     tables: tables,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(GroupBy, {
+  }), /*#__PURE__*/_react.default.createElement(_groupBy.default, {
     chart: chart,
     tables: tables,
     className: "selected-x-axis",
-    label: intl.get('Time_field'),
+    label: _intl.default.get('Time_field'),
     selectedTableId: table_id,
     selectedColumnKey: date_column_key,
     onlySupportDate: true,
     isRenderGroupBy: false,
     onGroupByChange: onXAxisColumnChange
-  }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Comparison_mode')), /*#__PURE__*/React.createElement(_DTableSelect, {
+  }), /*#__PURE__*/_react.default.createElement(_reactstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Comparison_mode')), /*#__PURE__*/_react.default.createElement(_DTableSelect2.default, {
     menuPortalTarget: '#wrapper',
     value: selectedGeolocationGranularity,
     options: getOptions(),
     onChange: onGroupbyDateGranularityChange
-  })), /*#__PURE__*/React.createElement(Divider, {
+  })), /*#__PURE__*/_react.default.createElement(_divider.default, {
     className: "mt-4"
-  }), /*#__PURE__*/React.createElement(BasicSummary, {
+  }), /*#__PURE__*/_react.default.createElement(_basicSummary.default, {
     className: "selected-y-axis",
-    label: intl.get('Summary_type'),
+    label: _intl.default.get('Summary_type'),
     summaryTypeKey: 'summary_type',
     summaryMethodKey: 'summary_method',
     summaryColumnKey: 'summary_column_key',
     chart: chart,
     selectedTableId: table_id,
     tables: tables,
-    supportColumnTypes: [CellType.NUMBER],
-    summaryTypeOptions: CHART_SUMMARY_TYPES,
+    supportColumnTypes: [_dtableUtils.CellType.NUMBER],
+    summaryTypeOptions: _constants.CHART_SUMMARY_TYPES,
     onChange: onChange
   }));
 };
-export default DataSettings;
+var _default = exports.default = DataSettings;

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

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

package/dist/settings/trend-settings/style-setting.js

@@ -1,18 +1,26 @@
-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) {
+"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) {
   let {
     chart,
     onChange
   } = _ref;
   const {
     globalTheme
-  } = useContext(GlobalThemeContext);
+  } = (0, _react.useContext)(_contexts.GlobalThemeContext);
   const {
     config
   } = chart;
@@ -34,7 +42,7 @@ export default function StyleSettings(_ref) {
   };
   const defaultNumConfig = {
     font_size: 34,
-    font_color: TITLE_FONT_COLOR_MAP[globalTheme] || DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
+    font_color: _constants.TITLE_FONT_COLOR_MAP[globalTheme] || _constants.DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 700
   };
@@ -46,7 +54,7 @@ export default function StyleSettings(_ref) {
   };
   const defaultLabelConfig = {
     font_size: 14,
-    font_color: LABEL_FONT_COLOR_MAP[globalTheme] || DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
+    font_color: _constants.LABEL_FONT_COLOR_MAP[globalTheme] || _constants.DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 400
   };
@@ -65,16 +73,16 @@ export default function StyleSettings(_ref) {
       [key]: value
     });
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
-    title: intl.get('Number'),
-    children: /*#__PURE__*/React.createElement(GeneralFontSetting, {
+  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, {
       config: numConfig,
       defaultConfig: defaultNumConfig,
       onChange: handleNumChange
     })
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
-    title: intl.get('Label'),
-    children: /*#__PURE__*/React.createElement(GeneralFontSetting, {
+  }), /*#__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, {
       config: labelConfig,
       defaultConfig: defaultLabelConfig,
       onChange: handleLabelChange