Skip to content

Commit be7caa9

Browse files
visikyvisiky
authored
fix(issue-3012): 修复条形图图例转置 & 单测 (#3013)
* fix(issue-3012): 修复条形图图例转置 & 单测 * fix(bar): 修复条形图单测问题
1 parent 5d65033 commit be7caa9

File tree

4 files changed

+148
-44
lines changed

4 files changed

+148
-44
lines changed

‎__tests__/bugs/issue-3012-spec.ts

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { Bar } from '../../src';
2+
import { createDiv } from '../utils/dom';
3+
import { delay } from '../utils/delay';
4+
5+
describe('#3012', () => {
6+
it('basic bar', async () => {
7+
const data = [
8+
{ year: '1951 年', value: 38 },
9+
{ year: '1952 年', value: 52 },
10+
{ year: '1956 年', value: 61 },
11+
{ year: '1957 年', value: 145 },
12+
{ year: '1958 年', value: 48 },
13+
];
14+
15+
const bar = new Bar(createDiv(), {
16+
data,
17+
xField: 'value',
18+
yField: 'year',
19+
seriesField: 'year',
20+
legend: {
21+
position: 'top-left',
22+
},
23+
});
24+
25+
bar.render();
26+
const legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items');
27+
expect(legendItems.length).toBe(data.length);
28+
expect(legendItems[0].name).toBe(data[0].year);
29+
30+
const tooltipController = bar.chart.getController('tooltip');
31+
const box = bar.chart.geometries[0].elements[0].shape.getBBox();
32+
const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
33+
34+
await delay(80);
35+
bar.chart.showTooltip(point);
36+
await delay(100);
37+
38+
const items = tooltipController.getTooltipItems(point);
39+
expect(items[0].name).toBe(data[0].year);
40+
41+
bar.destroy();
42+
});
43+
44+
it('group bar & stack bar', async () => {
45+
const data = [
46+
{
47+
label: 'Mon.',
48+
type: 'series1',
49+
value: 2800,
50+
},
51+
{
52+
label: 'Mon.',
53+
type: 'series2',
54+
value: 2260,
55+
},
56+
{
57+
label: 'Tues.',
58+
type: 'series1',
59+
value: 1800,
60+
},
61+
{
62+
label: 'Tues.',
63+
type: 'series2',
64+
value: 1300,
65+
},
66+
{
67+
label: 'Wed.',
68+
type: 'series1',
69+
value: 950,
70+
},
71+
{
72+
label: 'Wed.',
73+
type: 'series2',
74+
value: 900,
75+
},
76+
{
77+
label: 'Thur.',
78+
type: 'series1',
79+
value: 500,
80+
},
81+
{
82+
label: 'Thur.',
83+
type: 'series2',
84+
value: 390,
85+
},
86+
{
87+
label: 'Fri.',
88+
type: 'series1',
89+
value: 170,
90+
},
91+
{
92+
label: 'Fri.',
93+
type: 'series2',
94+
value: 100,
95+
},
96+
];
97+
98+
const bar = new Bar(createDiv(), {
99+
data,
100+
isGroup: true,
101+
xField: 'value',
102+
yField: 'label',
103+
seriesField: 'type',
104+
legend: {
105+
position: 'top-left',
106+
},
107+
});
108+
109+
bar.render();
110+
let legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items');
111+
expect(legendItems.length).toBe(2);
112+
expect(legendItems[0].name).toBe('series1');
113+
expect(legendItems[1].name).toBe('series2');
114+
115+
const tooltipController = bar.chart.getController('tooltip');
116+
let box = bar.chart.geometries[0].elements[0].shape.getBBox();
117+
let point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
118+
119+
await delay(80);
120+
bar.chart.showTooltip(point);
121+
await delay(100);
122+
123+
let items = tooltipController.getTooltipItems(point);
124+
expect(items[0].name).toBe('series1');
125+
expect(items[1].name).toBe('series2');
126+
127+
bar.update({ isGroup: false, isStack: true });
128+
legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items');
129+
expect(legendItems.length).toBe(2);
130+
expect(legendItems[0].name).toBe('series1');
131+
expect(legendItems[1].name).toBe('series2');
132+
133+
box = bar.chart.geometries[0].elements[0].shape.getBBox();
134+
point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
135+
136+
await delay(80);
137+
bar.chart.showTooltip(point);
138+
await delay(100);
139+
140+
items = tooltipController.getTooltipItems(point);
141+
expect(items[0].name).toBe('series1');
142+
expect(items[1].name).toBe('series2');
143+
144+
bar.destroy();
145+
});
146+
});

‎__tests__/unit/plots/bar/index-spec.ts

-18
Original file line numberDiff line numberDiff line change
@@ -382,24 +382,6 @@ describe('bar', () => {
382382
return bar;
383383
}
384384

385-
it('legend/tooltip reversed, grouped', () => {
386-
const bar = getBar(true, false);
387-
// @ts-ignore
388-
expect(bar.chart.getOptions().legends['series'].reversed).toBe(true);
389-
// @ts-ignore
390-
expect(bar.chart.getOptions().tooltip.reversed).toBe(true);
391-
bar.destroy();
392-
});
393-
394-
it('legend/tooltip reversed, stacked', () => {
395-
const bar = getBar(false, true);
396-
// @ts-ignore
397-
expect(bar.chart.getOptions().legends['series'].reversed).toBe(false);
398-
// @ts-ignore
399-
expect(bar.chart.getOptions().tooltip?.reversed).toBe(false);
400-
bar.destroy();
401-
});
402-
403385
it('bar background', () => {
404386
const bar = getBar(false, false);
405387
expect(bar.options.barBackground).not.toBeDefined();

‎__tests__/unit/plots/bar/legend-spec.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe('bar legend', () => {
3232

3333
bar.render();
3434
// @ts-ignore
35-
expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top', reversed: true });
35+
expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top' });
3636
expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1);
3737

3838
bar.update({
@@ -46,7 +46,6 @@ describe('bar legend', () => {
4646
expect(bar.chart.getOptions().legends.series).toEqual({
4747
position: 'right-top',
4848
flipPage: true,
49-
reversed: true,
5049
});
5150
expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1);
5251

‎src/plots/bar/adaptor.ts

+1-24
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Params } from '../../core/adaptor';
2+
import { tooltip } from '../../adaptor/common';
23
import { deepAssign, flow } from '../../utils';
34
import { adaptor as columnAdaptor } from '../column/adaptor';
45
export { meta } from '../column/adaptor';
@@ -83,7 +84,6 @@ function legend(params: Params<BarOptions>): Params<BarOptions> {
8384
if (legend !== false) {
8485
legend = {
8586
position: isStack ? 'top-left' : 'right-top',
86-
reversed: isStack ? false : true,
8787
...(legend || {}),
8888
};
8989
}
@@ -94,29 +94,6 @@ function legend(params: Params<BarOptions>): Params<BarOptions> {
9494
return deepAssign({}, params, { options: { legend } });
9595
}
9696

97-
/**
98-
* tooltip 适配器
99-
* @param params
100-
*/
101-
function tooltip(params: Params<BarOptions>): Params<BarOptions> {
102-
const { options } = params;
103-
104-
// 默认 legend 位置
105-
const { seriesField, isStack } = options;
106-
// 默认 tooltip 配置
107-
let { tooltip } = options;
108-
if (seriesField) {
109-
if (tooltip !== false) {
110-
tooltip = {
111-
reversed: isStack ? false : true,
112-
...(tooltip || {}),
113-
};
114-
}
115-
}
116-
117-
return deepAssign({}, params, { options: { tooltip } });
118-
}
119-
12097
/**
12198
* coordinate 适配器
12299
* @param params

0 commit comments

Comments
 (0)