feat(second-geometry): 辅助几何图形 point 支持独立设置 state style (#2429)

* feat(second-geometry): 辅助几何图形 point 支持独立设置 state style * test: 延长delay时间，让单测通过
antvis · Mar 17, 2021 · 7d0a530 · 7d0a530
1 parent 52fb147
commit 7d0a530
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 73 deletions.
diff --git a/__tests__/bugs/issue-2220-spec.ts b/__tests__/bugs/issue-2220-spec.ts
@@ -34,7 +34,7 @@ describe('pie tooltip', () => {
 
     await delay(80);
     pie.chart.showTooltip(point);
-    await delay(100);
+    await delay(300);
     // @ts-ignore
     let items = tooltipController.getTooltipItems(point);
     expect(items[0].name).toBe('xxx');

diff --git a/docs/common/point-style.en.md b/docs/common/point-style.en.md
@@ -4,3 +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)` |
diff --git a/docs/common/point-style.zh.md b/docs/common/point-style.zh.md
@@ -4,3 +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)` |
diff --git a/examples/dual-axes/column-line/demo/slider-culumn-line.ts b/examples/dual-axes/column-line/demo/slider-culumn-line.ts
diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts
@@ -1,6 +1,6 @@
 import { Geometry } from '@antv/g2';
 import { each } from '@antv/util';
-import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot, state } from '../../adaptor/common';
+import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot } from '../../adaptor/common';
 import { findGeometry } from '../../utils';
 import { Params } from '../../core/adaptor';
 import { area, point, line } from '../../adaptor/geometries';
@@ -30,6 +30,8 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
     tooltip,
     seriesField,
   } = options;
+  const pointState = pointMapping?.state;
+
   const chartData = getDataWhetherPecentage(data, yField, xField, yField, isPercent);
   chart.data(chartData);
   // 百分比堆积图，默认会给一个 % 格式化逻辑, 用户可自定义
@@ -61,11 +63,12 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
     },
   });
   const second = deepAssign({}, primary, { options: { tooltip: false } });
+  const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
 
   // area geometry 处理
   area(primary);
   line(second);
-  point(second);
+  point(pointParams);
 
   return params;
 }
@@ -131,7 +134,6 @@ export function adaptor(params: Params<AreaOptions>) {
     meta,
     adjust,
     theme,
-    state,
     axis,
     legend,
     tooltip,

diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts
@@ -21,5 +21,5 @@ export interface AreaOptions extends Options {
   /** 面积中折线的样式 */
   readonly line?: LineGeometryOptions['line'];
   /** 面积图数据点图形样式 */
-  readonly point?: PointGeometryOptions['point'];
+  readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
 }
diff --git a/src/plots/line/adaptor.ts b/src/plots/line/adaptor.ts
@@ -15,6 +15,7 @@ import { LineOptions } from './types';
 function geometry(params: Params<LineOptions>): Params<LineOptions> {
   const { chart, options } = params;
   const { data, color, lineStyle, lineShape, point: pointMapping, seriesField } = options;
+  const pointState = pointMapping?.state;
 
   chart.data(data);
 
@@ -38,7 +39,7 @@ function geometry(params: Params<LineOptions>): Params<LineOptions> {
       label: undefined,
     },
   });
-  const second = deepAssign({}, primary, { options: { tooltip: false } });
+  const second = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
 
   line(primary);
   point(second);

diff --git a/src/plots/line/types.ts b/src/plots/line/types.ts
@@ -20,6 +20,6 @@ export interface LineOptions extends Options {
   readonly lineStyle?: StyleAttr;
   /** 折线 shape 配置 */
   readonly lineShape?: Required<LineGeometryOptions>['line']['shape'];
-  /** 折线数据点图形样式 */
-  readonly point?: PointGeometryOptions['point'];
+  /** 折线数据点：1、图形映射属性 2、状态样式 */
+  readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
 }
diff --git a/src/plots/radar/adaptor.ts b/src/plots/radar/adaptor.ts
@@ -12,6 +12,8 @@ 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
@@ -43,9 +45,10 @@ function geometry(params: Params<RadarOptions>): Params<RadarOptions> {
       tooltip: false,
     },
   });
+  const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
 
   line(primary);
-  point(second);
+  point(pointParams);
   area(second);
 
   return params;

diff --git a/src/plots/radar/types.ts b/src/plots/radar/types.ts
@@ -13,7 +13,7 @@ export interface RadarOptions extends Options {
   /** 折线图形样式 */
   readonly lineStyle?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle);
   /** 数据点图形样式 */
-  readonly point?: PointGeometryOptions['point'];
+  readonly point?: PointGeometryOptions['point'] & Pick<PointGeometryOptions, 'state'>;
   /** area 图形样式, 均提供回调的方式, 不开放 field 映射配置 */
   readonly area?: AreaGeometryOptions['area'];
   /** 角度轴配置 */

diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts
@@ -14,6 +14,7 @@ import { TinyAreaOptions } from './types';
 function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
   const { chart, options } = params;
   const { data, color, areaStyle, point: pointOptions, line: lineOptions } = options;
+  const pointState = pointOptions?.state;
 
   const seriesData = getTinyData(data);
 
@@ -29,11 +30,12 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
     },
   });
   const second = deepAssign({}, primary, { options: { tooltip: false } });
+  const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
 
   // area geometry 处理
   area(primary);
   line(second);
-  point(second);
+  point(pointParams);
 
   chart.axis(false);
   chart.legend(false);

diff --git a/src/plots/tiny-area/types.ts b/src/plots/tiny-area/types.ts
@@ -1,5 +1,6 @@
 import { Options, StyleAttr } from '../../types';
 import { MappingOptions } from '../../adaptor/geometries/base';
+import { PointGeometryOptions } from '../../adaptor/geometries/point';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
 export interface TinyAreaOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
@@ -12,5 +13,5 @@ export interface TinyAreaOptions extends Omit<Options, 'data' | 'legend' | 'labe
   /** 面积折线图形样式 */
   readonly line?: MappingOptions;
   /** 面积点图形样式 */
-  readonly point?: MappingOptions;
+  readonly point?: MappingOptions & Pick<PointGeometryOptions, 'state'>;
 }
diff --git a/src/plots/tiny-line/adaptor.ts b/src/plots/tiny-line/adaptor.ts
@@ -17,6 +17,8 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   const { chart, options } = params;
   const { data, color, lineStyle, point: pointMapping } = options;
 
+  const pointState = pointMapping?.state;
+
   const seriesData = getTinyData(data);
 
   chart.data(seriesData);
@@ -33,10 +35,10 @@ function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
       point: pointMapping,
     },
   });
-  const second = deepAssign({}, primary, { options: { tooltip: false } });
+  const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } });
 
   line(primary);
-  point(second);
+  point(pointParams);
 
   chart.axis(false);
   chart.legend(false);

diff --git a/src/plots/tiny-line/types.ts b/src/plots/tiny-line/types.ts
@@ -1,5 +1,6 @@
 import { Options, StyleAttr } from '../../types';
 import { MappingOptions } from '../../adaptor/geometries/base';
+import { PointGeometryOptions } from '../../adaptor/geometries/point';
 
 /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */
 export interface TinyLineOptions extends Omit<Options, 'data' | 'legend' | 'label'> {
@@ -12,5 +13,5 @@ export interface TinyLineOptions extends Omit<Options, 'data' | 'legend' | 'labe
   /** 折线图形样式 */
   readonly lineStyle?: StyleAttr;
   /** 折线点图形样式 */
-  readonly point?: MappingOptions;
+  readonly point?: MappingOptions & Pick<PointGeometryOptions, 'state'>;
 }