feat: point mark and bar mark support group tooltip

zamhown · zamhown · commit fbb2662d98b8 · 2024-04-15T15:08:04.000+08:00
diff --git a/packages/vchart/src/component/tooltip/interface/common.ts b/packages/vchart/src/component/tooltip/interface/common.ts
@@ -13,6 +13,8 @@ export type TooltipHandlerParams = DimensionEventParams & {
   tooltipSpec?: ITooltipSpec;
   /** 本次触发的 tooltip 的显示数据 */
   tooltipActual?: ITooltipActual;
+  /** 和 datum 同组的数据项 */
+  groupDatum?: Datum[];
 };
 
 export interface ITooltipActiveTypeAsKeys<T, K, U> {
diff --git a/packages/vchart/src/component/tooltip/processor/base.ts b/packages/vchart/src/component/tooltip/processor/base.ts
@@ -5,7 +5,7 @@ import type { ITooltipSpec, TooltipHandlerParams } from '../interface';
 // eslint-disable-next-line no-duplicate-imports
 import { TooltipResult } from '../interface/common';
 import type { Tooltip } from '../tooltip';
-import type { MouseEventData, TooltipInfo } from './interface';
+import type { DimensionTooltipInfo, MouseEventData, TooltipInfo } from './interface';
 import { ChartEvent } from '../../../constant';
 import type { TooltipEventParams } from '../interface/event';
 import type { IDimensionData, IDimensionInfo } from '../../../event/events/dimension';
@@ -35,7 +35,7 @@ export abstract class BaseTooltipProcessor {
   abstract shouldHandleTooltip(params: BaseEventParams, mouseEventData: Partial<MouseEventData>): boolean;
 
   /** 获取触发 tooltip 需要的信息 */
-  abstract getMouseEventData(params: BaseEventParams): MouseEventData;
+  abstract getMouseEventData(params: BaseEventParams, dimensionInfo?: DimensionTooltipInfo): MouseEventData;
 
   protected _showTooltipByHandler = (data: TooltipData | undefined, params: TooltipHandlerParams): TooltipResult => {
     if (isNil(data)) {
diff --git a/packages/vchart/src/component/tooltip/processor/group-tooltip.ts b/packages/vchart/src/component/tooltip/processor/group-tooltip.ts
@@ -1,7 +1,7 @@
 import type { BaseEventParams } from '../../../event/interface';
-import type { IGroupTooltipPattern, TooltipActiveType } from '../../../typings';
+import type { Datum, IGroupTooltipPattern, TooltipActiveType } from '../../../typings';
 import type { ITooltipSpec, TooltipHandlerParams } from '../interface';
-import type { GroupTooltipInfo, MouseEventData } from './interface';
+import type { DimensionTooltipInfo, GroupTooltipInfo, MouseEventData } from './interface';
 import { BaseTooltipProcessor } from './base';
 import { array, isNil } from '@visactor/vutils';
 import type { ISeries } from '../../../series/interface';
@@ -15,6 +15,7 @@ export class GroupTooltipProcessor extends BaseTooltipProcessor {
     const tooltipData = [{ datum: array(datum), series }];
     const newParams: TooltipHandlerParams = {
       ...(params as any),
+      groupDatum: this._getGroupDatum(params),
       dimensionInfo: this._preprocessDimensionInfo(dimensionInfo),
       changePositionOnly,
       tooltip: this.component
@@ -37,7 +38,7 @@ export class GroupTooltipProcessor extends BaseTooltipProcessor {
   }
 
   /** 获取触发 tooltip 需要的信息 */
-  getMouseEventData(params: BaseEventParams): MouseEventData {
+  getMouseEventData(params: BaseEventParams, dimensionInfo?: DimensionTooltipInfo): MouseEventData {
     let info: GroupTooltipInfo | undefined;
     let ignore: boolean | undefined;
 
@@ -54,9 +55,9 @@ export class GroupTooltipProcessor extends BaseTooltipProcessor {
         if (triggerMark.includes(params.mark?.name as any)) {
           info = {
             mark: params.mark,
-            datum: array(params.datum),
+            datum: params.datum,
             series,
-            dimensionInfo: this._getDimensionInfo(params)
+            dimensionInfo
           };
         }
       } else if (ignoreTriggers?.has(params.model) || ignoreTriggers?.has(params.mark)) {
@@ -69,4 +70,21 @@ export class GroupTooltipProcessor extends BaseTooltipProcessor {
       ignore
     };
   }
+
+  protected _getGroupDatum(params: BaseEventParams) {
+    const { model, mark, datum } = params;
+    const series = model as ISeries;
+    if (['line', 'area'].includes(mark.type)) {
+      return array(datum);
+    }
+
+    const datumList = series.getViewData().latestData;
+    const seriesField = series.getSeriesField();
+    if (!seriesField) {
+      return datumList;
+    }
+
+    const seriesFieldValue = array(datum)[0][seriesField];
+    return datumList.filter((d: Datum) => d[seriesField] === seriesFieldValue);
+  }
 }
diff --git a/packages/vchart/src/component/tooltip/processor/interface.ts b/packages/vchart/src/component/tooltip/processor/interface.ts
@@ -12,7 +12,7 @@ export type MarkTooltipInfo<T = Datum> = {
   dimensionInfo: DimensionTooltipInfo;
 };
 
-export type GroupTooltipInfo = MarkTooltipInfo<Datum[]>;
+export type GroupTooltipInfo = MarkTooltipInfo<Datum | Datum[]>;
 
 export type TooltipInfo = DimensionTooltipInfo | MarkTooltipInfo | GroupTooltipInfo;
 
diff --git a/packages/vchart/src/component/tooltip/processor/mark-tooltip.ts b/packages/vchart/src/component/tooltip/processor/mark-tooltip.ts
@@ -1,7 +1,7 @@
 import type { BaseEventParams } from '../../../event/interface';
 import type { TooltipActiveType } from '../../../typings';
 import type { TooltipHandlerParams } from '../interface';
-import type { MarkTooltipInfo, MouseEventData } from './interface';
+import type { DimensionTooltipInfo, MarkTooltipInfo, MouseEventData } from './interface';
 import { BaseTooltipProcessor } from './base';
 import { isNil } from '@visactor/vutils';
 import type { ISeries } from '../../../series/interface';
@@ -37,7 +37,7 @@ export class MarkTooltipProcessor extends BaseTooltipProcessor {
   }
 
   /** 获取触发 tooltip 需要的信息 */
-  getMouseEventData(params: BaseEventParams): MouseEventData {
+  getMouseEventData(params: BaseEventParams, dimensionInfo?: DimensionTooltipInfo): MouseEventData {
     let info: MarkTooltipInfo | undefined;
     let ignore: boolean | undefined;
 
@@ -52,7 +52,7 @@ export class MarkTooltipProcessor extends BaseTooltipProcessor {
           mark: params.mark,
           datum: params.datum,
           series,
-          dimensionInfo: this._getDimensionInfo(params)
+          dimensionInfo
         };
       } else if (ignoreTriggers?.has(params.model) || ignoreTriggers?.has(params.mark)) {
         ignore = true;
diff --git a/packages/vchart/src/component/tooltip/tooltip.ts b/packages/vchart/src/component/tooltip/tooltip.ts
@@ -299,9 +299,9 @@ export class Tooltip extends BaseComponent<any> implements ITooltip {
     };
 
     /* 显示常规tooltip */
-    success.mark = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick);
-    if (!success.mark) {
-      success.group = this._showTooltipByMouseEvent('group', mouseEventData, params, isClick);
+    success.group = this._showTooltipByMouseEvent('group', mouseEventData, params, isClick);
+    if (!success.group) {
+      success.mark = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick);
     }
     if (!success.mark && !success.group) {
       success.dimension = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
@@ -389,11 +389,21 @@ export class Tooltip extends BaseComponent<any> implements ITooltip {
       tooltipInfo: {},
       ignore: {}
     };
-    Object.keys(this._processor).forEach(activeType => {
-      const { tooltipInfo, ignore } = (this._processor[activeType] as BaseTooltipProcessor).getMouseEventData(params);
-      result.tooltipInfo[activeType] = tooltipInfo;
-      result.ignore[activeType] = ignore;
-    });
+
+    let activeType: TooltipActiveType = 'dimension';
+    const { tooltipInfo, ignore } = this._processor[activeType].getMouseEventData(params);
+    result.tooltipInfo[activeType] = tooltipInfo as any;
+    result.ignore[activeType] = ignore;
+
+    const dimensionInfo = tooltipInfo as DimensionTooltipInfo;
+
+    for (activeType of Object.keys(this._processor) as any) {
+      if (activeType !== 'dimension') {
+        const { tooltipInfo, ignore } = this._processor[activeType].getMouseEventData(params, dimensionInfo);
+        result.tooltipInfo[activeType] = tooltipInfo as any;
+        result.ignore[activeType] = ignore;
+      }
+    }
     return result;
   };
 
diff --git a/packages/vchart/src/component/tooltip/utils/compose.ts b/packages/vchart/src/component/tooltip/utils/compose.ts
@@ -10,6 +10,7 @@ import type { IDimensionData, IDimensionInfo } from '../../../event';
 import { TOOLTIP_MAX_LINE_COUNT, TOOLTIP_OTHERS_LINE } from '../constant';
 import { getTooltipActualActiveType } from '.';
 import type { TooltipActualTitleContent, TooltipHandlerParams } from '..';
+import type { Datum } from '../../../typings';
 
 const getTimeString = (value: any, timeFormat?: string, timeFormatMode?: 'local' | 'utc') => {
   if (!timeFormat && !timeFormatMode) {
@@ -86,30 +87,35 @@ export const getShowContent = (
       }
     : TOOLTIP_OTHERS_LINE;
 
-  switch (pattern.activeType) {
-    case 'mark':
-    case 'group':
-      const datumList = (data as IDimensionData[])[0]?.datum;
-      if (datumList?.length) {
-        for (const datum of datumList) {
-          for (const content of patternContent ?? []) {
-            const oneLineData = getOneLineData(datum, content, params);
-            if (oneLineData.visible !== false) {
-              if (tooltipActualTitleContent.content.length === maxLineCount - 1) {
-                tooltipActualTitleContent.content.push({
-                  ...oneLineData,
-                  ...othersLine
-                });
-                break;
-              } else if (tooltipActualTitleContent.content.length < maxLineCount) {
-                tooltipActualTitleContent.content.push(oneLineData);
-              } else {
-                break;
-              }
+  const getTooltipContentFromDatumList = (datumList?: Datum[]) => {
+    if (datumList?.length) {
+      for (const datum of datumList) {
+        for (const content of patternContent ?? []) {
+          const oneLineData = getOneLineData(datum, content, params);
+          if (oneLineData.visible !== false) {
+            if (tooltipActualTitleContent.content.length === maxLineCount - 1) {
+              tooltipActualTitleContent.content.push({
+                ...oneLineData,
+                ...othersLine
+              });
+              break;
+            } else if (tooltipActualTitleContent.content.length < maxLineCount) {
+              tooltipActualTitleContent.content.push(oneLineData);
+            } else {
+              break;
             }
           }
         }
       }
+    }
+  };
+
+  switch (pattern.activeType) {
+    case 'mark':
+      getTooltipContentFromDatumList((data as IDimensionData[])[0]?.datum);
+      break;
+    case 'group':
+      getTooltipContentFromDatumList(params.groupDatum);
       break;
     case 'dimension':
       for (const { data: d } of data as IDimensionInfo[]) {
