diff --git a/__tests__/bugs/issue-2180-spec.ts b/__tests__/bugs/issue-2180-spec.ts index b539257db0..f7a99567e2 100644 --- a/__tests__/bugs/issue-2180-spec.ts +++ b/__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(); diff --git a/__tests__/unit/plots/bidirectional-bar/data-spec.ts b/__tests__/unit/plots/bidirectional-bar/data-spec.ts index e6bec49d88..f398247983 100644 --- a/__tests__/unit/plots/bidirectional-bar/data-spec.ts +++ b/__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); }); }); diff --git a/__tests__/unit/plots/bidirectional-bar/index-spec.ts b/__tests__/unit/plots/bidirectional-bar/index-spec.ts index f226f50bc4..bb133288b6 100644 --- a/__tests__/unit/plots/bidirectional-bar/index-spec.ts +++ b/__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(); }); diff --git a/__tests__/unit/plots/bidirectional-bar/meta-spec.ts b/__tests__/unit/plots/bidirectional-bar/meta-spec.ts new file mode 100644 index 0000000000..0f4b833fe3 --- /dev/null +++ b/__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(); + }); +}); diff --git a/__tests__/unit/plots/bidirectional-bar/utils-spec.ts b/__tests__/unit/plots/bidirectional-bar/utils-spec.ts index 113da88193..8ff93bfbd5 100644 --- a/__tests__/unit/plots/bidirectional-bar/utils-spec.ts +++ b/__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 }, diff --git a/docs/api/plots/bidirectional-bar.en.md b/docs/api/plots/bidirectional-bar.en.md index 0ef671478e..408635fc62 100644 --- a/docs/api/plots/bidirectional-bar.en.md +++ b/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 **required** _array object_ -设置图表数据源。数据源为对象集合，例如： +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 + -**optional** object +`markdown:docs/common/meta.en.md` - yAxis 为多个 key 为 yField 里面的 2 个字段。 +Example: - #### layout +```ts +{ + meta: { + '2016年耕地总面积': { alias: '耕地总面积' } + } +} +``` -**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal' + + +### Geometry Style -表示对称条形图方向。 +#### layout -`markdown:docs/common/meta.zh.md` +**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal' -### 图形样式 +Layout modes, whose optional values are: + +- `horizontal`: horizontally layout all bars. +- `vertical`: vertically layout all bars (as columns). #### barStyle **optional** _StyleAttr | Function_ -柱子样式配置。 +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 + +**optional** object -`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` diff --git a/docs/api/plots/bidirectional-bar.zh.md b/docs/api/plots/bidirectional-bar.zh.md index 0ef671478e..8d3e4896e4 100644 --- a/docs/api/plots/bidirectional-bar.zh.md +++ b/docs/api/plots/bidirectional-bar.zh.md @@ -35,21 +35,29 @@ order: 26 设置 y 轴映射字段。 -#### yAxis + -**optional** object +`markdown:docs/common/meta.zh.md` - yAxis 为多个 key 为 yField 里面的 2 个字段。 +Example: - #### layout +```ts +{ + meta: { + '2016年耕地总面积': { alias: '耕地总面积' } + } +} +``` -**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal' + -表示对称条形图方向。 +### 图形样式 -`markdown:docs/common/meta.zh.md` +#### layout -### 图形样式 +**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal' + +表示对称条形图方向。 #### barStyle @@ -59,6 +67,12 @@ order: 26 `markdown:docs/common/shape-style.zh.md` +#### yAxis + +**optional** object + + 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` diff --git a/docs/api/plots/bullet.en.md b/docs/api/plots/bullet.en.md index 64331ca3e8..faf4f104e8 100644 --- a/docs/api/plots/bullet.en.md +++ b/docs/api/plots/bullet.en.md @@ -13,7 +13,7 @@ order: 10 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{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` diff --git a/docs/api/plots/column.en.md b/docs/api/plots/column.en.md index bbc4e5fc1a..5b5773153d 100644 --- a/docs/api/plots/column.en.md +++ b/docs/api/plots/column.en.md @@ -13,7 +13,7 @@ order: 2 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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` diff --git a/docs/api/plots/dual-axes.en.md b/docs/api/plots/dual-axes.en.md index d698852db1..cfd5781989 100644 --- a/docs/api/plots/dual-axes.en.md +++ b/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` diff --git a/docs/api/plots/heatmap.en.md b/docs/api/plots/heatmap.en.md index a48ded055d..bf0fe2ab2f 100644 --- a/docs/api/plots/heatmap.en.md +++ b/docs/api/plots/heatmap.en.md @@ -13,7 +13,7 @@ order: 23 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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` diff --git a/docs/api/plots/histogram.en.md b/docs/api/plots/histogram.en.md index 8f2a6f52a6..88b228aa15 100644 --- a/docs/api/plots/histogram.en.md +++ b/docs/api/plots/histogram.en.md @@ -13,7 +13,7 @@ order: 11 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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 diff --git a/docs/api/plots/pie.en.md b/docs/api/plots/pie.en.md index c3a1baf485..f19d789c6a 100644 --- a/docs/api/plots/pie.en.md +++ b/docs/api/plots/pie.en.md @@ -13,7 +13,7 @@ order: 4 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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` diff --git a/docs/api/plots/radar.en.md b/docs/api/plots/radar.en.md index e4ba66f0fd..bd5160c54f 100644 --- a/docs/api/plots/radar.en.md +++ b/docs/api/plots/radar.en.md @@ -13,7 +13,7 @@ order: 7 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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` diff --git a/docs/api/plots/rose.en.md b/docs/api/plots/rose.en.md index f30e1f6339..827517fd6a 100644 --- a/docs/api/plots/rose.en.md +++ b/docs/api/plots/rose.en.md @@ -13,7 +13,7 @@ order: 13 **required** _array object_ -设置图表数据源。数据源为对象集合，例如： +Configure the data source. The data source is a collection of objects. For example: ```ts [ diff --git a/docs/api/plots/scatter.en.md b/docs/api/plots/scatter.en.md index 6b04d86ee9..d36b7d5a0e 100644 --- a/docs/api/plots/scatter.en.md +++ b/docs/api/plots/scatter.en.md @@ -13,7 +13,7 @@ order: 5 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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` diff --git a/docs/api/plots/stock.en.md b/docs/api/plots/stock.en.md index 1567c2e5b7..d831d57bd1 100644 --- a/docs/api/plots/stock.en.md +++ b/docs/api/plots/stock.en.md @@ -13,7 +13,7 @@ order: 18 **required** _array object_ -设置图表数据源。数据源为对象集合，例如： +Configure the data source. The data source is a collection of objects. For example: ```ts [ diff --git a/docs/api/plots/treemap.en.md b/docs/api/plots/treemap.en.md index 41f9f1bfc7..145fc095e8 100644 --- a/docs/api/plots/treemap.en.md +++ b/docs/api/plots/treemap.en.md @@ -44,7 +44,7 @@ const data = { -### 图形样式 +### Geometry Style `markdown:docs/common/color.zh.md` @@ -95,7 +95,7 @@ const data = { 层级布局配置，例如 `tile`等，详细配置参考[d3-hierarchy](https://github.com/d3/d3-hierarchy#treemap)。 默认为 `{tile: 'treemapResquarify'}` -### 图表组件 +### Plot Components `markdown:docs/common/component-polygon.zh.md` @@ -103,11 +103,11 @@ const data = { `markdown:docs/common/events.zh.md` -### 图表方法 +### Plot Methods `markdown:docs/common/chart-methods.zh.md` -### 图表主题 +### Plot Theme `markdown:docs/common/theme.zh.md` diff --git a/docs/api/plots/waterfall.en.md b/docs/api/plots/waterfall.en.md index 8c8e221f24..4ea448359f 100644 --- a/docs/api/plots/waterfall.en.md +++ b/docs/api/plots/waterfall.en.md @@ -13,7 +13,7 @@ order: 24 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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` diff --git a/docs/api/plots/word-cloud.en.md b/docs/api/plots/word-cloud.en.md index 8ef2ab9e8c..2436ba3539 100644 --- a/docs/api/plots/word-cloud.en.md +++ b/docs/api/plots/word-cloud.en.md @@ -13,7 +13,7 @@ order: 8 **required** _array object_ -设置图表数据源。数据源为对象集合，例如：`[{ 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 }]`。 #### wordField diff --git a/src/plots/bidirectional-bar/adaptor.ts b/src/plots/bidirectional-bar/adaptor.ts index 730bd962cd..95637c91db 100644 --- a/src/plots/bidirectional-bar/adaptor.ts +++ b/src/plots/bidirectional-bar/adaptor.ts @@ -1,5 +1,5 @@ import { View } from '@antv/g2'; -import { get, groupBy } from '@antv/util'; +import { get, groupBy, keys } from '@antv/util'; import { Params } from '../../core/adaptor'; import { tooltip, @@ -12,7 +12,7 @@ import { import { interval } from '../../adaptor/geometries'; import { flow, findViewById, findGeometry, transformLabel, deepAssign } from '../../utils'; import { BidirectionalBarOptions } from './types'; -import { FIRST_AXES_VIEW, SECOND_AXES_VIEW } from './constant'; +import { FIRST_AXES_VIEW, SECOND_AXES_VIEW, SERIES_FIELD_KEY } from './constant'; import { isHorizontal, transformData } from './utils'; /** @@ -24,17 +24,12 @@ function geometry(params: Params): Params): Params): Params): Params): Params { @@ -135,6 +131,23 @@ function meta(params: Params): Params { + if (get(options?.meta, [metaKey, 'alias'])) { + aliasMap[metaKey] = options.meta[metaKey].alias; + } + }); + + chart.scale({ + [SERIES_FIELD_KEY]: { + sync: true, + formatter: (v) => { + return get(aliasMap, v, v); + }, + }, + }); + scale({ [xField]: xAxis, [yField[0]]: yAxis[yField[0]], diff --git a/src/plots/bidirectional-bar/constant.ts b/src/plots/bidirectional-bar/constant.ts index 045b8a49a0..6f075f2b00 100644 --- a/src/plots/bidirectional-bar/constant.ts +++ b/src/plots/bidirectional-bar/constant.ts @@ -1,2 +1,4 @@ export const FIRST_AXES_VIEW = 'first-axes-view'; export const SECOND_AXES_VIEW = 'second-axes-view'; +/** 对称条形图的分组 key 值 */ +export const SERIES_FIELD_KEY = 'series-field-key'; diff --git a/src/plots/bidirectional-bar/types.ts b/src/plots/bidirectional-bar/types.ts index ced3a54303..bbe75ba161 100644 --- a/src/plots/bidirectional-bar/types.ts +++ b/src/plots/bidirectional-bar/types.ts @@ -1,7 +1,7 @@ import { Axis } from '../../types/axis'; import { Options, StyleAttr } from '../../types'; -export interface BidirectionalBarOptions extends Omit { +export interface BidirectionalBarOptions extends Omit { /** x 轴字段 */ readonly xField: string; /** y 轴映射字段 */ diff --git a/src/plots/bidirectional-bar/utils.ts b/src/plots/bidirectional-bar/utils.ts index e1c182cce9..2ffc4bb29c 100644 --- a/src/plots/bidirectional-bar/utils.ts +++ b/src/plots/bidirectional-bar/utils.ts @@ -2,7 +2,6 @@ import { Datum } from '../../types'; import { BidirectionalBarOptions } from '.'; type TransformData = { - type: string; [key: string]: string | number; }[]; @@ -12,13 +11,13 @@ type TransformData = { * @param yField * @param data */ -export function transformData(xField: string, yField: string[], data: Datum): TransformData { +export function transformData(xField: string, yField: string[], seriesField: string, data: Datum): TransformData { const hopeData: TransformData = []; yField.forEach((d: string) => { data.forEach((k: any) => { const obj = { [xField]: k[xField], - type: d, + [seriesField]: d, [d]: k[d], }; hopeData.push(obj);