feat: label.formatter 传参和 label.field 相对应 (#2188)

Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>

__tests__/data/treemap-nest.ts

@@ -8,6 +8,7 @@ export const TREEMAP_CHILDREN = {
         {
           name: '其他',
           value: 25.0965,
+          ext: '自定义数据',
         },
       ],
     },

__tests__/data/treemap.ts

@@ -1,25 +1,25 @@
 export const TREEMAP = {
   name: 'root',
   children: [
-    { name: '分类 1', value: 560 },
-    { name: '分类 2', value: 500 },
-    { name: '分类 3', value: 150 },
-    { name: '分类 4', value: 140 },
-    { name: '分类 5', value: 115 },
-    { name: '分类 6', value: 95 },
-    { name: '分类 7', value: 90 },
-    { name: '分类 8', value: 75 },
-    { name: '分类 9', value: 98 },
-    { name: '分类 10', value: 60 },
-    { name: '分类 11', value: 45 },
-    { name: '分类 12', value: 40 },
-    { name: '分类 13', value: 40 },
-    { name: '分类 14', value: 35 },
-    { name: '分类 15', value: 40 },
-    { name: '分类 16', value: 40 },
-    { name: '分类 17', value: 40 },
-    { name: '分类 18', value: 30 },
-    { name: '分类 19', value: 28 },
-    { name: '分类 20', value: 16 },
+    { name: '分类 1', value: 560, ext: '自定义数据' },
+    { name: '分类 2', value: 500, ext: '自定义数据' },
+    { name: '分类 3', value: 150, ext: '自定义数据' },
+    { name: '分类 4', value: 140, ext: '自定义数据' },
+    { name: '分类 5', value: 115, ext: '自定义数据' },
+    { name: '分类 6', value: 95, ext: '自定义数据' },
+    { name: '分类 7', value: 90, ext: '自定义数据' },
+    { name: '分类 8', value: 75, ext: '自定义数据' },
+    { name: '分类 9', value: 98, ext: '自定义数据' },
+    { name: '分类 10', value: 60, ext: '自定义数据' },
+    { name: '分类 11', value: 45, ext: '自定义数据' },
+    { name: '分类 12', value: 40, ext: '自定义数据' },
+    { name: '分类 13', value: 40, ext: '自定义数据' },
+    { name: '分类 14', value: 35, ext: '自定义数据' },
+    { name: '分类 15', value: 40, ext: '自定义数据' },
+    { name: '分类 16', value: 40, ext: '自定义数据' },
+    { name: '分类 17', value: 40, ext: '自定义数据' },
+    { name: '分类 18', value: 30, ext: '自定义数据' },
+    { name: '分类 19', value: 28, ext: '自定义数据' },
+    { name: '分类 20', value: 16, ext: '自定义数据' },
   ],
 };

__tests__/unit/plots/treemap/lable-spec.ts

@@ -0,0 +1,48 @@
+import { Treemap } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { TREEMAP } from '../../../data/treemap';
+
+describe('treemap basic', () => {
+  it('default treemap', () => {
+    const treemapPlot = new Treemap(createDiv(), {
+      data: TREEMAP,
+      colorField: 'name',
+    });
+
+    treemapPlot.render();
+
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].labelOption.fields).toEqual(['name']);
+
+    // label with custom
+    treemapPlot.update({
+      label: {
+        position: 'top',
+        style: {
+          textAlign: 'start',
+        },
+        fields: ['name', 'ext'],
+        formatter: (v) => {
+          return `${v.name}${v.ext}`;
+        },
+      },
+    });
+
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].labelOption.fields).toEqual(['name', 'ext']);
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].labelOption.cfg.position).toEqual('top');
+    expect(treemapPlot.chart.geometries[0].labelsContainer.getChildren()[0].cfg.children[0].attrs.text).toBe(
+      TREEMAP.children[0].name + TREEMAP.children[0].ext
+    );
+
+    // label with custom
+    treemapPlot.update({
+      label: false,
+    });
+
+    // @ts-ignore
+    expect(treemapPlot.chart.geometries[0].labelOption).toBeFalsy();
+    treemapPlot.destroy();
+  });
+});

__tests__/unit/plots/treemap/tooltip-spec.ts

@@ -12,7 +12,7 @@ describe('treemap tooltip', () => {
   };
 
   beforeAll(() => {
-    treemapPlot = new Treemap(createDiv(''), options);
+    treemapPlot = new Treemap(createDiv('treemap', undefined, 'treemap-tooltip'), options);
     treemapPlot.render();
   });
 
@@ -35,13 +35,29 @@ describe('treemap tooltip', () => {
       tooltip: {
         showTitle: true,
         title: 'test',
+        fields: ['name', 'value', 'ext'],
+        formatter: (data) => ({
+          name: data.name,
+          value: `${data.value}/${data.ext || '-'}`,
+        }),
       },
     });
 
     const customTooltipOption = treemapPlot.chart.options.tooltip;
 
     expect(customTooltipOption.showTitle).toBe(true);
     expect(customTooltipOption.title).toBe('test');
+    expect(customTooltipOption.fields).toEqual(['name', 'value', 'ext']);
+
+    const testElement = treemapPlot.chart.geometries[0].elements.find((ele) => ele.data.name === '其他');
+    const bbox = testElement.getBBox();
+    treemapPlot.chart.showTooltip({ x: (bbox.maxX + bbox.minX) / 2, y: (bbox.maxY + bbox.minY) / 2 });
+    expect(document.querySelectorAll('#treemap-tooltip .g2-tooltip-list-item .g2-tooltip-name')[0].innerHTML).toBe(
+      '其他'
+    );
+    expect(document.querySelectorAll('#treemap-tooltip .g2-tooltip-list-item .g2-tooltip-value')[0].innerHTML).toBe(
+      `${testElement.data.value}/${testElement.data.ext || '-'}`
+    );
   });
 
   it('treemap tooltip false', () => {

__tests__/unit/plots/treemap/utils-spec.ts

@@ -6,6 +6,7 @@ const data1 = {
     {
       name: '分类 1',
       value: 100,
+      ext: '自定义数据',
     },
     {
       name: '分类 2',
@@ -40,6 +41,7 @@ const data2 = {
         {
           name: '小米1',
           value: 10,
+          ext: '自定义数据',
         },
         {
           name: '小米2',
@@ -66,6 +68,8 @@ describe('treemap transformData', () => {
     expect(data.length).toBe(3);
     expect(areaArr[1] / areaArr[0]).toEqual(data1.children[1].value / data1.children[0].value);
     expect(areaArr[2] / areaArr[1]).toEqual(data1.children[2].value / data1.children[1].value);
+
+    expect(data[0].ext).toBe('自定义数据');
   });
 
   it('transformData, nest treemap', () => {
@@ -90,5 +94,7 @@ describe('treemap transformData', () => {
     expect((areaArr[3] / areaArr[1]).toFixed(1)).toEqual(
       (data2.children[1].children[1].value / data2.children[0].children[1].value).toFixed(1)
     );
+
+    expect(data[2].ext).toBe('自定义数据');
   });
 });

src/plots/treemap/utils.ts

@@ -15,13 +15,12 @@ export function transformData(options: TreemapOptions) {
   const result = [];
   nodes.forEach((node) => {
     if (!node.children) {
-      const eachNode: any = {
-        name: node.data.name,
+      const eachNode = Object.assign({}, node.data, {
         x: node.x,
         y: node.y,
         depth: node.depth,
         value: node.value,
-      };
+      });
       if (!node.data[colorField] && node.parent) {
         eachNode[colorField] = node.parent.data[colorField];
       } else {