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.

Sign up for GitHub

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

refactor(bullet): 子弹图升级下 & 修复 axis 配置失效 #2228

Merged
merged 7 commits into from
Jan 17, 2021
Merged

refactor(bullet): 子弹图升级下 & 修复 axis 配置失效 #2228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4a00776
refactor(bullet): 重构下子弹图的 adaptor
visiky Jan 16, 2021
c26861c
docs(demo): 子弹图 demo 的优化
visiky Jan 16, 2021
54ea8da
docs(bullet): 子弹图 api 文档优化
visiky Jan 16, 2021
2c7a4b4
test: 添加测试用例
visiky Jan 16, 2021
5b63af8
fix: demo 的引用路径问题
visiky Jan 16, 2021
422fe64
test(bullet): 增加测试用例
visiky Jan 16, 2021
5c1ec2b
docs(bullet): 子弹图默认关闭 x 轴line & 补充子弹图图表指引
visiky Jan 16, 2021
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
18 changes: 18 additions & 0 deletions __tests__/unit/plots/bullet/axis-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,24 @@ import { bulletData } from '../../../data/bullet';
import { createDiv } from '../../../utils/dom';

describe('axis bullet', () => {
it('axis without meta', () => {
const bullet = new Bullet(createDiv('axis*meta bullet'), {
width: 400,
height: 100,
data: bulletData,
measureField: 'measures',
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
yAxis: { tickCount: 10 },
});

bullet.render();
const measureGeometry = bullet.chart.geometries[1];
expect(measureGeometry.scales.measures.tickCount).toBe(10);

bullet.destroy();
});
it('axis*meta', () => {
const rangeColors = ['#FFB1AC', '#FFDBA2', '#B4EBBF'];
const bullet = new Bullet(createDiv('axis*meta bullet'), {
Expand Down
31 changes: 31 additions & 0 deletions __tests__/unit/plots/bullet/index-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,14 @@ describe('bullet', () => {

bullet.render();

expect(bullet.type).toBe('bullet');

const chart = bullet.chart;

expect(chart.getController('legend').getComponents().length).toEqual(0);
// 默认关闭 showMarkers
// @ts-ignore
expect(chart.getController('tooltip').getTooltipCfg().showMarkers).toEqual(false);
// @ts-ignore
expect(chart.options.axes.ranges).toEqual(false);
// @ts-ignore
Expand Down Expand Up @@ -291,4 +296,30 @@ describe('bullet', () => {

bullet.destroy();
});

it('meta', () => {
const bullet = new Bullet(createDiv(), {
width: 400,
height: 100,
data: [{ title: '数学', ranges: [30, 50, 100], measures: [120], target: 85 }],
measureField: 'measures',
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
meta: {
measures: { max: 100 },
},
});

bullet.render();
expect(bullet.chart.getScaleByField('measures').max).toBe(100);

bullet.update({
meta: {
measures: { max: 90, maxLimit: 120 },
},
});
expect(bullet.chart.getScaleByField('measures').max).toBe(120);
expect(bullet.chart.getScaleByField('measures').maxLimit).toBe(120);
});
});
96 changes: 48 additions & 48 deletions docs/api/plots/bullet.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,82 +17,51 @@ order: 10

`markdown:docs/common/meta.en.md`

```ts
const data = [
{
title: '满意度',
ranges: [100],
measures: [80],
target: 85,
},
];

const bulletPlot = new Bullet('container', {
data,
measureField: 'measures',
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
});

bulletPlot.render();
```

#### measureField

<description>**required** _number[]_</description>
<description>**required** _string_</description>

使用数据条的长度，实际数值的设置字段，表示实际数值。

#### rangeField

<description>**required** _number[]_</description>
<description>**required** _string_</description>

使用背景色条的长度的设置字段，表示区间范围。

#### targetField

<description>**required** _number_</description>
<description>**required** _string_</description>

使用测量标记的刻度轴位置的设置字段，表示目标值。

#### layout
#### xField

<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
<description>**optional** _string_</description>

表示子弹图方向。
用于区分不同的类型，适用于分组子弹图。

### Geometry Style

#### bulletStyle

<description>**optional** _object_</description>

设置子弹图各图形 style 属性。
#### layout

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------------------- |
| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | 实际值样式 | 无 |
| target | _StyleAttr_ | 目标值样式 | 无 |
<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>

`markdown:docs/common/shape-style.en.md`
表示子弹图方向。

### color
#### color

<description>**optional** _object_</description>

设置子弹图各图形 color 属性。

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------- |
| range | _colorAttr_ | 区间背景颜色 | 无 |
| measure | _colorAttr_ | 实际值颜色 | 无 |
| target | _colorAttr_ | 目标值颜色 | 无 |

`markdown:docs/common/color.en.md`
| range | _string\|string[]_ | 区间背景颜色 | 无 |
| measure | _string\|string[]_ | 实际值颜色 | 无 |
| target | _string\|string[]_ | 目标值颜色 | 无 |

### size
#### size

<description>**optional** _object_</description>

Expand All @@ -108,7 +77,29 @@ bulletPlot.render();
type SizeAttr = number | [number, number] | ((datum: Datum) => number);
```

### label
#### bulletStyle

<description>**optional** _object_</description>

设置子弹图各图形 style 属性。

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------------------- |
| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | 实际值样式 | 无 |
| target | _StyleAttr_ | 目标值样式 | 无 |

```plain
type StyleAttr = ShapeStyle | ((datum: object) => ShapeStyle);
```

`ShapeStyle` 结构可以参考：

`markdown:docs/common/shape-style.en.md`

### Plot Components

#### label

<description>**optional** _object_</description>

Expand All @@ -122,10 +113,19 @@ type SizeAttr = number | [number, number] | ((datum: Datum) => number);

`markdown:docs/common/label.en.md`

### Plot Components
#### tooltip

`markdown:docs/common/tooltip.en.md`

#### axis

Same for xAxis and yAxis.

`markdown:docs/common/axis.en.md`

`markdown:docs/common/component.en.md`
#### legend

`markdown:docs/common/legend.en.md`
### Event

`markdown:docs/common/events.en.md`
Expand Down
99 changes: 49 additions & 50 deletions docs/api/plots/bullet.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,82 +17,51 @@ order: 10

`markdown:docs/common/meta.zh.md`

```ts
const data = [
{
title: '满意度',
ranges: [100],
measures: [80],
target: 85,
},
];

const bulletPlot = new Bullet('container', {
data,
measureField: 'measures',
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
});

bulletPlot.render();
```

#### measureField

<description>**required** _number[]_</description>
<description>**required** _string_</description>

使用数据条的长度，实际数值的设置字段，表示实际数值。

#### rangeField

<description>**required** _number[]_</description>
<description>**required** _string_</description>

使用背景色条的长度的设置字段，表示区间范围。

#### targetField

<description>**required** _number_</description>
<description>**required** _string_</description>

使用测量标记的刻度轴位置的设置字段，表示目标值。

#### layout
#### xField

<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>
<description>**optional** _string_</description>

表示子弹图方向。
用于区分不同的类型，适用于分组子弹图。

### 图形样式

#### bulletStyle

<description>**optional** _object_</description>

设置子弹图各图形 style 属性。
#### layout

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------------------- |
| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | 实际值样式 | 无 |
| target | _StyleAttr_ | 目标值样式 | 无 |
<description>**optional** _'horizontal' | 'vertical'_ _default:_ 'horizontal'</description>

`markdown:docs/common/shape-style.zh.md`
表示子弹图方向。

### color
#### color

<description>**optional** _object_</description>

设置子弹图各图形 color 属性。

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------- |
| range | _colorAttr_ | 区间背景颜色 | 无 |
| measure | _colorAttr_ | 实际值颜色 | 无 |
| target | _colorAttr_ | 目标值颜色 | 无 |

`markdown:docs/common/color.zh.md`
| range | _string\|string[]_ | 区间背景颜色 | 无 |
| measure | _string\|string[]_ | 实际值颜色 | 无 |
| target | _string\|string[]_ | 目标值颜色 | 无 |

### size
#### size

<description>**optional** _object_</description>

Expand All @@ -108,7 +77,29 @@ bulletPlot.render();
type SizeAttr = number | [number, number] | ((datum: Datum) => number);
```

### label
#### bulletStyle

<description>**optional** _object_</description>

设置子弹图各图形 style 属性。

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------------------- |
| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | 实际值样式 | 无 |
| target | _StyleAttr_ | 目标值样式 | 无 |

```plain
type StyleAttr = ShapeStyle | ((datum: object) => ShapeStyle);
```

`ShapeStyle` 结构可以参考：

`markdown:docs/common/shape-style.zh.md`

### 图表组件

#### label

<description>**optional** _object_</description>

Expand All @@ -122,9 +113,19 @@ type SizeAttr = number | [number, number] | ((datum: Datum) => number);

`markdown:docs/common/label.zh.md`

### 图表组件
#### tooltip

`markdown:docs/common/tooltip.zh.md`

`markdown:docs/common/component.zh.md`
#### axis

xAxis、yAxis 配置相同（由于 DualAxes 是双轴， yAxis 类型是数组类型）。

`markdown:docs/common/axis.zh.md`

#### 图例

`markdown:docs/common/legend.zh.md`

### 事件

Expand All @@ -134,8 +135,6 @@ type SizeAttr = number | [number, number] | ((datum: Datum) => number);

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



### 图表主题

`markdown:docs/common/theme.zh.md`
Loading