Skip to content

Commit baa20f4

Browse files
hustcchustcc
authored
fix(dual-axes): 双轴图问题走查 (#1688)
* fix(dual-axes): default option, meta range * refactor(dual-axes): util/option 添加单测 * refactor(dual-axes): 简化先柱后线的逻辑 * fix(dual-axes): legend 过滤的时候使用 idx 索引出错 * chore(dual-axes): 修改 demo 中的命名,不使用 chart 命名 * fix(dual-axes): fix legend leak when multi-views on custom legend * fix(demo): remove invaild axis type
1 parent c2c50a3 commit baa20f4

30 files changed

+299
-109
lines changed

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { COMPONENT_TYPE } from '@antv/g2/lib/constant';
2+
import { DualAxes } from '../../src';
3+
import { createDiv } from '../utils/dom';
4+
5+
describe('#1684', () => {
6+
it('legend leak', () => {
7+
const data = [
8+
{ year: '1991', value: 3, count: 10 },
9+
{ year: '1992', value: 4, count: 4 },
10+
{ year: '1993', value: 3.5, count: 5 },
11+
{ year: '1994', value: 5, count: 5 },
12+
{ year: '1995', value: 4.9, count: 4.9 },
13+
{ year: '1996', value: 6, count: 35 },
14+
{ year: '1997', value: 7, count: 7 },
15+
{ year: '1998', value: 9, count: 1 },
16+
{ year: '1999', value: 13, count: 20 },
17+
];
18+
19+
const dualAxes = new DualAxes(createDiv(), {
20+
data: [data, data],
21+
xField: 'year',
22+
yField: ['value', 'count'],
23+
height: 300,
24+
});
25+
26+
dualAxes.render();
27+
dualAxes.update(dualAxes.options);
28+
29+
// @ts-ignore
30+
window.dualAxes = dualAxes;
31+
32+
expect(dualAxes.chart.getOptions().legends).toBeInstanceOf(Object);
33+
// @ts-ignore
34+
expect(dualAxes.chart.getOptions().legends.custom).toBe(true);
35+
// @ts-ignore
36+
expect(dualAxes.chart.getOptions().legends.items.length).toBe(2);
37+
38+
expect(dualAxes.chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND).length).toBe(1);
39+
// @ts-ignore
40+
expect(dualAxes.chart.getController('legend').container.cfg.children.length).toBe(1);
41+
// @ts-ignore
42+
expect(dualAxes.chart.views[0].getController('legend').container.cfg.children.length).toBe(0);
43+
// @ts-ignore
44+
expect(dualAxes.chart.views[1].getController('legend').container.cfg.children.length).toBe(0);
45+
46+
expect(dualAxes.chart.views[0].getOptions().legends).toEqual({
47+
year: false,
48+
value: false,
49+
});
50+
expect(dualAxes.chart.views[1].getOptions().legends).toEqual({
51+
year: false,
52+
count: false,
53+
});
54+
});
55+
});

‎__tests__/unit/plots/dual-axes/column-spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { LEFT_AXES_VIEW, RIGHT_AXES_VIEW } from '../../../../src/plots/dual-axes
55
import { findViewById } from '../../../../src/utils/view';
66

77
describe('Line-Column', () => {
8-
it('Line-Colomun', () => {
8+
it('Line-Colomn', () => {
99
const dualAxes = new DualAxes(createDiv(), {
1010
height: 500,
1111
data: [PV_DATA, UV_DATA],
@@ -40,7 +40,7 @@ describe('Line-Column', () => {
4040
expect(rightGeometry.shapeType).toBe('interval');
4141
dualAxes.destroy();
4242
});
43-
it('Colomun-Line', () => {
43+
it('Colomn-Line', () => {
4444
const dualAxes = new DualAxes(createDiv(), {
4545
height: 500,
4646
data: [PV_DATA, UV_DATA],
@@ -73,7 +73,7 @@ describe('Line-Column', () => {
7373
expect(rightGeometry.shapeType).toBe('line');
7474
dualAxes.destroy();
7575
});
76-
it('Colomun-Style', () => {
76+
it('Colomn-Style', () => {
7777
const dualAxes = new DualAxes(createDiv(), {
7878
height: 500,
7979
data: [PV_DATA, UV_DATA],

‎__tests__/unit/plots/dual-axes/default-options-spec.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { DualAxes } from '../../../../src';
2+
import { PV_DATA, UV_DATA, UV_DATA_MULTI } from '../../../data/pv-uv';
3+
import { createDiv } from '../../../utils/dom';
4+
5+
describe('default options', () => {
6+
it('dual line', () => {
7+
const dualAxes = new DualAxes(createDiv(), {
8+
height: 500,
9+
data: [PV_DATA, UV_DATA],
10+
xField: 'date',
11+
yField: ['pv', 'uv'],
12+
});
13+
14+
dualAxes.render();
15+
16+
expect(dualAxes.options.meta.date.sync).toBe(true);
17+
expect(dualAxes.options.meta.date.range).toEqual([0, 1]);
18+
// @ts-ignore
19+
expect(dualAxes.options.tooltip.showCrosshairs).toEqual(true);
20+
// @ts-ignore
21+
expect(dualAxes.options.tooltip.showMarkers).toEqual(true);
22+
});
23+
24+
it('line column', () => {
25+
const dualAxes = new DualAxes(createDiv(), {
26+
height: 500,
27+
data: [PV_DATA, UV_DATA_MULTI],
28+
xField: 'date',
29+
yField: ['pv', 'uv'],
30+
geometryOptions: [
31+
{
32+
geometry: 'line',
33+
},
34+
{
35+
geometry: 'column',
36+
seriesField: 'site',
37+
isStack: true,
38+
},
39+
],
40+
});
41+
42+
dualAxes.render();
43+
44+
expect(dualAxes.options.meta.date.sync).toBe(true);
45+
expect(dualAxes.options.meta.date.range).toEqual(undefined);
46+
// @ts-ignore
47+
expect(dualAxes.options.tooltip.showCrosshairs).toEqual(false);
48+
// @ts-ignore
49+
expect(dualAxes.options.tooltip.showMarkers).toEqual(false);
50+
51+
expect(dualAxes.options.interactions.some((i) => i.type === 'active-region'));
52+
});
53+
});

‎__tests__/unit/plots/dual-axes/util/option-spec.ts

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { isLine, isColumn, getOption } from '../../../../../src/plots/dual-axes/util/option';
2+
3+
describe('DualAxes option', () => {
4+
it('isLine, isColumn', () => {
5+
expect(isLine({})).toBe(false);
6+
expect(isLine({ geometry: 'line' })).toBe(true);
7+
expect(isLine({ geometry: 'column' })).toBe(false);
8+
9+
expect(isColumn({})).toBe(false);
10+
expect(isColumn({ geometry: 'line' })).toBe(false);
11+
expect(isColumn({ geometry: 'column' })).toBe(true);
12+
});
13+
14+
it('yAxis option', () => {
15+
// @ts-ignore
16+
expect(getOption({ yAxis: [{ a: 1 }, false], geometryOptions: [] })).toEqual({
17+
yAxis: [
18+
{
19+
nice: true,
20+
label: {
21+
autoHide: true,
22+
autoRotate: false,
23+
},
24+
a: 1,
25+
},
26+
false,
27+
],
28+
geometryOptions: [
29+
{
30+
geometry: 'line',
31+
color: '#5B8FF9',
32+
},
33+
{
34+
geometry: 'line',
35+
color: '#E76C5E',
36+
},
37+
],
38+
});
39+
40+
// @ts-ignore
41+
expect(getOption({ yAxis: [false, false], geometryOptions: [] }).yAxis).toEqual([false, false]);
42+
43+
// @ts-ignore
44+
expect(getOption({ yAxis: [], geometryOptions: [] }).yAxis).toEqual([
45+
{
46+
nice: true,
47+
label: {
48+
autoHide: true,
49+
autoRotate: false,
50+
},
51+
},
52+
{
53+
nice: true,
54+
label: {
55+
autoHide: true,
56+
autoRotate: false,
57+
},
58+
},
59+
]);
60+
61+
// @ts-ignore
62+
expect(getOption({ geometryOptions: [] }).yAxis).toEqual([
63+
{
64+
nice: true,
65+
label: {
66+
autoHide: true,
67+
autoRotate: false,
68+
},
69+
},
70+
{
71+
nice: true,
72+
label: {
73+
autoHide: true,
74+
autoRotate: false,
75+
},
76+
},
77+
]);
78+
});
79+
});

‎examples/area/basic/demo/basic-gradients.ts

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38cc
88
xField: 'Date',
99
yField: 'scales',
1010
xAxis: {
11-
type: 'dateTime',
1211
tickCount: 5,
1312
},
1413
areaStyle: () => {

‎examples/area/basic/demo/basic-slider.ts

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38cc
88
xField: 'Date',
99
yField: 'scales',
1010
xAxis: {
11-
type: 'dateTime',
1211
tickCount: 5,
1312
},
1413
slider: {

‎examples/area/basic/demo/basic.ts

-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38cc
88
xField: 'Date',
99
yField: 'scales',
1010
xAxis: {
11-
type: 'dateTime',
1211
tickCount: 5,
1312
},
1413
});

‎examples/column/percent/demo/basic.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ const data = [
108108
},
109109
];
110110

111-
const ColumnPlot = new Column('container', {
111+
const columnPlot = new Column('container', {
112112
data,
113113
xField: 'year',
114114
yField: 'value',
@@ -127,4 +127,4 @@ const ColumnPlot = new Column('container', {
127127
},
128128
});
129129

130-
ColumnPlot.render();
130+
columnPlot.render();

‎examples/dual-axes/column-line/demo/column-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const data = [
88
{ time: '2019-07', value: 470, count: 220 },
99
];
1010

11-
const dualAxesChart = new DualAxes('container', {
11+
const dualAxes = new DualAxes('container', {
1212
data: [data, data],
1313
xField: 'time',
1414
yField: ['value', 'count'],
@@ -26,4 +26,4 @@ const dualAxesChart = new DualAxes('container', {
2626
],
2727
});
2828

29-
dualAxesChart.render();
29+
dualAxes.render();

‎examples/dual-axes/column-line/demo/column-multi-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const uvData = [
2626
{ time: '2019-07', value: 47 },
2727
];
2828

29-
const dualAxesChart = new DualAxes('container', {
29+
const dualAxes = new DualAxes('container', {
3030
data: [transformData, uvData],
3131
xField: 'time',
3232
yField: ['count', 'value'],
@@ -58,4 +58,4 @@ const dualAxesChart = new DualAxes('container', {
5858
],
5959
});
6060

61-
dualAxesChart.render();
61+
dualAxes.render();

‎examples/dual-axes/column-line/demo/custom-column-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const data = [
88
{ time: '2019-07', value: 470, count: 220 },
99
];
1010

11-
const dualAxesChart = new DualAxes('container', {
11+
const dualAxes = new DualAxes('container', {
1212
data: [data, data],
1313
xField: 'time',
1414
yField: ['value', 'count'],
@@ -51,4 +51,4 @@ const dualAxesChart = new DualAxes('container', {
5151
],
5252
});
5353

54-
dualAxesChart.render();
54+
dualAxes.render();

‎examples/dual-axes/column-line/demo/demo-more-1.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const data = [
3333
{ time: '2020-09-18', consumeTime: 10424, completeTime: 753.583 },
3434
];
3535

36-
const dualAxesChart = new DualAxes('container', {
36+
const dualAxes = new DualAxes('container', {
3737
data: [data, data],
3838
xField: 'time',
3939
yField: ['consumeTime', 'completeTime'],
@@ -94,4 +94,4 @@ const dualAxesChart = new DualAxes('container', {
9494
},
9595
});
9696

97-
dualAxesChart.render();
97+
dualAxes.render();

‎examples/dual-axes/dual-line/demo/custom-dual-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const data = [
1212
{ year: '1999', value: 13, count: 20 },
1313
];
1414

15-
const dualAxesChart = new DualAxes('container', {
15+
const dualAxes = new DualAxes('container', {
1616
data: [data, data],
1717
xField: 'year',
1818
yField: ['value', 'count'],
@@ -48,4 +48,4 @@ const dualAxesChart = new DualAxes('container', {
4848
],
4949
});
5050

51-
dualAxesChart.render();
51+
dualAxes.render();

‎examples/dual-axes/dual-line/demo/dual-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ const data = [
1212
{ year: '1999', value: 13, count: 20 },
1313
];
1414

15-
const dualAxesChart = new DualAxes('container', {
15+
const dualAxes = new DualAxes('container', {
1616
data: [data, data],
1717
xField: 'year',
1818
yField: ['value', 'count'],
1919
});
2020

21-
dualAxesChart.render();
21+
dualAxes.render();

‎examples/dual-axes/dual-line/demo/dual-multi-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const transformData = [
3131
{ time: '2019-07', count: 200, name: 'c' },
3232
];
3333

34-
const dualAxesChart = new DualAxes('container', {
34+
const dualAxes = new DualAxes('container', {
3535
data: [uvBillData, transformData],
3636
xField: 'time',
3737
yField: ['value', 'count'],
@@ -59,4 +59,4 @@ const dualAxesChart = new DualAxes('container', {
5959
],
6060
});
6161

62-
dualAxesChart.render();
62+
dualAxes.render();

‎examples/dual-axes/grouped-column-line/demo/custom-grouped-column-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const transformData = [
2121
{ time: '2019-07', count: 220 },
2222
];
2323

24-
const dualAxesChart = new DualAxes('container', {
24+
const dualAxes = new DualAxes('container', {
2525
data: [uvBillData, transformData],
2626
xField: 'time',
2727
yField: ['value', 'count'],
@@ -40,4 +40,4 @@ const dualAxesChart = new DualAxes('container', {
4040
],
4141
});
4242

43-
dualAxesChart.render();
43+
dualAxes.render();

‎examples/dual-axes/grouped-column-line/demo/grouped-column-line.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const transformData = [
2121
{ time: '2019-07', count: 220 },
2222
];
2323

24-
const dualAxesChart = new DualAxes('container', {
24+
const dualAxes = new DualAxes('container', {
2525
data: [uvBillData, transformData],
2626
xField: 'time',
2727
yField: ['value', 'count'],
@@ -41,4 +41,4 @@ const dualAxesChart = new DualAxes('container', {
4141
],
4242
});
4343

44-
dualAxesChart.render();
44+
dualAxes.render();

0 commit comments

Comments
 (0)