From 50a815aba93fed3f97ada8426f0726911480e940 Mon Sep 17 00:00:00 2001 From: Visiky <736929286@qq.com> Date: Mon, 24 May 2021 09:44:40 +0800 Subject: [PATCH] =?UTF-8?q?fix(#2573):=20=E4=BF=AE=E5=A4=8D=E9=9B=B7?= =?UTF-8?q?=E8=BE=BE=E5=9B=BE=E8=AE=BE=E7=BD=AE=20point=20state=20?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=B7=E5=BC=8F=E4=B8=8D=E7=94=9F=E6=95=88?= =?UTF-8?q?=20(#2577)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(radar): 雷达图辅助元素 point 默认继承主元素 state 设置(非 mix) * test(issue-2573): 增加单测 --- __tests__/bugs/issue-2573-spec.ts | 68 +++++++++++++++++++++++++++++++ docs/common/point-style.en.md | 2 +- docs/common/point-style.zh.md | 2 +- src/plots/radar/adaptor.ts | 4 +- src/types/state.ts | 4 +- 5 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 __tests__/bugs/issue-2573-spec.ts diff --git a/__tests__/bugs/issue-2573-spec.ts b/__tests__/bugs/issue-2573-spec.ts new file mode 100644 index 0000000000..44e37f1ccf --- /dev/null +++ b/__tests__/bugs/issue-2573-spec.ts @@ -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(); + }); +}); diff --git a/docs/common/point-style.en.md b/docs/common/point-style.en.md index 10c21b8c90..c134aec7dc 100644 --- a/docs/common/point-style.en.md +++ b/docs/common/point-style.en.md @@ -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) | diff --git a/docs/common/point-style.zh.md b/docs/common/point-style.zh.md index d02c9b831f..187ebc7ebf 100644 --- a/docs/common/point-style.zh.md +++ b/docs/common/point-style.zh.md @@ -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) | diff --git a/src/plots/radar/adaptor.ts b/src/plots/radar/adaptor.ts index cf164f838b..ce22beaa53 100644 --- a/src/plots/radar/adaptor.ts +++ b/src/plots/radar/adaptor.ts @@ -12,8 +12,6 @@ function geometry(params: Params): Params { const { chart, options } = params; const { data, lineStyle, color, point: pointOptions, area: areaOptions } = options; - const pointState = pointOptions?.state; - chart.data(data); // 雷达图 主 geometry @@ -45,6 +43,8 @@ function geometry(params: Params): Params { tooltip: false, }, }); + // 优先使用 point.state, 其次取主元素的 state 状态样式配置 + const pointState = pointOptions?.state || options.state; const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } }); line(primary); diff --git a/src/types/state.ts b/src/types/state.ts index fddaee84da..e1017432d3 100644 --- a/src/types/state.ts +++ b/src/types/state.ts @@ -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;