From 9e57dfe520e98e6d3434df19184e0de02e683297 Mon Sep 17 00:00:00 2001
From: bqxbqx <132878537+BQXBQX@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:32:47 +0800
Subject: [PATCH] feat(gauge): add custom text tooltip support for gauge chart
(#6533)
- Add gauge-custom-text-tooltip.ts test case
- Update gauge mark to support text tooltip configuration
- Remove default tooltip from DEFAULT_TEXT_OPTIONS
- Extract tooltip from textStyle in gauge mark
---
.../static/gaugeCustomTextTooltip.svg | 415 ++++++++++++++++++
.../plots/static/gauge-custom-text-tooltip.ts | 29 ++
__tests__/plots/static/index.ts | 1 +
src/mark/gauge.ts | 4 +-
4 files changed, 448 insertions(+), 1 deletion(-)
create mode 100644 __tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg
create mode 100644 __tests__/plots/static/gauge-custom-text-tooltip.ts
diff --git a/__tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg b/__tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg
new file mode 100644
index 0000000000..99c4897704
--- /dev/null
+++ b/__tests__/integration/snapshots/static/gaugeCustomTextTooltip.svg
@@ -0,0 +1,415 @@
+
\ No newline at end of file
diff --git a/__tests__/plots/static/gauge-custom-text-tooltip.ts b/__tests__/plots/static/gauge-custom-text-tooltip.ts
new file mode 100644
index 0000000000..a9d41f6d41
--- /dev/null
+++ b/__tests__/plots/static/gauge-custom-text-tooltip.ts
@@ -0,0 +1,29 @@
+import { G2Spec } from '../../../src';
+export function gaugeCustomTextTooltip(): G2Spec {
+ return {
+ type: 'gauge',
+ data: {
+ value: {
+ target: 159,
+ total: 424,
+ name: 'score',
+ },
+ },
+ style: {
+ pinShape: false,
+ textContent: (target, total) => {
+ return `得分：${target}\n占比：${(target / total) * 100}%`;
+ },
+ textTooltip: {
+ items: [
+ (d, index, data, column) => {
+ return {
+ name: 'y',
+ value: column.y.value[index], // 使用 y 通道的值
+ };
+ },
+ ],
+ },
+ },
+ };
+}
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
index 574c540c03..b9ccbbe223 100644
--- a/__tests__/plots/static/index.ts
+++ b/__tests__/plots/static/index.ts
@@ -217,6 +217,7 @@ export { commitsPointGroupedConstant } from './commits-point-grouped-constant';
export { soldHOMMultiple } from './sold-hom-multiple';
export { soldIntervalCustomShape } from './sold-interval-custom-shape';
export { gaugeDefault } from './gauge-default';
+export { gaugeCustomTextTooltip } from './gauge-custom-text-tooltip';
export { gaugeCustomColor } from './gauge-custom-color';
export { gaugeCustomShape } from './gauge-custom-shape';
export { gaugeRoundShape } from './gauge-round-shape';
diff --git a/src/mark/gauge.ts b/src/mark/gauge.ts
index 7abd57804d..dfd4b27a20 100644
--- a/src/mark/gauge.ts
+++ b/src/mark/gauge.ts
@@ -123,6 +123,7 @@ const DEFAULT_TEXT_OPTIONS = {
fontWeight: 800,
fill: '#888',
},
+ tooltip: false,
};
export type GaugeData =
@@ -212,7 +213,7 @@ export const Gauge: CC = (options) => {
total,
scale: newScale,
} = dataTransform(data, scale);
- const textStyle = subObject(style, 'text');
+ const { tooltip, ...textStyle } = subObject(style, 'text');
// pointer + pin
const indicatorStyle = filterPrefixObject(style, ['pointer', 'pin']);
@@ -244,6 +245,7 @@ export const Gauge: CC = (options) => {
text: getTextContent(textStyle, { target, total }),
...textStyle,
},
+ tooltip,
animate:
typeof animate === 'object' ? subObject(animate, 'text') : animate,
}),