sea-chart 0.0.47 → 0.0.48-alpha.0

package/dist/components/color-setting/color-group-selector.js

@@ -38,6 +38,7 @@ class ColorGroupSelector extends Component {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "statistic-chart-parameter-item"
     }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       classNamePrefix: 'chart-color',
       value: currentOption,
       onChange: this.changeColor,

package/dist/components/types-dialog/index.js

@@ -45,7 +45,7 @@ const TypesDialog = _ref => {
   const onSubmit = useCallback(() => {
     onChange(selectedType);
     onToggle();
-  }, [selectedType, onToggle, onChange]);
+  }, [onChange, selectedType, onToggle]);
   return /*#__PURE__*/React.createElement(Modal, {
     isOpen: true,
     toggle: onToggle,
@@ -53,7 +53,7 @@ const TypesDialog = _ref => {
     zIndex: 1048
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     toggle: onToggle
-  }, intl.get('Edit_type')), /*#__PURE__*/React.createElement(ModalBody, {
+  }, type ? intl.get('Edit_type') : intl.get('All_charts')), /*#__PURE__*/React.createElement(ModalBody, {
     className: "sea-chart-types-body"
   }, /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-types-container d-flex flex-column h-100"

package/dist/constants/common-constants.js

@@ -3,4 +3,7 @@ export const CommonEventTypes = {
   EXPAND_ROW_UPDATED: 'EXPAND_ROW_UPDATED',
   EXPAND_ROW_DELETED: 'EXPAND_ROW_DELETED',
   REFRESH_CHARTS: 'REFRESH_CHARTS'
+};
+export const EXTERNAL_EVENT = {
+  //
 };

package/dist/constants/index.js

@@ -198,6 +198,7 @@ export const LEGEND_DIRECTION = {
 export const MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIME, CellType.MTIME, CellType.DATE, CellType.COLLABORATOR, CellType.AUTO_NUMBER, CellType.FORMULA, CellType.GEOLOCATION, CellType.URL, CellType.SINGLE_SELECT, CellType.LINK, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.DURATION, CellType.EMAIL];
 export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
 export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
+export const DAFAULT_TREND_CHART_TITLE_FONT_SIZE = 16;
 export const DEFAULT_CHART_TITLE_FONT_SIZE = 18;
 export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
 export const CHART_SETTINGS_TYPE = {
@@ -236,6 +237,9 @@ export const TYPE_DISPLAY_COLOR_USING = {
 // default grid size, grid distance for heat map chart
 export const DEFAULT_GRID_SIZE = 12;
 export const DEFAULT_GRID_DISTANCE = 4;
+
+// default mediaUrl
+export const DEFAULT_MEDIAURL = 'https://dev.seatable.cn/media/';
 export const MONTH_MIRROR = {
   '0': 'Jan',
   '1': 'Feb',

package/dist/context.js

@@ -1,7 +1,7 @@
 import { getTableById } from 'dtable-utils';
 import CollaboratorManager from './utils/collaborator-manager';
 import { ChartDataSQL } from './utils';
-import { CHART_TYPE, CHART_TYPE_IMAGE } from './constants';
+import { CHART_TYPE, CHART_TYPE_IMAGE, DEFAULT_MEDIAURL } from './constants';
 class Context {
   constructor() {
     this.queryChartResult = async _ref => {
@@ -102,12 +102,15 @@ class Context {
       return this.api.getTableFormulaResults(table, rows, value);
     };
     this.getChartImageUrl = type => {
-      const {
-        server,
-        mediaUrl
-      } = this.settings;
       const name = CHART_TYPE_IMAGE[type];
-      return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
+      if (Reflect.ownKeys(this.settings).length !== 0) {
+        const {
+          server,
+          mediaUrl
+        } = this.settings;
+        return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
+      }
+      return "".concat(DEFAULT_MEDIAURL, "dtable-statistic/img/").concat(name);
     };
     this.api = null;
     this.settings = {};

package/dist/index.js

@@ -4,7 +4,10 @@ import { ChartModel } from './model';
 import View from './view';
 import Editor from './editor';
 import Settings, { StyleSettings, Divider } from './settings';
+import TypesDialog from './components/types-dialog';
 import { ChartDataSQL } from './utils';
 import Context from './context';
+import EventBus from './utils/event-bus';
+import { EXTERNAL_EVENT } from './constants/common-constants';
 export default View;
-export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, StyleSettings, Divider, Context, ChartModel, ChartDataSQL };
+export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, StyleSettings, Divider, Context, ChartModel, ChartDataSQL, EventBus, EXTERNAL_EVENT, TypesDialog };

package/dist/locale/lang/en.js

@@ -129,6 +129,7 @@ const en = {
   "Title": "Title",
   "Custom_title": "Custom title",
   "Edit_type": "Edit type",
+  "All_charts": "All charts",
   "Cancel": "Cancel",
   "Submit": "Submit",
   "There_are_no_statistic_results_yet": "There are no statistic results yet",

package/dist/locale/lang/zh_CN.js

@@ -129,6 +129,7 @@ const zh_CN = {
   "Title": "标题",
   "Custom_title": "自定义标题",
   "Edit_type": "编辑类型",
+  "All_charts": "所有图表",
   "Cancel": "取消",
   "Submit": "提交",
   "There_are_no_statistic_results_yet": "目前还没有统计结果",

package/dist/model/chart.js

@@ -2,13 +2,17 @@ import { generateChartConfig } from '../utils';
 import { HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE } from '../constants';
 class ChartModel {
   constructor(options, tables) {
+    // id is ChartModel id
+    // _id is chart config id
     const {
       id,
+      _id,
       style_config
     } = options;
     this.id = id;
     this.type = 'statistic';
     this.config = generateChartConfig(options, tables);
+    this.config._id = _id;
     this.style_config = style_config || {};
     this.style_config.title = {
       text: '',

package/dist/model/trend.js

@@ -1,5 +1,5 @@
 import { getTableColumnByKey, isDateColumn } from 'dtable-utils';
-import { CHART_TYPE } from '../constants';
+import { CHART_TYPE, HORIZONTAL_ALIGN } from '../constants';
 import BaseModel from './base-model';
 class Trend extends BaseModel {
   constructor(options, table) {
@@ -19,6 +19,15 @@ class Trend extends BaseModel {
     this.summary_type = options.y_axis_summary_type || 'count';
     this.summary_column_key = options.y_axis_summary_column_key;
     this.summary_method = options.y_axis_summary_method;
+    this.num_font_size = options.num_font_size || 34;
+    this.num_font_color = options.num_font_color || '#212529';
+    this.num_text_align = options.num_text_align || HORIZONTAL_ALIGN.LEFT;
+    this.num_font_weight = options.num_font_weight || 700;
+    this.label = options.label || '';
+    this.card_label_font_size = options.card_label_font_size || 14;
+    this.label_font_color = options.label_font_color || '#999999';
+    this.label_text_align = options.label_text_align || HORIZONTAL_ALIGN.LEFT;
+    this.label_font_weight = options.label_font_weight || 400;
   }
 }
 export default Trend;

package/dist/settings/advance-bar-settings/style-settings.js

@@ -164,6 +164,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -189,6 +190,7 @@ const StyleSettings = _ref => {
   })), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

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

@@ -147,6 +147,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -160,6 +161,7 @@ const StyleSettings = _ref => {
   }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

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

@@ -151,6 +151,7 @@ const DataSettings = _ref => {
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: selectedSummaryTypeOption,
     options: summaryTypeOptions,
@@ -159,6 +160,7 @@ const DataSettings = _ref => {
   })), isSummarizeAField && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedColumnOption,
     options: numericColumnOptions,
     onChange: onSelectColumnChange
@@ -167,6 +169,7 @@ const DataSettings = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "dtable-plugin-stat-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedMethodOption,
     onChange: onSelectSummaryMethod,
     options: summaryMethodsOptions

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

@@ -114,6 +114,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -127,6 +128,7 @@ const StyleSettings = _ref => {
   }), show_y_axis_left_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yLeftAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,
@@ -151,6 +153,7 @@ const StyleSettings = _ref => {
   }), show_y_axis_right_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yRightAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

package/dist/settings/completeness-settings/data-settings/completion-settings.js

@@ -35,6 +35,7 @@ export default function CompletionSettings(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Completed_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {
@@ -46,6 +47,7 @@ export default function CompletionSettings(_ref) {
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Target_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {

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

@@ -138,6 +138,7 @@ const DataSettings = _ref => {
     return /*#__PURE__*/React.createElement("div", {
       className: "dtable-plugin-stat-parameter-item"
     }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedMethodOption,
       onChange: onSelectSummaryMethod,
       options: summaryMethodsOptions
@@ -157,6 +158,7 @@ const DataSettings = _ref => {
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, intl.get('Current_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedTargetValueColumnOption,
     options: numericColumnOptions,
     placeholder: intl.get('Select_a_column'),
@@ -168,6 +170,7 @@ const DataSettings = _ref => {
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, intl.get('Total_value_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedTotalValueColumnOption,
     options: numericColumnOptions,
     placeholder: intl.get('Select_a_column'),

package/dist/settings/horizontal-bar-settings/data-settings.js

@@ -7,6 +7,7 @@ const DataSettings = _ref => {
   let {
     chart,
     tables,
+    dataSources,
     onChange: oldOnChange
   } = _ref;
   const onChange = useCallback(update => {
@@ -49,6 +50,7 @@ const DataSettings = _ref => {
     yLabel: 'Horizontal_axis',
     chart: newChart,
     tables: tables,
+    dataSources: dataSources,
     onChange: onChange
   });
 };

package/dist/settings/index.js

@@ -2,10 +2,10 @@ import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { eventStopPropagation } from '../utils';
 import { BaseUtils } from '../utils';
-import DataSettings from './data-settings';
-import StyleSettings from './style-settings';
-import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
 import intl from '../intl';
+import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
+import StyleSettings from './style-settings';
+import DataSettings from './data-settings';
 import Divider from './widgets/divider';
 import './index.css';
 const Settings = _ref => {
@@ -74,6 +74,7 @@ const Settings = _ref => {
   })), /*#__PURE__*/React.createElement("div", {
     className: "chart-settings-container position-relative"
   }, /*#__PURE__*/React.createElement("div", {
+    id: "sea-chart-settings-content",
     className: "chart-settings-content"
   }, type === CHART_SETTINGS_TYPE.DATA && /*#__PURE__*/React.createElement(DataSettings, {
     dataSources: dataSources,

package/dist/settings/map-settings/components/location-field-selector.js

@@ -21,6 +21,7 @@ export default function LocationFieldSelector(_ref) {
     });
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Loaction_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     placeholder: intl.get('Select_field'),
     noOptionsMessage: () => {
       return /*#__PURE__*/React.createElement("span", null, intl.get('No_column'));

package/dist/settings/map-settings/components/map-level-selector.js

@@ -37,6 +37,7 @@ export default function MapLevelSelector(_ref) {
   return /*#__PURE__*/React.createElement(FormGroup, {
     className: "statistic-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, "\u5730\u56FE\u7EA7\u522B"), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: getSelectedMapLevelOption(),
     options: mapLevelOptions,
     onChange: onSelectMapLevel

package/dist/settings/map-settings/components/map-province-city-selector.js

@@ -89,6 +89,7 @@ export default function MapProvinceCitySelector(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: getSelectedCity(citiesOptions),
       options: citiesOptions,
       onChange: onSelectCity,
@@ -102,6 +103,7 @@ export default function MapProvinceCitySelector(_ref) {
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "statistic-chart-parameter-item"
   }, /*#__PURE__*/React.createElement("label", null, isCity ? '城市' : '省份'), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: getSelectedProvinceOption(),
     options: provinceOptions,
     onChange: onSelectProvince,

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

@@ -83,6 +83,7 @@ export default function MapStyleSetting(_ref) {
   }))), /*#__PURE__*/React.createElement(Divider, {
     className: "mt-4"
   }), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement("label", null, intl.get('Legend_direction')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: legendDirectionOptionsMap[legend_direction],
     options: legendDirectionOptions,
     onChange: onDirectionChange

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

@@ -119,12 +119,14 @@ const StyleSettings = _ref => {
   })), display_label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_position')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedLabelOption,
     onChange: onLabelPositionChange,
     options: labelPositionOptions
   })), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: selectedLabelFormat,
     onChange: onLabelFormatChange,
     options: labelFormatOptions

package/dist/settings/style-settings.js

@@ -12,6 +12,7 @@ import { HeatMapStyleSettings } from './heat-map-settings';
 import StatisticTitleSetting from './widgets/title-settings';
 import { CompletenessStyleSettings } from './completeness-settings';
 import { MapStyleSettings } from './map-settings';
+import { TrendStyleSettings } from './trend-settings';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -44,12 +45,17 @@ const StyleSettings = _ref => {
   }, [chart, onChange]);
   const renderTitleSettings = useCallback(() => {
     const {
-      style_config
+      style_config,
+      config
     } = chart;
+    const {
+      type
+    } = config;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticTitleSetting, {
       key: "title-setting-".concat(chart.id),
       title: style_config && style_config.title,
-      modifyTitle: modifyTitle
+      modifyTitle: modifyTitle,
+      type: type
     }), /*#__PURE__*/React.createElement(Divider, null));
   }, [chart, modifyTitle]);
   const renderStatisticStyleSettings = useCallback(() => {
@@ -121,6 +127,10 @@ const StyleSettings = _ref => {
         {
           return /*#__PURE__*/React.createElement(HeatMapStyleSettings, props);
         }
+      case CHART_TYPE.TREND:
+        {
+          return /*#__PURE__*/React.createElement(TrendStyleSettings, props);
+        }
       default:
         {
           return null;

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

@@ -544,6 +544,7 @@ const DataSettings = _ref => {
   }), /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_type')), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: getSelectedGroupType(),
     onChange: onGroupTypeChange,

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

@@ -146,6 +146,7 @@ const StyleSettings = _ref => {
     placeholder: intl.get('Display_title'),
     onChange: event => onAxisLabelShowChange(event, 'x_axis_show_label')
   }), x_axis_show_label && /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: xAxisLabelPosition,
     options: xAxisLabelOptions,
     onChange: option => onAxisLabelPositionChange(option, 'x_axis_label_position')
@@ -159,6 +160,7 @@ const StyleSettings = _ref => {
   }), y_axis_show_label && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-parameter-container"
   }, /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     value: yAxisLabelPosition,
     classNamePrefix: "chart-y-axis-label-position",
     options: yAxisLabelOptions,

package/dist/settings/trend-settings/general-font-setting.js

@@ -0,0 +1,72 @@
+import React, { useRef, useState } from 'react';
+import { FormGroup, Input, Label } from 'reactstrap';
+import intl from '../../intl';
+import { FontColorSettings, FontSizeSettings, FontWeightSettings } from '../widgets/font-settings';
+import TextHorizontalSettings from '../widgets/text-horizontal-settings';
+import { CHART_SUPPORT_FONT_WEIGHTS } from '../../constants';
+export default function GeneralFontSetting(_ref) {
+  let {
+    labelTitle,
+    config,
+    defaultConfig,
+    onChange
+  } = _ref;
+  const {
+    font_size,
+    font_color,
+    text_align,
+    label,
+    font_weight
+  } = config;
+  const {
+    font_size: defaultFontSize,
+    font_color: defaultFontColor,
+    text_align: defaultTextAlign,
+    font_weight: defaultFontWeight
+  } = defaultConfig;
+  const labelRef = useRef(null);
+  const [currentLabel, setCurrentLabel] = useState(label);
+  const handleLabelChange = e => {
+    setCurrentLabel(e.target.value);
+  };
+  const onSaveLabel = () => {
+    onChange('label', currentLabel);
+  };
+  const handleFontSizeChange = updatedFontSize => {
+    onChange('font_size', updatedFontSize);
+  };
+  const handleFontColorChange = updatedFontColor => {
+    onChange('font_color', updatedFontColor);
+  };
+  const handleTextAlignChange = value => {
+    onChange('text_align', value);
+  };
+  const handleFontWeightChange = value => {
+    onChange('font_weight', value);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, labelTitle && /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get(labelTitle)), /*#__PURE__*/React.createElement(Input, {
+    ref: labelRef,
+    type: "text",
+    value: currentLabel,
+    onBlur: onSaveLabel,
+    onChange: handleLabelChange
+  })), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    fontSize: font_size,
+    defaultFontSize: defaultFontSize,
+    modifyFontSize: handleFontSizeChange
+  }), /*#__PURE__*/React.createElement(FontWeightSettings, {
+    fontWeight: font_weight || defaultFontWeight,
+    supportFontWeights: CHART_SUPPORT_FONT_WEIGHTS,
+    modifyFontWeight: handleFontWeightChange
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    fontColor: font_color,
+    defaultFontColor: defaultFontColor,
+    modifyFontColor: handleFontColorChange
+  }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
+    value: text_align,
+    defaultValue: defaultTextAlign,
+    onChange: handleTextAlignChange
+  }));
+}

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

@@ -1,2 +1,3 @@
 import TrendDataSettings from './data-settings';
-export { TrendDataSettings };
+import TrendStyleSettings from './style-setting';
+export { TrendDataSettings, TrendStyleSettings };

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

@@ -0,0 +1,72 @@
+import { Label } from 'reactstrap';
+import React from 'react';
+import intl from '../../intl';
+import Divider from '../widgets/divider';
+import GeneralFontSetting from './general-font-setting';
+export default function StyleSettings(_ref) {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const {
+    config
+  } = chart;
+  const {
+    num_font_size,
+    num_font_color,
+    num_text_align,
+    num_font_weight,
+    card_label_font_size: label_font_size,
+    label_font_color,
+    label_text_align,
+    label_font_weight
+  } = config;
+  const numConfig = {
+    font_size: num_font_size,
+    font_color: num_font_color,
+    text_align: num_text_align,
+    font_weight: num_font_weight
+  };
+  const defaultNumConfig = {
+    font_size: 34,
+    font_color: '#212529',
+    text_align: 'left',
+    font_weight: 700
+  };
+  const labelConfig = {
+    font_size: label_font_size,
+    font_color: label_font_color,
+    text_align: label_text_align,
+    font_weight: label_font_weight
+  };
+  const defaultLabelConfig = {
+    font_size: 14,
+    font_color: '#999999',
+    text_align: 'left',
+    font_weight: 400
+  };
+  const handleNumChange = (key, value) => {
+    key = "num_".concat(key);
+    onChange({
+      [key]: value
+    });
+  };
+  const handleLabelChange = (key, value) => {
+    key = "label_".concat(key);
+    if (key === 'label_font_size') {
+      key = 'card_label_font_size';
+    }
+    onChange({
+      [key]: value
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Number_settings')), /*#__PURE__*/React.createElement(GeneralFontSetting, {
+    config: numConfig,
+    defaultConfig: defaultNumConfig,
+    onChange: handleNumChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Label, null, intl.get('Label_settings')), /*#__PURE__*/React.createElement(GeneralFontSetting, {
+    config: labelConfig,
+    defaultConfig: defaultLabelConfig,
+    onChange: handleLabelChange
+  }));
+}

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

@@ -130,6 +130,7 @@ const BasicSummary = _ref => {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedColumnOption,
       onChange: onSummaryColumnChange,
       options: numericColumnOptions,
@@ -145,6 +146,7 @@ const BasicSummary = _ref => {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(Label, null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+      menuPortalTarget: "#sea-chart-settings-content",
       value: selectedMethodOption,
       onChange: onSummaryMethodChange,
       options: summaryMethodOptions
@@ -163,6 +165,7 @@ const BasicSummary = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, showSummaryTypes && /*#__PURE__*/React.createElement(FormGroup, {
     className: "sea-chart-parameter-item"
   }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+    menuPortalTarget: "#sea-chart-settings-content",
     classNamePrefix: "chart-summary-types",
     value: selectedSummaryTypeOption,
     onChange: onSummaryTypeChange,

package/dist/settings/widgets/common-data-settings.js

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
+import { generateChartConfig } from '../../utils';
 import StatisticType from './chart-type';
 import SelectTable from './select-table';
 import SelectView from './select-view';
 import DataFilter from './data-filter';
 import Divider from './divider';
-import { generateChartConfig } from '../../utils';
 const CommonDataSettings = _ref => {
   let {
     chart,