fix(#2573): 修复雷达图设置 point state 状态样式不生效 (#2577)

* feat(radar): 雷达图辅助元素 point 默认继承主元素 state 设置(非 mix)

* test(issue-2573): 增加单测

Author: visiky

__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();
+  });
+});

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) |

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) |

src/plots/radar/adaptor.ts

@@ -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
@@ -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);

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;