From 39dbb38248636c2d112a379cdbccff104b3313cc Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 10:37:56 +0800 Subject: [PATCH 1/8] fix: fix tooltip content when only has `valueFormatter` or `keyFormatter` --- .../src/component/tooltip/utils/common.ts | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/packages/vchart/src/component/tooltip/utils/common.ts b/packages/vchart/src/component/tooltip/utils/common.ts index e8971a1594..c14dcbd5c4 100644 --- a/packages/vchart/src/component/tooltip/utils/common.ts +++ b/packages/vchart/src/component/tooltip/utils/common.ts @@ -78,23 +78,30 @@ function addContentLine( ...spec } : { ...shapeAttrs, ...spec }; - - Object.keys(finalSpec).forEach(k => { - if (k === 'key') { - res.key = getTimeString( - getTooltipContentValue(finalSpec.key, datum, params, finalSpec.keyFormatter), - finalSpec.keyTimeFormat, - finalSpec.keyTimeFormatMode - ); - } else if (k === 'value') { - res.value = getTimeString( - getTooltipContentValue(finalSpec.value, datum, params, finalSpec.valueFormatter), - finalSpec.valueTimeFormat, - finalSpec.valueTimeFormatMode - ); - } else { - (res as any)[k] = getTooltipContentValue((finalSpec as any)[k], datum, params); - } + const { + key, + keyFormatter, + keyTimeFormat, + keyTimeFormatMode, + value, + valueFormatter, + valueTimeFormat, + valueTimeFormatMode, + ...others + } = finalSpec; + + res.key = getTimeString( + getTooltipContentValue(key, datum, params, keyFormatter), + keyTimeFormat, + keyTimeFormatMode + ); + res.value = getTimeString( + getTooltipContentValue(value, datum, params, valueFormatter), + valueTimeFormat, + valueTimeFormatMode + ); + Object.keys(others).forEach(k => { + (res as any)[k] = getTooltipContentValue((finalSpec as any)[k], datum, params); }); if (res.visible !== false && (isValid(res.key) || isValid(res.value))) { result.push(res); From 9b11a5c579d4fe39107db6383df3a5153e0ae37f Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 10:38:25 +0800 Subject: [PATCH 2/8] docs: update changlog of rush --- .../fix-tooltip-formatter_2024-12-11-02-38.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-tooltip-formatter_2024-12-11-02-38.json diff --git a/common/changes/@visactor/vchart/fix-tooltip-formatter_2024-12-11-02-38.json b/common/changes/@visactor/vchart/fix-tooltip-formatter_2024-12-11-02-38.json new file mode 100644 index 0000000000..35a306b89c --- /dev/null +++ b/common/changes/@visactor/vchart/fix-tooltip-formatter_2024-12-11-02-38.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix tooltip content when only has `valueFormatter` or `keyFormatter`\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file From 2eaeedd2d8ef414aee3a9e8db2be4cea158a9c24 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 15:29:28 +0800 Subject: [PATCH 3/8] fix: html tooltip can reuse the dom content and fix the unneed animation --- .../tooltip-handler/dom-tooltip-handler.ts | 301 ++++++++++-------- .../components/tooltip-handler/utils/style.ts | 15 +- 2 files changed, 175 insertions(+), 141 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 4bc6641950..fefed5a6b6 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 @@ -1,6 +1,6 @@ import type { ITooltipActual, ITooltipPositionActual } from '../../../typings/tooltip'; import { BaseTooltipHandler } from './base'; -import { cssToStyleString, getDomStyle, getTextStyle, setStyleToDom } from './utils/style'; +import { getDomStyle, getTextStyle, setStyleToDom } from './utils/style'; import { TOOLTIP_CONTAINER_EL_CLASS_NAME, DEFAULT_TOOLTIP_Z_INDEX, @@ -8,7 +8,7 @@ import { TOOLTIP_CONTENT_BOX_CLASS_NAME, TOOLTIP_TITLE_CLASS_NAME } from './constants'; -import { type Maybe, isNil, isValid } from '@visactor/vutils'; +import { type Maybe, isValid } from '@visactor/vutils'; import type { IContainerSize } from '@visactor/vrender-components'; import { domDocument } from '../../../util/env'; import type { ITooltipSpec, TooltipHandlerParams } from '../../../component/tooltip'; @@ -40,7 +40,6 @@ export class DomTooltipHandler extends BaseTooltipHandler { protected _rootDom?: HTMLElement; protected _tooltipActual?: ITooltipActual; protected declare _container: Maybe; - protected _domString?: string; /** 自定义 tooltip 的位置缓存 */ protected _cacheCustomTooltipPosition: ILayoutPoint; @@ -83,39 +82,47 @@ export class DomTooltipHandler extends BaseTooltipHandler { this._container.classList.add(TOOLTIP_CONTAINER_EL_CLASS_NAME); parentElement.appendChild(this._container); } - const tooltipElement = document.createElement('div'); - const globalTheme = this._chartOption?.getTheme() ?? {}; - - setStyleToDom(tooltipElement, { - left: '0', - top: '0', - pointerEvents: 'none', - padding: '12px', - position: 'absolute', - zIndex: DEFAULT_TOOLTIP_Z_INDEX, - fontFamily: (globalTheme?.fontFamily ?? token.fontFamily) as string, - fontSize: '11px', - borderRadius: '3px', - borderStyle: 'solid', - lineHeight: 'initial', - background: '#fff', - boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)', - maxWidth: '100wh', - maxHeight: '100vh', - ...this._domStyle?.panel - } as CSSStyleDeclaration); - - this._container.appendChild(tooltipElement); - this._rootDom = tooltipElement; } } + initRootDom() { + const tooltipSpec = this._component.getSpec() as ITooltipSpec; + const tooltipElement = document.createElement('div'); + const globalTheme = this._chartOption?.getTheme() ?? {}; + + setStyleToDom(tooltipElement, { + left: '0', + top: '0', + pointerEvents: 'none', + padding: '12px', + position: 'absolute', + zIndex: DEFAULT_TOOLTIP_Z_INDEX, + fontFamily: (globalTheme?.fontFamily ?? token.fontFamily) as string, + fontSize: '11px', + borderRadius: '3px', + borderStyle: 'solid', + lineHeight: 'initial', + background: '#fff', + boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)', + maxWidth: '100wh', + maxHeight: '100vh', + visibility: 'hidden', + ...this._domStyle.panel + } as CSSStyleDeclaration); + tooltipElement.classList.add(tooltipSpec.className); + tooltipElement.setAttribute('vchart-tooltip-id', `${this.id}`); + this._container.appendChild(tooltipElement); + this._rootDom = tooltipElement; + } + // 计算 tooltip 内容区域的宽高，并缓存结果 protected _getTooltipBoxSize(actualTooltip: ITooltipActual, changePositionOnly: boolean): IContainerSize | undefined { - if (!changePositionOnly || isNil(this._domString)) { + if (!this._rootDom) { + this.initRootDom(); + } + if (!changePositionOnly) { this._updateDomStringByCol(actualTooltip); } - this._rootDom.innerHTML = this._domString ?? ''; this._updateDomStyle('height'); @@ -145,7 +152,7 @@ export class DomTooltipHandler extends BaseTooltipHandler { if (!params.changePositionOnly) { this._tooltipActual = activeTooltipSpec; } - this.setVisibility(visible); + const currentVisible = this.getVisibility(); // 位置 const el = this._rootDom; @@ -166,9 +173,16 @@ export class DomTooltipHandler extends BaseTooltipHandler { // 更新缓存 this._cacheCustomTooltipPosition = position; } else { + if (!currentVisible) { + // 当从隐藏切换到 + this._rootDom.style.transitionDuration = `0ms`; + } else { + this._rootDom.style.transitionDuration = this._domStyle.panel.transitionDuration ?? 'initial'; + } this._updatePosition({ x, y }); } } + this.setVisibility(visible); } } @@ -179,125 +193,158 @@ export class DomTooltipHandler extends BaseTooltipHandler { } protected _updateDomStringByCol(actualTooltip?: ITooltipActual) { - let domString = ''; const { title = {}, content } = actualTooltip; const hasContent = content && content.length; const rowStyle = this._domStyle.row; + const chilren = [...(this._rootDom.children as any)] as HTMLElement[]; + let titleDom = chilren.find(child => child.className.includes(TOOLTIP_TITLE_CLASS_NAME)); + + if (!titleDom && title.visible !== false) { + titleDom = document.createElement('h2'); + const span = document.createElement('span'); + titleDom.appendChild(span); + + titleDom.classList.add(TOOLTIP_TITLE_CLASS_NAME); + this._rootDom.appendChild(titleDom); + } - if (title.visible !== false) { - domString += `

${title.value ?? ''}

`; + }); + (titleDom.firstChild as HTMLElement).innerText = title.value ?? ''; + } else if (titleDom && title.visible === false) { + titleDom.parentNode.removeChild(titleDom); } - if (hasContent) { - let shapeItems = ''; - let keyItems = ''; - let valueItems = ''; - content.forEach((entry, index) => { - const styleByRow = index === content.length - 1 ? null : rowStyle; - - shapeItems += `
${getSvgHtml( - entry - )}
`; - - keyItems += `
${formatContent(entry.key)}
`; - - valueItems += `
${formatContent(entry.value)}
`; + + let contentDom = chilren.find(child => child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)); + const columns = ['shape', 'key', 'value']; + + if (!contentDom && hasContent) { + contentDom = document.createElement('div'); + + columns.forEach(col => { + const colDiv = document.createElement('div'); + + colDiv.classList.add(`${TOOLTIP_PREFIX}-column`); + colDiv.classList.add(`${TOOLTIP_PREFIX}-${col}-column`); + colDiv.setAttribute('data-col', col); + contentDom.appendChild(colDiv); }); - domString += `
-
- ${shapeItems} -
-
- ${keyItems} -
-
- ${valueItems} -
-
`; + contentDom.classList.add(TOOLTIP_CONTENT_BOX_CLASS_NAME); + this._rootDom.appendChild(contentDom); } - this._domString = domString; + if (contentDom && hasContent) { + const columnDivs = [...(contentDom.children as any)] as HTMLElement[]; + + columnDivs.forEach((colDiv, index) => { + const colName = colDiv.getAttribute('data-col'); + + if (colName && columns.includes(colName)) { + setStyleToDom(colDiv, { + ...(this._domStyle as any)[colName], + display: 'inline-block', + verticalAlign: 'top' + }); + const rows = [...(colDiv.children as any)] as HTMLElement[]; + + // 删除多余的行 + rows.slice(content.length).forEach(extraRow => { + extraRow.parentNode.removeChild(extraRow); + }); + + content.forEach((entry, index) => { + let row = rows[index]; + + if (!row) { + row = document.createElement('div'); + row.classList.add(`${TOOLTIP_PREFIX}-${colName}`); + colDiv.appendChild(row); + } + let styleByRow = index === content.length - 1 ? null : rowStyle; + + if (colName === 'key') { + row.innerText = formatContent(entry.key); + if (entry.keyStyle) { + styleByRow = { ...styleByRow, ...getTextStyle(entry.keyStyle) }; + } + } else if (colName === 'value') { + row.innerText = formatContent(entry.value); + if (entry.valueStyle) { + styleByRow = { ...styleByRow, ...getTextStyle(entry.valueStyle) }; + } + } else if (colName === 'shape') { + row.innerHTML = getSvgHtml(entry); + } + + setStyleToDom(row, styleByRow); + }); + } + }); + } else if (contentDom && !hasContent) { + contentDom.parentNode.removeChild(contentDom); + } } protected _updateDomStyle(sizeKey: 'width' | 'height' = 'width') { const rootDom = this._rootDom; - if (rootDom) { - const contentDom = rootDom.children[rootDom.children.length - 1]; - - if (contentDom.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)) { - const tooltipSpec = this._component.getSpec() as ITooltipSpec; - const contentStyle: Partial = {}; - - if (isValid(tooltipSpec?.style?.maxContentHeight)) { - const titleDom = rootDom.children[0]; - const titleHeight = - titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME) - ? titleDom.getBoundingClientRect().height + (tooltipSpec.style.spaceRow ?? 0) - : 0; - const viewRect = (this._chartOption as any).getChartViewRect(); - const maxHeight = calcLayoutNumber( - tooltipSpec.style.maxContentHeight, - Math.min(viewRect.height, document.body.clientHeight) - - titleHeight - - (this._domStyle.panelPadding ? this._domStyle.panelPadding[0] + this._domStyle.panelPadding[1] : 0) - ); - - if (maxHeight > 0) { - contentStyle.maxHeight = `${maxHeight}px`; - contentStyle.overflowY = 'auto'; - // todo 让内容宽度往外阔一点，给滚动条留出位置 - contentStyle.width = `calc(100% + ${ - this._domStyle.panelPadding ? this._domStyle.panelPadding[1] + 'px' : '10px' - })`; - - setStyleToDom(contentDom as HTMLElement, contentStyle); - } + const contentDom = rootDom.children[rootDom.children.length - 1]; + + if (contentDom.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME)) { + const tooltipSpec = this._component.getSpec() as ITooltipSpec; + const contentStyle: Partial = {}; + + if (isValid(tooltipSpec?.style?.maxContentHeight)) { + const titleDom = rootDom.children[0]; + const titleHeight = + titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME) + ? titleDom.getBoundingClientRect().height + (tooltipSpec.style.spaceRow ?? 0) + : 0; + const viewRect = (this._chartOption as any).getChartViewRect(); + const maxHeight = calcLayoutNumber( + tooltipSpec.style.maxContentHeight, + Math.min(viewRect.height, document.body.clientHeight) - + titleHeight - + (this._domStyle.panelPadding ? this._domStyle.panelPadding[0] + this._domStyle.panelPadding[1] : 0) + ); + + if (maxHeight > 0) { + contentStyle.maxHeight = `${maxHeight}px`; + contentStyle.overflowY = 'auto'; + // todo 让内容宽度往外阔一点，给滚动条留出位置 + contentStyle.width = `calc(100% + ${ + this._domStyle.panelPadding ? this._domStyle.panelPadding[1] + 'px' : '10px' + })`; + + setStyleToDom(contentDom as HTMLElement, contentStyle); } + } - const rows = contentDom.children; - const widthByCol: number[] = []; - if (rows) { - for (let i = 0; i < rows.length; i++) { - const row = rows[i]; - const cols = row.children ?? ([] as HTMLElement[]); - - for (let j = 0; j < cols.length; j++) { - const width = cols[j].getBoundingClientRect()[sizeKey]; - if (widthByCol[j] === undefined || widthByCol[j] < width) { - widthByCol[j] = width; - } + const rows = contentDom.children; + const widthByCol: number[] = []; + if (rows) { + for (let i = 0; i < rows.length; i++) { + const row = rows[i]; + const cols = row.children ?? ([] as HTMLElement[]); + + for (let j = 0; j < cols.length; j++) { + const width = cols[j].getBoundingClientRect()[sizeKey]; + if (widthByCol[j] === undefined || widthByCol[j] < width) { + widthByCol[j] = width; } } + } - for (let i = 0; i < rows.length; i++) { - const row = rows[i]; - const cols = row.children ?? ([] as HTMLElement[]); + for (let i = 0; i < rows.length; i++) { + const row = rows[i]; + const cols = row.children ?? ([] as HTMLElement[]); - for (let j = 0; j < cols.length; j++) { - (cols[j] as HTMLElement).style[sizeKey] = `${widthByCol[j]}px`; - } + for (let j = 0; j < cols.length; j++) { + (cols[j] as HTMLElement).style[sizeKey] = `${widthByCol[j]}px`; } } } 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 868d67558f..1e1313a76f 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts @@ -1,4 +1,4 @@ -import { isArray, isValid, isValidNumber, lowerCamelCaseToMiddle, normalizePadding } from '@visactor/vutils'; +import { isArray, isValid, isValidNumber, normalizePadding } from '@visactor/vutils'; import type { ITooltipSpec, ITooltipTextTheme, ITooltipTheme } from '../../../../component/tooltip'; const DEFAULT_SHAPE_SPACING = 8; const DEFAULT_KEY_SPACING = 26; @@ -131,16 +131,3 @@ export function setStyleToDom(dom: HTMLElement, style: Partial) { - let str = ''; - - style && - Object.keys(style).forEach(k => { - if (isValid((style as any)[k])) { - str += `${lowerCamelCaseToMiddle(k)}:${(style as any)[k]};`; - } - }); - - return str; -} From cdac45b772c3c2912909575444f66ae429189acc Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 15:29:51 +0800 Subject: [PATCH 4/8] docs: update changlog of rush --- ...x-dom-tooltip-content-update_2024-12-11-07-29.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-dom-tooltip-content-update_2024-12-11-07-29.json diff --git a/common/changes/@visactor/vchart/fix-dom-tooltip-content-update_2024-12-11-07-29.json b/common/changes/@visactor/vchart/fix-dom-tooltip-content-update_2024-12-11-07-29.json new file mode 100644 index 0000000000..a566ede14e --- /dev/null +++ b/common/changes/@visactor/vchart/fix-dom-tooltip-content-update_2024-12-11-07-29.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: html tooltip can reuse the dom content and fix the unneed animation\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file From 921d526dbdbc2c95e3bb21f7e94f470448bd7918 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 15:32:24 +0800 Subject: [PATCH 5/8] fix: fix type error in tooltip --- .../plugin/components/tooltip-handler/dom-tooltip-handler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 fefed5a6b6..c9cfb8d6af 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 @@ -214,7 +214,7 @@ export class DomTooltipHandler extends BaseTooltipHandler { ...(hasContent ? rowStyle : { marginBottom: '0px' }), marginTop: '0px' }); - (titleDom.firstChild as HTMLElement).innerText = title.value ?? ''; + (titleDom.firstChild as HTMLElement).innerText = `${title.value ?? ''}`; } else if (titleDom && title.visible === false) { titleDom.parentNode.removeChild(titleDom); } From 85807e2040a8ddb58f8822139cdd7f4ee64b0add Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 15:41:09 +0800 Subject: [PATCH 6/8] fix: update comment in dom tooltip --- .../plugin/components/tooltip-handler/dom-tooltip-handler.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 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 c9cfb8d6af..10b4d4e0ab 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 @@ -174,8 +174,8 @@ export class DomTooltipHandler extends BaseTooltipHandler { this._cacheCustomTooltipPosition = position; } else { if (!currentVisible) { - // 当从隐藏切换到 - this._rootDom.style.transitionDuration = `0ms`; + // 当从隐藏切换到显示的时候，需要先设置一次 transition 为 0ms，防止出现从一个非常远的初始位置进行动画 + this._rootDom.style.transitionDuration = '0ms'; } else { this._rootDom.style.transitionDuration = this._domStyle.panel.transitionDuration ?? 'initial'; } From fd456f637b2fe03d8514d8fd1f843d8a465251c3 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 16:21:49 +0800 Subject: [PATCH 7/8] fix: fix invalid style value in tooltip --- .../components/tooltip-handler/utils/style.ts | 39 ++++++++++++++----- 1 file changed, 29 insertions(+), 10 deletions(-) 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 1e1313a76f..c0380aab3d 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/style.ts @@ -15,16 +15,35 @@ export const getPixelPropertyStr = (num?: number | number[], defaultStr?: string }; export const getTextStyle = (style: ITooltipTextTheme = {}) => { - const textStyle: Partial = { - color: style.fill ?? style.fontColor, - fontFamily: style.fontFamily, - fontSize: getPixelPropertyStr(style.fontSize as number), - fontWeight: style.fontWeight as string, - textAlign: style.textAlign, - maxWidth: getPixelPropertyStr(style.maxWidth), - whiteSpace: style.multiLine ? 'initial' : 'nowrap', - wordBreak: style.multiLine ? style.wordBreak ?? 'break-word' : 'normal' - }; + const textStyle: Partial = {}; + + if (isValid(style.fontFamily)) { + textStyle.fontFamily = style.fontFamily; + } + const color = style.fill ?? style.fontColor; + + if (isValid(color)) { + textStyle.color = color; + } + if (isValid(style.fontWeight)) { + textStyle.fontWeight = style.fontWeight as string; + } + if (isValid(style.textAlign)) { + textStyle.textAlign = style.textAlign as string; + } + if (isValid(style.fontSize)) { + textStyle.fontSize = getPixelPropertyStr(style.fontSize as number); + } + if (isValid(style.maxWidth)) { + textStyle.maxWidth = getPixelPropertyStr(style.maxWidth as number); + } + if (style.multiLine) { + textStyle.whiteSpace = 'initial'; + textStyle.wordBreak = style.wordBreak ?? 'break-word'; + } else { + textStyle.wordBreak = 'normal'; + textStyle.whiteSpace = 'nowrap'; + } return textStyle; }; From 03c8b7d3e0d5d4f9c27089a9418d72ad3cba8787 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 11 Dec 2024 17:37:52 +0800 Subject: [PATCH 8/8] fix: fix cache of height when update tooltip content --- .../components/tooltip-handler/dom-tooltip-handler.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 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 10b4d4e0ab..4ed625db86 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 @@ -214,7 +214,7 @@ export class DomTooltipHandler extends BaseTooltipHandler { ...(hasContent ? rowStyle : { marginBottom: '0px' }), marginTop: '0px' }); - (titleDom.firstChild as HTMLElement).innerText = `${title.value ?? ''}`; + (titleDom.firstChild as HTMLElement).innerHTML = `${title.value ?? ''}`; } else if (titleDom && title.visible === false) { titleDom.parentNode.removeChild(titleDom); } @@ -265,15 +265,16 @@ export class DomTooltipHandler extends BaseTooltipHandler { row.classList.add(`${TOOLTIP_PREFIX}-${colName}`); colDiv.appendChild(row); } - let styleByRow = index === content.length - 1 ? null : rowStyle; + // 每次更新，需要更新单元格的高度，防止同步高度的时候没有更新 + let styleByRow = index === content.length - 1 ? { height: 'initial' } : { ...rowStyle, height: 'initial' }; if (colName === 'key') { - row.innerText = formatContent(entry.key); + row.innerHTML = formatContent(entry.key); if (entry.keyStyle) { styleByRow = { ...styleByRow, ...getTextStyle(entry.keyStyle) }; } } else if (colName === 'value') { - row.innerText = formatContent(entry.value); + row.innerHTML = formatContent(entry.value); if (entry.valueStyle) { styleByRow = { ...styleByRow, ...getTextStyle(entry.valueStyle) }; }