feat: 图表点击事件支持tooltip的position显示 (#372)

* feat: 图表点击事件支持tooltip的position显示 * test: 更新useInterceptors的UT * fix: remove console.log() --------- Co-authored-by: Zhang Rui <[email protected]>
growingio · Oct 9, 2023 · 326743a · 326743a
1 parent a3772ca
commit 326743a
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 18 deletions.
diff --git a/src/hooks/__test__/useInterceptors.test.tsx b/src/hooks/__test__/useInterceptors.test.tsx
@@ -14,28 +14,28 @@ describe('test useInterceptors', () => {
     });
 
     act(() => {
-      chartObj.emit('element:click');
+      chartObj.emit('element:click', { event: { relatedTarget: true } });
     });
-    expect(result.current.getTrigger()).toBe('click');
+    expect(result.current.getTrigger().type).toBe('click');
 
     act(() => {
-      chartObj.emit('element:mouseover');
+      chartObj.emit('element:mouseover', { event: { relatedTarget: true } });
     });
-    expect(result.current.getTrigger()).toBe('mouseover');
+    expect(result.current.getTrigger().type).toBe('mouseover');
 
     act(() => {
       chartObj.emit('element:mouseout', { event: { relatedTarget: false } });
     });
-    expect(result.current.getTrigger()).toBe('mouseover');
+    expect(result.current.getTrigger().type).toBe('mouseover');
 
     act(() => {
-      chartObj.emit('element:click');
+      chartObj.emit('element:click', { event: { relatedTarget: true } });
     });
-    expect(result.current.getTrigger()).toBe('click');
+    expect(result.current.getTrigger().type).toBe('click');
 
     act(() => {
       chartObj.emit('element:mouseout', { event: { relatedTarget: true } });
     });
-    expect(result.current.getTrigger()).toBe('mouseover');
+    expect(result.current.getTrigger().type).toBe('mouseover');
   });
 });
diff --git a/src/hooks/useInterceptors.ts b/src/hooks/useInterceptors.ts
@@ -15,12 +15,29 @@ export interface Interceptor {
   bindElementEvents: (chart: Chart, options?: InterceptorOptions) => void;
 }
 
+export interface TriggerInfo {
+  x?: number;
+  y?: number;
+  clientX?: number;
+  clientY?: number;
+  tipX?: number;
+  tipY?: number;
+  type?: string;
+}
+
 const useInterceptors = () => {
   const triggerActionRef: MutableRefObject<string> = useRef('');
   const chartRef: MutableRefObject<Chart | null> = useRef(null);
   const tooltipRef = useRef<HTMLDivElement | null>();
+  const triggerEventRef = useRef<TriggerInfo | null>();
 
-  const getTrigger = useCallback(() => triggerActionRef.current, [triggerActionRef]);
+  const getTrigger = useCallback(
+    (): TriggerInfo => ({
+      type: triggerActionRef.current,
+      ...(triggerEventRef.current || {}),
+    }),
+    [triggerActionRef]
+  );
   /* istanbul ignore next */
   const setTrigger = useCallback(
     (trigger) => {
@@ -34,6 +51,19 @@ const useInterceptors = () => {
   const [, updated] = useState(0);
 
   const interceptors: Interceptor = useMemo(() => {
+    const setPosition = (e: Event) => {
+      const position: TriggerInfo = {
+        x: e.x,
+        y: e.y,
+        clientX: e.clientX,
+        clientY: e.clientY,
+      };
+      const top = +String(tooltipRef.current?.style?.top).replace('px', '') || 0;
+      const left = +String(tooltipRef.current?.style?.left).replace('px', '') || 0;
+      position.tipX = (position.clientX || 0) - ((position.x || 0) - left);
+      position.tipY = (position.clientY || 0) - (position.y || 0) + top;
+      triggerEventRef.current = position;
+    };
     return {
       bindTooltip(r: any) {
         tooltipRef.current = r?.current;
@@ -60,15 +90,18 @@ const useInterceptors = () => {
               tooltipRef.current.style.left = `${revisedOffsetX}px`;
             }
           }
+          setPosition(event);
           triggerActionRef.current = 'click';
           chart.lockTooltip();
           updated(new Date().getTime());
         });
-        chart.on('element:mouseover', () => {
+        chart.on('element:mouseover', (event: Event) => {
+          // setPosition(event);
           triggerActionRef.current = 'mouseover';
         });
         chart.on('element:mouseout', (e: Event) => {
           triggerActionRef.current = 'mouseover';
+          triggerEventRef.current = undefined;
           if (!e.event.relatedTarget) {
             chart.unlockTooltip();
             updated(new Date().getTime());

diff --git a/src/info-card/InfoCard.tsx b/src/info-card/InfoCard.tsx
@@ -4,6 +4,7 @@ import { InfoCardData } from './InfoCardBox';
 import Item from './Item';
 
 import './styles/infocard.less';
+import { TriggerInfo } from '../hooks/useInterceptors';
 
 export interface InfoCardProps {
   title: string;
@@ -12,17 +13,22 @@ export interface InfoCardProps {
   forwardKey: string;
   valueKey: string;
   formatter?: (value: string | number) => string | number;
-  trigger?: string;
+  triggerInfo?: TriggerInfo;
   config?: ChartConfig;
-  injectComponent?: (options: { data: LooseObject; trigger?: string; forwardKey: string }) => JSX.Element;
+  injectComponent?: (options: {
+    data: LooseObject;
+    trigger?: string;
+    triggerInfo?: TriggerInfo;
+    forwardKey: string;
+  }) => JSX.Element;
 }
 
 const InfoCard = (props: InfoCardProps) => {
   const {
     title,
     subTitle,
     data = [],
-    trigger,
+    triggerInfo,
     forwardKey,
     valueKey,
     config,
@@ -37,7 +43,7 @@ const InfoCard = (props: InfoCardProps) => {
   return (
     <>
       {renderTooltip ? (
-        renderTooltip({ title, data, trigger, forwardKey, formatter })
+        renderTooltip({ title, data, trigger: triggerInfo?.type, triggerInfo, forwardKey, formatter })
       ) : (
         <div data-testid="infoCard" key="default-infocard">
           {title && (
@@ -62,7 +68,7 @@ const InfoCard = (props: InfoCardProps) => {
               </div>
             ))}
           </div>
-          {injectComponent?.({ data, trigger, forwardKey })}
+          {injectComponent?.({ data, trigger: triggerInfo?.type, triggerInfo, forwardKey })}
         </div>
       )}
     </>

diff --git a/src/info-card/InfoCardBox.tsx b/src/info-card/InfoCardBox.tsx
@@ -10,6 +10,7 @@ import { TooltipItem } from '@antv/g2/lib/interface';
 import { LegendObject } from '../legends/useLegends';
 import { getShapeConfig } from '../utils/tools/shapeConfig';
 import { getAxisFields } from '../utils/frameworks/axis';
+import { TriggerInfo } from '../hooks/useInterceptors';
 
 export interface TriggerItem extends Omit<TooltipItem, 'color'> {
   title?: string;
@@ -30,7 +31,7 @@ export interface InfoCardData extends Legend {
 
 export interface InfoCardProps {
   legendObject: LegendObject;
-  getTrigger?: () => string;
+  getTrigger?: () => TriggerInfo;
   // triggerItems: TriggerItem[];
   acceptor: any;
   options: ChartOptions;
@@ -53,7 +54,7 @@ const InfoCardBox = (props: InfoCardProps) => {
 
   const [, update] = useState(0);
 
-  const trigger = getTrigger?.();
+  const triggerInfo = getTrigger?.();
 
   /* istanbul ignore next */
   const onMouseLeave = () => {
@@ -130,7 +131,7 @@ const InfoCardBox = (props: InfoCardProps) => {
       <InfoCard
         title={title}
         data={items}
-        trigger={trigger}
+        triggerInfo={triggerInfo}
         forwardKey={forwardKey}
         valueKey={valueKey}
         config={config}