diff --git a/__tests__/unit/plots/rose/label-spec.ts b/__tests__/unit/plots/rose/label-spec.ts index 35a144dc97c..81a9f31122d 100644 --- a/__tests__/unit/plots/rose/label-spec.ts +++ b/__tests__/unit/plots/rose/label-spec.ts @@ -33,6 +33,120 @@ describe('rose label', () => { expect(geometry.labelOption.cfg).toBeUndefined(); }); + it('null', () => { + const rose = new Rose( + createDiv('null'), + deepMix({}, options, { + label: null, + }) + ); + + rose.render(); + const geometry = rose.chart.geometries[0]; + + // @ts-ignore + expect(geometry.labelOption.cfg).toBeUndefined(); + }); + + it('offset less 0', () => { + const rose = new Rose( + createDiv('offset'), + deepMix({}, options, { + label: { + offset: -1, + }, + }) + ); + + rose.render(); + const geometry = rose.chart.geometries[0]; + + // @ts-ignore + expect(geometry.labelOption.cfg).toEqual({ + offset: -1, + layout: { type: 'limit-in-shape' }, // 默认配置 + }); + }); + + it('layout is object', () => { + const rose = new Rose( + createDiv('layout'), + deepMix({}, options, { + label: { + fields: ['sales'], + layout: { + type: 'other', + }, + }, + }) + ); + + rose.render(); + + const geometry = rose.chart.geometries[0]; + + // @ts-ignore + expect(geometry.labelOption.cfg).toEqual({ + layout: { type: 'other' }, + }); + }); + + it('layout is array', () => { + const rose = new Rose( + createDiv('layout'), + deepMix({}, options, { + label: { + fields: ['sales'], + position: 'top', + layout: [ + { + type: 'limit-in-shape', + }, + { + type: 'other', + }, + ], + }, + }) + ); + + rose.render(); + + const geometry = rose.chart.geometries[0]; + const labelGroups = geometry.labelsContainer.getChildren(); + + // @ts-ignore + expect(geometry.labelOption.cfg).toEqual({ + position: 'top', + layout: [{ type: 'other' }], + }); + expect(labelGroups).toHaveLength(salesByArea.length); + labelGroups.forEach((label, index) => { + expect(label.get('children')[0].attr('text')).toBe(`${Math.floor(salesByArea[index].sales / 10000)}万`); + }); + }); + + it('layout is null', () => { + const rose = new Rose( + createDiv('layout'), + deepMix({}, options, { + label: { + fields: ['sales'], + layout: null, + }, + }) + ); + + rose.render(); + + const geometry = rose.chart.geometries[0]; + + // @ts-ignore + expect(geometry.labelOption.cfg).toEqual({ + layout: null, + }); + }); + it('position top', () => { const rose = new Rose( createDiv('position top'), diff --git a/src/plots/rose/adaptor.ts b/src/plots/rose/adaptor.ts index f9359235766..dd286b5c3ae 100644 --- a/src/plots/rose/adaptor.ts +++ b/src/plots/rose/adaptor.ts @@ -1,5 +1,5 @@ import { GeometryLabelLayoutCfg } from '@antv/g2/lib/interface'; -import { deepMix, each, isObject, isArray } from '@antv/util'; +import { deepMix, filter, isObject, isArray } from '@antv/util'; import { Params } from '../../core/adaptor'; import { flow, findGeometry, log, LEVEL } from '../../utils'; import { tooltip, interaction, animation, theme, scale, annotation, state } from '../../adaptor/common'; @@ -47,28 +47,31 @@ function label(params: Params): Params { } else if (isObject(label)) { const { callback, fields, ...cfg } = label; const { offset, layout } = cfg; + // 当 label 在 shape 外部显示时,设置 'limit-in-shape' 会 // 造成 label 不显示。 if (offset === undefined || offset >= 0) { if (isArray(layout)) { - each(layout, (value: GeometryLabelLayoutCfg) => { + cfg.layout = filter(layout, (value: GeometryLabelLayoutCfg) => { if (value.type === 'limit-in-shape') { - delete value.type; + return false; } + return true; }); } else if (isObject(layout)) { if (layout.type === 'limit-in-shape') { - delete layout.type; + cfg.layout = undefined; } } } + geometry.label({ fields: fields || [xField], callback, cfg, }); } else { - log(LEVEL.WARN, label === null || label === undefined, 'the label option must be an Object.'); + log(LEVEL.WARN, label === null, 'the label option must be an Object.'); geometry.label({ fields: [xField] }); }