Skip to content

Commit 159f80c

Browse files
liuzhenyingaiyin.lzy
liuzhenying
and
aiyin.lzy
authored
feat: label.formatter 传参和 label.field 相对应 (#2188)
Co-authored-by: aiyin.lzy <[email protected]>
1 parent 470577a commit 159f80c

File tree

6 files changed

+94
-24
lines changed

6 files changed

+94
-24
lines changed

‎__tests__/data/treemap-nest.ts

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const TREEMAP_CHILDREN = {
88
{
99
name: '其他',
1010
value: 25.0965,
11+
ext: '自定义数据',
1112
},
1213
],
1314
},

‎__tests__/data/treemap.ts

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

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

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Treemap } from '../../../../src';
2+
import { createDiv } from '../../../utils/dom';
3+
import { TREEMAP } from '../../../data/treemap';
4+
5+
describe('treemap basic', () => {
6+
it('default treemap', () => {
7+
const treemapPlot = new Treemap(createDiv(), {
8+
data: TREEMAP,
9+
colorField: 'name',
10+
});
11+
12+
treemapPlot.render();
13+
14+
// @ts-ignore
15+
expect(treemapPlot.chart.geometries[0].labelOption.fields).toEqual(['name']);
16+
17+
// label with custom
18+
treemapPlot.update({
19+
label: {
20+
position: 'top',
21+
style: {
22+
textAlign: 'start',
23+
},
24+
fields: ['name', 'ext'],
25+
formatter: (v) => {
26+
return `${v.name}${v.ext}`;
27+
},
28+
},
29+
});
30+
31+
// @ts-ignore
32+
expect(treemapPlot.chart.geometries[0].labelOption.fields).toEqual(['name', 'ext']);
33+
// @ts-ignore
34+
expect(treemapPlot.chart.geometries[0].labelOption.cfg.position).toEqual('top');
35+
expect(treemapPlot.chart.geometries[0].labelsContainer.getChildren()[0].cfg.children[0].attrs.text).toBe(
36+
TREEMAP.children[0].name + TREEMAP.children[0].ext
37+
);
38+
39+
// label with custom
40+
treemapPlot.update({
41+
label: false,
42+
});
43+
44+
// @ts-ignore
45+
expect(treemapPlot.chart.geometries[0].labelOption).toBeFalsy();
46+
treemapPlot.destroy();
47+
});
48+
});

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

+17-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('treemap tooltip', () => {
1212
};
1313

1414
beforeAll(() => {
15-
treemapPlot = new Treemap(createDiv(''), options);
15+
treemapPlot = new Treemap(createDiv('treemap', undefined, 'treemap-tooltip'), options);
1616
treemapPlot.render();
1717
});
1818

@@ -35,13 +35,29 @@ describe('treemap tooltip', () => {
3535
tooltip: {
3636
showTitle: true,
3737
title: 'test',
38+
fields: ['name', 'value', 'ext'],
39+
formatter: (data) => ({
40+
name: data.name,
41+
value: `${data.value}/${data.ext || '-'}`,
42+
}),
3843
},
3944
});
4045

4146
const customTooltipOption = treemapPlot.chart.options.tooltip;
4247

4348
expect(customTooltipOption.showTitle).toBe(true);
4449
expect(customTooltipOption.title).toBe('test');
50+
expect(customTooltipOption.fields).toEqual(['name', 'value', 'ext']);
51+
52+
const testElement = treemapPlot.chart.geometries[0].elements.find((ele) => ele.data.name === '其他');
53+
const bbox = testElement.getBBox();
54+
treemapPlot.chart.showTooltip({ x: (bbox.maxX + bbox.minX) / 2, y: (bbox.maxY + bbox.minY) / 2 });
55+
expect(document.querySelectorAll('#treemap-tooltip .g2-tooltip-list-item .g2-tooltip-name')[0].innerHTML).toBe(
56+
'其他'
57+
);
58+
expect(document.querySelectorAll('#treemap-tooltip .g2-tooltip-list-item .g2-tooltip-value')[0].innerHTML).toBe(
59+
`${testElement.data.value}/${testElement.data.ext || '-'}`
60+
);
4561
});
4662

4763
it('treemap tooltip false', () => {

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

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const data1 = {
66
{
77
name: '分类 1',
88
value: 100,
9+
ext: '自定义数据',
910
},
1011
{
1112
name: '分类 2',
@@ -40,6 +41,7 @@ const data2 = {
4041
{
4142
name: '小米1',
4243
value: 10,
44+
ext: '自定义数据',
4345
},
4446
{
4547
name: '小米2',
@@ -66,6 +68,8 @@ describe('treemap transformData', () => {
6668
expect(data.length).toBe(3);
6769
expect(areaArr[1] / areaArr[0]).toEqual(data1.children[1].value / data1.children[0].value);
6870
expect(areaArr[2] / areaArr[1]).toEqual(data1.children[2].value / data1.children[1].value);
71+
72+
expect(data[0].ext).toBe('自定义数据');
6973
});
7074

7175
it('transformData, nest treemap', () => {
@@ -90,5 +94,7 @@ describe('treemap transformData', () => {
9094
expect((areaArr[3] / areaArr[1]).toFixed(1)).toEqual(
9195
(data2.children[1].children[1].value / data2.children[0].children[1].value).toFixed(1)
9296
);
97+
98+
expect(data[2].ext).toBe('自定义数据');
9399
});
94100
});

‎src/plots/treemap/utils.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,12 @@ export function transformData(options: TreemapOptions) {
1515
const result = [];
1616
nodes.forEach((node) => {
1717
if (!node.children) {
18-
const eachNode: any = {
19-
name: node.data.name,
18+
const eachNode = Object.assign({}, node.data, {
2019
x: node.x,
2120
y: node.y,
2221
depth: node.depth,
2322
value: node.value,
24-
};
23+
});
2524
if (!node.data[colorField] && node.parent) {
2625
eachNode[colorField] = node.parent.data[colorField];
2726
} else {

0 commit comments

Comments
 (0)