fix: pie click event callback

antvis · Oct 7, 2023 · e73b00f · e73b00f
1 parent f76b421
commit e73b00f
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 13 deletions.
diff --git a/packages/f2/src/components/pieLabel/pieLabeView.tsx b/packages/f2/src/components/pieLabel/pieLabeView.tsx
@@ -1,24 +1,20 @@
 import { jsx } from '@antv/f-engine';
 
 export default (props) => {
-  const {
-    lineStyle,
-    anchorStyle,
-    labels,
-    label1OffsetY,
-    label2OffsetY,
-    triggerRef,
-    onClick,
-  } = props;
+  const { lineStyle, anchorStyle, labels, label1OffsetY, label2OffsetY, onClick } = props;
 
   return (
-    <group ref={triggerRef}>
+    <group>
       {labels.map((label) => {
         const { origin, anchor, side, color, label1, label2, points } = label;
         const end = points[points.length - 1];
 
         return (
-          <group onClick={onClick}>
+          <group
+            onClick={(e) => {
+              onClick(e.target?.config?.data);
+            }}
+          >
             {/* 锚点 */}
             <circle
               attrs={{

diff --git a/packages/f2/src/components/pieLabel/withPieLabel.tsx b/packages/f2/src/components/pieLabel/withPieLabel.tsx
@@ -1,4 +1,4 @@
-import { jsx, Component } from '@antv/f-engine';
+import { jsx, Component, Ref } from '@antv/f-engine';
 import { deepMix, isFunction } from '@antv/util';
 import { ChartChildProps, Point } from '../../chart';
 
@@ -78,6 +78,7 @@ export default (View) => {
     IProps & ChartChildProps
   > {
     labels: [];
+    triggerRef: Ref;
     constructor(props) {
       super(props);
     }

diff --git a/packages/f2/test/components/pieLabel/pieLabel.test.tsx b/packages/f2/test/components/pieLabel/pieLabel.test.tsx
@@ -1,7 +1,7 @@
 import { jsx } from '../../../src';
 import { Canvas, Chart } from '../../../src';
 import { Interval, PieLabel } from '../../../src/components';
-import { createContext, delay } from '../../util';
+import { createContext, delay, gestureSimulator } from '../../util';
 
 describe('PieLabel', () => {
   it('默认显示', async () => {
@@ -64,6 +64,76 @@ describe('PieLabel', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('事件回调', async () => {
+    const onClickCallback = jest.fn();
+    const context = createContext('默认显示', { width: '300px', height: '150px' });
+    const data = [
+      {
+        amount: 20,
+        memo: 'Study',
+        const: 'const',
+      },
+      {
+        amount: 10,
+        memo: 'Eat',
+        const: 'const',
+      },
+      {
+        amount: 20,
+        memo: 'Sports',
+        const: 'const',
+      },
+      {
+        amount: 10,
+        memo: 'Other',
+        const: 'const',
+      },
+    ];
+    const { props } = (
+      <Canvas context={context} animate={false} pixelRatio={1}>
+        <Chart
+          data={data}
+          coord={{
+            type: 'polar',
+            transposed: true,
+            innerRadius: 0.3,
+            radius: 0.5,
+          }}
+        >
+          <Interval x="const" y="amount" adjust="stack" color="memo" />
+          <PieLabel
+            label1={(data) => {
+              return {
+                text: data.memo,
+              };
+            }}
+            label2={(data) => {
+              return {
+                fill: '#000000',
+                text: '$' + data.amount.toFixed(2),
+              };
+            }}
+            onClick={(data) => {
+              onClickCallback(data);
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(300);
+    await gestureSimulator(context.canvas, 'click', { x: 266, y: 97 });
+
+    expect(onClickCallback.mock.calls[0][0]).toStrictEqual({
+      amount: 10,
+      memo: 'Eat',
+      const: 'const',
+    });
+  });
+
   it('左边超过最大显示个数，第四象限显示在第一象限', async () => {
     const context = createContext('左边超过最大显示个数，第四象限显示在第一象限', {
       width: '300px',