fix: 对称条形图 meta 支持 yField 设置别名 (#2240)

* feat(bidirectional-bar): 对称条形图支持 meta 配置

由于内部进行了 series 分类以及数据转换，因此需将 yField 的别名通过 formatter 注入

* test: 添加对称条形图meta设置的单测

* docs: 一波文档修改

* fix: 修改 ci 单测问题

__tests__/bugs/issue-2180-spec.ts

@@ -26,7 +26,7 @@ describe('#2180', () => {
     bidirectional.render();
     const firstView = bidirectional.chart.views[0];
     const elements = firstView.geometries[0].elements;
-    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], data);
+    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], 'type', data);
     // 因为横向反转了轴，即 transDS 数组反转后 length = 0 与 elements 的 length = 0 的 country 相等
     // @ts-ignore
     expect(transDS.reverse()[0].country).toEqual(elements[0].data.country);
@@ -44,7 +44,7 @@ describe('#2180', () => {
     bidirectional.render();
     const firstView = bidirectional.chart.views[0];
     const elements = firstView.geometries[0].elements;
-    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], data);
+    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], 'type', data);
     // @ts-ignore 不需要反转
     expect(transDS[0].country).toEqual(elements[0].data.country);
     // bidirectional.destroy();

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

@@ -25,7 +25,7 @@ export const hopedata = [
 describe('bullet*data*transfrom', () => {
   it('data*transfrom', () => {
     // 校验数据转换
-    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], data);
+    const transDS = transformData('country', ['2016年耕地总面积', '2016年转基因种植面积'], 'type', data);
     expect(transDS).toEqual(hopedata);
   });
 });

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

@@ -1,4 +1,5 @@
 import { BidirectionalBar } from '../../../../src';
+import { SERIES_FIELD_KEY } from '../../../../src/plots/bidirectional-bar/constant';
 import { data } from '../../../data/bi-directional';
 import { createDiv } from '../../../utils/dom';
 
@@ -23,7 +24,7 @@ describe('Bidirectional', () => {
     expect(leftView.options.axes.country.position).toEqual('top');
     //@ts-ignore
     expect(rightView.options.axes.country).toEqual(false);
-    expect(bidirectional.chart.getOptions().scales.type.sync).toEqual(true);
+    expect(bidirectional.chart.getOptions().scales[SERIES_FIELD_KEY].sync).toEqual(true);
 
     // 类型
     expect(leftG.type).toBe('interval');
@@ -44,19 +45,19 @@ describe('Bidirectional', () => {
     const LseriesFields = LcolorAttribute.getFields();
 
     expect(LseriesFields).toHaveLength(1);
-    expect(LseriesFields[0]).toBe('type');
+    expect(LseriesFields[0]).toBe(SERIES_FIELD_KEY);
 
     const RcolorAttribute = rightG.getAttribute('color');
     const RseriesFields = RcolorAttribute.getFields();
 
     expect(RseriesFields).toHaveLength(1);
-    expect(RseriesFields[0]).toBe('type');
+    expect(RseriesFields[0]).toBe(SERIES_FIELD_KEY);
 
     expect(bidirectional.chart.getController('legend').visible).toEqual(true);
 
     expect(bidirectional.chart.getController('legend').getComponents()[0].direction).toEqual('bottom');
 
-    expect(bidirectional.chart.getController('legend').getComponents()[0].extra.scale.field).toEqual('type');
+    expect(bidirectional.chart.getController('legend').getComponents()[0].extra.scale.field).toEqual(SERIES_FIELD_KEY);
 
     bidirectional.destroy();
   });
@@ -77,9 +78,9 @@ describe('Bidirectional', () => {
     const RseriesFields = rightG.getAttribute('color').getFields();
 
     expect(LseriesFields).toHaveLength(1);
-    expect(LseriesFields[0]).toBe('type');
+    expect(LseriesFields[0]).toBe(SERIES_FIELD_KEY);
     expect(RseriesFields).toHaveLength(1);
-    expect(RseriesFields[0]).toBe('type');
+    expect(RseriesFields[0]).toBe(SERIES_FIELD_KEY);
 
     bidirectional.destroy();
   });

__tests__/unit/plots/bidirectional-bar/meta-spec.ts

@@ -0,0 +1,44 @@
+import { BidirectionalBar } from '../../../../src';
+import { SERIES_FIELD_KEY } from '../../../../src/plots/bidirectional-bar/constant';
+import { data } from '../../../data/bi-directional';
+import { createDiv } from '../../../utils/dom';
+
+describe('Bidirectional', () => {
+  it('进行别名设置', () => {
+    const bidirectional = new BidirectionalBar(createDiv('default'), {
+      width: 400,
+      height: 400,
+      data,
+      xField: 'country',
+      yField: ['2016年耕地总面积', '2016年转基因种植面积'],
+    });
+    bidirectional.render();
+
+    expect(bidirectional.type).toEqual('bidirectional-bar');
+
+    // @ts-ignore
+    let scalePool = bidirectional.chart.scalePool;
+    const scaleKeys = scalePool.syncScales.get(SERIES_FIELD_KEY);
+
+    expect(scalePool.scales.get(scaleKeys[0]).scaleDef.formatter('2016年耕地总面积')).toBe('2016年耕地总面积');
+    expect(scalePool.scales.get(scaleKeys[1]).scaleDef.formatter('2016年转基因种植面积')).toBe('2016年转基因种植面积');
+
+    bidirectional.update({
+      meta: {
+        '2016年耕地总面积': {
+          alias: 'a',
+        },
+        '2016年转基因种植面积': {
+          alias: 'b',
+        },
+      },
+    });
+
+    // @ts-ignore
+    scalePool = bidirectional.chart.scalePool;
+    expect(scalePool.scales.get(scaleKeys[0]).scaleDef.formatter('2016年耕地总面积')).toBe('a');
+    expect(scalePool.scales.get(scaleKeys[1]).scaleDef.formatter('2016年转基因种植面积')).toBe('b');
+
+    bidirectional.destroy();
+  });
+});

__tests__/unit/plots/bidirectional-bar/utils-spec.ts

@@ -16,7 +16,7 @@ describe('util', () => {
       { x: 'b', y1: 11, y2: 21, y3: 31 },
     ];
 
-    expect(transformData('x', ['y1', 'y2'], data)).toEqual([
+    expect(transformData('x', ['y1', 'y2'], 'type', data)).toEqual([
       { type: 'y1', x: 'a', y1: 10 },
       { type: 'y1', x: 'b', y1: 11 },
       { type: 'y2', x: 'a', y2: 20 },

docs/api/plots/bidirectional-bar.en.md

@@ -1,26 +1,25 @@
 ---
-title: 对称条形图
+title: Bidirectional Bar
 order: 26
 ---
 
-### 图表容器
+### Plot Container
 
-`markdown:docs/common/chart-options.zh.md`
+`markdown:docs/common/chart-options.en.md`
 
-### 数据映射
+### Data Mapping
 
 #### data
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：
+Configure the data source. The data source is a collection of objects. For example:
 
 ```js
 [
   { country: '乌拉圭', '2016年耕地总面积': 13.4, '2016年转基因种植面积': 12.3 },
-  { country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3 }
-]
-
+  { country: '巴拉圭', '2016年耕地总面积': 14.4, '2016年转基因种植面积': 6.3 },
+];
 ```
 
 #### xField
@@ -35,44 +34,63 @@ order: 26
 
 设置 y 轴映射字段。
 
-#### yAxis
+<!-- Meta options START -->
 
-<description>**optional** object</description>
+`markdown:docs/common/meta.en.md`
 
- yAxis 为多个 key 为 yField 里面的 2 个字段。
+Example:
 
- #### layout
+```ts
+{
+  meta: {
+    '2016年耕地总面积': { alias: '耕地总面积' }
+  }
+}
+```
 
-<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
+<!-- Meta options END -->
+
+### Geometry Style
 
-表示对称条形图方向。
+#### layout
 
-`markdown:docs/common/meta.zh.md`
+<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
 
-### 图形样式
+Layout modes, whose optional values are:
+
+- `horizontal`: horizontally layout all bars.
+- `vertical`: vertically layout all bars (as columns).
 
 #### barStyle
 
 <description>**optional** _StyleAttr | Function_</description>
 
-柱子样式配置。
+Configurations of the style of bars.
+
+`markdown:docs/common/shape-style.en.md`
+
+#### xAxis
 
-`markdown:docs/common/shape-style.zh.md`
+See the configuration of [axis](#axis).
 
-### 图表组件
+#### yAxis
+
+<description>**optional** object</description>
 
-`markdown:docs/common/component.zh.md`
+`yAxis` is a object. Keys are the fields defined in `yField`, values is the configuration of [axis](#axis).
 
-### 事件
+### Plot Components
 
-`markdown:docs/common/events.zh.md`
+`markdown:docs/common/component.en.md`
 
-### 图表方法
+### Events
 
-`markdown:docs/common/chart-methods.zh.md`
+`markdown:docs/common/events.en.md`
 
+### Plot Methods
 
+`markdown:docs/common/chart-methods.en.md`
 
-### 图表主题
+### Plot Theme
 
-`markdown:docs/common/theme.zh.md`
+`markdown:docs/common/theme.en.md`

docs/api/plots/bidirectional-bar.zh.md

@@ -35,21 +35,29 @@ order: 26
 
 设置 y 轴映射字段。
 
-#### yAxis
+<!-- Meta options START -->
 
-<description>**optional** object</description>
+`markdown:docs/common/meta.zh.md`
 
- yAxis 为多个 key 为 yField 里面的 2 个字段。
+Example:
 
- #### layout
+```ts
+{
+  meta: {
+    '2016年耕地总面积': { alias: '耕地总面积' }
+  }
+}
+```
 
-<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
+<!-- Meta options END -->
 
-表示对称条形图方向。
+### 图形样式
 
-`markdown:docs/common/meta.zh.md`
+#### layout
 
-### 图形样式
+<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
+
+表示对称条形图方向。
 
 #### barStyle
 
@@ -59,6 +67,12 @@ order: 26
 
 `markdown:docs/common/shape-style.zh.md`
 
+#### yAxis
+
+<description>**optional** object</description>
+
+ yAxis 为多个 key 为 yField 里面的 2 个字段。
+
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`
@@ -71,8 +85,6 @@ order: 26
 
 `markdown:docs/common/chart-methods.zh.md`
 
-
-
 ### 图表主题
 
 `markdown:docs/common/theme.zh.md`

docs/api/plots/bullet.en.md

@@ -13,7 +13,7 @@ order: 10
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{title: '满意度', ranges: [50,100], measures: [80], target: 85}]`。
+Configure the data source. The data source is a collection of objects. For example:`[{title: '满意度', ranges: [50,100], measures: [80], target: 85}]`。
 
 `markdown:docs/common/meta.en.md`
 

docs/api/plots/column.en.md

@@ -13,7 +13,7 @@ order: 2
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+Configure the data source. The data source is a collection of objects. For example:`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
 
 `markdown:docs/common/xy-field.en.md`
 

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

@@ -152,11 +152,11 @@ xAxis、yAxis 配置相同，由于 DualAxes 是双轴， annotations 类型是
 
 `markdown:docs/common/theme.en.md`
 
-### 事件
+### Events
 
 `markdown:docs/common/events.en.md`
 
-### 图表方法
+### Plot Methods
 
 `markdown:docs/common/chart-methods.en.md`
 

docs/api/plots/heatmap.en.md

@@ -13,7 +13,7 @@ order: 23
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+Configure the data source. The data source is a collection of objects. For example:`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
 
 `markdown:docs/common/xy-field.en.md`
 

docs/api/plots/histogram.en.md

@@ -13,7 +13,7 @@ order: 11
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+Configure the data source. The data source is a collection of objects. For example:`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
 
 #### binField 
 

docs/api/plots/pie.en.md

@@ -13,7 +13,7 @@ order: 4
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+Configure the data source. The data source is a collection of objects. For example:`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
 
 `markdown:docs/common/meta.en.md`
 

docs/api/plots/radar.en.md

@@ -13,7 +13,7 @@ order: 7
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+Configure the data source. The data source is a collection of objects. For example:`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
 
 `markdown:docs/common/meta.en.md`
 

docs/api/plots/rose.en.md

@@ -13,7 +13,7 @@ order: 13
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：
+Configure the data source. The data source is a collection of objects. For example:
 
 ```ts
 [

docs/api/plots/scatter.en.md

@@ -13,7 +13,7 @@ order: 5
 
 <description>**required** _array object_</description>
 
-设置图表数据源。数据源为对象集合，例如：`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
+Configure the data source. The data source is a collection of objects. For example:`[{ time: '1991'，value: 20 }, { time: '1992'，value: 20 }]`。
 
 `markdown:docs/common/xy-field.en.md`