sea-chart 0.0.47-alpha.4 → 0.0.48

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

@@ -38,7 +38,6 @@ 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();
-  }, [onChange, selectedType, onToggle]);
+  }, [selectedType, onToggle, onChange]);
   return /*#__PURE__*/React.createElement(Modal, {
     isOpen: true,
     toggle: onToggle,
@@ -53,7 +53,7 @@ const TypesDialog = _ref => {
     zIndex: 1048
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     toggle: onToggle
-  }, type ? intl.get('Edit_type') : intl.get('All_charts')), /*#__PURE__*/React.createElement(ModalBody, {
+  }, intl.get('Edit_type')), /*#__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,7 +3,4 @@ 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,9 +237,6 @@ 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, DEFAULT_MEDIAURL } from './constants';
+import { CHART_TYPE, CHART_TYPE_IMAGE } from './constants';
 class Context {
   constructor() {
     this.queryChartResult = async _ref => {
@@ -102,15 +102,12 @@ class Context {
       return this.api.getTableFormulaResults(table, rows, value);
     };
     this.getChartImageUrl = type => {
+      const {
+        server,
+        mediaUrl
+      } = this.settings;
       const name = CHART_TYPE_IMAGE[type];
-      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);
+      return "".concat(server).concat(mediaUrl, "dtable-statistic/img/").concat(name);
     };
     this.api = null;
     this.settings = {};

package/dist/index.js

@@ -4,10 +4,7 @@ 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, EventBus, EXTERNAL_EVENT, TypesDialog };
+export { SeaChartAPI, CHART_TYPE, CHART_TYPES, View, Editor, Settings, StyleSettings, Divider, Context, ChartModel, ChartDataSQL };

package/dist/locale/lang/en.js

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

package/dist/model/chart.js

@@ -2,17 +2,13 @@ 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,7 +164,6 @@ 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')
@@ -190,7 +189,6 @@ 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,7 +147,6 @@ 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')
@@ -161,7 +160,6 @@ 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,7 +151,6 @@ 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,
@@ -160,7 +159,6 @@ 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
@@ -169,7 +167,6 @@ 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,7 +114,6 @@ 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')
@@ -128,7 +127,6 @@ 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,
@@ -153,7 +151,6 @@ 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,7 +35,6 @@ 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: () => {
@@ -47,7 +46,6 @@ 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,7 +138,6 @@ 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
@@ -158,7 +157,6 @@ 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'),
@@ -170,7 +168,6 @@ 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,7 +7,6 @@ const DataSettings = _ref => {
   let {
     chart,
     tables,
-    dataSources,
     onChange: oldOnChange
   } = _ref;
   const onChange = useCallback(update => {
@@ -50,7 +49,6 @@ 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 intl from '../intl';
 import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
-import StyleSettings from './style-settings';
+import intl from '../intl';
 import DataSettings from './data-settings';
+import StyleSettings from './style-settings';
 import Divider from './widgets/divider';
 import './index.css';
 const Settings = _ref => {
@@ -74,7 +74,6 @@ 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,7 +21,6 @@ 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,7 +37,6 @@ 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,7 +89,6 @@ 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,
@@ -103,7 +102,6 @@ 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,7 +83,6 @@ 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,14 +119,12 @@ 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,7 +544,6 @@ 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,7 +146,6 @@ 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,7 +159,6 @@ 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,7 +130,6 @@ 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,
@@ -146,7 +145,6 @@ 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
@@ -165,7 +163,6 @@ 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,