Skip to content

Commit

Permalink
fix(#2573): 修复雷达图设置 point state 状态样式不生效 (#2577)
Browse files Browse the repository at this point in the history
* feat(radar): 雷达图辅助元素 point 默认继承主元素 state 设置(非 mix)

* test(issue-2573): 增加单测
  • Loading branch information
visiky authored May 24, 2021
1 parent 2c8ce43 commit 50a815a
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 6 deletions.
68 changes: 68 additions & 0 deletions __tests__/bugs/issue-2573-spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { Radar } from '../../src';
import { SERIES_DATA } from '../data/radar';
import { createDiv } from '../utils/dom';

describe('#2573', () => {
const data = SERIES_DATA;
const radar = new Radar(createDiv(), {
width: 400,
height: 300,
data,
xField: 'name',
yField: 'value',
seriesField: 'type',
radius: 0.8,
color: ['red', 'orange'],
state: {
default: {
style: {
stroke: 'red',
},
},
active: {
style: {
stroke: 'green',
},
},
},
point: {},
});

radar.render();

it('radar point 设置 state 状态样式不生效', () => {
radar.setState('default', (datum) => datum['name'] === data[0].name);
expect(radar.chart.geometries[1].elements[0].shape.attr('stroke')).toBe('red');

radar.setState('active', (datum) => datum['name'] === data[0].name);
expect(radar.chart.geometries[1].elements[0].shape.attr('stroke')).toBe('green');
});

it('point state 优先级高', () => {
radar.update({
point: {
state: {
default: {
style: {
stroke: 'blue',
},
},
active: {
style: {
stroke: 'orange',
},
},
},
},
});
radar.setState('default', (datum) => datum['name'] === data[0].name);
expect(radar.chart.geometries[1].elements[0].shape.attr('stroke')).toBe('blue');

radar.setState('active', (datum) => datum['name'] === data[0].name);
expect(radar.chart.geometries[1].elements[0].shape.attr('stroke')).toBe('orange');
});

afterAll(() => {
radar.destroy();
});
});
2 changes: 1 addition & 1 deletion docs/common/point-style.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
| shape | \_string \| Function\_ | The shape of the data point, support callback way, example: `shape: (x, y, series) => string` |
| size | _number \| Function_ | The size of the data point, support callback way, example: `size: (x, y, series) => number` |
| style | _object \| Function_ | Data point style, support callback way, example: `style: (x, y, series) => object` |
| state | _object_ | State styles of point, setting style of specify state。Refer to [_state_](#state)` |
| state | _object_ | State styles of point, setting style of specify state。Refer to [_state_](#state) |
2 changes: 1 addition & 1 deletion docs/common/point-style.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@
| shape | _string \| Function_ | 数据点形状,也可以支持回调的方式设置,回调参数为 `shape: (x, y, series) => string` |
| size | _number \| Function_ | 数据点大小,也可以支持回调的方式设置,回调参数为 `size: (x, y, series) => number` |
| style | _object \| Function_ | 数据点样式,也可以支持回调的方式设置,回调参数为 `style: (x, y, series) => object` |
| state | _object_ | 数据点状态样式,设置对应状态的样式。详细参考 [_state_](#state)` |
| state | _object_ | 数据点状态样式,设置对应状态的样式。详细参考 [_state_](#state) |
4 changes: 2 additions & 2 deletions src/plots/radar/adaptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ function geometry(params: Params<RadarOptions>): Params<RadarOptions> {
const { chart, options } = params;
const { data, lineStyle, color, point: pointOptions, area: areaOptions } = options;

const pointState = pointOptions?.state;

chart.data(data);

// 雷达图 主 geometry
Expand Down Expand Up @@ -45,6 +43,8 @@ function geometry(params: Params<RadarOptions>): Params<RadarOptions> {
tooltip: false,
},
});
// 优先使用 point.state, 其次取主元素的 state 状态样式配置
const pointState = pointOptions?.state || options.state;
const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });

line(primary);
Expand Down
4 changes: 2 additions & 2 deletions src/types/state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Datum, Data } from './common';

export type State = Types.StateOption;

/** 状态名称,G2 Element 开放 'active' | 'inactive' | 'selected' 三种状态 */
export type StateName = 'active' | 'inactive' | 'selected';
/** 状态名称,G2 Element 开放 'active' | 'inactive' | 'selected' | 'default' 四种状态 */
export type StateName = 'active' | 'inactive' | 'selected' | 'default';

/** 状态条件 */
export type StateCondition = (data: Datum | Data) => boolean;
Expand Down

0 comments on commit 50a815a

Please sign in to comment.