sea-chart 1.1.0 → 1.1.1

package/dist/components/chart-color-selector/color-selector.js

@@ -1,7 +1,7 @@
 import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
 import React from 'react';
 import { FormGroup, Label } from 'reactstrap';
-import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
+import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
 import intl from '../../intl';
 export default function ColorSelector(_ref) {
   let {
@@ -9,10 +9,10 @@ export default function ColorSelector(_ref) {
     onChange
   } = _ref;
   const options = [{
-    value: STACK_AND_PIE_CHART_THEMES_OPTIONS.DEFAULT,
+    value: SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT,
     label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, intl.get('Use_default_color')))
   }, {
-    value: STACK_AND_PIE_CHART_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS,
+    value: SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS,
     label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, intl.get('Use_colors_in_single_select_solumn')))
   }];
   const selectedOption = options.find(option => option.value === colorTheme);

package/dist/components/color-picker/index.js

@@ -1,77 +1,65 @@
+import _DTableColorPicker from "dtable-ui-component/lib/DTableColorPicker";
 import React from 'react';
-import { ChromePicker } from 'react-color';
 import './index.css';
-const COVER = {
-  top: '0px',
-  right: '0px',
-  bottom: '0px',
-  left: '0px'
-};
 class ColorPicker extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.onInputChanged = event => {
-      const value = event.target.value;
-      if (value === this.state.activeColor) return;
-      this.updateColor(value);
-      this.setState({
-        activeColor: value
-      });
-    };
     this.onPickColorToggle = () => {
       this.setState({
         isShowColorPicker: !this.state.isShowColorPicker
+      }, () => {
+        if (this.state.isShowColorPicker) {
+          this.getPopoverStyle();
+        }
       });
     };
-    this.onPickChanged = color => {
-      if (color.hex === this.state.activeColor) return;
-      this.updateColor(color.hex);
-      this.setState({
-        activeColor: color.hex
-      });
-    };
-    this.updateColor = color => {
-      this.props.onColorChanged(color);
+    this.onInputChanged = event => {
+      const value = event.target.value;
+      if (value === this.props.activeColor) return;
+      this.props.onColorChanged(value);
     };
     this.getPopoverStyle = () => {
-      if (!this.colorPickerContainerRef) return {};
-      const {
-        top,
-        height
-      } = this.colorPickerContainerRef.getBoundingClientRect();
-      const {
-        clientHeight
-      } = document.body;
-      const selectTop = top + height;
-      if (clientHeight - selectTop < 247) {
-        // 247: ChromePicker's height
-        return {
-          position: 'absolute',
-          left: 0,
-          bottom: '2.375rem',
-          zIndex: '2'
+      if (!this.colorPickerContainerRef || !this.colorPickerRef) return {};
+      setTimeout(() => {
+        const {
+          top,
+          height
+        } = this.colorPickerContainerRef.getBoundingClientRect();
+        const {
+          clientHeight
+        } = document.body;
+        const selectTop = top + height;
+        let colorPickerHeight = 0;
+        if (this.colorPickerRef.current) {
+          colorPickerHeight = this.colorPickerRef.current.getHeight();
+        }
+        let style = {
+          left: 0
         };
-      }
-      return {
-        position: 'absolute',
-        left: 0,
-        zIndex: '2'
-      };
+        if (clientHeight - selectTop < colorPickerHeight) {
+          style = {
+            ...style,
+            bottom: '2.375rem'
+          };
+        }
+        this.setState({
+          popoverStyle: style
+        });
+      }, 10);
     };
     this.state = {
       isShowColorPicker: false,
-      activeColor: props.activeColor
+      popoverStyle: {}
     };
     this.colorPickerContainerRef = null;
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      activeColor: nextProps.activeColor
-    });
+    this.colorPickerRef = React.createRef();
   }
   render() {
     const {
       activeColor
+    } = this.props;
+    const {
+      popoverStyle
     } = this.state;
     const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
     return /*#__PURE__*/React.createElement("div", {
@@ -90,17 +78,13 @@ class ColorPicker extends React.PureComponent {
       type: "text",
       value: activeColor,
       onChange: this.onInputChanged
-    })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
-      style: this.getPopoverStyle()
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "position-fixed",
-      style: COVER,
-      onClick: this.onPickColorToggle
-    }), /*#__PURE__*/React.createElement(ChromePicker, {
-      disableAlpha: true,
+    })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement(_DTableColorPicker, {
+      ref: this.colorPickerRef,
       color: activeColor,
-      onChange: this.onPickChanged
-    })));
+      onSubmit: this.props.onColorChanged,
+      onToggle: this.onPickColorToggle,
+      popoverStyle: popoverStyle
+    }));
   }
 }
 ColorPicker.defaultProps = {

package/dist/constants/color-rules.js

@@ -1,5 +1,5 @@
 import { CellType, FILTER_PREDICATE_TYPE } from 'dtable-utils';
-export const STACK_AND_PIE_CHART_THEMES_OPTIONS = {
+export const SUPPORT_SINGLE_SELECT_THEMES_OPTIONS = {
   DEFAULT: 'default',
   SINGLE_SELECT_COLUMN_COLORS: 'single_select_column_colors'
 };

package/dist/constants/error.js

@@ -0,0 +1,6 @@
+export const SERVER_ERROR_MSG = {
+  EXECUTION_COST_EXCEEDED: 'Execution cost exceeded'
+};
+export const SERVER_ERROR_DISPLAY_KEY = {
+  [SERVER_ERROR_MSG.EXECUTION_COST_EXCEEDED]: 'Execution_time_of_the_query_exceeds_the_limit'
+};

package/dist/constants/index.js

@@ -172,9 +172,16 @@ export const CHART_THEME_COLOR = {
     textColor: '#ffffff',
     fontSize: 13,
     gridColor: '#4E4E56',
+    XAxisColor: '#ffffff',
     labelColor: '#ffffff',
+    ringLabelColor: '#ffffff',
+    annotationTitleFontColor: '#ffffff',
+    annotationValueFontColor: '#ffffff',
+    annotationFontSize: 18,
     legendPageNavigatorMarkerColor: '#ffffff',
-    cardColor: '#ffffff'
+    cardColor: '#ffffff',
+    legendTextColor: '#ffffff',
+    legendFontSize: 14
   },
   light: {
     pivotTextColor: '#212529',
@@ -187,10 +194,10 @@ export const CHART_THEME_COLOR = {
     annotationTitleFontColor: '#666666',
     annotationValueFontColor: '#212529',
     annotationFontSize: 18,
+    legendPageNavigatorMarkerColor: '#999999',
     cardColor: '#545454',
     legendTextColor: '#333333',
-    legendFontSize: 14,
-    legendPageNavigatorMarkerColor: '#999999'
+    legendFontSize: 14
   }
 };
 export const DTABLE_DB_SUMMARY_METHOD = {
@@ -210,7 +217,18 @@ export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
 export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
 export const DEFAULT_TREND_CHART_TITLE_FONT_SIZE = 16;
 export const DEFAULT_CHART_TITLE_FONT_SIZE = 18;
-export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
+export const DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT = '#212529';
+export const DEFAULT_CHART_TITLE_FONT_COLOR_DARK = '#FFFFFF';
+export const TITLE_FONT_COLOR_MAP = {
+  [THEME_NAME_MAP.LIGHT]: DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
+  [THEME_NAME_MAP.DARK]: DEFAULT_CHART_TITLE_FONT_COLOR_DARK
+};
+export const DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT = '#999999';
+export const DEFAULT_CARD_LABEL_FONT_COLOR_DARK = '#FFFFFF';
+export const LABEL_FONT_COLOR_MAP = {
+  [THEME_NAME_MAP.LIGHT]: DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
+  [THEME_NAME_MAP.DARK]: DEFAULT_CARD_LABEL_FONT_COLOR_DARK
+};
 export const CHART_SETTINGS_TYPE = {
   DATA: 'data',
   CHART_STYLE: 'style',

package/dist/locale/lang/de.js

@@ -144,6 +144,7 @@ const de = {
   "Internal_server_error": "Interner Serverfehler",
   "Network_error": "Netzwerkfehler",
   "Permission_denied": "Zugriff verweigert",
+  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
   "There_are_some_problems_with_the_filters": "Die Filterbedingungen sind abnormal. Bitte setzen sie die Filterbedingungen in den Ansichtseinstellungen zurück.",
   "Please_complete_the_chart_configuration_first": "Schließen Sie die Konfiguration des Diagramms ab.",
   "Not_used": "Nicht verwendet",
@@ -251,8 +252,8 @@ const de = {
   "Use_default_color": "Standardfarbe verwenden",
   "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte",
   "Search_records": "Einträge suchen",
-  "Please_select_a_grouping_column": "Bitte Gruppierungsspalte auswählen",
-  "View": "Sicht",
+  "Please_select_a_grouping_column": "Please select grouping column",
+  "View": "View",
   "All_charts": "All charts"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -144,6 +144,7 @@ const en = {
   "Internal_server_error": "Internal server error",
   "Network_error": "Network error",
   "Permission_denied": "Permission denied",
+  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
   "There_are_some_problems_with_the_filters": "There are some problems with the filters.",
   "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
   "Not_used": "Not used",

package/dist/locale/lang/es.js

@@ -144,6 +144,7 @@ const es = {
   "Internal_server_error": "Internal server error",
   "Network_error": "Network error",
   "Permission_denied": "Permission denied",
+  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
   "There_are_some_problems_with_the_filters": "There are some problems with the filters.",
   "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
   "Not_used": "Not used",

package/dist/locale/lang/fr.js

@@ -144,6 +144,7 @@ const fr = {
   "Internal_server_error": "Erreur interne du serveur",
   "Network_error": "Erreur réseau",
   "Permission_denied": "Permission refusée",
+  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
   "There_are_some_problems_with_the_filters": "Les conditions de filtrage sont anormales. Veuillez réinitialiser les conditions de filtrage dans les paramètres de vue.",
   "Please_complete_the_chart_configuration_first": "Compléter la configuration du diagramme",
   "Not_used": "Ne pas utilisé",
@@ -251,8 +252,8 @@ const fr = {
   "Use_default_color": "Utiliser la couleur par défaut",
   "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique",
   "Search_records": "Rechercher des enregistrements",
-  "Please_select_a_grouping_column": "Veuillez sélectionner la colonne de regroupement",
-  "View": "Voir",
+  "Please_select_a_grouping_column": "Please select grouping column",
+  "View": "View",
   "All_charts": "All charts"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -144,6 +144,7 @@ const pt = {
   "Internal_server_error": "Internal server error",
   "Network_error": "Network error",
   "Permission_denied": "Permission denied",
+  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
   "There_are_some_problems_with_the_filters": "There are some problems with the filters.",
   "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
   "Not_used": "Not used",

package/dist/locale/lang/ru.js

@@ -144,6 +144,7 @@ const ru = {
   "Internal_server_error": "Internal server error",
   "Network_error": "Network error",
   "Permission_denied": "Permission denied",
+  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
   "There_are_some_problems_with_the_filters": "There are some problems with the filters.",
   "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
   "Not_used": "Not used",

package/dist/locale/lang/zh_CN.js

@@ -144,6 +144,7 @@ const zh_CN = {
   "Internal_server_error": "服务端错误",
   "Network_error": "网络错误",
   "Permission_denied": "权限错误",
+  "Execution_time_of_the_query_exceeds_the_limit": "查询的执行时间超出限制。无法加载数据。",
   "There_are_some_problems_with_the_filters": "过滤器有一些问题。",
   "Please_complete_the_chart_configuration_first": "请先完成图表配置",
   "Not_used": "不使用",

package/dist/model/trend.js

@@ -21,12 +21,12 @@ class Trend extends BaseModel {
     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_font_color = options.num_font_color;
     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_font_color = options.label_font_color;
     this.label_text_align = options.label_text_align || HORIZONTAL_ALIGN.LEFT;
     this.label_font_weight = options.label_font_weight || 400;
   }

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

@@ -11,7 +11,7 @@ import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT
 import intl from '../../intl';
 import SelectLineType from '../widgets/select-line-type';
 import ColorSelector from '../../components/chart-color-selector/color-selector';
-import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
+import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
 import { getColumnByKey } from '../../utils';
 const StyleSettings = _ref => {
   let {
@@ -45,7 +45,7 @@ const StyleSettings = _ref => {
   const table = tables.find(table => table._id === table_id);
   const column = getColumnByKey(column_groupby_column_key, table.columns);
   const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === CellType.SINGLE_SELECT;
-  const defaultColorTheme = STACK_AND_PIE_CHART_THEMES_OPTIONS.DEFAULT;
+  const defaultColorTheme = SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT;
   const [currYaxisTitle, setCurrYaxisTitle] = useState(title_name || '');
   const xAxisLabelOptions = useMemo(() => {
     if (xLabel === 'Vertical_axis') {

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

@@ -1,13 +1,18 @@
 import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
-import React from 'react';
+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) {
   let {
     chart,
     onChange
   } = _ref;
+  const {
+    globalTheme
+  } = useContext(GlobalThemeContext);
   const {
     config
   } = chart;
@@ -30,7 +35,7 @@ export default function StyleSettings(_ref) {
   };
   const defaultNumConfig = {
     font_size: 34,
-    font_color: '#212529',
+    font_color: TITLE_FONT_COLOR_MAP[globalTheme] || DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 700
   };
@@ -43,7 +48,7 @@ export default function StyleSettings(_ref) {
   };
   const defaultLabelConfig = {
     font_size: 14,
-    font_color: '#999999',
+    font_color: LABEL_FONT_COLOR_MAP[globalTheme] || DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 400
   };

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

@@ -57,7 +57,9 @@ export function CompletenessStyleSettings(_ref) {
     modifyFontSize: value => onChange({
       label_font_size: value
     })
-  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
+  })), /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
     checked: y_axis_auto_range,
     placeholder: intl.get('Auto_range'),
     onChange: handleSetRangeChange

package/dist/settings/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import intl from '../intl';
-import { settingsContext, DepartmentsContext } from '../utils/contexts';
+import { settingsContext, DepartmentsContext, GlobalThemeContext } from '../utils/contexts';
 import { eventStopPropagation } from '../utils';
 import { BaseUtils } from '../utils';
 import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
@@ -19,7 +19,8 @@ const Settings = _ref => {
     tables,
     onChange,
     children,
-    departments
+    departments,
+    globalTheme
   } = _ref;
   const [type, setType] = useState(CHART_SETTINGS_TYPE.DATA);
   const [labelColorConfigs, setLabelColorConfigs] = useState([]);
@@ -61,7 +62,11 @@ const Settings = _ref => {
   const validTitle = useMemo(() => {
     return title || {};
   }, [title]);
-  return /*#__PURE__*/React.createElement(settingsContext.Provider, {
+  return /*#__PURE__*/React.createElement(GlobalThemeContext.Provider, {
+    value: {
+      globalTheme
+    }
+  }, /*#__PURE__*/React.createElement(settingsContext.Provider, {
     value: {
       hideTitleStyleSetting
     }
@@ -98,7 +103,7 @@ const Settings = _ref => {
     tables: tables,
     labelColorConfigs: labelColorConfigs,
     onChange: modifyStyle
-  }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children)))));
+  }), children && type === CHART_SETTINGS_TYPE.GENERAL_STYLE && /*#__PURE__*/React.createElement(React.Fragment, null, children))))));
 };
 const settingsDefaultProps = {
   dataSources: 'filter'

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

@@ -10,7 +10,7 @@ import { FontSizeSettings } from '../widgets/font-settings';
 import { eventStopPropagation, getColumnByKey } from '../../utils';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_POSITION_SHOW, CHART_LABEL_FORMATS, CHART_LABEL_FORMAT_SHOW } from '../../constants';
 import intl from '../../intl';
-import { STACK_AND_PIE_CHART_THEMES_OPTIONS } from '../../constants/color-rules';
+import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
 import ColorSelector from '../../components/chart-color-selector/color-selector';
 const StyleSettings = _ref => {
   let {
@@ -115,7 +115,7 @@ const StyleSettings = _ref => {
   const table = tables.find(table => table._id === table_id);
   const column = getColumnByKey(groupby_column_key, table.columns);
   const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === CellType.SINGLE_SELECT;
-  const defaultColorTheme = STACK_AND_PIE_CHART_THEMES_OPTIONS.DEFAULT;
+  const defaultColorTheme = SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT;
   const selectedLabelOption = labelPositionOptions.find(item => item.value === label_position);
   const selectedLabelFormat = labelFormatOptions.find(item => item.value === label_format) || labelFormatOptions[0];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, {

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

@@ -1,13 +1,18 @@
 import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
-import React from 'react';
+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) {
   let {
     chart,
     onChange
   } = _ref;
+  const {
+    globalTheme
+  } = useContext(GlobalThemeContext);
   const {
     config
   } = chart;
@@ -29,7 +34,7 @@ export default function StyleSettings(_ref) {
   };
   const defaultNumConfig = {
     font_size: 34,
-    font_color: '#212529',
+    font_color: TITLE_FONT_COLOR_MAP[globalTheme] || DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 700
   };
@@ -41,7 +46,7 @@ export default function StyleSettings(_ref) {
   };
   const defaultLabelConfig = {
     font_size: 14,
-    font_color: '#999999',
+    font_color: LABEL_FONT_COLOR_MAP[globalTheme] || DEFAULT_CARD_LABEL_FONT_COLOR_LIGHT,
     text_align: 'left',
     font_weight: 400
   };

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

@@ -56,9 +56,12 @@ class ColorUseTypeSelector extends Component {
           {
             return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_COLUMN_COLORS];
           }
-        case CHART_TYPE.BAR:
         case CHART_TYPE.AREA:
         case CHART_TYPE.LINE:
+          {
+            return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_SPECIFIC_COLORS];
+          }
+        case CHART_TYPE.BAR:
         case CHART_TYPE.HORIZONTAL_BAR:
           {
             return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_SPECIFIC_COLORS, TYPE_COLOR_USING.USE_RULES];
@@ -164,9 +167,14 @@ class ColorUseTypeSelector extends Component {
         color_option
       };
       if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
+        this.setState({
+          specificColor: updatedChart.y_axis_label_color || labelColorConfigs[0].color
+        });
         switch (chart.type) {
           case CHART_TYPE.HORIZONTAL_BAR:
           case CHART_TYPE.BAR:
+          case CHART_TYPE.LINE:
+          case CHART_TYPE.AREA:
             {
               updatedChart.y_axis_label_color = updatedChart.y_axis_label_color || labelColorConfigs[0].color;
               break;

package/dist/settings/widgets/time-picker.js

@@ -140,7 +140,7 @@ class TimePicker extends Component {
       onClickRightPanelTime: this.onClickRightPanelTime
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: "date-picker-container",
+      className: "sea-chart-date-picker-container",
       ref: ref => this.datePicker = ref
     }, /*#__PURE__*/React.createElement(DatePicker, {
       calendar: calendar,

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

@@ -1,16 +1,19 @@
 import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
 import React, { useMemo, useContext } from 'react';
 import { Label } from 'reactstrap';
-import { settingsContext } from '../../../utils/contexts';
+import { GlobalThemeContext, settingsContext } from '../../../utils/contexts';
 import { FontSizeSettings, FontWeightSettings, FontColorSettings } from '../font-settings';
 import TextHorizontalSettings from '../text-horizontal-settings';
-import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR, DEFAULT_TREND_CHART_TITLE_FONT_SIZE, CHART_TYPE } from '../../../constants';
+import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_TREND_CHART_TITLE_FONT_SIZE, CHART_TYPE, TITLE_FONT_COLOR_MAP, DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT } from '../../../constants';
 import intl from '../../../intl';
 import TitleText from './title-text';
 const TitleSetting = props => {
   const {
     hideTitleStyleSetting
   } = useContext(settingsContext);
+  const {
+    globalTheme
+  } = useContext(GlobalThemeContext);
   const initialTitle = useMemo(() => {
     return props.title || {};
   }, [props.title]);
@@ -76,7 +79,7 @@ const TitleSetting = props => {
     }), /*#__PURE__*/React.createElement(FontColorSettings, {
       className: 'mt-3',
       fontColor: initialTitle.font_color,
-      defaultFontColor: DEFAULT_CHART_TITLE_FONT_COLOR,
+      defaultFontColor: TITLE_FONT_COLOR_MAP[globalTheme] || DEFAULT_CHART_TITLE_FONT_COLOR_LIGHT,
       modifyFontColor: modifyFontColor
     }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
       className: 'mt-3',

package/dist/utils/contexts.js

@@ -1,3 +1,4 @@
 import React from 'react';
 export const settingsContext = React.createContext('');
-export const DepartmentsContext = React.createContext([]);
+export const DepartmentsContext = React.createContext([]);
+export const GlobalThemeContext = React.createContext({});

package/dist/utils/index.js

@@ -1,5 +1,6 @@
 import { GENERIC_KEY_2_SIMILAR_KEYS, GEOLOCATION_GRANULARITY, MAP_LEVEL, MUNICIPALITIES, regions } from '../constants';
 import intl from '../intl';
+import { SERVER_ERROR_DISPLAY_KEY, SERVER_ERROR_MSG } from '../constants/error';
 import ObjectUtils from './object-utils';
 import { BaseUtils, ChartUtils } from './chart-utils';
 import { ChartDataSQL, chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from './sql';
@@ -44,8 +45,14 @@ export const getErrorMessage = err => {
   }
   const {
     status,
-    error_msg
+    data
   } = err.response;
+  const error_msg = data ? data.error_msg : '';
+  if (status === 400) {
+    if (error_msg === SERVER_ERROR_MSG.EXECUTION_COST_EXCEEDED) {
+      return intl.get(SERVER_ERROR_DISPLAY_KEY[SERVER_ERROR_MSG.EXECUTION_COST_EXCEEDED]);
+    }
+  }
   if (status === 403) {
     return intl.get('Permission_denied');
   }

package/dist/view/index.css

@@ -60,6 +60,11 @@
   padding: 20px;
 }
 
+.sea-chart-formatter .sea-chart-trend-formatter-container.big_screen_plugin,
+.sea-chart-formatter .sea-chart-basic_number_card-formatter-container.big_screen_plugin {
+  padding-bottom: 0;
+}
+
 .sea-chart-formatter .sea-chart-container.show-x-axis-label,
 .sea-chart-formatter .sea-chart-container.show-horizontal-axis-label {
   padding-bottom: 20px;

package/dist/view/index.js

@@ -164,7 +164,8 @@ class View extends React.PureComponent {
       isCalculateByView,
       dtableStoreValue,
       integratedEventTypes,
-      integratedEventBus
+      integratedEventBus,
+      isBigScreenPlugin
     } = this.props;
     const {
       data,
@@ -198,7 +199,9 @@ class View extends React.PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: validClassName
     }, /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type, "-formatter-container"))
+      className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type, "-formatter-container"), {
+        'big_screen_plugin': isBigScreenPlugin
+      })
     }, !hideTitle && /*#__PURE__*/React.createElement(Title, {
       chart: chart
     }), /*#__PURE__*/React.createElement("div", {
@@ -212,6 +215,7 @@ class View extends React.PureComponent {
       customRender: render,
       globalTheme: globalTheme ? globalTheme : THEME_NAME_MAP.LIGHT,
       isCalculateByView: isCalculateByView,
+      isBigScreenPlugin: isBigScreenPlugin,
       chartColorTheme: chartColorTheme,
       integratedEventTypes: integratedEventTypes,
       integratedEventBus: integratedEventBus