fix: 对称条形图数据顺序问题 (#2204)

* fix: 对称条形图数据顺序问题

* test: 增加issue的测试用例

* fix: 补充测试和修复只有横向的时候才处理数据

__tests__/bugs/issue-2180-spec.ts

@@ -0,0 +1,52 @@
+import { transformData } from '../../src/plots/bidirectional-bar/utils';
+import { BidirectionalBar } from '../../src';
+import { createDiv } from '../utils/dom';
+export const data = [
+  { country: '乌拉圭', '2016年耕地总面积': 13.4, '2016年转基因种植面积': 12.3 },
+  { country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3 },
+  { country: '南非', '2016年耕地总面积': 18.4, '2016年转基因种植面积': 8.3 },
+  { country: '巴基斯坦', '2016年耕地总面积': 34.4, '2016年转基因种植面积': 13.8 },
+  { country: '阿根廷', '2016年耕地总面积': 44.4, '2016年转基因种植面积': 19.5 },
+  { country: '巴西', '2016年耕地总面积': 24.4, '2016年转基因种植面积': 18.8 },
+  { country: '加拿大', '2016年耕地总面积': 54.4, '2016年转基因种植面积': 24.7 },
+  { country: '中国', '2016年耕地总面积': 104.4, '2016年转基因种植面积': 5.3 },
+  { country: '美国', '2016年耕地总面积': 165.2, '2016年转基因种植面积': 72.9 },
+];
+
+describe('#2180', () => {
+  it('横向基础水平方对称条形图设置title时左侧的title是反转的 ', () => {
+    const bidirectional = new BidirectionalBar(createDiv('#2180'), {
+      width: 400,
+      height: 400,
+      data,
+      layout: 'horizontal',
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+    });
+    bidirectional.render();
+    const firstView = bidirectional.chart.views[0];
+    const elements = firstView.geometries[0].elements;
+    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], data);
+    // 因为横向反转了轴，即 transDS 数组反转后 length = 0 与 elements 的 length = 0 的 country 相等
+    // @ts-ignore
+    expect(transDS.reverse()[0].country).toEqual(elements[0].data.country);
+    bidirectional.destroy();
+  });
+  it('垂直', () => {
+    const bidirectional = new BidirectionalBar(createDiv('#2180'), {
+      width: 400,
+      height: 400,
+      data,
+      layout: 'vertical',
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+    });
+    bidirectional.render();
+    const firstView = bidirectional.chart.views[0];
+    const elements = firstView.geometries[0].elements;
+    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], data);
+    // @ts-ignore 不需要反转
+    expect(transDS[0].country).toEqual(elements[0].data.country);
+    // bidirectional.destroy();
+  });
+});

src/plots/bidirectional-bar/adaptor.ts

@@ -41,6 +41,8 @@ function geometry(params: Params<BidirectionalBarOptions>): Params<Bidirectional
   // 创建 view
   let firstView: View;
   let secondView: View;
+  const firstViewData = get(groupData, [0], []);
+  const secondViewData = get(groupData, [1], []);
 
   // 横向
   if (isHorizontal(layout)) {
@@ -62,6 +64,10 @@ function geometry(params: Params<BidirectionalBarOptions>): Params<Bidirectional
       id: SECOND_AXES_VIEW,
     });
     secondView.coordinate().transpose();
+
+    // @说明: 测试发现，横向因为轴的反转，需要数据也反转，不然会图形渲染是反的
+    firstView.data(firstViewData.reverse());
+    secondView.data(secondViewData.reverse());
   } else {
     // 纵向
     firstView = chart.createView({
@@ -82,9 +88,10 @@ function geometry(params: Params<BidirectionalBarOptions>): Params<Bidirectional
       .coordinate()
       .reflect('y')
       .rotate(Math.PI * 0); // 旋转
-  }
 
-  firstView.data(get(groupData, [0], []));
+    firstView.data(firstViewData);
+    secondView.data(secondViewData);
+  }
   const left = deepAssign({}, params, {
     chart: firstView,
     options: {
@@ -100,7 +107,6 @@ function geometry(params: Params<BidirectionalBarOptions>): Params<Bidirectional
   });
   interval(left);
 
-  secondView.data(get(groupData, [1], []));
   const right = deepAssign({}, params, {
     chart: secondView,
     options: {
@@ -116,6 +122,7 @@ function geometry(params: Params<BidirectionalBarOptions>): Params<Bidirectional
   });
 
   interval(right);
+
   return params;
 }