sea-chart 1.1.34 → 1.1.35

package/dist/components/goal-line-setting/goal-setting-item.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Input, Label } from 'reactstrap';
+import intl from '../../intl';
+const GoalSettingItem = _ref => {
+  let {
+    title,
+    modelKey,
+    modelValue,
+    handleValueChange,
+    onlyNumber
+  } = _ref;
+  const [currText, setCurrText] = useState(modelValue || '');
+  const onTextChange = event => {
+    const value = onlyNumber ? parseFloat(event.target.value) : event.target.value;
+    setCurrText(value);
+  };
+  const onKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      event.target.blur();
+    }
+  };
+  const onSaveText = () => {
+    handleValueChange({
+      [modelKey]: currText
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, intl.get(title)), /*#__PURE__*/React.createElement(Input, {
+    type: onlyNumber ? 'number' : 'text',
+    value: currText,
+    onBlur: onSaveText,
+    onChange: onTextChange,
+    onKeyDown: onKeyDown,
+    className: "mb-3"
+  }));
+};
+export default GoalSettingItem;

package/dist/components/goal-line-setting/index.js

@@ -0,0 +1,40 @@
+import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React from 'react';
+import intl from '../../intl';
+import GoalSettingItem from './goal-setting-item';
+export default function GoalLineSetting(_ref) {
+  let {
+    displayGoalLine,
+    goalLabel,
+    goalValue,
+    onChange
+  } = _ref;
+  const toggleDisplayGoalLine = event => {
+    onChange && onChange({
+      display_goal_line: event.target.checked
+    });
+  };
+  const onGoalSettingChange = value => {
+    onChange && onChange(value);
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Goal_line')
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
+    switchClassName: "mb-3",
+    onChange: toggleDisplayGoalLine,
+    checked: !!displayGoalLine,
+    placeholder: intl.get('Display_goal_line')
+  }), displayGoalLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GoalSettingItem, {
+    title: "Goal_label",
+    modelKey: "goal_label",
+    modelValue: goalLabel,
+    handleValueChange: onGoalSettingChange
+  }), /*#__PURE__*/React.createElement(GoalSettingItem, {
+    title: "Goal_value",
+    modelKey: "goal_value",
+    modelValue: goalValue,
+    handleValueChange: onGoalSettingChange,
+    onlyNumber: true
+  }))));
+}

package/dist/constants/index.js

@@ -26,6 +26,7 @@ export const CHART_STYLE_COLORS = ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '
 export const ONLY_NEED_NUMBER_OPTIONS_CHART_TYPE = [CHART_TYPE.COMPLETENESS, CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.SCATTER];
 export const COMPLETENESS_GROUPBY_SUPPORTED_COLUMN_TYPE = [CellType.COLLABORATOR, CellType.TEXT, CellType.SINGLE_SELECT];
 export const NUMBERIC_COLUMN_TYPE = [CellType.RATE, CellType.NUMBER];
+export const SUPPORT_GOAL_LINE_CHART_TYPES = [CHART_TYPE.BAR, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP, CHART_TYPE.COMBINATION];
 
 // chart supports groupby
 export const SUPPORT_GROUP_BY_CHART_TYPES = [CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_STACK, CHART_TYPE.AREA_GROUP, CHART_TYPE.LINE_GROUP, CHART_TYPE.COMPLETENESS_GROUP, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR, CHART_TYPE.SCATTER];
@@ -120,7 +121,7 @@ export const LABEL_POSITION_TYPE_SHOW = {
   [LABEL_POSITION_TYPE.BOTTOM]: 'Bottom',
   [LABEL_POSITION_TYPE.TOP]: 'Top'
 };
-export const CHART_STYLE_SETTING_KEYS = ['x_axis_show_label', 'x_axis_label_position', 'y_axis_show_label', 'y_axis_label_position', 'y_axis_auto_range', 'y_axis_min', 'y_axis_max', 'y_axis_label_color', 'y_axis_show_value', 'label_font_size', 'increase_display_color', 'display_increase', 'display_increase_percentage', 'show_legend', 'minimum_slice_percent', 'label_format', 'label_position', 'display_label', 'horizontal_axis_label_color', 'display_data', 'name', 'y_axis_left_label_position', 'y_axis_right_label_position', 'show_y_axis_left_label', 'show_y_axis_right_label', 'y_axis_auto_range_left', 'y_axis_min_left', 'y_axis_max_left', 'y_axis_auto_range_right', 'y_axis_min_right', 'y_axis_max_right'];
+export const CHART_STYLE_SETTING_KEYS = ['x_axis_show_label', 'x_axis_label_position', 'y_axis_show_label', 'y_axis_label_position', 'y_axis_auto_range', 'y_axis_min', 'y_axis_max', 'y_axis_label_color', 'y_axis_show_value', 'label_font_size', 'increase_display_color', 'display_increase', 'display_increase_percentage', 'show_legend', 'minimum_slice_percent', 'label_format', 'label_position', 'display_label', 'horizontal_axis_label_color', 'display_data', 'name', 'y_axis_left_label_position', 'y_axis_right_label_position', 'show_y_axis_left_label', 'show_y_axis_right_label', 'y_axis_auto_range_left', 'y_axis_min_left', 'y_axis_max_left', 'y_axis_auto_range_right', 'y_axis_min_right', 'y_axis_max_right', 'display_goal_line', 'goal_value', 'goal_label'];
 export const DEFAULT_LABEL_FONT_SIZE = 12;
 export const CHART_Y_GROUP_TYPE = {
   COUNT: 'count',

package/dist/locale/lang/de.js

@@ -270,6 +270,10 @@ const de = {
   "Enable_drill_down_feature": "Aktivieren Sie die Drilldown-Funktion",
   "Field_settings": "Feldeinstellungen",
   "Select_all": "Alles auswählen",
-  "Visible": "Sichtbar"
+  "Visible": "Sichtbar",
+  "Goal_line": "Torlinie",
+  "Display_goal_line": "Torlinie anzeigen",
+  "Goal_value": "Zielwert",
+  "Goal_label": "Zielbezeichnung"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -270,6 +270,10 @@ const en = {
   "Enable_drill_down_feature": "Enable drill down feature",
   "Field_settings": "Field settings",
   "Select_all": "Select all",
-  "Visible": "Visible"
+  "Visible": "Visible",
+  "Goal_line": "Goal line",
+  "Display_goal_line": "Display goal line",
+  "Goal_value": "Goal value",
+  "Goal_label": "Goal label"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -270,6 +270,10 @@ const es = {
   "Enable_drill_down_feature": "Enable drill down feature",
   "Field_settings": "Field settings",
   "Select_all": "Select all",
-  "Visible": "Visible"
+  "Visible": "Visible",
+  "Goal_line": "Goal line",
+  "Display_goal_line": "Display goal line",
+  "Goal_value": "Goal value",
+  "Goal_label": "Goal label"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -270,6 +270,10 @@ const fr = {
   "Enable_drill_down_feature": "Activer la fonctionnalité d'exploration vers le bas",
   "Field_settings": "Paramètres de champ",
   "Select_all": "Tout sélectionner",
-  "Visible": "Visible"
+  "Visible": "Visible",
+  "Goal_line": "Ligne de but",
+  "Display_goal_line": "Afficher la ligne de but",
+  "Goal_value": "Valeur de l'objectif",
+  "Goal_label": "Étiquette d'objectif"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -270,6 +270,10 @@ const pt = {
   "Enable_drill_down_feature": "Enable drill down feature",
   "Field_settings": "Field settings",
   "Select_all": "Select all",
-  "Visible": "Visible"
+  "Visible": "Visible",
+  "Goal_line": "Goal line",
+  "Display_goal_line": "Display goal line",
+  "Goal_value": "Goal value",
+  "Goal_label": "Goal label"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -270,6 +270,10 @@ const ru = {
   "Enable_drill_down_feature": "Enable drill down feature",
   "Field_settings": "Field settings",
   "Select_all": "Select all",
-  "Visible": "Visible"
+  "Visible": "Visible",
+  "Goal_line": "Goal line",
+  "Display_goal_line": "Display goal line",
+  "Goal_value": "Goal value",
+  "Goal_label": "Goal label"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -270,6 +270,10 @@ const zh_CN = {
   "Enable_drill_down_feature": "开启钻取功能",
   "Field_settings": "字段设置",
   "Select_all": "选择全部",
-  "Visible": "可见"
+  "Visible": "可见",
+  "Goal_line": "目标线",
+  "Display_goal_line": "显示目标线",
+  "Goal_value": "目标值",
+  "Goal_label": "目标值标签"
 };
 export default zh_CN;

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

@@ -7,22 +7,25 @@ import { CellType } from 'dtable-ui-component/lib/constants';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
 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 } from '../../constants';
+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 ColorSelector from '../../components/chart-color-selector/color-selector';
 import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
 import { getColumnByKey } from '../../utils';
+import GoalLineSetting from '../../components/goal-line-setting';
 const StyleSettings = _ref => {
   let {
     chart,
     xLabel,
     yLabel,
     onChange,
+    onStyleChange,
     tables
   } = _ref;
   const {
-    config
+    config,
+    style_config
   } = chart;
   const {
     x_axis_show_label,
@@ -42,6 +45,11 @@ const StyleSettings = _ref => {
     column_groupby_column_key,
     table_id
   } = config;
+  const {
+    display_goal_line,
+    goal_value,
+    goal_label
+  } = style_config || {};
   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;
@@ -219,7 +227,12 @@ const StyleSettings = _ref => {
   }), isGroupBySingleSelectColumn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ColorSelector, {
     colorTheme: color_theme || defaultColorTheme,
     onChange: onChartColorChange
-  })), /*#__PURE__*/React.createElement(Divider, null), ![CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+  })), /*#__PURE__*/React.createElement(Divider, null), SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GoalLineSetting, {
+    displayGoalLine: display_goal_line,
+    goalLabel: goal_label,
+    goalValue: goal_value,
+    onChange: onStyleChange
+  }), /*#__PURE__*/React.createElement(Divider, null)), ![CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/React.createElement(DisplayValuesSettings, {
     isShowValueKey: "y_axis_show_value",
     isShowValue: y_axis_show_value,
     fontSizeKey: "label_font_size",

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

@@ -7,15 +7,17 @@ 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 { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, CHART_TYPE } from '../../constants';
+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';
+import GoalLineSetting from '../../components/goal-line-setting';
 const StyleSettings = _ref => {
   let {
     chart,
     xLabel,
     yLabel,
     onChange,
+    onStyleChange,
     labelColorConfigs
   } = _ref;
   const xAxisLabelOptions = useMemo(() => {
@@ -95,7 +97,8 @@ const StyleSettings = _ref => {
     onChange && onChange(update);
   }, [onChange]);
   const {
-    config
+    config,
+    style_config
   } = chart;
   const {
     x_axis_show_label,
@@ -110,6 +113,11 @@ const StyleSettings = _ref => {
     type,
     line_type
   } = config;
+  const {
+    display_goal_line,
+    goal_value,
+    goal_label
+  } = style_config || {};
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yAxisLabelPosition = y_axis_label_position || yAxisLabelOptions[0];
   const isLineChart = [CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(type);
@@ -171,7 +179,12 @@ const StyleSettings = _ref => {
     chart: chart.config,
     labelColorConfigs: labelColorConfigs,
     updateChart: onColorChange
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+  }), /*#__PURE__*/React.createElement(Divider, null), SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GoalLineSetting, {
+    displayGoalLine: display_goal_line,
+    goalLabel: goal_label,
+    goalValue: goal_value,
+    onChange: onStyleChange
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
     isShowValueKey: "y_axis_show_value",
     isShowValue: y_axis_show_value,
     fontSizeKey: "label_font_size",

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

@@ -6,13 +6,15 @@ import { Label, Row } from 'reactstrap';
 import Divider from '../widgets/divider';
 import MinMaxSetting from '../widgets/min-max-setting';
 import DisplayValuesSettings from '../widgets/display-values-settings';
-import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW } from '../../constants';
+import { X_LABEL_POSITIONS, Y_LABEL_POSITIONS, LABEL_POSITION_TYPE_SHOW, SUPPORT_GOAL_LINE_CHART_TYPES } from '../../constants';
 import intl from '../../intl';
 import SelectLineType from '../widgets/select-line-type';
+import GoalLineSetting from '../../components/goal-line-setting';
 const StyleSettings = _ref => {
   let {
     chart,
     onChange,
+    onStyleChange,
     xLabel
   } = _ref;
   const xAxisLabelOptions = X_LABEL_POSITIONS;
@@ -73,8 +75,14 @@ const StyleSettings = _ref => {
     }, {});
   };
   const {
-    config
+    config,
+    style_config
   } = chart;
+  const {
+    display_goal_line,
+    goal_value,
+    goal_label
+  } = style_config || {};
   const {
     x_axis_show_label,
     x_axis_label_position,
@@ -90,7 +98,8 @@ const StyleSettings = _ref => {
     y_axis_max_right,
     display_data,
     label_font_size,
-    line_type
+    line_type,
+    type
   } = config;
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yLeftAxisLabelPosition = y_axis_left_label_position || yAxisLabelOptions[0];
@@ -169,7 +178,12 @@ const StyleSettings = _ref => {
       onMinChange: value => onYAxisMinChange('y_axis_min_right', value),
       onMaxChange: value => onYAxisMaxChange('y_axis_max_right', value)
     })))
-  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
+  }), /*#__PURE__*/React.createElement(Divider, null), SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GoalLineSetting, {
+    displayGoalLine: display_goal_line,
+    goalLabel: goal_label,
+    goalValue: goal_value,
+    onChange: onStyleChange
+  }), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(DisplayValuesSettings, {
     isShowValueKey: "display_data",
     isShowValue: display_data,
     fontSizeKey: "label_font_size",

package/dist/settings/style-settings.js

@@ -30,6 +30,15 @@ const StyleSettings = _ref => {
       config: newUpdate
     });
   }, [chart, onChange]);
+  const modifyStyleSettings = useCallback(update => {
+    const newUpdate = {
+      ...chart.style_config,
+      ...update
+    };
+    onChange({
+      style_config: newUpdate
+    });
+  }, [chart.style_config, onChange]);
   const modifyTitle = useCallback(title => {
     const {
       style_config
@@ -70,6 +79,7 @@ const StyleSettings = _ref => {
       chart,
       tables,
       onChange: modifyStatisticSettings,
+      onStyleChange: modifyStyleSettings,
       labelColorConfigs
     };
     switch (type) {
@@ -141,7 +151,7 @@ const StyleSettings = _ref => {
           return null;
         }
     }
-  }, [chart, labelColorConfigs, modifyStatisticSettings, tables]);
+  }, [chart, labelColorConfigs, modifyStatisticSettings, modifyStyleSettings, tables]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderTitleSettings(), renderStatisticStyleSettings());
 };
 export default StyleSettings;

package/dist/utils/chart-utils/base-utils.js

@@ -413,6 +413,9 @@ BaseUtils.isChartSortChange = (preChartElement, curChartElement) => {
 BaseUtils.isChartStyleChanged = (prevElement, currElement) => {
   const prevStyleConfig = prevElement && prevElement.style_config;
   const currStyleConfig = currElement && currElement.style_config;
+  if (prevStyleConfig.display_goal_line !== currStyleConfig.display_goal_line && (!currStyleConfig.goal_lable || !currStyleConfig.goal_value)) {
+    return false;
+  }
   if (!prevStyleConfig && !currStyleConfig) {
     return false;
   }

package/dist/view/wrapper/area.js

@@ -80,6 +80,13 @@ class Area extends ChartComponent {
         color_option,
         color_theme
       } = chart.config;
+      const {
+        display_goal_line,
+        goal_label,
+        goal_value
+      } = chart.style_config;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
+
       const newData = this.getChartGroupData(data);
       const isSmooth = line_type === CHART_LINE_TYPES[1];
       const isMultipleSummary = summary_columns && summary_columns.length;
@@ -200,6 +207,9 @@ class Area extends ChartComponent {
         });
         this.chart.render();
       });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       this.setToolTipForArea();
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);

package/dist/view/wrapper/bar-custom.js

@@ -81,6 +81,11 @@ class BarCustom extends ChartComponent {
         label_font_size,
         display_each_block_data
       } = chart.config;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config;
       const displayData = display_each_block_data;
       this.chart.scale('group_name', {
         type: 'cat'
@@ -169,6 +174,9 @@ class BarCustom extends ChartComponent {
           };
         }
       });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       this.setToolTip();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/dist/view/wrapper/bar-group.js

@@ -84,6 +84,11 @@ class BarGroup extends ChartComponent {
         column_groupby_column_key,
         color_theme
       } = chart.config;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config;
       const theme = CHART_THEME_COLOR[globalTheme];
       const isGroup = type === CHART_TYPE.BAR_GROUP;
       const newData = this.getChartGroupData(data);
@@ -91,7 +96,7 @@ class BarGroup extends ChartComponent {
       const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
       if (!isGroup) {
         singleBarWidth = Math.round(chartWidth / (2 * newData.length));
         this.markFirstOrLast(data, 'first');
@@ -199,6 +204,9 @@ class BarGroup extends ChartComponent {
       if (isGroup) {
         this.formatDataByName(data);
       }
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       this.setToolTip(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);

package/dist/view/wrapper/bar.js

@@ -69,8 +69,13 @@ class Bar extends ChartComponent {
         y_axis_label_color_rules,
         table_id
       } = chart.config;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config;
       // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
       const singleBarWidth = Math.round(chartWidth / (2 * data.length));
       const singleBarRadius = Math.min(singleBarWidth / 5, 10);
       let chartBarColor = y_axis_label_color || CHART_STYLE_COLORS[0];
@@ -113,6 +118,9 @@ class Bar extends ChartComponent {
           radius: [singleBarRadius, singleBarRadius, 0, 0]
         };
       });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       this.chart.legend(false);
       this.setToolTip();
       isFunction(customRender) && customRender(this.chart);

package/dist/view/wrapper/chart-component.js

@@ -660,6 +660,28 @@ export default class ChartComponent extends Component {
       }
       return themeColors || CHART_THEME_COLOR[THEME_NAME_MAP.LIGHT];
     };
+    this.setDispalyGoalLine = (goalLabel, goalValue, chartWidth) => {
+      this.chart.annotation().line({
+        // start of the annotation line start
+        // x start is -0.5
+        start: [-0.5, goalValue],
+        // x end is infinite
+        end: [99999, goalValue],
+        style: {
+          stroke: '#aaa',
+          // dash color
+          lineDash: [8, 3] //  dash style
+        },
+        text: {
+          content: goalLabel,
+          offsetX: chartWidth - 70,
+          offsetY: -5,
+          style: {
+            fill: '#666'
+          }
+        }
+      });
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
   }
   componentDidUpdate(prevProps) {

package/dist/view/wrapper/combination.js

@@ -51,6 +51,11 @@ class Combination extends ChartComponent {
         label_font_size,
         line_type
       } = chart.config;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config;
       this.chart = new Chart({
         container: this.container,
         autoFit: true,
@@ -61,7 +66,7 @@ class Combination extends ChartComponent {
       const isSmooth = line_type === CHART_LINE_TYPES[1] || !line_type;
 
       // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
       const nameCountMap = data.reduce((acc, cur) => {
         if (!acc[cur.name]) {
           acc[cur.name] = 1;
@@ -395,6 +400,9 @@ class Combination extends ChartComponent {
         });
         this.chart.render(true);
       }, 100));
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       isFunction(customRender) && customRender(this.chart);
       this.chart.removeInteraction('legend-filter');
       requestAnimationFrame(() => {

package/dist/view/wrapper/compare.js

@@ -91,7 +91,7 @@ class Compare extends ChartComponent {
       // set the single bar width and radius
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
-      const chartWidth = this.chart.width - 6 - 10;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
       const maxCountGroup = maxBy(chartData, 'currentGroupCount');
       singleBarWidth = Math.round(chartWidth / (2 * chartData.length * maxCountGroup.currentGroupCount));
       singleBarRadius = Math.min(singleBarWidth / 5, 10);

package/dist/view/wrapper/line-group.js

@@ -65,6 +65,13 @@ class LineGroup extends ChartComponent {
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
       this.drawLabels(newData);
+      const {
+        display_goal_line,
+        goal_label,
+        goal_value
+      } = chart.style_config;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
+
       const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
       const isSmooth = line_type === CHART_LINE_TYPES[1];
@@ -143,6 +150,9 @@ class LineGroup extends ChartComponent {
       //   this.chart.render();
       // });
 
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/dist/view/wrapper/line.js

@@ -66,6 +66,12 @@ class Line extends ChartComponent {
         color_option
         // y_axis_label_color_rules
       } = chart.config;
+      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line 
+      const {
+        display_goal_line,
+        goal_label,
+        goal_value
+      } = chart.style_config;
       let chartBarColor;
       // default color
       chartBarColor = CHART_STYLE_COLORS[0];
@@ -148,6 +154,10 @@ class Line extends ChartComponent {
       //   });
       //   this.chart.render();
       // });
+
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+      }
       this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.34",
+  "version": "1.1.35",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",