From a0c81c7a95349e2517ae3c1c88dad316c2251932 Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 4 Sep 2025 10:58:08 +0800 Subject: [PATCH 1/3] fix: when color is gradient string, tooltip icon should show correctly, fix #4182 --- .../plugin/components/tooltip-handler/utils/svg.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts index d2e11d2bef..c55c212692 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts @@ -1,7 +1,7 @@ import { escapeHTML } from './common'; // eslint-disable-next-line no-duplicate-imports -import type { CustomSymbolClass, IGradientColor, ILinearGradient } from '@visactor/vrender-core'; -import { Symbol } from '@visactor/vrender-core'; +import type { CustomSymbolClass, IColor, IGradientColor, ILinearGradient } from '@visactor/vrender-core'; +import { Symbol, GradientParser } from '@visactor/vrender-core'; import { Bounds, isObject, isString } from '@visactor/vutils'; import type { ITooltipShapeActual } from '../../../../typings'; @@ -11,7 +11,8 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: } const styleString = `style="display:inline-block;vertical-align:middle;"`; - const { shapeType, shapeFill, shapeStroke, shapeHollow = false } = option; + const { shapeType, shapeStroke, shapeHollow = false } = option; + let shapeFill: IColor = option.shapeFill; const size = option.shapeSize ?? 8; const lineWidth = option.shapeLineWidth ? escapeHTML(option.shapeLineWidth) + 'px' : '0px'; let fillString: string = 'currentColor'; @@ -49,7 +50,7 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: viewBox = `${x - lw / 2} ${y - lw / 2} ${w + lw} ${h + lw}`; } - if (!shapeFill || isString(shapeFill) || shapeHollow) { + if (!shapeFill || (isString(shapeFill) && !GradientParser.IsGradientStr(shapeFill)) || shapeHollow) { fillString = shapeHollow ? 'none' : shapeFill ? escapeHTML(shapeFill) : 'currentColor'; return ` @@ -60,6 +61,11 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: `; } + + if (isString(shapeFill) && GradientParser.IsGradientStr(shapeFill)) { + shapeFill = GradientParser.Parse(shapeFill); + } + if (isObject(shapeFill)) { fillString = 'gradientColor' + (gradientId ?? ''); let gradient = ''; From 99eddf80c8f9274a63747bdcc3d95d1c3d448b89 Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 4 Sep 2025 10:59:42 +0800 Subject: [PATCH 2/3] docs: update changlog of rush --- ...r-gradient-string-in-tooltip_2025-09-04-02-59.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json diff --git a/common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json b/common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json new file mode 100644 index 0000000000..ba5af2fbf4 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: when color is gradient string, tooltip icon should show correctly\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file From 73aa692a334357d7179640b71182b8c746c69784 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 10 Sep 2025 20:24:28 +0800 Subject: [PATCH 3/3] fix: fix variables in tooltip svg gradient string --- .../components/tooltip-handler/utils/svg.ts | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts index c55c212692..fafd449f8d 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts @@ -11,8 +11,7 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: } const styleString = `style="display:inline-block;vertical-align:middle;"`; - const { shapeType, shapeStroke, shapeHollow = false } = option; - let shapeFill: IColor = option.shapeFill; + const { shapeType, shapeStroke, shapeHollow = false, shapeFill } = option; const size = option.shapeSize ?? 8; const lineWidth = option.shapeLineWidth ? escapeHTML(option.shapeLineWidth) + 'px' : '0px'; let fillString: string = 'currentColor'; @@ -50,7 +49,9 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: viewBox = `${x - lw / 2} ${y - lw / 2} ${w + lw} ${h + lw}`; } - if (!shapeFill || (isString(shapeFill) && !GradientParser.IsGradientStr(shapeFill)) || shapeHollow) { + const isFillGradientStr = GradientParser.IsGradientStr(shapeFill); + + if (!shapeFill || (isString(shapeFill) && !isFillGradientStr) || shapeHollow) { fillString = shapeHollow ? 'none' : shapeFill ? escapeHTML(shapeFill) : 'currentColor'; return ` @@ -62,26 +63,24 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: `; } - if (isString(shapeFill) && GradientParser.IsGradientStr(shapeFill)) { - shapeFill = GradientParser.Parse(shapeFill); - } + const shapeFillObject = isFillGradientStr ? GradientParser.Parse(shapeFill) : isObject(shapeFill) ? shapeFill : null; - if (isObject(shapeFill)) { + if (shapeFillObject) { fillString = 'gradientColor' + (gradientId ?? ''); let gradient = ''; - const stops = ((shapeFill as IGradientColor).stops ?? []) + const stops = ((shapeFillObject as IGradientColor).stops ?? []) .map(s => ``) .join(''); - if ((shapeFill as IGradientColor).gradient === 'radial') { + if ((shapeFillObject as IGradientColor).gradient === 'radial') { gradient = ` ${stops} `; - } else if ((shapeFill as IGradientColor).gradient === 'linear') { + } else if ((shapeFillObject as IGradientColor).gradient === 'linear') { gradient = ` + (((shapeFillObject as ILinearGradient).x0 as number) ?? 0) * 100 + }%" y1="${(((shapeFillObject as ILinearGradient).y0 as number) ?? 0) * 100}%" x2="${ + (((shapeFillObject as ILinearGradient).x1 as number) ?? 0) * 100 + }%" y2="${(((shapeFillObject as ILinearGradient).y1 as number) ?? 0) * 100}%"> ${stops} `; }