fix(bar): bar plot not transformData before changedata (#2317)

* fix(bar): bar plot not transformData before changedata

* test: destroy plot afterall

* fix: prettier lint

* fix: test fail

Co-authored-by: kasmine <visiky>

__tests__/bugs/bar-changedata-spec.ts

@@ -0,0 +1,38 @@
+import { Bar } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('bar changeData should keep order', () => {
+  const data = [
+    {
+      type: '家具家电',
+      sales: 38,
+    },
+    {
+      type: '粮油副食',
+      sales: 52,
+    },
+    {
+      type: '生鲜水果',
+      sales: 61,
+    },
+  ];
+
+  it('keep data order', () => {
+    const barPlot = new Bar(createDiv(), {
+      data,
+      xField: 'sales',
+      yField: 'type',
+      seriesField: 'type',
+    });
+
+    barPlot.render();
+    const chartData = barPlot.chart.getData();
+    barPlot.changeData(data);
+
+    // 绘制从下至上
+    expect(barPlot.chart.geometries[0].elements[0].getData().sales).toBe(data[2].sales);
+    expect(barPlot.chart.getData()).toEqual(chartData);
+
+    barPlot.destroy();
+  });
+});

__tests__/unit/plots/bar/change-data-spec.ts

@@ -110,8 +110,9 @@ describe('bar', () => {
     const elements = dualAxes.chart.geometries[0].elements;
     expect(elements.length).toBe(data.length);
     expect(elements[0].shape.attr('fill')).toBe(elements[1].shape.attr('fill'));
-    expect(elements[0].getModel().data).toMatchObject(data[0]);
-    expect(elements[1].getModel().data).toEqual(data[2]);
+    // 从下至上绘制
+    expect(elements[0].getModel().data).toMatchObject(data[data.length - 1]);
+    expect(elements[1].getModel().data).toEqual(data[data.length - 2]);
 
     dualAxes.destroy();
   });

src/plots/bar/adaptor.ts

@@ -1,6 +1,7 @@
 import { Params } from '../../core/adaptor';
 import { adaptor as columnAdaptor } from '../column/adaptor';
 import { BarOptions } from './types';
+import { transformBarData } from './utils';
 
 export { meta } from '../column/adaptor';
 
@@ -89,7 +90,7 @@ export function adaptor(params: Params<BarOptions>) {
         maxColumnWidth: maxBarWidth,
         columnBackground: options.barBackground,
         // bar 调整数据顺序
-        data: data ? data.slice().reverse() : data,
+        data: transformBarData(data),
       },
     },
     true

src/plots/bar/index.ts

@@ -4,6 +4,7 @@ import { getDataWhetherPecentage } from '../../utils/transform/percent';
 import { BarOptions } from './types';
 import { adaptor, meta } from './adaptor';
 import { DEFAULT_OPTIONS } from './constants';
+import { transformBarData } from './utils';
 
 export { BarOptions };
 
@@ -31,7 +32,7 @@ export class Bar extends Plot<BarOptions> {
     const { xField, yField, isPercent } = options;
     const switchedFieldOptions = { ...options, xField: yField, yField: xField };
     meta({ chart, options: switchedFieldOptions });
-    chart.changeData(getDataWhetherPecentage(data, xField, yField, xField, isPercent));
+    chart.changeData(getDataWhetherPecentage(transformBarData(data), xField, yField, xField, isPercent));
   }
 
   /**

src/plots/bar/utils.ts

@@ -0,0 +1,9 @@
+import { BarOptions } from '.';
+
+/**
+ * 条形图数据需要进行反转
+ * @param data
+ */
+export function transformBarData(data: BarOptions['data']): BarOptions['data'] {
+  return data ? data.slice().reverse() : data;
+}