Skip to content

Commit

Permalink
fix(#2375): 修复饼图中心文本交互没有使用custom-html (#2413)
Browse files Browse the repository at this point in the history 
* fix(issue-2375): 中心文本交互，走 statistic 通道一样的逻辑,将额外信息传入交互中

fix: 修复饼图中心文本交互没有走 custom-html

* fix(issue-2375): 添加饼图中心文本csutomHtml的单测

* test: 移除测试中的所有 settimeout

* fix(gauge): 修复仪表盘单测

* fix(pie): 修复饼图单测, statistic 配置默认处理
  • Loading branch information
@visiky
visiky committed Mar 10, 2021
1 parent 437170b commit bb848cf
Show file tree
Hide file tree
Showing 12 changed files with 212 additions and 124 deletions.
4 changes: 2 additions & 2 deletions __tests__/bugs/issue-2220-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ describe('pie tooltip', () => {
const box = pie.chart.geometries[0].elements[0].shape.getBBox();
const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };

await delay(100);
await delay(80);
pie.chart.showTooltip(point);
await delay(100);
const tooltipName = div.querySelector('.g2-tooltip .g2-tooltip-name');
Expand All @@ -32,7 +32,7 @@ describe('pie tooltip', () => {
const box = pie.chart.geometries[0].elements[0].shape.getBBox();
const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };

await delay(100);
await delay(80);
pie.chart.showTooltip(point);
await delay(100);
// @ts-ignore
Expand Down
70 changes: 70 additions & 0 deletions __tests__/bugs/issue-2375-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Pie } from '../../src';
import { createDiv } from '.././utils/dom';
import { simulateMouseEvent } from '.././utils/event';

describe('#2375', () => {
test('statistic-active, not use customHtml', async () => {
const data = [
{
type: '分类一',
value: 27,
},
{
type: '分类二',
value: 25,
},
{
type: '分类三',
value: 18,
},
{
type: '分类四',
value: 15,
},
{
type: '分类五',
value: 10,
},
{
type: '其它',
value: 5,
},
];

const plot = new Pie(createDiv(), {
width: 400,
height: 400,
radius: 1,
innerRadius: 0.3,
padding: [0, 0, 0, 0],
data,
angleField: 'value',
colorField: 'type',
interactions: [{ type: 'element-active' }, { type: 'pie-statistic-active' }],
statistic: {
title: false,
content: {
customHtml: () => 'xxx',
},
},
animation: false,
});

plot.render();
function getAnnotations(chart) {
return chart.getComponents().filter((co) => co.type === 'annotation');
}

const annotations = getAnnotations(plot.chart);
expect(annotations.length).toBe(1);

let htmlAnnotations = plot.container.querySelectorAll('.g2-html-annotation');
expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('xxx');

simulateMouseEvent(plot.chart.geometries[0].elements[0].shape, 'mouseenter', {});
htmlAnnotations = plot.container.querySelectorAll('.g2-html-annotation');
expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('xxx');

plot.destroy();
});
});
16 changes: 8 additions & 8 deletions __tests__/unit/plots/gauge/utils-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ describe('gauge utils to getData', () => {

it('get rangeData', () => {
expect(getRangeData(0.5, { ticks: [0, 0.3, 1] })).toEqual([
{ [RANGE_VALUE]: 0.3, [RANGE_TYPE]: '1' },
{ [RANGE_VALUE]: 0.7, [RANGE_TYPE]: '2' },
{ [RANGE_VALUE]: 0.3, [RANGE_TYPE]: '1', [PERCENT]: 0.5 },
{ [RANGE_VALUE]: 0.7, [RANGE_TYPE]: '2', [PERCENT]: 0.5 },
]);

expect(getRangeData(0.5)).toEqual([
{ [RANGE_VALUE]: 0.5, [RANGE_TYPE]: '1' },
{ [RANGE_VALUE]: 0.5, [RANGE_TYPE]: '2' },
{ [RANGE_VALUE]: 0.5, [RANGE_TYPE]: '1', [PERCENT]: 0.5 },
{ [RANGE_VALUE]: 0.5, [RANGE_TYPE]: '2', [PERCENT]: 0.5 },
]);

expect(getRangeData(-0.5)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '2' }]);
expect(getRangeData(1.5)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '1' }]);
expect(getRangeData(-0.5)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '2', [PERCENT]: -0.5 }]);
expect(getRangeData(1.5)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '1', [PERCENT]: 1.5 }]);

expect(getRangeData(0)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '2' }]);
expect(getRangeData(1)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '1' }]);
expect(getRangeData(0)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '2', [PERCENT]: 0 }]);
expect(getRangeData(1)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '1', [PERCENT]: 1 }]);
});
});
26 changes: 13 additions & 13 deletions __tests__/unit/plots/pie/annotation-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { Pie } from '../../../../src';
import { salesByArea } from '../../../data/sales';
import { createDiv } from '../../../utils/dom';
import { delay } from '../../../utils/delay';

describe('annotation', () => {
const pie = new Pie(createDiv(), {
width: 300,
height: 400,
data: salesByArea,
colorField: 'sales',
angleField: 'area',
colorField: 'area',
angleField: 'sales',
innerRadius: 0.64,
});

Expand Down Expand Up @@ -55,7 +56,7 @@ describe('annotation', () => {
expect(pie.chart.getController('annotation').getComponents()[1].component.get('type')).toBe('line');
});

it('annotation with change data', () => {
it('annotation with change data', async () => {
pie.update({ data: [], statistic: {} });
expect(pie.chart.getController('annotation').getComponents().length).toBe(4);
expect(pie.chart.getController('annotation').getComponents()[0].component.get('content')).toBe('辅助文本');
Expand All @@ -65,23 +66,22 @@ describe('annotation', () => {
expect(annotations[1].innerText).toBe('');

pie.changeData(salesByArea);
setTimeout(() => {
expect(pie.chart.getController('annotation').getComponents().length).toBe(4);
expect(pie.chart.getController('annotation').getComponents()[0].component.get('content')).toBe('辅助文本');
// @ts-ignore
annotations = pie.chart.ele.querySelectorAll('.g2-html-annotation') as HTMLDivElement[];
expect(annotations[0].innerText).toBe('总计');
expect(annotations[1].innerText).toBe(salesByArea.reduce((a, b) => a + b.sales, 0));
}, 0);
await delay(5);
expect(pie.chart.getController('annotation').getComponents().length).toBe(4);
expect(pie.chart.getController('annotation').getComponents()[0].component.get('content')).toBe('辅助文本');
// @ts-ignore
annotations = pie.chart.ele.querySelectorAll('.g2-html-annotation') as HTMLDivElement[];
expect(annotations[0].innerText).toBe('总计');
expect(annotations[1].innerText).toBe(`${salesByArea.reduce((a, b) => a + b.sales, 0)}`);
});

it('先更新为 false，再更新出现, 且样式不变', () => {
const pie1 = new Pie(createDiv(), {
width: 300,
height: 400,
data: salesByArea,
colorField: 'sales',
angleField: 'area',
colorField: 'area',
angleField: 'sales',
innerRadius: 0.64,
});

Expand Down
14 changes: 9 additions & 5 deletions __tests__/unit/plots/pie/html-statistic-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Pie } from '../../../../src';
import { StatisticAction } from '../../../../src/plots/pie/interactions/pie-statistic-action';
import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
import { createDiv } from '../../../utils/dom';
import { delay } from '../../../utils/delay';

describe('html-statistics', () => {
const div = createDiv();
Expand Down Expand Up @@ -135,18 +136,21 @@ describe('html-statistics', () => {
expect(container2.style['font-size']).toBe('12px');
});

it('custom html-statistic: 触发交互', () => {
it('custom html-statistic: 触发交互', async () => {
pie.render();
const context = new InteractionContext(pie.chart);
const action = new StatisticAction(context);
const triggerData = POSITIVE_NEGATIVE_DATA[2];

context.event = { type: 'custom', data: { data: triggerData } };
action.change();
const { statistic, annotations } = pie.options;
action.change({ statistic, annotations });

const annotations = document.querySelectorAll('.g2-html-annotation');
expect((annotations[0] as HTMLElement).innerText).toBe(`${triggerData.type}`);
expect((annotations[1] as HTMLElement).innerText).toBe(`${triggerData.value}`);
await delay(100);

const doms = document.querySelectorAll('.g2-html-annotation');
expect((doms[0] as HTMLElement).innerText).toBe(`${triggerData.type}`);
expect((doms[1] as HTMLElement).innerText).toBe(`${triggerData.value}`);
});

afterEach(() => {
Expand Down
4 changes: 3 additions & 1 deletion __tests__/unit/plots/pie/interaction-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { delay } from '../../../utils/delay';
import { createDiv } from '../../../utils/dom';
import { Pie } from '../../../../src';
import { StatisticAction } from '../../../../src/plots/pie/interactions/pie-statistic-action';
import { transformStatisticOptions } from '../../../../src/plots/pie/adaptor';

describe('register interaction', () => {
it('创建 "pie-statistic" action', () => {
Expand Down Expand Up @@ -41,7 +42,8 @@ describe('register interaction', () => {

it('触发 pie-statistic:change', async () => {
context.event = { type: 'custom', data: { data: { type: 'item3', value: 13 } } };
action.change();
const { statistic, annotations } = transformStatisticOptions(pie.options);
action.change({ statistic, annotations });

await delay(50);

Expand Down
32 changes: 16 additions & 16 deletions __tests__/unit/plots/pie/statistic-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { Chart } from '@antv/g2';
import { Pie, PieOptions } from '../../../../src';
import { DEFAULT_OPTIONS } from '../../../../src/plots/pie/contants';
import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
import { delay } from '../../../utils/delay';
import { createDiv } from '../../../utils/dom';
import { delay } from '../../../utils/delay';

const data = POSITIVE_NEGATIVE_DATA.filter((o) => o.value > 0).map((d, idx) =>
idx === 1 ? { ...d, type: 'item1' } : d
Expand Down Expand Up @@ -256,7 +256,7 @@ describe('中心文本 - 指标卡', () => {
pie.destroy();
});

it('自定义中心文本内容: title & content, 动态数据', () => {
it('自定义中心文本内容: title & content, 动态数据', async () => {
const totalValue = config.data.reduce((a, b) => a + b.value, 0);
const pie = new Pie(createDiv(), {
...config,
Expand All @@ -267,7 +267,7 @@ describe('中心文本 - 指标卡', () => {
},
content: {
formatter: (datum, data) => {
return !datum ? `test\ntest ${data.reduce((a, b) => a + b.value, 0)}` : `${datum.value}`;
return !datum ? `test-test ${data.reduce((a, b) => a + b.value, 0)}` : `${datum.value}`;
},
rotate: (30 / 180) * Math.PI,
},
Expand All @@ -278,11 +278,10 @@ describe('中心文本 - 指标卡', () => {

const annotations = getAnnotations(pie.chart);
expect(annotations.length).toBeGreaterThan(0);
setTimeout(() => {
const htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('总计' /** 中心文本指标卡，默认title */);
expect((htmlAnnotations[1] as HTMLElement).innerText).toBe(`test\ntest ${totalValue}`);
}, 50);
await delay(1);
const htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
expect((htmlAnnotations[0] as HTMLElement).innerText).toBe('总计' /** 中心文本指标卡，默认title */);
expect((htmlAnnotations[1] as HTMLElement).innerText).toBe(`test-test ${totalValue}`);

pie.destroy();
});
Expand All @@ -306,20 +305,21 @@ describe('中心文本 - 指标卡', () => {
expect(htmlAnnotations[0].getBoundingClientRect().width).toEqual(600);
});

it('statistic 默认继承 defaultOptions', () => {
it('statistic 默认继承 defaultOptions', async () => {
pie.update({ statistic: null });
expect(pie.chart.ele.querySelectorAll('.g2-html-annotation').length).toBe(0);

pie.update({ statistic: {} });
expect(pie.chart.ele.querySelectorAll('.g2-html-annotation').length).toBe(2);
expect(pie.options.statistic).toEqual({});
setTimeout(() => {
// @ts-ignore
const annotations = pie.chart.ele.querySelectorAll('.g2-html-annotation') as HTMLDivElement[];
expect(annotations[0].style.fontSize).toEqual(DEFAULT_OPTIONS.statistic.title.fontSize);
expect(annotations[1].style.color).toEqual(DEFAULT_OPTIONS.statistic.content.color);
expect(annotations[1].style).toMatchObject(DEFAULT_OPTIONS.statistic.content);
}, 0);
await delay(1);

// @ts-ignore
const annotations = pie.chart.ele.querySelectorAll('.g2-html-annotation') as HTMLDivElement[];
expect(annotations[0].style.fontSize).toEqual(DEFAULT_OPTIONS.statistic.title.style.fontSize);
// 移除空格
expect(annotations[1].style.color.replace(/\s+/g, '')).toEqual(DEFAULT_OPTIONS.statistic.content.style.color);
expect(annotations[1].style.textAlign).toBe(DEFAULT_OPTIONS.statistic.content.style.textAlign);
});

afterEach(() => {
Expand Down
10 changes: 5 additions & 5 deletions __tests__/unit/plots/ring-progress/index-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { RingProgress } from '../../../../src';
import { DEFAULT_OPTIONS } from '../../../../src/plots/ring-progress/constants';
import { createDiv } from '../../../utils/dom';
import { delay } from '../../../utils/delay';

describe('ring-progress', () => {
it('data', () => {
Expand Down Expand Up @@ -275,7 +276,7 @@ describe('ring-progress', () => {
ring.destroy();
});

it('style callback', () => {
it('style callback', async () => {
const div = createDiv();
const ring = new RingProgress(div, {
width: 200,
Expand All @@ -298,10 +299,9 @@ describe('ring-progress', () => {

ring.render();

setTimeout(() => {
const annotation = div.querySelector('.g2-html-annotation');
expect((annotation as HTMLElement).style['font-size']).toBe(`${20 * 0.6}px`);
}, 50);
await delay(10);
const annotation = div.querySelector('.g2-html-annotation');
expect((annotation as HTMLElement).style['font-size']).toBe(`${20 * 0.6}px`);

ring.destroy();
});
Expand Down
Loading

0 comments on commit bb848cf

Please sign in to comment.