Skip to content

Commit

Permalink
fix(dual-axes): 双轴图的 y 字段相同的时候,导致 yaxis 配置被覆盖 (#2176)
Browse files Browse the repository at this point in the history 
* fix(dual-axes): 双轴图的 y 字段相同的时候,导致 yaxis 配置被覆盖

* test: add unit test

* docs: move dual axes demos up
  • Loading branch information
@hustcc
hustcc authored Jan 5, 2021
1 parent e4da1f9 commit b46e6b3
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 58 deletions.
76 changes: 76 additions & 0 deletions __tests__/bugs/bug-dual-axes-same-y-spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { DualAxes } from '../../src';
import { findViewById } from '../../src/utils';
import { createDiv } from '../utils/dom';

const uv = [
{ time: '2019-03', value: 350, type: 'uv' },
{ time: '2019-04', value: 900, type: 'uv' },
{ time: '2019-05', value: 300, type: 'uv' },
{ time: '2019-06', value: 450, type: 'uv' },
{ time: '2019-07', value: 470, type: 'uv' },
{ time: '2019-03', value: 220, type: 'bill' },
{ time: '2019-04', value: 300, type: 'bill' },
{ time: '2019-05', value: 250, type: 'bill' },
{ time: '2019-06', value: 220, type: 'bill' },
{ time: '2019-07', value: 362, type: 'bill' },
];

const pv = [
{ time: '2019-03', value: 800, name: 'a' },
{ time: '2019-04', value: 600, name: 'a' },
{ time: '2019-05', value: 400, name: 'a' },
{ time: '2019-06', value: 380, name: 'a' },
{ time: '2019-07', value: 220, name: 'a' },
{ time: '2019-03', value: 750, name: 'b' },
{ time: '2019-04', value: 650, name: 'b' },
{ time: '2019-05', value: 450, name: 'b' },
{ time: '2019-06', value: 400, name: 'b' },
{ time: '2019-07', value: 320, name: 'b' },
{ time: '2019-03', value: 900, name: 'c' },
{ time: '2019-04', value: 600, name: 'c' },
{ time: '2019-05', value: 450, name: 'c' },
{ time: '2019-06', value: 300, name: 'c' },
{ time: '2019-07', value: 200, name: 'c' },
];

describe('dual-axes same y fields', () => {
it('same y fields', () => {
const dualAxes = new DualAxes(createDiv(), {
data: [uv, pv],
xField: 'time',
yField: ['value', 'value'],
yAxis: [
{
title: {
text: 'y1',
},
},
{
title: {
text: 'y2',
},
},
],
geometryOptions: [
{
geometry: 'line',
seriesField: 'type',
},
{
geometry: 'column',
seriesField: 'name',
point: {},
},
],
});

dualAxes.render();

const left = findViewById(dualAxes.chart, 'left-axes-view');
const right = findViewById(dualAxes.chart, 'right-axes-view');
expect(left.getController('axis').getComponents()[1].component.get('title').text).toBe('y1');
expect(right.getController('axis').getComponents()[0].component.get('title').text).toBe('y2');

dualAxes.destroy();
});
});
35 changes: 12 additions & 23 deletions __tests__/unit/plots/dual-axes/util/option-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
isLine,
isColumn,
getGeometryOption,
transArrayToObject,
transformObjectToArray,
getYAxisWithDefault,
} from '../../../../../src/plots/dual-axes/util/option';
import { AxisType } from '../../../../../src/plots/dual-axes/types';
Expand All @@ -26,8 +26,6 @@ const DEFAULT_RIGHT_YAXIS_CONFIG = {
grid: null,
};

const ARRAY_TIP = 'ARRAY_TIP';

describe('DualAxes option', () => {
it('isLine, isColumn', () => {
expect(isLine({})).toBe(false);
Expand All @@ -40,30 +38,21 @@ describe('DualAxes option', () => {
});

it('transArrayToObject', () => {
expect(transArrayToObject(['yField1', 'yField2'], undefined, undefined)).toEqual({
yField1: undefined,
yField2: undefined,
});
expect(transformObjectToArray(['yField1', 'yField2'], undefined)).toEqual([undefined, undefined]);

expect(transArrayToObject(['yField1', 'yField2'], [{ nice: false }], ARRAY_TIP)).toEqual({
yField1: { nice: false },
yField2: undefined,
});
expect(transformObjectToArray(['yField1', 'yField2'], [{ nice: false }])).toEqual([{ nice: false }, undefined]);

expect(transArrayToObject(['yField1', 'yField2'], [false], ARRAY_TIP)).toEqual({
yField1: false,
yField2: undefined,
});
expect(transformObjectToArray(['yField1', 'yField2'], [false])).toEqual([false, undefined]);

expect(transArrayToObject(['yField1', 'yField2'], { yField1: { nice: true } }, ARRAY_TIP)).toEqual({
yField1: { nice: true },
yField2: undefined,
});
expect(transformObjectToArray(['yField1', 'yField2'], { yField1: { nice: true } })).toEqual([
{ nice: true },
undefined,
]);

expect(transArrayToObject(['yField1', 'yField2'], { yField1: { nice: true }, yField2: false }, ARRAY_TIP)).toEqual({
yField1: { nice: true },
yField2: false,
});
expect(transformObjectToArray(['yField1', 'yField2'], { yField1: { nice: true }, yField2: false })).toEqual([
{ nice: true },
false,
]);
});

it('getDefaultYAxis', () => {
Expand Down
16 changes: 8 additions & 8 deletions gatsby-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,14 @@ module.exports = {
en: 'Pie',
},
},
{
slug: 'dual-axes',
icon: 'line',
title: {
zh: '双轴图',
en: 'Dual Axes',
},
},
{
slug: 'progress-plots',
icon: 'gauge',
Expand All @@ -148,14 +156,6 @@ module.exports = {
en: 'Scatter and Bubble',
},
},
{
slug: 'dual-axes',
icon: 'line',
title: {
zh: '双轴图',
en: 'Dual Axes',
},
},
{
slug: 'rose',
icon: 'rose',
Expand Down
31 changes: 17 additions & 14 deletions src/plots/dual-axes/adaptor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Params } from '../../core/adaptor';
import { Datum } from '../../types';
import { flow, deepAssign } from '../../utils';
import { findViewById } from '../../utils/view';
import { isColumn, getYAxisWithDefault, getGeometryOption, transArrayToObject } from './util/option';
import { isColumn, getYAxisWithDefault, getGeometryOption, transformObjectToArray } from './util/option';
import { getViewLegendItems } from './util/legend';
import { drawSingleGeometry } from './util/geometry';
import { DualAxesOptions, AxisType, DualAxesGeometry } from './types';
Expand Down Expand Up @@ -72,14 +72,14 @@ export function transformOptions(params: Params<DualAxesOptions>): Params<DualAx
{
options: {
// yAxis
yAxis: transArrayToObject(yField, options.yAxis, 'yAxis should be object.'),
yAxis: transformObjectToArray(yField, options.yAxis),
// geometryOptions
geometryOptions: [
getGeometryOption(xField, yField[0], geometryOptions[0]),
getGeometryOption(xField, yField[1], geometryOptions[1]),
],
// annotations
annotations: transArrayToObject(yField, options.annotations, 'annotations should be object.'),
annotations: transformObjectToArray(yField, options.annotations),
},
}
);
Expand Down Expand Up @@ -180,12 +180,12 @@ export function meta(params: Params<DualAxesOptions>): Params<DualAxesOptions> {

scale({
[xField]: xAxis,
[yField[0]]: yAxis[yField[0]],
[yField[0]]: yAxis[0],
})(deepAssign({}, params, { chart: findViewById(chart, LEFT_AXES_VIEW) }));

scale({
[xField]: xAxis,
[yField[1]]: yAxis[yField[1]],
[yField[1]]: yAxis[1],
})(deepAssign({}, params, { chart: findViewById(chart, RIGHT_AXES_VIEW) }));

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

// 左 View
leftView.axis(xField, xAxis);
leftView.axis(yField[0], getYAxisWithDefault(yAxis[yField[0]], AxisType.Left));
leftView.axis(yField[0], getYAxisWithDefault(yAxis[0], AxisType.Left));

// 右 Y 轴
rightView.axis(xField, false);
rightView.axis(yField[1], getYAxisWithDefault(yAxis[yField[1]], AxisType.Right));
rightView.axis(yField[1], getYAxisWithDefault(yAxis[1], AxisType.Right));

return params;
}
Expand Down Expand Up @@ -257,21 +257,24 @@ export function interaction(params: Params<DualAxesOptions>): Params<DualAxesOpt
*/
export function annotation(params: Params<DualAxesOptions>): Params<DualAxesOptions> {
const { chart, options } = params;
const { yField, annotations } = options;
const { annotations } = options;

commonAnnotation(get(annotations, [yField[0]]))(
const a1 = get(annotations, [0]);
const a2 = get(annotations, [1]);

commonAnnotation(a1)(
deepAssign({}, params, {
chart: findViewById(chart, LEFT_AXES_VIEW),
options: {
annotations: get(annotations, [yField[0]]),
annotations: a1,
},
})
);
commonAnnotation(get(annotations, [yField[1]]))(
commonAnnotation(a2)(
deepAssign({}, params, {
chart: findViewById(chart, RIGHT_AXES_VIEW),
options: {
annotations: get(annotations, [yField[1]]),
annotations: a2,
},
})
);
Expand Down Expand Up @@ -299,7 +302,7 @@ export function limitInPlot(params: Params<DualAxesOptions>): Params<DualAxesOpt
deepAssign({}, params, {
chart: findViewById(chart, LEFT_AXES_VIEW),
options: {
yAxis: yAxis[yField[0]],
yAxis: yAxis[0],
},
})
);
Expand All @@ -308,7 +311,7 @@ export function limitInPlot(params: Params<DualAxesOptions>): Params<DualAxesOpt
deepAssign({}, params, {
chart: findViewById(chart, RIGHT_AXES_VIEW),
options: {
yAxis: yAxis[yField[1]],
yAxis: yAxis[1],
},
})
);
Expand Down
26 changes: 13 additions & 13 deletions src/plots/dual-axes/util/option.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,24 +56,24 @@ export function getGeometryOption(xField: string, yField: string, geometryOption

/**
* 兼容一些属性 为 arr 和 obj 的两种情况， 如 yAxis，annotations
* 为了防止左右 yField 相同，导致变成 object 之后被覆盖，所以都转变成数组的形式
* @param yField
* @param options['some attribute']
* @param transformAttribute
*/
export function transArrayToObject(
export function transformObjectToArray(
yField: DualAxesOptions['yField'],
transAttribute: Record<string, any> | any[],
arrayTip: string
): Record<string, any> {
transformAttribute: Record<string, any> | any[]
): any[] {
const [y1, y2] = yField;
if (isArray(transAttribute)) {
if (arrayTip) {
console.warn('yAxis should be object.');
}
return { [y1]: transAttribute[0], [y2]: transAttribute[1] };
}

// 追加默认值
return deepAssign({ [y1]: undefined, [y2]: undefined }, transAttribute);
if (isArray(transformAttribute)) {
// 将数组补齐为两个
const [a1, a2] = transformAttribute;
return [a1, a2];
}
const a1 = get(transformAttribute, y1);
const a2 = get(transformAttribute, y2);
return [a1, a2];
}

/**
Expand Down

0 comments on commit b46e6b3

Please sign in to comment.