feat(area): 面积图支持line独立设置state，避免填充颜色出现问题 (#3053)

visiky · web-flow · commit 54342e6fc08e · 2021-12-28T11:40:45.000+08:00
* feat(area): 面积图支持line独立设置state，避免填充颜色出现问题

* docs(area): 面积图增加 line state 文档 api 说明

* fix(area): 修复 ci 单测问题
diff --git a/__tests__/unit/plots/area/state-spec.ts b/__tests__/unit/plots/area/state-spec.ts
@@ -0,0 +1,100 @@
+import { Area } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('area state', () => {
+  const data = partySupport.filter((o) => ['FF', 'Lab'].includes(o.type));
+  const options = {
+    width: 400,
+    height: 300,
+    data,
+    xField: 'date',
+    yField: 'value',
+    seriesField: 'type',
+    line: {
+      style: {
+        lineWidth: 1,
+      },
+    },
+    appendPadding: 10,
+  };
+
+  it('set statesStyle', () => {
+    const plot = new Area(createDiv(), {
+      ...options,
+      animation: false,
+      state: {
+        selected: {
+          style: {
+            lineWidth: 4,
+            fill: 'red',
+          },
+        },
+        inactive: {
+          style: {
+            fill: 'blue',
+          },
+        },
+      },
+      line: {
+        state: {
+          selected: {
+            style: {
+              lineWidth: 4,
+            },
+          },
+        },
+      },
+    });
+
+    plot.render();
+
+    plot.setState('selected', (d: any) => (Array.isArray(d) ? d[0].type : d.type) === data[0].type);
+    const shape = plot.chart.geometries[0].elements[0].shape;
+    const lineShape = plot.chart.geometries[1].elements[0].shape;
+
+    expect(lineShape.attr('lineWidth')).toBe(4);
+    expect(lineShape.attr('fill')).not.toBe('red');
+    expect(shape.attr('fill')).toBe('red');
+
+    // // 取消 selected
+    plot.setState('selected', (d: any) => (Array.isArray(d) ? d[0].type : d.type) === data[0].type, false);
+    plot.setState('inactive', (d: any) => (Array.isArray(d) ? d[0].type : d.type) === data[0].type);
+    expect(shape.attr('fill')).toBe('blue');
+    expect(plot.getStates()[0].state).toBe('inactive');
+
+    plot.destroy();
+  });
+
+  it('set statesStyle by theme', () => {
+    const plot = new Area(createDiv(), {
+      ...options,
+      animation: false,
+      theme: {
+        geometries: {
+          area: {
+            area: {
+              active: {
+                style: {
+                  fill: 'yellow',
+                  fillOpacity: 0.65,
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+
+    plot.render();
+
+    plot.setState('active', (d: any) => (Array.isArray(d) ? d[0].type : d.type) === data[0].type);
+    const shape = plot.chart.geometries[0].elements[0].shape;
+
+    expect(shape.attr('fill')).toBe('yellow');
+    expect(shape.attr('fillOpacity')).toBe(0.65);
+    expect(plot.getStates()[0].state).toBe('active');
+
+    plot.destroy();
+  });
+});
diff --git a/docs/api/plots/area.en.md b/docs/api/plots/area.en.md
@@ -71,11 +71,12 @@ Area graphic style.
 
 Line graphic style in the Area.
 
-| Properties | Type                                     | Description        |
-| ---------- | ---------------------------------------- | ------------------ |
-| color      | _string \| string[] \| Function_         | Line color         |
-| style      | _ShapeStyle \| Function_                 | Line graphic style |
-| size       | _number \| [number, number] \| Function_ | Line width         |
+| Properties | Type                                     | Description                                |
+| ---------- | ---------------------------------------- | ------------------------------------------ |
+| color      | _string \| string[] \| Function_         | Line color                                 |
+| style      | _ShapeStyle \| Function_                 | Line graphic style                         |
+| size       | _number \| [number, number] \| Function_ | Line width                                 |
+| state      | _object_                                 | State style of line，details to see: [#state] |
 
 #### point
 
@@ -126,4 +127,3 @@ Point graphic style in the Area.
 <description>**optional** _any_</description>
 
 通过 `customInfo` 属性，可以向 shape 中传入自定义的数据。目前可能仅仅可能用于在 `registerShape` 的时候，像自定义 shape 中传入自定义的数据，方便实现自定义 shape 的配置能力。
-
diff --git a/docs/api/plots/area.zh.md b/docs/api/plots/area.zh.md
@@ -71,11 +71,12 @@ order: 1
 
 面积中折线的样式。
 
-| 细分配置项名称 | 类型                                     | 功能描述 |
-| -------------- | ---------------------------------------- | -------- |
-| color          | _string \| string[] \| Function_         | 颜色映射 |
-| style          | _ShapeStyle \| Function_                 | 样式映射 |
-| size           | _number \| [number, number] \| Function_ | 折线宽度 |
+| 细分配置项名称 | 类型                                     | 功能描述                                   |
+| -------------- | ---------------------------------------- | ------------------------------------------ |
+| color          | _string \| string[] \| Function_         | 颜色映射                                   |
+| style          | _ShapeStyle \| Function_                 | 样式映射                                   |
+| size           | _number \| [number, number] \| Function_ | 折线宽度                                   |
+| state          | _object_                                 | 面积图的描边折线的状态样式，类型同[#state] |
 
 #### point
 
@@ -126,4 +127,3 @@ order: 1
 <description>**可选** _any_</description>
 
 通过 `customInfo` 属性，可以向 shape 中传入自定义的数据。目前可能仅仅可能用于在 `registerShape` 的时候，像自定义 shape 中传入自定义的数据，方便实现自定义 shape 的配置能力。
-
diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts
@@ -1,5 +1,5 @@
 import { Geometry } from '@antv/g2';
-import { each } from '@antv/util';
+import { each, omit } from '@antv/util';
 import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot, pattern } from '../../adaptor/common';
 import { findGeometry } from '../../utils';
 import { Params } from '../../core/adaptor';
@@ -48,12 +48,6 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
   const primary = deepAssign({}, params, {
     options: {
       area: { color, style: areaStyle },
-      // 颜色保持一致，因为如果颜色不一致，会导致 tooltip 中元素重复。
-      // 如果存在，才设置，否则为空
-      line: lineMapping && {
-        color,
-        ...lineMapping,
-      },
       point: pointMapping && {
         color,
         ...pointMapping,
@@ -66,10 +60,26 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
       },
     },
   });
-  // 线默认 2px
-  const lineParams = deepAssign({ options: { line: { size: 2 } } }, primary, {
-    options: { sizeField: seriesField, tooltip: false },
-  });
+  // 线默认 2px (折线不能复用面积图的 state，因为 fill 和 stroke 不匹配)
+  const lineParams = {
+    chart,
+    options: deepAssign({ line: { size: 2 } }, omit(options as any, ['state']), {
+      // 颜色保持一致，因为如果颜色不一致，会导致 tooltip 中元素重复。
+      // 如果存在，才设置，否则为空
+      line: lineMapping && {
+        color,
+        ...lineMapping,
+      },
+      sizeField: seriesField,
+      state: lineMapping?.state,
+      tooltip: false,
+      // label 不传递给各个 geometry adaptor，由 label adaptor 处理
+      label: undefined,
+      args: {
+        startOnZero,
+      },
+    }),
+  };
   const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
 
   // area geometry 处理
diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts
@@ -18,7 +18,7 @@ export interface AreaOptions extends Options, Pick<GeometryOptions, 'customInfo'
   /** 面积图形样式 */
   readonly areaStyle?: StyleAttr;
   /** 面积中折线的样式 */
-  readonly line?: LineGeometryOptions['line'];
+  readonly line?: LineGeometryOptions['line'] & Pick<PointGeometryOptions, 'state'>;
   /** 面积图数据点图形样式 */
   readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
   /** 积图是否从 0 基准线开始填充 */
diff --git a/src/plots/line/adaptor.ts b/src/plots/line/adaptor.ts
@@ -16,6 +16,7 @@ function geometry(params: Params<LineOptions>): Params<LineOptions> {
   const { chart, options } = params;
   const { data, color, lineStyle, lineShape, point: pointMapping, area: areaMapping, seriesField } = options;
   const pointState = pointMapping?.state;
+  const areaState = areaMapping?.state;
 
   chart.data(data);
 
@@ -45,7 +46,7 @@ function geometry(params: Params<LineOptions>): Params<LineOptions> {
     },
   });
   const second = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
-  const areaParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
+  const areaParams = deepAssign({}, primary, { options: { tooltip: false, state: areaState } });
 
   line(primary);
   point(second);
diff --git a/src/plots/line/types.ts b/src/plots/line/types.ts
@@ -28,7 +28,7 @@ export interface LineOptions extends Options, Pick<GeometryOptions, 'customInfo'
   /** 折线数据点：1、图形映射属性 2、状态样式 */
   readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
   /** 折线趋势填充色：1、图形映射属性 */
-  readonly area?: AreaGeometryOptions['area'];
+  readonly area?: AreaGeometryOptions['area'] & Pick<PointGeometryOptions, 'state'>;
 
   // 其他
   /** 坐标轴反转配置 */
