Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Jan 19, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions __tests__/bugs/issue-2180-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion __tests__/unit/plots/bidirectional-bar/data-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
13 changes: 7 additions & 6 deletions __tests__/unit/plots/bidirectional-bar/index-spec.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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');
Expand All @@ -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();
});
Expand All @@ -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();
});
Expand Down
44 changes: 44 additions & 0 deletions __tests__/unit/plots/bidirectional-bar/meta-spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
2 changes: 1 addition & 1 deletion __tests__/unit/plots/bidirectional-bar/utils-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
70 changes: 44 additions & 26 deletions docs/api/plots/bidirectional-bar.en.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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`
32 changes: 22 additions & 10 deletions docs/api/plots/bidirectional-bar.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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`
Expand All @@ -71,8 +85,6 @@ order: 26

`markdown:docs/common/chart-methods.zh.md`



### 图表主题

`markdown:docs/common/theme.zh.md`
2 changes: 1 addition & 1 deletion docs/api/plots/bullet.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/column.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
4 changes: 2 additions & 2 deletions docs/api/plots/dual-axes.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

2 changes: 1 addition & 1 deletion docs/api/plots/heatmap.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/histogram.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/pie.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/radar.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/rose.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
[
Expand Down
2 changes: 1 addition & 1 deletion docs/api/plots/scatter.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
Loading