fix: pielabel event callback (#1857)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Oct 7, 2023 · 4b22fe5 · 4b22fe5
1 parent 9aa91bf
commit 4b22fe5
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 2 deletions.
diff --git a/packages/f2/src/components/pieLabel/pieLabeView.tsx b/packages/f2/src/components/pieLabel/pieLabeView.tsx
@@ -18,7 +18,15 @@ export default (props) => {
         const end = points[points.length - 1];
 
         return (
-          <group onClick={onClick}>
+          <group
+            onClick={
+              onClick
+                ? () => {
+                    onClick(label);
+                  }
+                : null
+            }
+          >
             {/* 锚点 */}
             <circle
               attrs={{

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,75 @@ 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);
+    gestureSimulator(context.canvas, 'click', { x: 266, y: 94 });
+    expect(onClickCallback.mock.calls[0][0].origin).toStrictEqual({
+      amount: 10,
+      memo: 'Eat',
+      const: 'const',
+    });
+  });
+
   it('左边超过最大显示个数，第四象限显示在第一象限', async () => {
     const context = createContext('左边超过最大显示个数，第四象限显示在第一象限', {
       width: '300px',