VisActor · kkxxkk2019 · Jul 14, 2023 · Jul 13, 2023 · Jul 13, 2023 · Jul 13, 2023
diff --git a/common/changes/@visactor/vchart/feat-improve-tooltip_2023-07-13-06-26.json b/common/changes/@visactor/vchart/feat-improve-tooltip_2023-07-13-06-26.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: new config of global unique tooltip",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
diff --git a/packages/vchart/__tests__/runtime/browser/index.page.ts b/packages/vchart/__tests__/runtime/browser/index.page.ts
@@ -2,4 +2,6 @@
  * !important: 本地调试应该修改 local 文件内容
  */
 
+import VChart from '../../../src';
 import './index.page.local';
+window['VChart'] = VChart;
diff --git a/packages/vchart/src/component/tooltip/handler/constants.ts b/packages/vchart/src/component/tooltip/handler/constants.ts
@@ -1,6 +1,6 @@
 import { PREFIX } from '../../../constant';
 import type { IToolTipLineActual } from '../../../typings';
-import { escapeHTML } from './utils';
+import { escapeHTML } from './utils/common';
 
 export const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
 export const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';

diff --git a/packages/vchart/src/component/tooltip/handler/utils/common.ts b/packages/vchart/src/component/tooltip/handler/utils/common.ts
@@ -1,6 +1,6 @@
 import type { Datum } from '@visactor/vgrammar';
 import type { MaybeArray, TooltipContentProperty, TooltipData, TooltipPatternProperty } from '../../../../typings';
-import { isFunction, isObject, isString, isNil, isArray, isValid, field } from '../../../../util';
+import { isFunction, isObject, isString, isNil, isArray, isValid } from '../../../../util';
 import type { TooltipHandlerParams } from '../../interface';
 import type { IDimensionData, IDimensionInfo } from '../../../../event/events/dimension';
 

diff --git a/packages/vchart/src/component/tooltip/tooltip.ts b/packages/vchart/src/component/tooltip/tooltip.ts
@@ -36,6 +36,7 @@ import type { DimensionTooltipInfo, MarkTooltipInfo, TooltipInfo } from './proce
 // eslint-disable-next-line no-duplicate-imports
 import { isDimensionInfo, isMarkInfo, MarkTooltipProcessor, DimensionTooltipProcessor } from './processor';
 import { getElementAbsolutePosition, getElementAbsoluteScrollOffset, hasParentElement } from '@visactor/vutils';
+import { VChart } from '../../core/vchart';
 
 export type TooltipContent = {
   title?: IToolTipLineActual;
@@ -284,6 +285,11 @@ export class Tooltip extends BaseComponent implements ITooltip {
         this._cacheInfo = tooltipInfo;
       }
     }
+    // 全局唯一 tooltip
+    const vchart = this._option.globalInstance;
+    if (success && VChart.globalConfig.uniqueTooltip) {
+      VChart.hideTooltip(vchart.id);
+    }
     return success;
   };
 

diff --git a/packages/vchart/src/component/tooltip/utils/show-tooltip.ts b/packages/vchart/src/component/tooltip/utils/show-tooltip.ts
@@ -11,6 +11,7 @@ import type { TooltipHandlerParams } from '../interface';
 import { Event_Source_Type } from '../../../constant';
 import { getElementAbsolutePosition } from '@visactor/vutils';
 import type { IDimensionInfo } from '../../../event/events/dimension/interface';
+import { VChart } from '../../../core/vchart';
 
 const getDataArrayFromFieldArray = (fields: string[], datum?: Datum) =>
   isValid(datum) ? fields.map(f => datum[f]) : undefined;
@@ -379,6 +380,11 @@ export function showTooltip(
       itemMap: new Map<string, any>()
     };
     tooltipHandler?.showTooltip?.(activeType, mockDimensionInfo, mockParams);
+    // 全局唯一 tooltip
+    const vchart = componentOptions.globalInstance;
+    if (VChart.globalConfig.uniqueTooltip) {
+      VChart.hideTooltip(vchart.id);
+    }
     return activeType;
   } else if (activeType === 'mark') {
     const info = markInfoList[0];
@@ -409,6 +415,11 @@ export function showTooltip(
       ],
       mockParams
     );
+    // 全局唯一 tooltip
+    const vchart = componentOptions.globalInstance;
+    if (VChart.globalConfig.uniqueTooltip) {
+      VChart.hideTooltip(vchart.id);
+    }
     return activeType;
   }
   return 'none';

diff --git a/packages/vchart/src/core/instance-manager.ts b/packages/vchart/src/core/instance-manager.ts
@@ -1,3 +1,5 @@
+import { array } from '@visactor/vutils';
+import type { MaybeArray } from '../typings';
 import type { IVChart } from './interface';
 
 /** vchart 全局实例管理类，为了防止与 ThemeManager 循环依赖，单独从 VChart 类抽出 */
@@ -29,7 +31,17 @@ export class InstanceManager {
    return InstanceManager.instances.has(id);
   }
 
-  static forEach(callbackfn: (instance: IVChart, id: number, map: Map<number, IVChart>) => void, thisArg?: any) {
-    return InstanceManager.instances.forEach(callbackfn, thisArg);
+  static forEach(
+    callbackfn: (instance: IVChart, id: number, map: Map<number, IVChart>) => void,
+    excludeId: MaybeArray<number> = [],
+    thisArg?: any
+  ) {
+    const excludeIdList = array(excludeId);
+    return InstanceManager.instances.forEach((instance: IVChart, id: number, map: Map<number, IVChart>) => {
+      if (excludeIdList.includes(id)) {
+        return;
+      }
+      callbackfn(instance, id, map);
+    }, thisArg);
   }
 }
diff --git a/packages/vchart/src/core/interface.ts b/packages/vchart/src/core/interface.ts
@@ -300,3 +300,11 @@ export interface IVChart {
    */
   getDataSet: () => Maybe<DataSet>;
 }
+
+export interface IGlobalConfig {
+  /** 是否全局显示唯一 tooltip */
+  uniqueTooltip?: boolean;
+  /** 是否监测图表 dom 变化自动 release */
+  // TODO
+  // autoRelease?: boolean;
+}
diff --git a/packages/vchart/src/core/vchart.ts b/packages/vchart/src/core/vchart.ts
@@ -55,7 +55,7 @@ import { getCanvasDataURL, URLToImage } from '../util/image';
 import { ChartEvent, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH } from '../constant';
 // eslint-disable-next-line no-duplicate-imports
 import { getContainerSize, isArray } from '@visactor/vutils';
-import type { IVChart } from './interface';
+import type { IGlobalConfig, IVChart } from './interface';
 import { InstanceManager } from './instance-manager';
 
 export class VChart implements IVChart {
@@ -134,16 +134,22 @@ export class VChart implements IVChart {
 
   /**
    * 全局关闭 tooltip
+   * @param excludeId 可选，指定不需要关闭 tooltip 的实例 id
    */
-  static hideTooltip() {
-    InstanceManager.forEach(instance => instance?.hideTooltip?.());
+  static hideTooltip(excludeId: MaybeArray<number> = []): void {
+    InstanceManager.forEach(instance => instance?.hideTooltip?.(), excludeId);
   }
 
   /** 图表实例管理器 */
   static readonly InstanceManager = InstanceManager;
   /** 主题管理器 */
   static readonly ThemeManager = ThemeManager;
 
+  /** 全局配置 */
+  static globalConfig: IGlobalConfig = {
+    uniqueTooltip: true
+  };
+
   protected _spec: any;
 
   private _viewBox: IBoundsLike;