-
Notifications
You must be signed in to change notification settings - Fork 605
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add radial bar adaptor * feat: add some unit test files * feat: add all unit test to radial bar * feat: add maxRadian * feat: add radial bar docs * feat: add example demo and api * feat: ajust RadialBar export position * feat: delete console log * feat: add antV star data into test and demo * feat: add radius and innerRadius * feat: add radius and innerRadius docs * feat: modify xAxis default option * feat: remove tooltip default title * feat: fixed some issues * feat: modify demo innerRadius value
- Loading branch information
Showing
22 changed files
with
612 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
export const antvStar = [ | ||
{ name: 'X6', star: 297 }, | ||
{ name: 'G', star: 506 }, | ||
{ name: 'AVA', star: 805 }, | ||
{ name: 'G2Plot', star: 1478 }, | ||
{ name: 'L7', star: 2029 }, | ||
{ name: 'F2', star: 7346 }, | ||
{ name: 'G6', star: 7100 }, | ||
{ name: 'G2', star: 10178 }, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { RadialBar } from '../../../../src'; | ||
import { createDiv } from '../../../utils/dom'; | ||
import { antvStar } from '../../../data/antv-star'; | ||
|
||
const xField = 'name'; | ||
const yField = 'star'; | ||
|
||
describe('radial-bar axis', () => { | ||
it('xAxis*yAxis', () => { | ||
const bar = new RadialBar(createDiv(), { | ||
width: 400, | ||
height: 300, | ||
data: antvStar, | ||
xField, | ||
yField, | ||
yAxis: { | ||
line: { | ||
style: { | ||
lineWidth: 1, | ||
fill: 'red', | ||
}, | ||
}, | ||
}, | ||
}); | ||
bar.render(); | ||
const axisOptions = bar.chart.getOptions().axes; | ||
expect(axisOptions[yField]).toBeUndefined(); | ||
expect(axisOptions[xField]).toMatchObject({ | ||
grid: null, | ||
line: null, | ||
tickLine: null, | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import { RadialBar } from '../../../../src'; | ||
import { createDiv } from '../../../utils/dom'; | ||
import { antvStar } from '../../../data/antv-star'; | ||
|
||
const xField = 'name'; | ||
const yField = 'star'; | ||
|
||
describe('radial-bar', () => { | ||
it('xField*yField', () => { | ||
const bar = new RadialBar(createDiv(), { | ||
width: 400, | ||
height: 300, | ||
data: antvStar, | ||
xField, | ||
yField, | ||
radius: 0.8, | ||
innerRadius: 0.2, | ||
xAxis: false, | ||
}); | ||
bar.render(); | ||
const geometry = bar.chart.geometries[0]; | ||
const positionFields = geometry.getAttribute('position').getFields(); | ||
expect(geometry.type).toBe('interval'); | ||
expect(geometry.coordinate.type).toBe('polar'); | ||
expect(geometry.coordinate.innerRadius).toBe(0.2); | ||
expect(geometry.coordinate.isTransposed).toBe(true); | ||
expect(bar.chart.geometries[0].elements.length).toBe(antvStar.length); | ||
expect(positionFields).toHaveLength(2); | ||
expect(positionFields[0]).toBe(xField); | ||
expect(positionFields[1]).toBe(yField); | ||
}); | ||
|
||
it('xField*yField*color', () => { | ||
const color = 'red'; | ||
const bar = new RadialBar(createDiv(), { | ||
width: 400, | ||
height: 300, | ||
data: antvStar, | ||
xField, | ||
yField, | ||
color, | ||
xAxis: false, | ||
}); | ||
|
||
bar.render(); | ||
const geometry = bar.chart.geometries[0]; | ||
const colorFields = geometry.getAttribute('color').getFields(); | ||
expect(colorFields).toHaveLength(1); | ||
expect(colorFields[0]).toBe(color); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { RadialBar } from '../../../../src'; | ||
import { createDiv } from '../../../utils/dom'; | ||
import { antvStar } from '../../../data/antv-star'; | ||
|
||
const xField = 'name'; | ||
const yField = 'star'; | ||
|
||
describe('radial-bar style', () => { | ||
it('bar styles', () => { | ||
const bar = new RadialBar(createDiv(), { | ||
width: 400, | ||
height: 300, | ||
data: antvStar, | ||
xField, | ||
yField, | ||
barStyle: { | ||
fill: 'red', | ||
fillOpacity: 0.6, | ||
cursor: 'pointer', | ||
}, | ||
}); | ||
bar.render(); | ||
const geometry = bar.chart.geometries[0]; | ||
expect(geometry.elements[0].getModel().style).toMatchObject({ | ||
fill: 'red', | ||
fillOpacity: 0.6, | ||
cursor: 'pointer', | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { RadialBar } from '../../../../src'; | ||
import { createDiv } from '../../../utils/dom'; | ||
import { Datum } from '../../../../src/types'; | ||
import { antvStar } from '../../../data/antv-star'; | ||
|
||
const xField = 'name'; | ||
const yField = 'star'; | ||
|
||
describe('radial-bar tooltip', () => { | ||
const formatter = (datum: Datum) => { | ||
return { name: 'star', value: datum.percent * 100 + '%' }; | ||
}; | ||
it('tooltip default', () => { | ||
const bar = new RadialBar(createDiv(), { | ||
width: 400, | ||
height: 300, | ||
data: antvStar, | ||
xField, | ||
yField, | ||
tooltip: { | ||
formatter, | ||
}, | ||
}); | ||
bar.render(); | ||
// @ts-ignore | ||
const tooltip = bar.chart.options.tooltip; | ||
// @ts-ignore | ||
expect(tooltip.showMarkers).toBe(false); | ||
// @ts-ignore | ||
expect(tooltip.formatter).toBe(formatter); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { getScaleMax } from '../../../../src/plots/radial-bar/utils'; | ||
import { antvStar } from '../../../data/antv-star'; | ||
|
||
const yField = 'star'; | ||
|
||
describe('utils of radial-bar', () => { | ||
const starArr = antvStar.map((item) => item[yField]); | ||
const maxValue = Math.max(...starArr); | ||
it('getScaleMax: normal', () => { | ||
expect(getScaleMax(300, yField, antvStar)).toBe((maxValue * 360) / 300); | ||
expect(getScaleMax(-300, yField, antvStar)).toBe((maxValue * 360) / 300); | ||
expect(getScaleMax(660, yField, antvStar)).toBe((maxValue * 360) / 300); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
--- | ||
title: 玉珏图 | ||
order: 0 | ||
--- | ||
|
||
## 配置属性 | ||
|
||
### 图表容器 | ||
|
||
`markdown:docs/common/chart-options.en.md` | ||
|
||
### 数据映射 | ||
|
||
#### data 📌 | ||
|
||
**必选**, _array object_ | ||
|
||
功能描述: 设置图表数据源 | ||
|
||
默认配置: 无 | ||
|
||
数据源为对象集合,例如:`[{ time: '1991',value: 20 }, { time: '1992',value: 30 }]`。 | ||
|
||
`markdown:docs/common/xy-field.en.md` | ||
|
||
`markdown:docs/common/meta.en.md` | ||
|
||
### 图形样式 | ||
|
||
#### radius | ||
|
||
**可选**, _string_ | ||
|
||
功能描述: 半径, 0 ~ 1。 | ||
|
||
默认配置: `1` | ||
|
||
#### innerRadius | ||
|
||
**可选**, _number_; | ||
|
||
功能描述: 内径,0 ~ 1。 | ||
|
||
#### maxAngle | ||
|
||
**可选**, _number_ | ||
|
||
功能描述: 最大旋转角度,由 data 中最大的数值决定,最大值是 360 度。 | ||
|
||
默认配置: 240 | ||
|
||
|
||
#### barStyle | ||
|
||
**可选**, _StyleAttr | Function_ | ||
|
||
功能描述: 样式配置 。 | ||
|
||
默认配置: 无 | ||
|
||
`markdown:docs/common/shape-style.en.md` | ||
|
||
`markdown:docs/common/color.en.md` | ||
|
||
### 图表组件 | ||
|
||
`markdown:docs/common/component.en.md` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
--- | ||
title: 玉珏图 | ||
order: 0 | ||
--- | ||
|
||
## 配置属性 | ||
|
||
### 图表容器 | ||
|
||
`markdown:docs/common/chart-options.zh.md` | ||
|
||
### 数据映射 | ||
|
||
#### data 📌 | ||
|
||
**必选**, _array object_ | ||
|
||
功能描述: 设置图表数据源 | ||
|
||
默认配置: 无 | ||
|
||
数据源为对象集合,例如:`[{ time: '1991',value: 20 }, { time: '1992',value: 30 }]`。 | ||
|
||
`markdown:docs/common/xy-field.zh.md` | ||
|
||
`markdown:docs/common/meta.zh.md` | ||
|
||
### 图形样式 | ||
|
||
#### radius | ||
|
||
**可选**, _string_ | ||
|
||
功能描述: 半径, 0 ~ 1。 | ||
|
||
默认配置: `1` | ||
|
||
#### innerRadius | ||
|
||
**可选**, _number_; | ||
|
||
功能描述: 内径,0 ~ 1。 | ||
|
||
#### maxAngle | ||
|
||
**可选**, _number_ | ||
|
||
功能描述: 最大旋转角度,由 data 中最大的数值决定,最大值是 360 度。 | ||
|
||
默认配置: 240 | ||
|
||
|
||
#### barStyle | ||
|
||
**可选**, _StyleAttr | Function_ | ||
|
||
功能描述: 样式配置 。 | ||
|
||
默认配置: 无 | ||
|
||
`markdown:docs/common/shape-style.zh.md` | ||
|
||
`markdown:docs/common/color.en.md` | ||
|
||
### 图表组件 | ||
|
||
`markdown:docs/common/component.zh.md` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
## 配置属性 | ||
|
||
### 图表容器 | ||
|
||
`markdown:docs/common/chart-options.en.md` | ||
|
||
### 数据映射 | ||
|
||
#### data 📌 | ||
|
||
**必选**, _array object_ | ||
|
||
功能描述: 设置图表数据源 | ||
|
||
默认配置: 无 | ||
|
||
数据源为对象集合,例如:`[{ time: '1991',value: 20 }, { time: '1992',value: 20 }]`。 | ||
|
||
`markdown:docs/common/meta.en.md` | ||
|
||
|
||
#### colorField 📌 | ||
|
||
**可选**, _string_ | ||
|
||
功能描述: 颜色映射对应的数据字段名。 | ||
|
||
默认配置: 无 | ||
|
||
### 图形样式 | ||
|
||
#### radius | ||
|
||
**可选**, _string_ | ||
|
||
功能描述: 半径, 0 ~ 1。 | ||
|
||
默认配置: `1` | ||
|
||
#### innerRadius | ||
|
||
**可选**, _number_; | ||
|
||
功能描述: 内径,0 ~ 1。 | ||
|
||
|
||
#### maxAngle | ||
|
||
**可选**, _number_ | ||
|
||
功能描述: 最大旋转角度,由 data 中最大的数值决定,最大值是 360 度。 | ||
|
||
默认配置: 240 | ||
|
||
`markdown:docs/common/color.en.md` | ||
|
||
#### barStyle | ||
|
||
**可选**, _StyleAttr | Function_ | ||
|
||
功能描述: 样式配置 。 | ||
|
||
默认配置: 无 | ||
|
||
`markdown:docs/common/shape-style.en.md` | ||
|
||
|
||
### 图表组件 | ||
|
||
`markdown:docs/common/component-no-axis.en.md` |
Oops, something went wrong.