fix(dual-axes): 双轴图的 y 字段相同的时候,导致 yaxis 配置被覆盖 (#2176)

* fix(dual-axes): 双轴图的 y 字段相同的时候,导致 yaxis 配置被覆盖

* test: add unit test

* docs: move dual axes demos up

Author: hustcc

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

@@ -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();
+  });
+});

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

@@ -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';
@@ -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);
@@ -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', () => {

gatsby-config.js

@@ -132,6 +132,14 @@ module.exports = {
           en: 'Pie',
         },
       },
+      {
+        slug: 'dual-axes',
+        icon: 'line',
+        title: {
+          zh: '双轴图',
+          en: 'Dual Axes',
+        },
+      },
       {
         slug: 'progress-plots',
         icon: 'gauge',
@@ -148,14 +156,6 @@ module.exports = {
           en: 'Scatter and Bubble',
         },
       },
-      {
-        slug: 'dual-axes',
-        icon: 'line',
-        title: {
-          zh: '双轴图',
-          en: 'Dual Axes',
-        },
-      },
       {
         slug: 'rose',
         icon: 'rose',

src/plots/dual-axes/adaptor.ts

@@ -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';
@@ -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),
       },
     }
   );
@@ -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;
@@ -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;
 }
@@ -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,
       },
     })
   );
@@ -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],
       },
     })
   );
@@ -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],
       },
     })
   );

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

@@ -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];
 }
 
 /**