Skip to content

Commit

Permalink
feat: label.formatter 传参和 label.field 相对应 (#2188)
Browse files Browse the repository at this point in the history
Co-authored-by: aiyin.lzy <nadia.lzy@antfin.com>
  • Loading branch information
liuzhenying and aiyin.lzy authored Jan 8, 2021
1 parent 470577a commit 159f80c
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 24 deletions.
1 change: 1 addition & 0 deletions __tests__/data/treemap-nest.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const TREEMAP_CHILDREN = {
{
name: '其他',
value: 25.0965,
ext: '自定义数据',
},
],
},
Expand Down
40 changes: 20 additions & 20 deletions __tests__/data/treemap.ts
Original file line number Diff line number Diff line change
@@ -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: '自定义数据' },
],
};
48 changes: 48 additions & 0 deletions __tests__/unit/plots/treemap/lable-spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
18 changes: 17 additions & 1 deletion __tests__/unit/plots/treemap/tooltip-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('treemap tooltip', () => {
};

beforeAll(() => {
treemapPlot = new Treemap(createDiv(''), options);
treemapPlot = new Treemap(createDiv('treemap', undefined, 'treemap-tooltip'), options);
treemapPlot.render();
});

Expand All @@ -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', () => {
Expand Down
6 changes: 6 additions & 0 deletions __tests__/unit/plots/treemap/utils-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const data1 = {
{
name: '分类 1',
value: 100,
ext: '自定义数据',
},
{
name: '分类 2',
Expand Down Expand Up @@ -40,6 +41,7 @@ const data2 = {
{
name: '小米1',
value: 10,
ext: '自定义数据',
},
{
name: '小米2',
Expand All @@ -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', () => {
Expand All @@ -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('自定义数据');
});
});
5 changes: 2 additions & 3 deletions src/plots/treemap/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 159f80c

Please sign in to comment.