Skip to content

Commit aca28ff

Browse files
lessmostlessmost
authored
fix(conversion-tag): set an uniqe id for every shape (#1856)
1 parent e26ebb8 commit aca28ff

File tree

3 files changed

+33
-9
lines changed

3 files changed

+33
-9
lines changed

‎__tests__/unit/adaptor/connected-area-spec.ts

-4
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ describe('column connected area', () => {
5757
});
5858
});
5959

60-
/*
6160
it('update', () => {
6261
plot.update({
6362
...options,
@@ -101,7 +100,6 @@ describe('column connected area', () => {
101100
const interaction = plot.chart.interactions['__interval-connected-area-hover__'];
102101
expect(interaction).toBeUndefined();
103102
});
104-
*/
105103
});
106104

107105
describe('bar connected area', () => {
@@ -145,7 +143,6 @@ describe('bar connected area', () => {
145143
});
146144
});
147145

148-
/*
149146
it('update', () => {
150147
plot.update({
151148
...options,
@@ -189,5 +186,4 @@ describe('bar connected area', () => {
189186
const interaction = plot.chart.interactions['__interval-connected-area-hover__'];
190187
expect(interaction).toBeUndefined();
191188
});
192-
*/
193189
});

‎__tests__/unit/adaptor/conversion-tag-spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { uniq } from '@antv/util';
12
import { IGroup } from '@antv/g2/lib/dependents';
23
import { Column, ColumnOptions, Bar, BarOptions } from '../../../src';
34
import { createDiv } from '../../utils/dom';
@@ -54,6 +55,9 @@ describe('column conversion tag', () => {
5455

5556
// 文本
5657
const texts = group.findAllByName('conversion-tag-text');
58+
const textIds = texts.map((text) => text.get('id')) as string[];
59+
// 每一个都有唯一的 ID
60+
expect(uniq(textIds)).toHaveLength(DATA.length - 1);
5761
expect(texts).toHaveLength(DATA.length - 1);
5862
DATA.forEach((datum, idx) => {
5963
if (idx > 0) {
@@ -64,6 +68,9 @@ describe('column conversion tag', () => {
6468

6569
// 箭头
6670
const arrows = group.findAllByName('conversion-tag-arrow');
71+
const arrowIds = arrows.map((arrow) => arrow.get('id')) as string[];
72+
// 每一个都有唯一的 ID
73+
expect(uniq(arrowIds)).toHaveLength(DATA.length - 1);
6774
expect(arrows).toHaveLength(DATA.length - 1);
6875
arrows.forEach((arrow) => {
6976
const bbox = arrow.getBBox();
@@ -99,6 +106,9 @@ describe('column conversion tag', () => {
99106

100107
// 文本
101108
const texts = group.findAllByName('conversion-tag-text');
109+
const textIds = texts.map((text) => text.get('id')) as string[];
110+
// 每一个都有唯一的 ID
111+
expect(uniq(textIds)).toHaveLength(DATA.length - 1);
102112
expect(texts).toHaveLength(DATA.length - 1);
103113
DATA.slice()
104114
.reverse()
@@ -111,6 +121,9 @@ describe('column conversion tag', () => {
111121

112122
// 箭头
113123
const arrows = group.findAllByName('conversion-tag-arrow');
124+
const arrowIds = arrows.map((arrow) => arrow.get('id')) as string[];
125+
// 每一个都有唯一的 ID
126+
expect(uniq(arrowIds)).toHaveLength(DATA.length - 1);
114127
expect(arrows).toHaveLength(DATA.length - 1);
115128
arrows.forEach((arrow) => {
116129
const bbox = arrow.getBBox();
@@ -173,6 +186,9 @@ describe('bar conversion tag', () => {
173186

174187
// 文本
175188
const texts = group.findAllByName('conversion-tag-text');
189+
const textIds = texts.map((text) => text.get('id')) as string[];
190+
// 每一个都有唯一的 ID
191+
expect(uniq(textIds)).toHaveLength(DATA.length - 1);
176192
expect(texts).toHaveLength(DATA.length - 1);
177193
DATA.forEach((datum, idx) => {
178194
if (idx > 0) {
@@ -183,6 +199,9 @@ describe('bar conversion tag', () => {
183199

184200
// 箭头
185201
const arrows = group.findAllByName('conversion-tag-arrow');
202+
const arrowIds = arrows.map((arrow) => arrow.get('id')) as string[];
203+
// 每一个都有唯一的 ID
204+
expect(uniq(arrowIds)).toHaveLength(DATA.length - 1);
186205
expect(arrows).toHaveLength(DATA.length - 1);
187206
arrows.forEach((arrow) => {
188207
const bbox = arrow.getBBox();
@@ -218,6 +237,9 @@ describe('bar conversion tag', () => {
218237

219238
// 文本
220239
const texts = group.findAllByName('conversion-tag-text');
240+
const textIds = texts.map((text) => text.get('id')) as string[];
241+
// 每一个都有唯一的 ID
242+
expect(uniq(textIds)).toHaveLength(DATA.length - 1);
221243
expect(texts).toHaveLength(DATA.length - 1);
222244
DATA.forEach((datum, idx) => {
223245
if (idx > 0) {
@@ -228,6 +250,9 @@ describe('bar conversion tag', () => {
228250

229251
// 箭头
230252
const arrows = group.findAllByName('conversion-tag-arrow');
253+
const arrowIds = arrows.map((arrow) => arrow.get('id')) as string[];
254+
// 每一个都有唯一的 ID
255+
expect(uniq(arrowIds)).toHaveLength(DATA.length - 1);
231256
expect(arrows).toHaveLength(DATA.length - 1);
232257
arrows.forEach((arrow) => {
233258
const bbox = arrow.getBBox();

‎src/adaptor/conversion-tag.ts

+8-5
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export interface OptionWithConversionTag {
4343
type TagRenderConfig = {
4444
/** 所在的 View */
4545
view: View;
46+
/** 所属的 geometry */
47+
geometry: Geometry;
4648
/** 转化率组件的 group */
4749
group: IGroup;
4850
/** 转化率配置 */
@@ -96,7 +98,7 @@ function parsePoints(coordinate: Coordinate, element: Element): { x: number; y:
9698
}
9799

98100
function renderArrowTag(config: TagRenderConfig, elemPrev: Element, elemNext: Element): void {
99-
const { view, group, options, horizontal } = config;
101+
const { view, geometry, group, options, horizontal } = config;
100102
const { offset, size, arrow } = options;
101103
const coordinate = view.getCoordinate();
102104
const pointPrev = parsePoints(coordinate, elemPrev)[horizontal ? 3 : 0];
@@ -152,7 +154,7 @@ function renderArrowTag(config: TagRenderConfig, elemPrev: Element, elemNext: El
152154
}
153155

154156
group.addShape('polygon', {
155-
id: `${view.id}-conversion-tag-arrow`,
157+
id: `${view.id}-conversion-tag-arrow-${geometry.getElementId(elemPrev.getModel().mappingData)}`,
156158
name: 'conversion-tag-arrow',
157159
attrs: {
158160
...(arrow.style || {}),
@@ -162,7 +164,7 @@ function renderArrowTag(config: TagRenderConfig, elemPrev: Element, elemNext: El
162164
}
163165

164166
function renderTextTag(config: TagRenderConfig, elemPrev: Element, elemNext: Element): void {
165-
const { view, group, options, field, horizontal } = config;
167+
const { view, geometry, group, options, field, horizontal } = config;
166168
const { offset, size } = options;
167169
if (typeof options.text === 'boolean') {
168170
return;
@@ -174,7 +176,7 @@ function renderTextTag(config: TagRenderConfig, elemPrev: Element, elemNext: Ele
174176
const pointNext = parsePoints(coordinate, elemNext)[horizontal ? 0 : 3];
175177

176178
const textShape = group.addShape('text', {
177-
id: `${view.id}-conversion-tag-text`,
179+
id: `${view.id}-conversion-tag-text-${geometry.getElementId(elemPrev.getModel().mappingData)}`,
178180
name: 'conversion-tag-text',
179181
attrs: {
180182
...(options.text?.style || {}),
@@ -223,14 +225,15 @@ export function conversionTag<O extends OptionWithConversionTag>(field: string,
223225
id: `${chart.id}-conversion-tag-group`,
224226
name: 'conversion-tag-group',
225227
});
228+
const interval = find(chart.geometries, (geom: Geometry) => geom.type === 'interval');
226229
const config: TagRenderConfig = {
227230
view,
231+
geometry: interval,
228232
group,
229233
field,
230234
horizontal,
231235
options: getConversionTagOptionsWithDefaults(conversionTag, horizontal),
232236
};
233-
const interval = find(chart.geometries, (geom: Geometry) => geom.type === 'interval');
234237
const elements = horizontal ? interval.elements : interval.elements.slice().reverse();
235238
each(elements, (elem: Element, idx: number) => {
236239
if (idx > 0) {

0 commit comments

Comments
 (0)