feat: pielabel支持展示指定records (#2116)

Author: tangying1027

packages/f2/src/components/pieLabel/withPieLabel.tsx

@@ -67,6 +67,10 @@ export interface PieLabelProps {
   label1?: any;
   label2?: any;
   sidePadding?: string | number;
+  /**
+   * 指定要显示的数据记录
+   */
+  records?: any[];
   /**
    * 触发的事件类型
    */
@@ -317,11 +321,26 @@ export default (View) => {
         sidePadding,
         label1OffsetY,
         label2OffsetY,
+        records: customRecords,
       } = props;
+      const { adjust } = chart;
       const { measureText, px2hd } = this.context;
       const { center, radius, height: coordHeight, width: coordWidth } = coord;
       const geometry = chart.getGeometrys()[0];
-      const records = geometry.flatRecords();
+      const allRecords = geometry.flatRecords();
+
+      let records = allRecords;
+
+      if (customRecords) {
+        const { xField, yField } = adjust.adjust;
+        records = customRecords
+          .map((record) => {
+            return allRecords.find(
+              (d) => d.origin[xField] === record[xField] && d.origin[yField] === record[yField]
+            );
+          })
+          .filter(Boolean);
+      }
 
       // 高度计算，拿第一项数据作为计算依据
       const label1Text = isFunction(label1) ? label1(records[0]?.origin, records[0]) : label1;

packages/f2/test/components/pieLabel/__image_snapshots__/spider-test-tsx-spider-pie-label-指定展示指定数据-1-snap.png

@@ -432,4 +432,91 @@ describe('Spider PieLabel', () => {
     await delay(300);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('指定展示指定数据', async () => {
+    const context = createContext('指定展示指定数据', {
+      width: '300px',
+      height: '150px',
+    });
+    const data = [
+      {
+        amount: 20,
+        memo: 'Eat',
+        const: 'const',
+      },
+      {
+        amount: 10,
+        memo: 'Language',
+        const: 'const',
+      },
+      {
+        amount: 10,
+        memo: 'Math',
+        const: 'const',
+      },
+      {
+        amount: 10,
+        memo: 'Foreign',
+        const: 'const',
+      },
+
+      {
+        amount: 30,
+        memo: 'Sports',
+        const: 'const',
+      },
+      {
+        amount: 20,
+        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
+            type="spider"
+            records={[
+              {
+                amount: 20,
+                memo: 'Eat',
+                const: 'const',
+              },
+              {
+                amount: 10,
+                memo: 'Language',
+                const: 'const',
+              },
+            ]}
+            label1={(data) => {
+              return {
+                text: data.memo,
+              };
+            }}
+            label2={(data) => {
+              return {
+                fill: '#000000',
+                text: '$' + data.amount.toFixed(2),
+              };
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(300);
+    expect(context).toMatchImageSnapshot();
+  });
 });