sea-chart 2.0.42 → 2.0.44

package/dist/components/color-popover/color-rules/rule-filters/number-input.js

@@ -2,7 +2,7 @@
  * support type number with format
  */
 import React, { Component } from 'react';
-import { DEFAULT_NUMBER_FORMAT, formatStringToNumber, getNumberDisplayString, replaceNumberNotAllowInput } from 'dtable-utils';
+import { DEFAULT_NUMBER_FORMAT, formatStringToNumber, getNumberDisplayString, replaceNumberNotAllowInput, isEmpty } from 'dtable-utils';
 class NumberInput extends Component {
   constructor(props) {
     super(props);
@@ -17,7 +17,7 @@ class NumberInput extends Component {
       } else if (valueType === 'string') {
         numericValue = formatStringToNumber(value, {});
       }
-      if (!numericValue && numericValue !== 0) {
+      if (isEmpty(numericValue)) {
         return '';
       }
       return getNumberDisplayString(numericValue, {}) || '';

package/dist/components/drill-down-settings/drill-down-fields-popover/index.js

@@ -44,10 +44,10 @@ export default function DrillDownFieldsPopover(_ref) {
         onPopoverToggle(false);
       }
     };
-    document.addEventListener('click', hidePopover);
+    document.addEventListener('click', hidePopover, true);
     document.addEventListener('keydown', onHotKey);
     return () => {
-      document.removeEventListener('click', hidePopover);
+      document.removeEventListener('click', hidePopover, true);
       document.removeEventListener('keydown', onHotKey);
     };
   }, [onPopoverToggle]);

package/dist/components/tooltip/index.js

@@ -1,4 +1,11 @@
 import React, { useState, useLayoutEffect, useRef } from 'react';
+import { isEmpty } from 'dtable-utils';
+const formatDisplayValue = value => {
+  if (isEmpty(value)) return '';
+  if (Array.isArray(value)) return value.join(', ');
+  if (typeof value === 'object') return '';
+  return value;
+};
 const ToolTip = _ref => {
   let {
     tooltipData,
@@ -82,7 +89,7 @@ const ToolTip = _ref => {
       visibility: position.offsetX === -9999 ? 'hidden' : 'visible',
       opacity: position.offsetX === -9999 ? 0 : 1
     }
-  }, title && /*#__PURE__*/React.createElement("div", {
+  }, !isEmpty(title) && /*#__PURE__*/React.createElement("div", {
     className: "sea-chart-d3-tooltip-title"
   }, titleMarkColor && /*#__PURE__*/React.createElement("span", {
     style: {
@@ -93,7 +100,7 @@ const ToolTip = _ref => {
       display: 'inline-block',
       marginRight: '12px'
     }
-  }), title), /*#__PURE__*/React.createElement("ul", {
+  }), formatDisplayValue(title)), /*#__PURE__*/React.createElement("ul", {
     className: "sea-chart-d3-tooltip-list"
   }, items.map((item, index) => {
     return /*#__PURE__*/React.createElement("li", {
@@ -106,9 +113,9 @@ const ToolTip = _ref => {
       }
     }), /*#__PURE__*/React.createElement("span", {
       className: "sea-chart-d3-tooltip-name"
-    }, item.name), /*#__PURE__*/React.createElement("span", {
+    }, formatDisplayValue(item.name)), /*#__PURE__*/React.createElement("span", {
       className: "sea-chart-d3-tooltip-value"
-    }, item.value));
+    }, formatDisplayValue(item.value)));
   })));
 };
 export default ToolTip;

package/dist/constants/index.js

@@ -170,8 +170,12 @@ export const BAR_MAP_TO_HORIZONTAL_MAP = {
   y_axis_summary_column_key: 'horizontal_axis_column_key',
   x_axis_show_label: 'show_vertical_axis_label',
   x_axis_label_position: 'vertical_axis_label_position',
+  x_axis_label_font_size: 'vertical_axis_label_font_size',
+  x_axis_label_font_color: 'vertical_axis_label_font_color',
   y_axis_show_label: 'show_horizontal_axis_label',
   y_axis_label_position: 'horizontal_axis_label_position',
+  y_axis_label_font_size: 'horizontal_axis_label_font_size',
+  y_axis_label_font_color: 'horizontal_axis_label_font_color',
   y_axis_show_value: 'display_data',
   y_axis_label_color: 'horizontal_axis_label_color',
   y_axis_auto_range: 'horizontal_axis_auto_range',
@@ -184,6 +188,7 @@ export const DEFAULT_NUMBER_FORMAT_OBJECT = {
 export const TITLE_INCREASE = 'Increase';
 export const TITLE_AMOUNT = 'Amount';
 export const EMPTY_NAME = 'Empty';
+export const DEFAULT_ITEM_COLOR = '#dbdbdb';
 export const THEME_NAME_MAP = {
   DARK: 'dark',
   LIGHT: 'light'
@@ -251,6 +256,9 @@ 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 DEFAULT_AXIS_LABEL_FONT_COLOR = '#999999';
+export const DEFAULT_AXIS_LABEL_FONT_COLOR_DARK = '#ffffff';
+export const DEFAULT_AXIS_LABEL_FONT_SIZE = 12;
 export const CHART_SETTINGS_TYPE = {
   DATA: 'data',
   CHART_STYLE: 'style',
@@ -287,9 +295,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 = _ref => {
@@ -120,14 +120,17 @@ class Context {
     };
     this.getChartImageUrl = type => {
       const name = CHART_TYPE_IMAGE[type];
+      let server = '';
+      let mediaUrl = '';
       if (Reflect.ownKeys(this.settings).length !== 0) {
-        const {
-          server,
-          mediaUrl
-        } = this.settings;
-        return `${server}${mediaUrl}dtable-statistic/img/${name}?v=0.0.1`;
+        server = this.settings.server;
+        mediaUrl = this.settings.mediaUrl;
       }
-      return `${DEFAULT_MEDIAURL}dtable-statistic/img/${name}?v=0.0.1`;
+      if (!server || !mediaUrl) {
+        server = window.dtable ? window.dtable.server : '';
+        mediaUrl = window.dtable ? window.dtable.mediaUrl : '';
+      }
+      return `${server}${mediaUrl}dtable-statistic/img/${name}?v=0.0.1`;
     };
     this.api = null;
     this.settings = {};

package/dist/model/base-model.js

@@ -9,5 +9,9 @@ export default class BaseModel {
     this.drill_down_fields = options.drill_down_fields || null;
     // default set to true
     this.drill_down_status = typeof options.drill_down_status === 'boolean' ? options.drill_down_status : true;
+    this.x_axis_label_font_size = options.x_axis_label_font_size;
+    this.x_axis_label_font_color = options.x_axis_label_font_color;
+    this.y_axis_label_font_size = options.y_axis_label_font_size;
+    this.y_axis_label_font_color = options.y_axis_label_font_color;
   }
 }

package/dist/model/combination.js

@@ -35,6 +35,10 @@ class Combination extends BaseModel {
     this.display_data = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
     this.label_font_size = options.label_font_size;
     this.line_type = options.line_type || CHART_LINE_TYPES[1];
+    this.y_axis_left_label_font_size = options.y_axis_left_label_font_size;
+    this.y_axis_left_label_font_color = options.y_axis_left_label_font_color;
+    this.y_axis_right_label_font_size = options.y_axis_right_label_font_size;
+    this.y_axis_right_label_font_color = options.y_axis_right_label_font_color;
   }
 }
 export default Combination;

package/dist/model/horizontal-bar.js

@@ -17,6 +17,8 @@ class HorizontalBar extends BaseModel {
     // vertical axis style
     this.show_vertical_axis_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
     this.vertical_axis_label_position = options.x_axis_label_position;
+    this.vertical_axis_label_font_size = options.x_axis_label_font_size;
+    this.vertical_axis_label_font_color = options.x_axis_label_font_color;
 
     // horizontal axis data
     this.horizontal_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
@@ -27,6 +29,8 @@ class HorizontalBar extends BaseModel {
     this.horizontal_axis_label_color = options.y_axis_label_color;
     this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
     this.horizontal_axis_label_position = options.y_axis_label_position;
+    this.horizontal_axis_label_font_size = options.y_axis_label_font_size;
+    this.horizontal_axis_label_font_color = options.y_axis_label_font_color;
     this.display_data = isBoolean(options.y_axis_show_value) ? options.y_axis_show_value : false;
     this.horizontal_axis_auto_range = options.y_axis_auto_range;
     this.horizontal_axis_min = options.y_axis_min;

package/dist/model/horizontal-group-bar.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class HorizontalGroupBar extends BaseModel {
   constructor(options) {
     super({
@@ -17,6 +17,8 @@ class HorizontalGroupBar extends BaseModel {
     // vertical axis style
     this.show_vertical_axis_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
     this.vertical_axis_label_position = options.x_axis_label_position;
+    this.vertical_axis_label_font_size = options.x_axis_label_font_size;
+    this.vertical_axis_label_font_color = options.x_axis_label_font_color;
 
     // horizontal axis data
     this.horizontal_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
@@ -27,6 +29,8 @@ class HorizontalGroupBar extends BaseModel {
     this.horizontal_axis_label_color = options.y_axis_label_color;
     this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
     this.horizontal_axis_label_position = options.y_axis_label_position;
+    this.horizontal_axis_label_font_size = options.y_axis_label_font_size;
+    this.horizontal_axis_label_font_color = options.y_axis_label_font_color;
     this.horizontal_axis_auto_range = options.y_axis_auto_range;
     this.horizontal_axis_min = options.y_axis_min;
     this.horizontal_axis_max = options.y_axis_max;

package/dist/model/stacked-horizontal-bar.js

@@ -17,6 +17,8 @@ class StackedHorizontalGroupBar extends BaseModel {
     // vertical axis style
     this.show_vertical_axis_label = isBoolean(options.x_axis_show_label) ? options.x_axis_show_label : false;
     this.vertical_axis_label_position = options.x_axis_label_position;
+    this.vertical_axis_label_font_size = options.x_axis_label_font_size;
+    this.vertical_axis_label_font_color = options.x_axis_label_font_color;
 
     // horizontal axis data
     this.horizontal_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
@@ -27,6 +29,8 @@ class StackedHorizontalGroupBar extends BaseModel {
     this.horizontal_axis_label_color = options.y_axis_label_color || LABEL_COLORS[0];
     this.show_horizontal_axis_label = isBoolean(options.y_axis_show_label) ? options.y_axis_show_label : false;
     this.horizontal_axis_label_position = options.y_axis_label_position;
+    this.horizontal_axis_label_font_size = options.y_axis_label_font_size;
+    this.horizontal_axis_label_font_color = options.y_axis_label_font_color;
     this.horizontal_axis_auto_range = options.y_axis_auto_range;
     this.horizontal_axis_min = options.y_axis_min;
     this.horizontal_axis_max = options.y_axis_max;

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

@@ -2,7 +2,7 @@ import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettin
 import _DTableRadioGroup from "dtable-ui-component/lib/DTableRadioGroup";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback, useMemo, useState } from 'react';
-import { Label, Input, Row } from 'reactstrap';
+import { Label, Input } from 'reactstrap';
 import { CellType } from 'dtable-utils';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
@@ -10,6 +10,7 @@ import DisplayValuesSettings from '../widgets/display-values-settings';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT_STACK_VALUE_CHART_TYPES, CHART_TYPE, SUPPORT_GOAL_LINE_CHART_TYPES } from '../../constants';
 import intl from '../../intl';
 import SelectLineType from '../widgets/select-line-type';
+import AxisTitleFontSettings from '../widgets/axis-title-font-settings';
 import ColorSelector from '../../components/chart-color-selector/color-selector';
 import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
 import { getColumnByKey } from '../../utils';
@@ -38,6 +39,10 @@ const StyleSettings = _ref => {
     y_axis_max,
     y_axis_show_value,
     label_font_size,
+    x_axis_label_font_size,
+    x_axis_label_font_color,
+    y_axis_label_font_size,
+    y_axis_label_font_color,
     display_each_block_data,
     line_type,
     title_name,
@@ -174,14 +179,20 @@ const StyleSettings = _ref => {
       checked: x_axis_show_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('x_axis_show_label')
-    }), x_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), x_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: xAxisLabelPosition,
       options: xAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(xAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'x_axis_label_position')
-    })))
+    })), x_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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(yLabel),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
@@ -204,14 +215,20 @@ const StyleSettings = _ref => {
       },
       onChange: event => setCurrYaxisTitle(event.target.value),
       onKeyDown: onKeyDown
-    })), y_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    })), y_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: yAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), ![CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/React.createElement(_DTableSwitch, {
+    })), y_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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
+    }), ![CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,

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

@@ -2,11 +2,12 @@ import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettin
 import _DTableRadioGroup from "dtable-ui-component/lib/DTableRadioGroup";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useMemo, useCallback } from 'react';
-import { Label, Row } from 'reactstrap';
+import { Label } from 'reactstrap';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
 import DisplayValuesSettings from '../widgets/display-values-settings';
 import ColorUseTypeSelector from '../widgets/color-settings';
+import AxisTitleFontSettings from '../widgets/axis-title-font-settings';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, CHART_TYPE, SUPPORT_GOAL_LINE_CHART_TYPES } from '../../constants';
 import intl from '../../intl';
 import SelectLineType from '../widgets/select-line-type';
@@ -110,6 +111,10 @@ const StyleSettings = _ref => {
     y_axis_max,
     y_axis_show_value,
     label_font_size,
+    x_axis_label_font_size,
+    x_axis_label_font_color,
+    y_axis_label_font_size,
+    y_axis_label_font_color,
     type,
     line_type
   } = config;
@@ -139,14 +144,20 @@ const StyleSettings = _ref => {
       checked: x_axis_show_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('x_axis_show_label')
-    }), x_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), x_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: xAxisLabelPosition,
       options: xAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(xAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'x_axis_label_position')
-    })))
+    })), x_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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(yLabel),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
@@ -154,14 +165,20 @@ const StyleSettings = _ref => {
       checked: y_axis_show_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('y_axis_show_label')
-    }), y_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), y_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: yAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), /*#__PURE__*/React.createElement(_DTableSwitch, {
+    })), y_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,

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

@@ -3,13 +3,14 @@ import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettin
 import _DTableRadioGroup from "dtable-ui-component/lib/DTableRadioGroup";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
-import { FormGroup, Label, Row } from 'reactstrap';
+import { FormGroup, Label } from 'reactstrap';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
 import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT_GOAL_LINE_CHART_TYPES, COMBINATION_DISPLAY_FIELDS_LIST } from '../../constants';
 import intl from '../../intl';
 import SelectLineType from '../widgets/select-line-type';
 import GoalLineSetting from '../../components/goal-line-setting';
+import AxisTitleFontSettings from '../widgets/axis-title-font-settings';
 import { FontSizeSettings } from '../widgets/font-settings';
 const StyleSettings = _ref => {
   let {
@@ -106,10 +107,16 @@ const StyleSettings = _ref => {
   const {
     x_axis_show_label,
     x_axis_label_position,
+    x_axis_label_font_size,
+    x_axis_label_font_color,
     show_y_axis_left_label,
     y_axis_left_label_position,
+    y_axis_left_label_font_size,
+    y_axis_left_label_font_color,
     y_axis_right_label_position,
     show_y_axis_right_label,
+    y_axis_right_label_font_size,
+    y_axis_right_label_font_color,
     y_axis_min_left,
     y_axis_auto_range_left,
     y_axis_max_left,
@@ -136,14 +143,20 @@ const StyleSettings = _ref => {
       checked: x_axis_show_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('x_axis_show_label')
-    }), x_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), x_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: xAxisLabelPosition,
       options: xAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(xAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'x_axis_label_position')
-    })))
+    })), x_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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(left side)'),
     children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
@@ -151,14 +164,20 @@ const StyleSettings = _ref => {
       checked: show_y_axis_left_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('show_y_axis_left_label')
-    }), show_y_axis_left_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), show_y_axis_left_label && /*#__PURE__*/React.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, {
       activeOption: yLeftAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_left_label_position')
-    })), /*#__PURE__*/React.createElement(_DTableSwitch, {
+    })), show_y_axis_left_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      fontSizeKey: "y_axis_left_label_font_size",
+      fontColorKey: "y_axis_left_label_font_color",
+      fontSize: y_axis_left_label_font_size,
+      fontColor: y_axis_left_label_font_color,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_auto_range_left",
       switchClassName: "mt-3",
       checked: y_axis_auto_range_left,
@@ -179,14 +198,20 @@ const StyleSettings = _ref => {
       checked: show_y_axis_right_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('show_y_axis_right_label')
-    }), show_y_axis_right_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), show_y_axis_right_label && /*#__PURE__*/React.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, {
       activeOption: yRightAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_right_label_position')
-    })), /*#__PURE__*/React.createElement(_DTableSwitch, {
+    })), show_y_axis_right_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      fontSizeKey: "y_axis_right_label_font_size",
+      fontColorKey: "y_axis_right_label_font_color",
+      fontSize: y_axis_right_label_font_size,
+      fontColor: y_axis_right_label_font_color,
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(_DTableSwitch, {
       key: "y_axis_auto_range_right",
       switchClassName: "mt-3",
       checked: y_axis_auto_range_right,

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

@@ -2,12 +2,13 @@ import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettin
 import _DTableRadioGroup from "dtable-ui-component/lib/DTableRadioGroup";
 import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
 import React, { useCallback } from 'react';
-import { Label, Row } from 'reactstrap';
+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';
 const StyleSettings = _ref => {
   let {
@@ -116,8 +117,12 @@ const StyleSettings = _ref => {
   const {
     x_axis_show_label,
     x_axis_label_position,
+    x_axis_label_font_size,
+    x_axis_label_font_color,
     y_axis_show_label,
     y_axis_label_position,
+    y_axis_label_font_size,
+    y_axis_label_font_color,
     y_axis_auto_range = true,
     y_axis_min,
     y_axis_max,
@@ -136,14 +141,20 @@ const StyleSettings = _ref => {
       checked: x_axis_show_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('x_axis_show_label')
-    }), x_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), x_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: xAxisLabelPosition,
       options: xAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(xAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'x_axis_label_position')
-    })))
+    })), x_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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, {
@@ -151,14 +162,20 @@ const StyleSettings = _ref => {
       checked: y_axis_show_label || false,
       placeholder: intl.get('Display_title'),
       onChange: () => onAxisLabelShowChange('y_axis_show_label')
-    }), y_axis_show_label && /*#__PURE__*/React.createElement(Row, {
-      className: "mt-3 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
+    }), y_axis_show_label && /*#__PURE__*/React.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, {
       activeOption: yAxisLabelPosition,
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), /*#__PURE__*/React.createElement(_DTableSwitch, {
+    })), y_axis_show_label && /*#__PURE__*/React.createElement(AxisTitleFontSettings, {
+      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, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,

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

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { DEFAULT_AXIS_LABEL_FONT_COLOR, DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../../constants';
+import { FontSizeSettings, FontColorSettings } from '../font-settings';
+const AxisTitleFontSettings = _ref => {
+  let {
+    fontSizeKey,
+    fontColorKey,
+    fontSize,
+    fontColor,
+    fontSizeTitle,
+    fontColorTitle,
+    defaultFontColor,
+    onChange
+  } = _ref;
+  const onFontSizeChange = useCallback(size => {
+    onChange && onChange({
+      [fontSizeKey]: size
+    });
+  }, [fontSizeKey, onChange]);
+  const onFontColorChange = useCallback(color => {
+    onChange && onChange({
+      [fontColorKey]: color
+    });
+  }, [fontColorKey, onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontSizeSettings, {
+    className: "mt-3 mb-3",
+    fontSize: fontSize,
+    defaultFontSize: DEFAULT_AXIS_LABEL_FONT_SIZE,
+    modifyFontSize: onFontSizeChange,
+    title: fontSizeTitle
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    className: "mb-3",
+    fontColor: fontColor,
+    defaultFontColor: defaultFontColor || DEFAULT_AXIS_LABEL_FONT_COLOR,
+    modifyFontColor: onFontColorChange,
+    title: fontColorTitle
+  }));
+};
+export default AxisTitleFontSettings;

package/dist/utils/cell-format-utils.js

@@ -1,10 +1,10 @@
 import dayjs from 'dayjs';
-import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getCollaboratorsName, getFormulaDisplayString, FORMULA_COLUMN_TYPES_MAP, getCellValueDisplayString } from 'dtable-utils';
+import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_RESULT_TYPE, getCollaboratorsName, getFormulaDisplayString, FORMULA_COLUMN_TYPES_MAP, getCellValueDisplayString, isEmpty } from 'dtable-utils';
 export const getClientFormulaDisplayString = function (value, columnData) {
   let {
     collaborators = []
   } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (!columnData || !value && value !== 0) return '';
+  if (!columnData || isEmpty(value)) return '';
   const {
     result_type,
     array_type