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

antvis · Mar 15, 2021 · 03647c0 · 03647c0
1 parent 9ce38a4
commit 03647c0
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 95 deletions.
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';
@@ -18,18 +18,10 @@ export { meta };
  */
 function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
   const { chart, options } = params;
-  const {
-    data,
-    areaStyle,
-    color,
-    point: pointMapping,
-    line: lineMapping,
-    isPercent,
-    xField,
-    yField,
-    tooltip,
-    seriesField,
-  } = options;
+  const { data, areaStyle, color, line: lineMapping, isPercent, xField, yField, tooltip, seriesField } = options;
+
+  const { state: pointState, ...pointMapping } = options.point || {};
+
   const chartData = getDataWhetherPecentage(data, yField, xField, yField, isPercent);
   chart.data(chartData);
   // 百分比堆积图，默认会给一个 % 格式化逻辑, 用户可自定义
@@ -61,11 +53,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 +124,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
@@ -14,7 +14,8 @@ 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 { data, color, lineStyle, lineShape, seriesField } = options;
+  const { state: pointState, ...pointMapping } = options.point || {};
 
   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
@@ -10,7 +10,9 @@ import { RadarOptions } from './types';
  */
 function geometry(params: Params<RadarOptions>): Params<RadarOptions> {
   const { chart, options } = params;
-  const { data, lineStyle, color, point: pointOptions, area: areaOptions } = options;
+  const { data, lineStyle, color, area: areaOptions } = options;
+
+  const { state: pointState, ...pointMapping } = options.point || {};
 
   chart.data(data);
 
@@ -21,12 +23,10 @@ function geometry(params: Params<RadarOptions>): Params<RadarOptions> {
         style: lineStyle,
         color,
       },
-      point: pointOptions
-        ? {
-            color,
-            ...pointOptions,
-          }
-        : pointOptions,
+      point: pointMapping && {
+        color,
+        ...pointMapping,
+      },
       area: areaOptions
         ? {
             color,
@@ -43,9 +43,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
@@ -13,7 +13,8 @@ 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 { data, color, areaStyle, line: lineOptions } = options;
+  const { state: pointState, ...pointMapping } = options.point || {};
 
   const seriesData = getTinyData(data);
 
@@ -25,15 +26,16 @@ function geometry(params: Params<TinyAreaOptions>): Params<TinyAreaOptions> {
       yField: Y_FIELD,
       area: { color, style: areaStyle },
       line: lineOptions,
-      point: pointOptions,
+      point: pointMapping,
     },
   });
   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
@@ -15,7 +15,9 @@ export { meta };
  */
 function geometry(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
   const { chart, options } = params;
-  const { data, color, lineStyle, point: pointMapping } = options;
+  const { data, color, lineStyle } = options;
+
+  const { state: pointState, ...pointMapping } = options.point || {};
 
   const seriesData = getTinyData(data);
 
@@ -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'>;
 }