feat: 折线图、面积图支持 customInfo 配置 (#2937)

* feat(line): 折线图支持 customInfo 配置 * feat(area): 面积图支持 customInfo 添加类型定义 & 文档 & 单测
antvis · Oct 23, 2021 · 71b23a4 · 71b23a4
1 parent ab8cbe6
commit 71b23a4
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 12 deletions.
diff --git a/__tests__/unit/plots/area/index-spec.ts b/__tests__/unit/plots/area/index-spec.ts
@@ -39,8 +39,8 @@ describe('area', () => {
 
     area.render();
 
-    expect(area.chart.getScaleByField('x').type).toBe('cat');
-    expect(area.chart.getScaleByField('x').range).toEqual([1 / 8, 7 / 8]);
+    expect(area.chart.getScale('x').type).toBe('cat');
+    expect(area.chart.getScale('x').range).toEqual([1 / 8, 7 / 8]);
     area.update({
       ...area.options,
       meta: {
@@ -52,7 +52,7 @@ describe('area', () => {
     });
 
     expect(area.options.meta.x.type).toBe('linear');
-    expect(area.chart.getScaleByField('x').range).toEqual([0.1, 0.9]);
+    expect(area.chart.getScale('x').range).toEqual([0.1, 0.9]);
 
     area.destroy();
   });
@@ -126,6 +126,32 @@ describe('area', () => {
     plot.destroy();
   });
 
+  it('customInfo', () => {
+    const data = [
+      { x: 1, y: 1 },
+      { x: 2, y: 4 },
+      { x: 3, y: 5 },
+      { x: 4, y: 2 },
+    ];
+    const area = new Area(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: data,
+      xField: 'x',
+      yField: 'y',
+      customInfo: { test: 'hello' },
+      line: {},
+    });
+
+    area.render();
+
+    // @ts-ignore
+    expect(area.chart.geometries[0].customOption).toEqual({ test: 'hello' });
+    // @ts-ignore
+    expect(area.chart.geometries[1].customOption).toEqual({ test: 'hello' });
+  });
+
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Area.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });

diff --git a/__tests__/unit/plots/line/index-spec.ts b/__tests__/unit/plots/line/index-spec.ts
@@ -91,6 +91,31 @@ describe('line', () => {
     line.destroy();
   });
 
+  it('customInfo', () => {
+    const data = [
+      { x: 1, y: 1 },
+      { x: 2, y: 4 },
+      { x: 3, y: 5 },
+      { x: 4, y: 2 },
+    ];
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: data,
+      xField: 'x',
+      yField: 'y',
+      customInfo: {
+        test: 'hello',
+      },
+    });
+
+    line.render();
+    // @ts-ignore
+    expect(line.chart.geometries[0].customOption).toEqual({ test: 'hello' });
+    line.destroy();
+  });
+
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Line.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });

diff --git a/docs/api/plots/area.en.md b/docs/api/plots/area.en.md
@@ -114,3 +114,16 @@ Point graphic style in the Area.
 ### Plot Theme
 
 `markdown:docs/common/theme.en.md`
+
+### Plot Interactions
+
+`markdown:docs/common/interactions.en.md`
+
+### Customize ✨
+
+#### customInfo
+
+<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
@@ -102,3 +102,28 @@ order: 1
 ### 图表组件
 
 `markdown:docs/common/component.zh.md`
+
+### 图表事件
+
+`markdown:docs/common/events.zh.md`
+
+### 图表方法
+
+`markdown:docs/common/chart-methods.zh.md`
+
+### 图表交互
+
+`markdown:docs/common/interactions.zh.md`
+
+### 图表主题
+
+`markdown:docs/common/theme.zh.md`
+
+### 自定义 ✨
+
+#### customInfo
+
+<description>**可选** _any_</description>
+
+通过 `customInfo` 属性，可以向 shape 中传入自定义的数据。目前可能仅仅可能用于在 `registerShape` 的时候，像自定义 shape 中传入自定义的数据，方便实现自定义 shape 的配置能力。
+
diff --git a/docs/api/plots/line.en.md b/docs/api/plots/line.en.md
@@ -115,3 +115,12 @@ Polyline data point graph style.
 ### Plot Interactions
 
 `markdown:docs/common/interactions.en.md`
+
+### Customize ✨
+
+#### customInfo
+
+<description>**optional** _any_</description>
+
+通过 `customInfo` 属性，可以向 shape 中传入自定义的数据。目前可能仅仅可能用于在 `registerShape` 的时候，像自定义 shape 中传入自定义的数据，方便实现自定义 shape 的配置能力。
+
diff --git a/docs/api/plots/line.zh.md b/docs/api/plots/line.zh.md
@@ -108,10 +108,19 @@ const data = [
 
 `markdown:docs/common/chart-methods.zh.md`
 
+### 图表交互
+
+`markdown:docs/common/interactions.zh.md`
+
 ### 图表主题
 
 `markdown:docs/common/theme.zh.md`
 
-### 图表交互
+### 自定义 ✨
+
+#### customInfo
+
+<description>**可选** _any_</description>
+
+通过 `customInfo` 属性，可以向 shape 中传入自定义的数据。目前可能仅仅可能用于在 `registerShape` 的时候，像自定义 shape 中传入自定义的数据，方便实现自定义 shape 的配置能力。
 
-`markdown:docs/common/interactions.zh.md`
diff --git a/src/adaptor/geometries/base.ts b/src/adaptor/geometries/base.ts
@@ -50,6 +50,8 @@ export type Geometry = {
   readonly label?: Label;
   /** 不同状态的样式 */
   readonly state?: State;
+  /** 自定义信息，一般在 registerShape 中使用 */
+  readonly customInfo?: any;
   /** geometry params */
   readonly args?: any;
 };
@@ -139,8 +141,20 @@ export function getMappingFunction(mappingFields: string[], func: (datum: Datum)
  */
 export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O> {
   const { chart, options } = params;
-  const { type, args, mapping, xField, yField, colorField, shapeField, sizeField, tooltipFields, label, state } =
-    options;
+  const {
+    type,
+    args,
+    mapping,
+    xField,
+    yField,
+    colorField,
+    shapeField,
+    sizeField,
+    tooltipFields,
+    label,
+    state,
+    customInfo,
+  } = options;
 
   // 如果没有 mapping 信息，那么直接返回
   if (!mapping) {
@@ -244,6 +258,13 @@ export function geometry<O extends GeometryOptions>(params: Params<O>): Params<O
     geometry.state(state);
   }
 
+  /**
+   * 自定义信息
+   */
+  if (customInfo) {
+    geometry.customInfo(customInfo);
+  }
+
   // 防止因为 x y 字段做了通道映射，导致生成图例
   [xField, yField]
     .filter((f: string) => f !== colorField)

diff --git a/src/adaptor/geometries/index.ts b/src/adaptor/geometries/index.ts
@@ -1,3 +1,4 @@
+export type { GeometryOptions } from './base';
 export { area } from './area';
 export type { AreaGeometryOptions } from './area';
 export { line } from './line';

diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts
@@ -1,9 +1,8 @@
-import { PointGeometryOptions } from '../../adaptor/geometries';
+import { GeometryOptions, LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
-import { LineGeometryOptions } from '../../adaptor/geometries';
 
 /** 面积图的配置类型定义 */
-export interface AreaOptions extends Options {
+export interface AreaOptions extends Options, Pick<GeometryOptions, 'customInfo'> {
   /** x 轴字段 */
   readonly xField?: string;
   /** y 轴字段 */

diff --git a/src/plots/line/types.ts b/src/plots/line/types.ts
@@ -1,7 +1,7 @@
-import { LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
+import { GeometryOptions, LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
 
-export interface LineOptions extends Options {
+export interface LineOptions extends Options, Pick<GeometryOptions, 'customInfo'> {
   /** 阶梯折线图类型 */
   readonly stepType?: string;
   /** x 轴字段 */