feat: Legend 支持 onClick 回调. Closed #1511 (#1512)

antvis · Jun 14, 2022 · 20589b4 · 20589b4
1 parent 51f312e
commit 20589b4
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 18 deletions.
diff --git a/packages/f2/src/components/legend/withLegend.tsx b/packages/f2/src/components/legend/withLegend.tsx
@@ -72,11 +72,12 @@ export interface LegendProps {
   /**
    * value展示文案的前缀
    */
-   valuePrefix?: string;
+  valuePrefix?: string;
   /**
    * 是否可点击
    */
   clickable?: boolean;
+  onClick?: (item: LegendItem) => void;
 }
 
 export default (View) => {
@@ -105,7 +106,7 @@ export default (View) => {
         const { tickValue } = item;
         return {
           ...item,
-          filtered: filtered[tickValue]
+          filtered: filtered[tickValue],
         };
       });
     }
@@ -235,7 +236,7 @@ export default (View) => {
     _initEvent() {
       const { context, props, container } = this;
       const { canvas } = context;
-      const { chart, clickable = true } = props;
+      const { chart, clickable = true, onClick } = props;
 
       if (!clickable) return;
 
@@ -262,6 +263,9 @@ export default (View) => {
         if (!dataItem) {
           return;
         }
+        if (isFunction(onClick)) {
+          onClick(dataItem);
+        }
         const { field, tickValue } = dataItem;
 
         const { filtered: prevFiltered } = this.state;

diff --git a/packages/f2/test/components/legend/legend.test.tsx b/packages/f2/test/components/legend/legend.test.tsx
@@ -236,6 +236,7 @@ describe('图例', () => {
   });
 
   describe('点击交互', () => {
+    const onClick = jest.fn();
     const data = [
       { genre: 'Sports', sold: 275 },
       { genre: 'Strategy', sold: 115 },
@@ -248,7 +249,7 @@ describe('图例', () => {
       const { props } = (
         <Canvas context={context} pixelRatio={1}>
           <Chart data={data}>
-            <Legend />
+            <Legend onClick={onClick} />
             <Geometry x="genre" y="sold" color="genre" />
           </Chart>
         </Canvas>
@@ -261,6 +262,12 @@ describe('图例', () => {
       await gestureSimulator(context.canvas, 'click', { x: 27, y: 20 });
       await delay(200);
       expect(context).toMatchImageSnapshot();
+      expect(onClick.mock.calls.length).toBe(1);
+      expect(onClick.mock.calls[0][0]).toMatchObject({
+        field: 'genre',
+        color: '#1890FF',
+        name: 'Sports',
+      });
     });
 
     it('不可点击', async () => {
@@ -446,7 +453,7 @@ describe('图例', () => {
 
     await delay(1000);
     expect(context).toMatchImageSnapshot();
-  })
+  });
   it('图例 传入 valuePrefix', async () => {
     const data = [
       {
@@ -511,7 +518,7 @@ describe('图例', () => {
 
     await delay(1000);
     expect(context).toMatchImageSnapshot();
-  })
+  });
   it('图例 传入 自定义items', async () => {
     const data = [
       {
@@ -531,7 +538,6 @@ describe('图例', () => {
       },
     ];
 
-
     const context = createContext('图例 传入 自定义items');
     const chartRef = { current: null };
     const { type, props } = (
@@ -558,17 +564,19 @@ describe('图例', () => {
           />
           <Legend
             position="right"
-            items={[,
+            items={[
+              ,
               {
                 color: 'red',
                 name: '第一组',
-                value: '20'
+                value: '20',
               },
               {
                 color: 'blue',
                 name: '第二组',
-                value: '42'
-              }]}
+                value: '42',
+              },
+            ]}
             itemFormatter={(value, name) => {
               return value + '%';
             }}
@@ -582,7 +590,7 @@ describe('图例', () => {
 
     await delay(1000);
     expect(context).toMatchImageSnapshot();
-  })
+  });
   it('图例 传入 自定义items + valuePrefix', async () => {
     const data = [
       {
@@ -602,7 +610,6 @@ describe('图例', () => {
       },
     ];
 
-
     const context = createContext('图例 传入 自定义items + valuePrefix');
     const chartRef = { current: null };
     const { type, props } = (
@@ -629,17 +636,19 @@ describe('图例', () => {
           />
           <Legend
             position="right"
-            items={[,
+            items={[
+              ,
               {
                 color: 'red',
                 name: '第一组',
-                value: '20'
+                value: '20',
               },
               {
                 color: 'blue',
                 name: '第二组',
-                value: '42'
-              }]}
+                value: '42',
+              },
+            ]}
             itemFormatter={(value, name) => {
               return value + '%';
             }}
@@ -654,5 +663,5 @@ describe('图例', () => {
 
     await delay(1000);
     expect(context).toMatchImageSnapshot();
-  })
+  });
 });
diff --git a/packages/site/docs/api/chart/legend.zh.md b/packages/site/docs/api/chart/legend.zh.md
@@ -100,3 +100,19 @@ const data = [
   }}
 />
 ```
+
+### clickable
+
+是否支持点击，默认为 true
+
+### onClick
+
+item 点击的回调
+
+```jsx
+<Legend
+  onClick={(item) => {
+    console.log(item); // => { field: 'genre', color: '#1890FF', name: 'Sports'}
+  }}
+/>
+```