Merge pull request #3649 from VisActor/feat/tooltip-row-style

Feat/tooltip row style
VisActor · Jan 15, 2025 · 34d8b0e · 34d8b0e
2 parents 88d2c66 + d501075
commit 34d8b0e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/common/changes/@visactor/vchart/feat-tooltip-row-style_2025-01-08-08-30.json b/common/changes/@visactor/vchart/feat-tooltip-row-style_2025-01-08-08-30.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix bug of parse lineHeight of tooltip row, fix #3643\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}
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
@@ -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
@@ -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,