Skip to content

Commit b46e6b3

Browse files
hustcchustcc
authored
fix(dual-axes): 双轴图的 y 字段相同的时候,导致 yaxis 配置被覆盖 (#2176)
* fix(dual-axes): 双轴图的 y 字段相同的时候,导致 yaxis 配置被覆盖 * test: add unit test * docs: move dual axes demos up
1 parent e4da1f9 commit b46e6b3

File tree

5 files changed

+126
-58
lines changed

5 files changed

+126
-58
lines changed

‎__tests__/bugs/bug-dual-axes-same-y-spec.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { DualAxes } from '../../src';
2+
import { findViewById } from '../../src/utils';
3+
import { createDiv } from '../utils/dom';
4+
5+
const uv = [
6+
{ time: '2019-03', value: 350, type: 'uv' },
7+
{ time: '2019-04', value: 900, type: 'uv' },
8+
{ time: '2019-05', value: 300, type: 'uv' },
9+
{ time: '2019-06', value: 450, type: 'uv' },
10+
{ time: '2019-07', value: 470, type: 'uv' },
11+
{ time: '2019-03', value: 220, type: 'bill' },
12+
{ time: '2019-04', value: 300, type: 'bill' },
13+
{ time: '2019-05', value: 250, type: 'bill' },
14+
{ time: '2019-06', value: 220, type: 'bill' },
15+
{ time: '2019-07', value: 362, type: 'bill' },
16+
];
17+
18+
const pv = [
19+
{ time: '2019-03', value: 800, name: 'a' },
20+
{ time: '2019-04', value: 600, name: 'a' },
21+
{ time: '2019-05', value: 400, name: 'a' },
22+
{ time: '2019-06', value: 380, name: 'a' },
23+
{ time: '2019-07', value: 220, name: 'a' },
24+
{ time: '2019-03', value: 750, name: 'b' },
25+
{ time: '2019-04', value: 650, name: 'b' },
26+
{ time: '2019-05', value: 450, name: 'b' },
27+
{ time: '2019-06', value: 400, name: 'b' },
28+
{ time: '2019-07', value: 320, name: 'b' },
29+
{ time: '2019-03', value: 900, name: 'c' },
30+
{ time: '2019-04', value: 600, name: 'c' },
31+
{ time: '2019-05', value: 450, name: 'c' },
32+
{ time: '2019-06', value: 300, name: 'c' },
33+
{ time: '2019-07', value: 200, name: 'c' },
34+
];
35+
36+
describe('dual-axes same y fields', () => {
37+
it('same y fields', () => {
38+
const dualAxes = new DualAxes(createDiv(), {
39+
data: [uv, pv],
40+
xField: 'time',
41+
yField: ['value', 'value'],
42+
yAxis: [
43+
{
44+
title: {
45+
text: 'y1',
46+
},
47+
},
48+
{
49+
title: {
50+
text: 'y2',
51+
},
52+
},
53+
],
54+
geometryOptions: [
55+
{
56+
geometry: 'line',
57+
seriesField: 'type',
58+
},
59+
{
60+
geometry: 'column',
61+
seriesField: 'name',
62+
point: {},
63+
},
64+
],
65+
});
66+
67+
dualAxes.render();
68+
69+
const left = findViewById(dualAxes.chart, 'left-axes-view');
70+
const right = findViewById(dualAxes.chart, 'right-axes-view');
71+
expect(left.getController('axis').getComponents()[1].component.get('title').text).toBe('y1');
72+
expect(right.getController('axis').getComponents()[0].component.get('title').text).toBe('y2');
73+
74+
dualAxes.destroy();
75+
});
76+
});

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

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
isLine,
33
isColumn,
44
getGeometryOption,
5-
transArrayToObject,
5+
transformObjectToArray,
66
getYAxisWithDefault,
77
} from '../../../../../src/plots/dual-axes/util/option';
88
import { AxisType } from '../../../../../src/plots/dual-axes/types';
@@ -26,8 +26,6 @@ const DEFAULT_RIGHT_YAXIS_CONFIG = {
2626
grid: null,
2727
};
2828

29-
const ARRAY_TIP = 'ARRAY_TIP';
30-
3129
describe('DualAxes option', () => {
3230
it('isLine, isColumn', () => {
3331
expect(isLine({})).toBe(false);
@@ -40,30 +38,21 @@ describe('DualAxes option', () => {
4038
});
4139

4240
it('transArrayToObject', () => {
43-
expect(transArrayToObject(['yField1', 'yField2'], undefined, undefined)).toEqual({
44-
yField1: undefined,
45-
yField2: undefined,
46-
});
41+
expect(transformObjectToArray(['yField1', 'yField2'], undefined)).toEqual([undefined, undefined]);
4742

48-
expect(transArrayToObject(['yField1', 'yField2'], [{ nice: false }], ARRAY_TIP)).toEqual({
49-
yField1: { nice: false },
50-
yField2: undefined,
51-
});
43+
expect(transformObjectToArray(['yField1', 'yField2'], [{ nice: false }])).toEqual([{ nice: false }, undefined]);
5244

53-
expect(transArrayToObject(['yField1', 'yField2'], [false], ARRAY_TIP)).toEqual({
54-
yField1: false,
55-
yField2: undefined,
56-
});
45+
expect(transformObjectToArray(['yField1', 'yField2'], [false])).toEqual([false, undefined]);
5746

58-
expect(transArrayToObject(['yField1', 'yField2'], { yField1: { nice: true } }, ARRAY_TIP)).toEqual({
59-
yField1: { nice: true },
60-
yField2: undefined,
61-
});
47+
expect(transformObjectToArray(['yField1', 'yField2'], { yField1: { nice: true } })).toEqual([
48+
{ nice: true },
49+
undefined,
50+
]);
6251

63-
expect(transArrayToObject(['yField1', 'yField2'], { yField1: { nice: true }, yField2: false }, ARRAY_TIP)).toEqual({
64-
yField1: { nice: true },
65-
yField2: false,
66-
});
52+
expect(transformObjectToArray(['yField1', 'yField2'], { yField1: { nice: true }, yField2: false })).toEqual([
53+
{ nice: true },
54+
false,
55+
]);
6756
});
6857

6958
it('getDefaultYAxis', () => {

‎gatsby-config.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,14 @@ module.exports = {
132132
en: 'Pie',
133133
},
134134
},
135+
{
136+
slug: 'dual-axes',
137+
icon: 'line',
138+
title: {
139+
zh: '双轴图',
140+
en: 'Dual Axes',
141+
},
142+
},
135143
{
136144
slug: 'progress-plots',
137145
icon: 'gauge',
@@ -148,14 +156,6 @@ module.exports = {
148156
en: 'Scatter and Bubble',
149157
},
150158
},
151-
{
152-
slug: 'dual-axes',
153-
icon: 'line',
154-
title: {
155-
zh: '双轴图',
156-
en: 'Dual Axes',
157-
},
158-
},
159159
{
160160
slug: 'rose',
161161
icon: 'rose',

‎src/plots/dual-axes/adaptor.ts

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Params } from '../../core/adaptor';
1313
import { Datum } from '../../types';
1414
import { flow, deepAssign } from '../../utils';
1515
import { findViewById } from '../../utils/view';
16-
import { isColumn, getYAxisWithDefault, getGeometryOption, transArrayToObject } from './util/option';
16+
import { isColumn, getYAxisWithDefault, getGeometryOption, transformObjectToArray } from './util/option';
1717
import { getViewLegendItems } from './util/legend';
1818
import { drawSingleGeometry } from './util/geometry';
1919
import { DualAxesOptions, AxisType, DualAxesGeometry } from './types';
@@ -72,14 +72,14 @@ export function transformOptions(params: Params<DualAxesOptions>): Params<DualAx
7272
{
7373
options: {
7474
// yAxis
75-
yAxis: transArrayToObject(yField, options.yAxis, 'yAxis should be object.'),
75+
yAxis: transformObjectToArray(yField, options.yAxis),
7676
// geometryOptions
7777
geometryOptions: [
7878
getGeometryOption(xField, yField[0], geometryOptions[0]),
7979
getGeometryOption(xField, yField[1], geometryOptions[1]),
8080
],
8181
// annotations
82-
annotations: transArrayToObject(yField, options.annotations, 'annotations should be object.'),
82+
annotations: transformObjectToArray(yField, options.annotations),
8383
},
8484
}
8585
);
@@ -180,12 +180,12 @@ export function meta(params: Params<DualAxesOptions>): Params<DualAxesOptions> {
180180

181181
scale({
182182
[xField]: xAxis,
183-
[yField[0]]: yAxis[yField[0]],
183+
[yField[0]]: yAxis[0],
184184
})(deepAssign({}, params, { chart: findViewById(chart, LEFT_AXES_VIEW) }));
185185

186186
scale({
187187
[xField]: xAxis,
188-
[yField[1]]: yAxis[yField[1]],
188+
[yField[1]]: yAxis[1],
189189
})(deepAssign({}, params, { chart: findViewById(chart, RIGHT_AXES_VIEW) }));
190190

191191
return params;
@@ -207,11 +207,11 @@ export function axis(params: Params<DualAxesOptions>): Params<DualAxesOptions> {
207207

208208
// 左 View
209209
leftView.axis(xField, xAxis);
210-
leftView.axis(yField[0], getYAxisWithDefault(yAxis[yField[0]], AxisType.Left));
210+
leftView.axis(yField[0], getYAxisWithDefault(yAxis[0], AxisType.Left));
211211

212212
// 右 Y 轴
213213
rightView.axis(xField, false);
214-
rightView.axis(yField[1], getYAxisWithDefault(yAxis[yField[1]], AxisType.Right));
214+
rightView.axis(yField[1], getYAxisWithDefault(yAxis[1], AxisType.Right));
215215

216216
return params;
217217
}
@@ -257,21 +257,24 @@ export function interaction(params: Params<DualAxesOptions>): Params<DualAxesOpt
257257
*/
258258
export function annotation(params: Params<DualAxesOptions>): Params<DualAxesOptions> {
259259
const { chart, options } = params;
260-
const { yField, annotations } = options;
260+
const { annotations } = options;
261261

262-
commonAnnotation(get(annotations, [yField[0]]))(
262+
const a1 = get(annotations, [0]);
263+
const a2 = get(annotations, [1]);
264+
265+
commonAnnotation(a1)(
263266
deepAssign({}, params, {
264267
chart: findViewById(chart, LEFT_AXES_VIEW),
265268
options: {
266-
annotations: get(annotations, [yField[0]]),
269+
annotations: a1,
267270
},
268271
})
269272
);
270-
commonAnnotation(get(annotations, [yField[1]]))(
273+
commonAnnotation(a2)(
271274
deepAssign({}, params, {
272275
chart: findViewById(chart, RIGHT_AXES_VIEW),
273276
options: {
274-
annotations: get(annotations, [yField[1]]),
277+
annotations: a2,
275278
},
276279
})
277280
);
@@ -299,7 +302,7 @@ export function limitInPlot(params: Params<DualAxesOptions>): Params<DualAxesOpt
299302
deepAssign({}, params, {
300303
chart: findViewById(chart, LEFT_AXES_VIEW),
301304
options: {
302-
yAxis: yAxis[yField[0]],
305+
yAxis: yAxis[0],
303306
},
304307
})
305308
);
@@ -308,7 +311,7 @@ export function limitInPlot(params: Params<DualAxesOptions>): Params<DualAxesOpt
308311
deepAssign({}, params, {
309312
chart: findViewById(chart, RIGHT_AXES_VIEW),
310313
options: {
311-
yAxis: yAxis[yField[1]],
314+
yAxis: yAxis[1],
312315
},
313316
})
314317
);

‎src/plots/dual-axes/util/option.ts

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -56,24 +56,24 @@ export function getGeometryOption(xField: string, yField: string, geometryOption
5656

5757
/**
5858
* 兼容一些属性 为 arr 和 obj 的两种情况， 如 yAxis，annotations
59+
* 为了防止左右 yField 相同，导致变成 object 之后被覆盖，所以都转变成数组的形式
5960
* @param yField
60-
* @param options['some attribute']
61+
* @param transformAttribute
6162
*/
62-
export function transArrayToObject(
63+
export function transformObjectToArray(
6364
yField: DualAxesOptions['yField'],
64-
transAttribute: Record<string, any> | any[],
65-
arrayTip: string
66-
): Record<string, any> {
65+
transformAttribute: Record<string, any> | any[]
66+
): any[] {
6767
const [y1, y2] = yField;
68-
if (isArray(transAttribute)) {
69-
if (arrayTip) {
70-
console.warn('yAxis should be object.');
71-
}
72-
return { [y1]: transAttribute[0], [y2]: transAttribute[1] };
73-
}
7468

75-
// 追加默认值
76-
return deepAssign({ [y1]: undefined, [y2]: undefined }, transAttribute);
69+
if (isArray(transformAttribute)) {
70+
// 将数组补齐为两个
71+
const [a1, a2] = transformAttribute;
72+
return [a1, a2];
73+
}
74+
const a1 = get(transformAttribute, y1);
75+
const a2 = get(transformAttribute, y2);
76+
return [a1, a2];
7777
}
7878

7979
/**

0 commit comments

Comments
 (0)