Skip to content

Commit

Permalink
feat: 增加显示目标值label #1599 (#1605)
Browse files Browse the repository at this point in the history 
* feat: 重构api,清晰分离各种通道元素

* feat: 更新新版api

* fix: 误提交本地的
  • Loading branch information
@arcsin1
arcsin1 authored Sep 24, 2020
1 parent 521f7f9 commit 0d5e4dc
Show file tree
Hide file tree
Showing 15 changed files with 231 additions and 188 deletions.
6 changes: 2 additions & 4 deletions __tests__/unit/plots/bullet/axis-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ describe('axis bullet', () => {
max: 120,
},
},
bulletStyle: {
range: {
color: rangeColors,
},
color: {
range: rangeColors,
},
});

Expand Down
52 changes: 19 additions & 33 deletions __tests__/unit/plots/bullet/index-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ describe('bullet', () => {
const chart = bullet.chart;

const rangeGeometry = chart.geometries[0];
const rangeElements = rangeGeometry.elements[0];
expect(rangeElements.shape.attr('fillOpacity')).toBe(0.5);

expect(rangeGeometry.getAttribute('size').values[0]).toEqual(30);
expect(rangeGeometry.getAdjust('stack')).toMatchObject({
Expand All @@ -36,6 +38,8 @@ describe('bullet', () => {
});
expect(measureGeometry.getYScale().max).toEqual(100);
expect(measureGeometry.getYScale().min).toEqual(0);
//@ts-ignore
expect(measureGeometry.labelOption.cfg.position).toEqual('right');

const targetGeometry = chart.geometries[2];
expect(targetGeometry.getAttribute('size').values[0]).toEqual(20 / 2);
Expand Down Expand Up @@ -80,10 +84,8 @@ describe('bullet', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
measure: {
color: '#ff0000',
},
color: {
measure: '#ff0000',
},
});

Expand All @@ -108,10 +110,8 @@ describe('bullet', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
target: {
color: 'red',
},
color: {
target: 'red',
},
});

Expand All @@ -132,10 +132,8 @@ describe('bullet', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
range: {
color: rangeColors,
},
color: {
range: rangeColors,
},
});

Expand Down Expand Up @@ -163,10 +161,8 @@ describe('bullet', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
measure: {
color: measureColors,
},
color: {
measure: measureColors,
},
});

Expand All @@ -192,13 +188,9 @@ describe('bullet', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
measure: {
size: measureSize,
},
range: {
size: rangeSize,
},
size: {
measure: measureSize,
range: rangeSize,
},
});

Expand Down Expand Up @@ -231,16 +223,10 @@ describe('bullet', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
measure: {
size: measureSize,
},
range: {
size: rangeSize,
},
target: {
size: targetSize,
},
size: {
measure: measureSize,
range: rangeSize,
target: targetSize,
},
});

Expand Down
34 changes: 30 additions & 4 deletions __tests__/unit/plots/bullet/label-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,50 @@ describe('bullet*label', () => {
targetField: 'target',
xField: 'title',
label: {
position: 'middle',
style: {
fill: '#fff',
range: {
position: 'middle',
style: {
fill: '#fff',
},
},
measure: {
position: 'middle',
style: {
fill: '#fff',
},
},
target: {
position: 'right',
style: {
fill: '#fff',
},
},
},
});

bullet.render();

const chart = bullet.chart;
const measureGeometry = chart.geometries[1];
const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries;

// @ts-ignore
expect(rangeGeometry.labelOption.cfg.position).toEqual('middle');
// @ts-ignore
expect(rangeGeometry.labelOption.cfg.style.fill).toEqual('#fff');

expect(measureGeometry.getAdjust('stack')).toMatchObject({
xField: 'title',
yField: 'measures',
});

// @ts-ignore
expect(measureGeometry.labelOption.cfg.position).toEqual('middle');
// @ts-ignore
expect(measureGeometry.labelOption.cfg.style.fill).toEqual('#fff');

// @ts-ignore
expect(targetGeometry.labelOption.cfg.position).toEqual('right');
// @ts-ignore
expect(targetGeometry.labelOption.cfg.style.fill).toEqual('#fff');
});
});
28 changes: 8 additions & 20 deletions __tests__/unit/plots/bullet/legend-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,10 @@ describe('bullet*legend', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
range: {
color: rangeColors,
},
measure: {
color: ['red', 'green'],
},
target: {
color: 'blue',
},
color: {
range: rangeColors,
measure: ['red', 'green'],
target: 'blue',
},
legend: {
custom: true,
Expand Down Expand Up @@ -83,16 +77,10 @@ describe('bullet*legend', () => {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
range: {
color: rangeColors,
},
measure: {
color: ['red', 'green'],
},
target: {
color: 'blue',
},
color: {
range: rangeColors,
measure: ['red', 'green'],
target: 'blue',
},
legend: {
custom: true,
Expand Down
8 changes: 5 additions & 3 deletions __tests__/unit/plots/bullet/tooltip-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ describe('tooltip bullet', () => {
targetField: 'target',
xField: 'title',
label: {
position: 'middle',
style: {
fill: '#fff',
measure: {
position: 'middle',
style: {
fill: '#fff',
},
},
},
tooltip: {
Expand Down
56 changes: 41 additions & 15 deletions examples/bullet/basic/API.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,30 +73,56 @@ bulletPlot.render();

### 图形样式

#### bulletStyle ✨
#### style ✨

**可选**, _object_

功能描述： 设置子弹图样式。
功能描述： 设置子弹图各图形 style 属性。

默认配置： 无

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

```ts
type BasicStyle = {
color?: string | string[] | ((...args: any[]) => string);
style?: ShapeAttrs;
size?: number;
};
```
`markdown:docs/common/shape-style.zh.md`

### color ✨

**可选**, _object_

功能描述： 设置子弹图各图形 color 属性。

默认配置： 无

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

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

### size ✨

**可选**, _object_

功能描述： 设置子弹图各图形 size 属性。

默认配置： 无

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ---------- | ------------ | -------- |
| range | _SizeAttr_ | 区间背景样式 | 30 |
| measure | _SizeAttr_ | 实际值样式 | 20 |
| target | _SizeAttr_ | 目标值样式 | 20 |

```plain
type SizeAttr = number | [number, number] | ((datum: Datum) => number);
```
### 图表组件

`markdown:docs/common/component.en.md`
57 changes: 42 additions & 15 deletions examples/bullet/basic/API.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,30 +73,57 @@ bulletPlot.render();

### 图形样式

#### bulletStyle ✨
#### style ✨

**可选**, _object_

功能描述： 设置子弹图样式。
功能描述： 设置子弹图各图形 style 属性。

默认配置： 无

| 细分配置 | 类型 | 功能描述 |
| -------- | ------------ | ------------ |
| range | _BasicStyle_ | 区间背景样式 |
| measure | _BasicStyle_ | 实际值样式 |
| target | _BasicStyle_ | 目标值样式 |

```ts
type BasicStyle = {
color?: string | string[] | ((...args: any[]) => string);
style?: ShapeAttrs;
size?: number;
};
```
| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ----------- | ------------ | -------------------- |
| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } |
| measure | _StyleAttr_ | 实际值样式 | 无 |
| target | _StyleAttr_ | 目标值样式 | 无 |

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

### color ✨

**可选**, _object_

功能描述： 设置子弹图各图形 color 属性。

默认配置： 无

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

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

### size ✨

**可选**, _object_

功能描述： 设置子弹图各图形 size 属性。

默认配置： 无

| 细分配置 | 类型 | 功能描述 | 默认配置 |
| -------- | ---------- | ------------ | -------- |
| range | _SizeAttr_ | 区间背景样式 | 30 |
| measure | _SizeAttr_ | 实际值样式 | 20 |
| target | _SizeAttr_ | 目标值样式 | 20 |

```plain
type SizeAttr = number | [number, number] | ((datum: Datum) => number);
```

### 图表组件

`markdown:docs/common/component.zh.md`
2 changes: 1 addition & 1 deletion examples/bullet/basic/demo/basic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const bulletPlot = new Bullet('container', {
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
bulletStyle: {
style: {
range: {
color: '#5B8FF9',
},
Expand Down
Loading

0 comments on commit 0d5e4dc

Please sign in to comment.