Skip to content

Commit

Permalink
feat(v2/pie-label): add pie options (#1296)
Browse files Browse the repository at this point in the history
Co-authored-by: kasmine<736929286@qq.com>
  • Loading branch information
visiky authored Jul 19, 2020
1 parent e2ee437 commit cd3be27
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 4 deletions.
3 changes: 0 additions & 3 deletions __tests__/unit/plots/pie/index-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,6 @@ describe('pie', () => {
const polarRadius = coordinate.getRadius();
expect(radius).toBeUndefined();
expect(polarRadius).toBeGreaterThan(0);

const geometry = pie.chart.geometries[0];
const elements = geometry.elements;
});

it('innerRadius', () => {
Expand Down
98 changes: 98 additions & 0 deletions __tests__/unit/plots/pie/label-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { Pie } from '../../../../src';
import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
import { createDiv } from '../../../utils/dom';
import { IGroup } from '@antv/g2/lib/dependents';

describe('pie label', () => {
const data = POSITIVE_NEGATIVE_DATA.filter((o) => o.value > 0).map((d, idx) =>
idx === 1 ? { ...d, type: 'item1' } : d
);

const config = {
width: 400,
height: 300,
data,
angleField: 'value',
colorField: 'type',
radius: 0.8,
label: {},
};

it('label: visible', () => {
const pie = new Pie(createDiv(), config);

pie.render();

const geometry = pie.chart.geometries[0];
const elements = geometry.elements;
const labelGroups = geometry.labelsContainer.getChildren();

expect(elements.length).toBe(data.length);
expect(labelGroups.length).toBe(data.length);
});

it.skip('label: single color(todo-hustcc: 没有 color 字段,label 显示错误)', () => {
const pie = new Pie(createDiv(), {
...config,
colorField: null,
});

pie.render();

const geometry = pie.chart.geometries[0];
const labelGroups = geometry.labelsContainer.getChildren();

expect(labelGroups.length).toBe(data.length);
});

it('label: custom content', () => {
const pie = new Pie(createDiv(), {
...config,
label: {
content: (data, item, idx) => {
if (idx === 0 || idx === 1) {
return 'hello';
}
const { type, value } = data;
return `${type}: ${value}`;
},
},
});

pie.render();

const geometry = pie.chart.geometries[0];
const labelGroups = geometry.labelsContainer.getChildren();
expect(labelGroups.length).toBe(data.length);
const label1 = (labelGroups[0] as IGroup).getChildren();
expect(label1[0].get('type')).toBe('text');
expect(label1[1].get('type')).toBe('path');
expect(label1[0].attr('text')).toBe('hello');
const label2 = (labelGroups[1] as IGroup).getChildren();
expect(label2[0].attr('text')).toBe('hello');
});

it('label: custom callback', () => {
const pie = new Pie(createDiv(), {
...config,
label: {
callback: (value, type) => {
return {
content: `${type}: ${value}`,
};
},
},
});

pie.render();

const geometry = pie.chart.geometries[0];
const labelGroups = geometry.labelsContainer.getChildren();

expect(labelGroups.length).toBe(data.length);
const label1 = (labelGroups[0] as IGroup).getChildren();
const label3 = (labelGroups[2] as IGroup).getChildren();
expect(label1[0].attr('text')).toBe(`${data[0].type}: ${data[0].value}`);
expect(label3[0].attr('text')).toBe(`${data[2].type}: ${data[2].value}`);
});
});
25 changes: 24 additions & 1 deletion src/plots/pie/adaptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,29 @@ function legend(params: Params<PieOptions>): Params<PieOptions> {
return params;
}

/**
* label 配置
* @param params
*/
function label(params: Params<PieOptions>): Params<PieOptions> {
const { chart, options } = params;
const { label, colorField, angleField } = options;

const geometry = chart.geometries[0];
// label 为 false, 空 则不显示 label
if (!label) {
geometry.label(false);
} else {
const { callback, ...cfg } = label;
geometry.label({
fields: [angleField, colorField],
callback,
cfg,
});
}
return params;
}

/**
* style 配置
* @param params
Expand Down Expand Up @@ -102,5 +125,5 @@ function style(params: Params<PieOptions>): Params<PieOptions> {
*/
export function adaptor(params: Params<PieOptions>) {
// flow 的方式处理所有的配置到 G2 API
flow(field, meta, coord, legend, tooltip, style)(params);
flow(field, meta, coord, legend, tooltip, label, style)(params);
}

0 comments on commit cd3be27

Please sign in to comment.