Merge pull request #3339 from VisActor/feat/tooltip-content-field

feat: tooltip key/content support config by field, close #2576

common/changes/@visactor/vchart/feat-tooltip-content-field_2024-12-05-06-28.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: tooltip key/content support config by field, close #2576\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

docs/assets/option/en/component/tooltip-common/tooltip-line-pattern.md

@@ -21,6 +21,15 @@ It can also be configured as a function callback, with the type:
 
 Where `datum` is the default data item corresponding to the current line of the tooltip.
 
+To read the content of a specific field in the data item, you can set `field` as follows:
+
+```ts
+// (supported since 1.13.0)
+{
+  field: string;
+}
+```
+
 {{ /if }}
 
 #${prefix} keyTimeFormat(string) = '%Y%m%d'
@@ -91,6 +100,15 @@ It can also be configured as a function callback, the type is:
 
 Where `datum` is the default data item corresponding to the current line of the tooltip.
 
+To read the content of a specific field in the data item, you can set `field` as follows:
+
+```ts
+// (supported since 1.13.0)
+{
+  field: string;
+}
+```
+
 {{ /if }}
 
 #${prefix} valueTimeFormat(string) = '%Y%m%d'

docs/assets/option/zh/component/tooltip-common/tooltip-line-pattern.md

@@ -21,6 +21,15 @@ tooltip 当前行 key 列的内容。如果配置为字符串，则显示为对
 
 其中 `datum` 为 tooltip 当前行所默认对应的数据项。
 
+如果想要读取数据项中特定字段的内容，可以通过设置`field`实现，类型如下：
+
+```ts
+// （自 1.13.0 支持）
+{
+  field: string;
+}
+```
+
 {{ /if }}
 
 #${prefix} keyTimeFormat(string) = '%Y%m%d'
@@ -89,6 +98,15 @@ tooltip 当前行 value 列的内容。
 (datum: Datum) => string;
 ```
 
+如果想要读取数据项中特定字段的内容，可以通过设置`field`实现，类型如下：
+
+```ts
+// （自 1.13.0 支持）
+{
+  field: string;
+}
+```
+
 {{ /if }}
 
 其中 `datum` 为 tooltip 当前行所默认对应的数据项。

packages/vchart/src/component/tooltip/utils/get-value.ts

@@ -1,4 +1,4 @@
-import { isFunction, isNil } from '@visactor/vutils';
+import { get, isFunction, isNil, isPlainObject, isValid } from '@visactor/vutils';
 import type {
   Datum,
   TooltipContentCallback,
@@ -19,6 +19,8 @@ export const getTooltipContentValue = <T>(
   let value: T;
   if (isFunction(field)) {
     value = (field as TooltipContentCallback<T>)(datum, params);
+  } else if (isPlainObject(field) && isValid(field.field)) {
+    value = get(datum, field.field) as T;
   } else {
     value = field as T;
   }

packages/vchart/src/typings/tooltip/common.ts

@@ -2,7 +2,7 @@ import type { Datum } from '../common';
 import type { TooltipHandlerParams } from '../../component/tooltip/interface';
 import type { TooltipData } from './handler';
 
-export type TooltipContentProperty<T> = T | TooltipContentCallback<T>;
+export type TooltipContentProperty<T> = T | TooltipContentCallback<T> | { field: string };
 export type TooltipContentCallback<T> = (datum?: Datum, params?: TooltipHandlerParams) => T | undefined;
 
 export type TooltipPatternProperty<T> = T | TooltipPatternCallback<T>;