From 1aaa84b3b1eac6e31c8ce198b79d8da966cde4bb Mon Sep 17 00:00:00 2001
From: xile611 <dingling112@gmail.com>
Date: Wed, 8 Jan 2025 11:48:31 +0800
Subject: [PATCH] fix: fix bug of parse lineHeight of tooltip row, fix #3643

---
 .../tooltip-handler/dom-tooltip-handler.ts    | 12 +++++++---
 .../components/tooltip-handler/utils/style.ts | 24 ++++++++++++-------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
index dec268ef61..e59b1bcaac 100644
--- a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
+++ b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
@@ -268,7 +268,13 @@ export class DomTooltipHandler extends BaseTooltipHandler {
               row.classList.add(`${TOOLTIP_PREFIX}-${colName}`);
               colDiv.appendChild(row);
             }
-            let styleByRow = index === content.length - 1 ? {} : { ...rowStyle };
+            const styleByRow = {
+              ...rowStyle
+            };
+
+            if (index === content.length - 1) {
+              styleByRow.marginBottom = '0px';
+            }
 
             styleByRow.display = entry.visible === false ? 'none' : 'block';
             // 每次更新，需要更新单元格的高度，防止同步高度的时候没有更新
@@ -277,12 +283,12 @@ export class DomTooltipHandler extends BaseTooltipHandler {
             if (colName === 'key') {
               row.innerHTML = formatContent(entry.key);
               if (entry.keyStyle) {
-                styleByRow = { ...styleByRow, ...getTextStyle(entry.keyStyle) };
+                getTextStyle(entry.keyStyle, styleByRow);
               }
             } else if (colName === 'value') {
               row.innerHTML = formatContent(entry.value);
               if (entry.valueStyle) {
-                styleByRow = { ...styleByRow, ...getTextStyle(entry.valueStyle) };
+                getTextStyle(entry.valueStyle, styleByRow);
               }
             } else if (colName === 'shape') {
               row.innerHTML = getSvgHtml(entry, `${this.id}_${index}`);
diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts
index c0380aab3d..c91bebdfc4 100644
--- a/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts
+++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts
@@ -1,5 +1,7 @@
 import { isArray, isValid, isValidNumber, normalizePadding } from '@visactor/vutils';
 import type { ITooltipSpec, ITooltipTextTheme, ITooltipTheme } from '../../../../component/tooltip';
+import { calcLayoutNumber } from '../../../../util/space';
+import type { ILayoutNumber } from '../../../../typings/layout';
 const DEFAULT_SHAPE_SPACING = 8;
 const DEFAULT_KEY_SPACING = 26;
 const DEFAULT_VALUE_SPACING = 0;
@@ -14,9 +16,7 @@ export const getPixelPropertyStr = (num?: number | number[], defaultStr?: string
   return defaultStr ?? 'initial';
 };
 
-export const getTextStyle = (style: ITooltipTextTheme = {}) => {
-  const textStyle: Partial<CSSStyleDeclaration> = {};
-
+export const getTextStyle = (style: ITooltipTextTheme = {}, textStyle: Partial<CSSStyleDeclaration> = {}) => {
   if (isValid(style.fontFamily)) {
     textStyle.fontFamily = style.fontFamily;
   }
@@ -48,6 +48,16 @@ export const getTextStyle = (style: ITooltipTextTheme = {}) => {
   return textStyle;
 };
 
+export const getLineHeight = (style: ITooltipTextTheme = {}) => {
+  const { lineHeight } = style;
+
+  if (style.fontSize) {
+    return calcLayoutNumber(lineHeight as ILayoutNumber, style.fontSize as number);
+  }
+
+  return 0;
+};
+
 export const getDomStyle = (spec: ITooltipSpec = {}) => {
   const { style = {}, enterable, transitionDuration } = spec;
   const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow: commonSpaceRow, align } = style;
@@ -91,12 +101,10 @@ export const getDomStyle = (spec: ITooltipSpec = {}) => {
   shapeStyle[marginKey] = getPixelPropertyStr(shape.spacing ?? DEFAULT_SHAPE_SPACING);
   keyStyle[marginKey] = getPixelPropertyStr(keyLabel.spacing ?? DEFAULT_KEY_SPACING);
   valueStyle[marginKey] = getPixelPropertyStr(valueLabel.spacing ?? DEFAULT_VALUE_SPACING);
+  const lineHeight = Math.max(getLineHeight(valueLabel), getLineHeight(keyLabel));
 
-  const lineHeight = keyStyle.lineHeight ?? valueStyle.lineHeight;
-
-  if (isValid(lineHeight)) {
-    rowStyle.lineHeight = /^[0-9]*$/.test(`${lineHeight}`) ? `${lineHeight}px` : `${lineHeight}`;
-  }
+  // 如果不设置lineHeight，会导致横向不对齐的问题
+  rowStyle.lineHeight = lineHeight > 0 ? `${lineHeight}px` : '20px';
 
   return {
     panelPadding,