Skip to content

Commit

Permalink
fix(conversion-tag): set an uniqe id for every shape (#1856)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lessmost
lessmost authored Nov 4, 2020
1 parent e26ebb8 commit aca28ff
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 9 deletions.
4 changes: 0 additions & 4 deletions __tests__/unit/adaptor/connected-area-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ describe('column connected area', () => {
});
});

/*
it('update', () => {
plot.update({
...options,
Expand Down Expand Up @@ -101,7 +100,6 @@ describe('column connected area', () => {
const interaction = plot.chart.interactions['__interval-connected-area-hover__'];
expect(interaction).toBeUndefined();
});
*/
});

describe('bar connected area', () => {
Expand Down Expand Up @@ -145,7 +143,6 @@ describe('bar connected area', () => {
});
});

/*
it('update', () => {
plot.update({
...options,
Expand Down Expand Up @@ -189,5 +186,4 @@ describe('bar connected area', () => {
const interaction = plot.chart.interactions['__interval-connected-area-hover__'];
expect(interaction).toBeUndefined();
});
*/
});
25 changes: 25 additions & 0 deletions __tests__/unit/adaptor/conversion-tag-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { uniq } from '@antv/util';
import { IGroup } from '@antv/g2/lib/dependents';
import { Column, ColumnOptions, Bar, BarOptions } from '../../../src';
import { createDiv } from '../../utils/dom';
Expand Down Expand Up @@ -54,6 +55,9 @@ describe('column conversion tag', () => {

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

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

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

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

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

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

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

// 箭头
const arrows = group.findAllByName('conversion-tag-arrow');
const arrowIds = arrows.map((arrow) => arrow.get('id')) as string[];
// 每一个都有唯一的 ID
expect(uniq(arrowIds)).toHaveLength(DATA.length - 1);
expect(arrows).toHaveLength(DATA.length - 1);
arrows.forEach((arrow) => {
const bbox = arrow.getBBox();
Expand Down
13 changes: 8 additions & 5 deletions src/adaptor/conversion-tag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export interface OptionWithConversionTag {
type TagRenderConfig = {
/** 所在的 View */
view: View;
/** 所属的 geometry */
geometry: Geometry;
/** 转化率组件的 group */
group: IGroup;
/** 转化率配置 */
Expand Down Expand Up @@ -96,7 +98,7 @@ function parsePoints(coordinate: Coordinate, element: Element): { x: number; y:
}

function renderArrowTag(config: TagRenderConfig, elemPrev: Element, elemNext: Element): void {
const { view, group, options, horizontal } = config;
const { view, geometry, group, options, horizontal } = config;
const { offset, size, arrow } = options;
const coordinate = view.getCoordinate();
const pointPrev = parsePoints(coordinate, elemPrev)[horizontal ? 3 : 0];
Expand Down Expand Up @@ -152,7 +154,7 @@ function renderArrowTag(config: TagRenderConfig, elemPrev: Element, elemNext: El
}

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

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

const textShape = group.addShape('text', {
id: `${view.id}-conversion-tag-text`,
id: `${view.id}-conversion-tag-text-${geometry.getElementId(elemPrev.getModel().mappingData)}`,
name: 'conversion-tag-text',
attrs: {
...(options.text?.style || {}),
Expand Down Expand Up @@ -223,14 +225,15 @@ export function conversionTag<O extends OptionWithConversionTag>(field: string,
id: `${chart.id}-conversion-tag-group`,
name: 'conversion-tag-group',
});
const interval = find(chart.geometries, (geom: Geometry) => geom.type === 'interval');
const config: TagRenderConfig = {
view,
geometry: interval,
group,
field,
horizontal,
options: getConversionTagOptionsWithDefaults(conversionTag, horizontal),
};
const interval = find(chart.geometries, (geom: Geometry) => geom.type === 'interval');
const elements = horizontal ? interval.elements : interval.elements.slice().reverse();
each(elements, (elem: Element, idx: number) => {
if (idx > 0) {
Expand Down

0 comments on commit aca28ff

Please sign in to comment.