refactor(bar): 条形图重构，不需要反转数据 调整下坐标系即可

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

@@ -95,7 +95,7 @@ describe('bar', () => {
       { product_type: '电子产品', sex: '女', order_amt: 5.9, product_sub_type: '鼠标' },
     ];
 
-    const dualAxes = new Bar(createDiv(), {
+    const plot = new Bar(createDiv(), {
       data: [],
       xField: 'product_type',
       yField: 'order_amt',
@@ -105,15 +105,15 @@ describe('bar', () => {
       groupField: 'sex',
     });
 
-    dualAxes.render();
-    dualAxes.changeData(data);
-    const elements = dualAxes.chart.geometries[0].elements;
+    plot.render();
+    plot.changeData(data);
+    const elements = plot.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[data.length - 1]);
-    expect(elements[1].getModel().data).toEqual(data[data.length - 2]);
+    // 从下至上绘制 (数据不进行反转)
+    expect(elements[0].getModel().data).toMatchObject(data[0]);
+    expect(elements[1].getModel().data).toEqual(data[2]);
 
-    dualAxes.destroy();
+    plot.destroy();
   });
 });

__tests__/unit/plots/bar/index-spec.ts

@@ -414,6 +414,15 @@ describe('bar', () => {
     bar.destroy();
   });
 
+  it('coordinate', () => {
+    const plot = getBar(false, false);
+
+    expect(plot.chart.getCoordinate().isReflect('y')).toBe(true);
+    expect(plot.chart.getCoordinate().isTransposed).toBe(true);
+
+    plot.destroy();
+  });
+
   it('update annotations', () => {
     const plot = new Bar(createDiv(), {
       data: salesByArea,

__tests__/unit/plots/bar/label-spec.ts

@@ -32,9 +32,7 @@ describe('bar label', () => {
     });
     expect(labelGroups).toHaveLength(salesByArea.length);
     labelGroups.forEach((label, index) => {
-      expect(label.get('children')[0].attr('text')).toBe(
-        `${Math.floor(salesByArea[salesByArea.length - index - 1].sales / 10000)}万`
-      );
+      expect(label.get('children')[0].attr('text')).toBe(`${Math.floor(salesByArea[index].sales / 10000)}万`);
     });
 
     bar.destroy();

__tests__/unit/plots/bar/pattern-spec.ts

@@ -54,8 +54,8 @@ describe('bar style', () => {
 
     const geometry = bar.chart.geometries[0];
     const elements = geometry.elements;
-    expect(elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
-    expect(elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+    expect(elements[3].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
+    expect(elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
 
     bar.update({
       pattern: ({ area }) => {
@@ -65,8 +65,10 @@ describe('bar style', () => {
       },
     });
 
-    expect(bar.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true);
-    expect(bar.chart.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
+    expect(
+      bar.chart.geometries[0].elements[salesByArea.length - 1].shape.attr('fill') instanceof CanvasPattern
+    ).toEqual(true);
+    expect(bar.chart.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(false);
 
     bar.destroy();
   });

docs/api/plots/bar.zh.md

@@ -91,15 +91,15 @@ order: 3
 
 `markdown:docs/common/common-component.zh.md`
 
-#### 缩略轴
+#### 缩略轴 slider
 
 `markdown:docs/common/slider.zh.md`
 
-#### 滚动条
+#### 滚动条 scrollbar
 
 `markdown:docs/common/scrollbar.zh.md`
 
-#### 转化标签
+#### 转化标签 conversionTag
 
 适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。
 

docs/api/plots/column.zh.md

@@ -93,21 +93,21 @@ order: 2
 
 `markdown:docs/common/common-component.zh.md`
 
-#### 缩略轴
+#### 缩略轴 slider
 
 `markdown:docs/common/slider.zh.md`
 
-#### 滚动条
+#### 滚动条 scrollbar
 
 `markdown:docs/common/scrollbar.zh.md`
 
-#### 转化标签
+#### 转化标签 conversionTag
 
 适用于基础柱形图和基础条形图，转化率组件可以让用户关注到数据的变化比例。
 
 `markdown:docs/common/conversion-tag.zh.md`
 
-#### 联通区域对比
+#### 联通区域对比 connectedArea
 
 `markdown:docs/common/connected-area.zh.md`
 

docs/api/plots/dual-axes.zh.md

@@ -173,7 +173,7 @@ xAxis、yAxis 配置相同，由于 DualAxes 是双轴， annotations 类型是
 
 `markdown:docs/common/theme.zh.md`
 
-#### 缩略轴
+#### 缩略轴 slider
 
 `markdown:docs/common/slider.zh.md`
 

docs/api/plots/line.zh.md

@@ -88,7 +88,7 @@ const data = [
 
 `markdown:docs/common/component.zh.md`
 
-#### 缩略轴
+#### 缩略轴 slider
 
 `markdown:docs/common/slider.zh.md`
 

src/plots/bar/adaptor.ts

@@ -1,31 +1,57 @@
 import { Params } from '../../core/adaptor';
+import { deepAssign, flow } from '../../utils';
 import { adaptor as columnAdaptor } from '../column/adaptor';
+export { meta } from '../column/adaptor';
 import { BarOptions } from './types';
-import { transformBarData } from './utils';
 
-export { meta } from '../column/adaptor';
+/**
+ * 处理默认配置项
+ * 1. switch xField、 yField
+ * 2. switch xAxis、 yAxis and adjust axis.position configuration
+ */
+function defaultOptions(params: Params<BarOptions>): Params<BarOptions> {
+  const { options } = params;
+  const { xField, yField, xAxis, yAxis } = options;
+
+  const position = {
+    left: 'bottom',
+    right: 'top',
+    top: 'left',
+    bottom: 'right',
+  };
+
+  const verticalAxis =
+    yAxis !== false
+      ? {
+          position: position[yAxis?.position || 'left'],
+          ...yAxis,
+        }
+      : false;
+  const horizontalAxis =
+    xAxis !== false
+      ? {
+          position: position[xAxis?.position || 'bottom'],
+          ...xAxis,
+        }
+      : false;
+
+  return deepAssign({}, params, {
+    options: {
+      xField: yField,
+      yField: xField,
+      xAxis: verticalAxis,
+      yAxis: horizontalAxis,
+    },
+  });
+}
 
 /**
- * 柱形图适配器
+ * label 适配器
  * @param params
  */
-export function adaptor(params: Params<BarOptions>) {
-  const { chart, options } = params;
-  const {
-    xField,
-    yField,
-    xAxis,
-    yAxis,
-    barStyle,
-    barWidthRatio,
-    label,
-    data,
-    seriesField,
-    isStack,
-    minBarWidth,
-    maxBarWidth,
-  } = options;
-
+function label(params: Params<BarOptions>): Params<BarOptions> {
+  const { options } = params;
+  const { label } = options;
   // label of bar charts default position is left, if plot has label
   if (label && !label.position) {
     label.position = 'left';
@@ -40,7 +66,18 @@ export function adaptor(params: Params<BarOptions>) {
     }
   }
 
+  return deepAssign({}, params, { options: { label } });
+}
+
+/**
+ * legend 适配器
+ * @param params
+ */
+function legend(params: Params<BarOptions>): Params<BarOptions> {
+  const { options } = params;
+
   // 默认 legend 位置
+  const { seriesField, isStack } = options;
   let { legend } = options;
   if (seriesField) {
     if (legend !== false) {
@@ -53,9 +90,19 @@ export function adaptor(params: Params<BarOptions>) {
   } else {
     legend = false;
   }
-  // @ts-ignore 直接改值
-  params.options.legend = legend;
 
+  return deepAssign({}, params, { options: { legend } });
+}
+
+/**
+ * tooltip 适配器
+ * @param params
+ */
+function tooltip(params: Params<BarOptions>): Params<BarOptions> {
+  const { options } = params;
+
+  // 默认 legend 位置
+  const { seriesField, isStack } = options;
   // 默认 tooltip 配置
   let { tooltip } = options;
   if (seriesField) {
@@ -66,33 +113,52 @@ export function adaptor(params: Params<BarOptions>) {
       };
     }
   }
-  // @ts-ignore 直接改值
-  params.options.tooltip = tooltip;
 
-  // transpose column to bar
-  chart.coordinate().transpose();
+  return deepAssign({}, params, { options: { tooltip } });
+}
+
+/**
+ * coordinate 适配器
+ * @param params
+ */
+function coordinate(params: Params<BarOptions>): Params<BarOptions> {
+  const { chart } = params;
+  // transpose column to bar 对角变换 & y 方向镜像变换
+  chart.coordinate({ actions: [['transpose'], ['reflect', 'y']] });
+  return params;
+}
+
+/**
+ * 柱形图适配器
+ * @param params
+ */
+export function geometry(params: Params<BarOptions>) {
+  const { chart, options } = params;
+
+  const { barStyle, barWidthRatio, minBarWidth, maxBarWidth, barBackground } = options;
 
   return columnAdaptor(
     {
       chart,
       options: {
         ...options,
-        label,
-        // switch xField and yField
-        xField: yField,
-        yField: xField,
-        xAxis: yAxis,
-        yAxis: xAxis,
         // rename attrs as column
         columnStyle: barStyle,
         columnWidthRatio: barWidthRatio,
         minColumnWidth: minBarWidth,
         maxColumnWidth: maxBarWidth,
-        columnBackground: options.barBackground,
-        // bar 调整数据顺序
-        data: transformBarData(data),
+        columnBackground: barBackground,
       },
     },
     true
-  );
+  ) as Params<BarOptions>;
+}
+
+/**
+ * @param chart
+ * @param options
+ */
+export function adaptor(params: Params<BarOptions>): Params<BarOptions> {
+  // flow 的方式处理所有的配置到 G2 API
+  return flow<Params<BarOptions>>(defaultOptions, label, legend, tooltip, coordinate, geometry)(params);
 }

src/plots/bar/index.ts

@@ -4,7 +4,6 @@ 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 type { BarOptions };
 
@@ -32,7 +31,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(transformBarData(data), xField, yField, xField, isPercent));
+    chart.changeData(getDataWhetherPecentage(data, xField, yField, xField, isPercent));
   }
 
   /**