feat(custom shape): support custom shape for area/waterfall/radial-ba…

…r/rose/sunburst plot (#3495) * feat: 瀑布图支持自定义形状 * feat: 玉珏图支持自定义形状 * feat: 面积图支持自定义形状 * feat: 玫瑰图支持自定义形状 * feat: 旭日图支持自定义形状 --------- Co-authored-by: 可鉴 <jane.zkj@alibaba-inc.com>
antvis · Mar 16, 2023 · 6506771 · 6506771
1 parent 9f0a25e
commit 6506771
Show file tree

Hide file tree

Showing 16 changed files with 244 additions and 24 deletions.
diff --git a/__tests__/unit/plots/area/index-spec.ts b/__tests__/unit/plots/area/index-spec.ts
@@ -1,4 +1,4 @@
-import { Area } from '../../../../src';
+import { G2, Area } from '../../../../src';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/area/constants';
 import { partySupport } from '../../../data/party-support';
 import { createDiv } from '../../../utils/dom';
@@ -152,6 +152,45 @@ describe('area', () => {
     expect(area.chart.geometries[1].customOption).toEqual({ test: 'hello' });
   });
 
+  it('custom shape', () => {
+    G2.registerShape('area', 'my-custom-area', {
+      draw(shapeInfo, container) {
+        return container.addShape('circle', {
+          attrs: {
+            x: 100,
+            y: 100,
+            r: 4,
+          },
+        });
+      },
+    });
+    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',
+      areaShape: 'my-custom-area',
+      customInfo: { test: 'hello' },
+      line: {
+        shape: 'smooth',
+      },
+    });
+    area.render();
+
+    // @ts-ignore shapeType 是私有属性
+    expect(area.chart.geometries[0].elements[0].shapeType).toBe('my-custom-area');
+    // @ts-ignore shapeType 是私有属性
+    expect(area.chart.geometries[1].elements[0].shapeType).toBe('smooth');
+  });
+
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Area.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });

diff --git a/__tests__/unit/plots/radial-bar/index-spec.ts b/__tests__/unit/plots/radial-bar/index-spec.ts
@@ -1,4 +1,4 @@
-import { RadialBar } from '../../../../src';
+import { G2, RadialBar } from '../../../../src';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/radial-bar/constant';
 import { antvStar } from '../../../data/antv-star';
 import { createDiv } from '../../../utils/dom';
@@ -184,4 +184,36 @@ describe('radial-bar', () => {
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(RadialBar.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });
+
+  it('custom shape', () => {
+    let customInfo: any = null;
+    G2.registerShape('interval', 'my-custom-interval', {
+      draw(shapeInfo, container) {
+        // 存起来用于单测
+        customInfo = shapeInfo.customInfo;
+        return container.addShape('circle', {
+          attrs: {
+            x: 100,
+            y: 100,
+            r: 4,
+          },
+        });
+      },
+    });
+    const bar = new RadialBar(createDiv(), {
+      width: 400,
+      height: 300,
+      data: antvStar,
+      xField,
+      yField,
+      colorField: yField,
+      shape: 'my-custom-interval',
+      customInfo: { test: 'hello' },
+    });
+    bar.render();
+
+    // @ts-ignore shapeType 是私有属性
+    expect(bar.chart.geometries[0].elements[0].shapeType).toBe('my-custom-interval');
+    expect(customInfo).toEqual({ test: 'hello' });
+  });
 });
diff --git a/__tests__/unit/plots/rose/index-spec.ts b/__tests__/unit/plots/rose/index-spec.ts
@@ -1,4 +1,4 @@
-import { Rose } from '../../../../src';
+import { G2, Rose } from '../../../../src';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/rose/constant';
 import { salesByArea, subSalesByArea } from '../../../data/sales';
 import { createDiv } from '../../../utils/dom';
@@ -82,6 +82,41 @@ describe('rose', () => {
     rose.destroy();
   });
 
+  it('custom shape', () => {
+    let customInfo: any = null;
+    G2.registerShape('interval', 'my-custom-interval', {
+      draw(shapeInfo, container) {
+        // 存起来用于单测
+        customInfo = shapeInfo.customInfo;
+        return container.addShape('circle', {
+          attrs: {
+            x: 100,
+            y: 100,
+            r: 4,
+          },
+        });
+      },
+    });
+    const rose = new Rose(createDiv('stacked rose'), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      seriesField: 'series',
+      shape: 'my-custom-interval',
+      customInfo: {
+        test: 'hello',
+      },
+    });
+
+    rose.render();
+
+    // @ts-ignore shapeType 是私有属性
+    expect(rose.chart.geometries[0].elements[0].shapeType).toBe('my-custom-interval');
+    expect(customInfo).toEqual({ test: 'hello' });
+  });
+
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Rose.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });

diff --git a/__tests__/unit/plots/sunburst/index-spec.ts b/__tests__/unit/plots/sunburst/index-spec.ts
@@ -1,4 +1,4 @@
-import { Sunburst } from '../../../../src';
+import { G2, Sunburst } from '../../../../src';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/sunburst/constant';
 import { SIMPLE_SUNBURST_DATA } from '../../../data/sunburst';
 import { delay } from '../../../utils/delay';
@@ -121,6 +121,34 @@ describe('sunburst', () => {
     expect(plot.chart.geometries[0].elements.length).toBe(SIMPLE_SUNBURST_DATA.children.length);
   });
 
+  it('custom shape', () => {
+    let customInfo: any = null;
+    G2.registerShape('polygon', 'my-custom-polygon', {
+      draw(shapeInfo, container) {
+        // 存起来用于单测
+        customInfo = shapeInfo.customInfo;
+        return container.addShape('circle', {
+          attrs: {
+            x: 100,
+            y: 100,
+            r: 4,
+          },
+        });
+      },
+    });
+
+    plot.update({
+      shape: 'my-custom-polygon',
+      customInfo: {
+        test: 'hello',
+      },
+    });
+
+    // @ts-ignore shapeType 是私有属性
+    expect(plot.chart.geometries[0].elements[0].shapeType).toBe('my-custom-polygon');
+    expect(customInfo).toEqual({ test: 'hello' });
+  });
+
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Sunburst.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });

diff --git a/__tests__/unit/plots/waterfall/index-spec.ts b/__tests__/unit/plots/waterfall/index-spec.ts
@@ -1,4 +1,4 @@
-import { Waterfall } from '../../../../src';
+import { G2, Waterfall } from '../../../../src';
 import { DEFAULT_OPTIONS } from '../../../../src/plots/waterfall/constant';
 import { createDiv } from '../../../utils/dom';
 
@@ -88,4 +88,26 @@ describe('waterfall plot', () => {
   it('defaultOptions 保持从 constants 中获取', () => {
     expect(Waterfall.getDefaultOptions()).toEqual(DEFAULT_OPTIONS);
   });
+
+  it('custom shape', () => {
+    let customInfo: any = null;
+    G2.registerShape('interval', 'my-custom-interval', {
+      draw(shapeInfo, container) {
+        // 存起来用于单测
+        customInfo = shapeInfo.customInfo;
+        return container.addShape('circle', {
+          attrs: {
+            x: 100,
+            y: 100,
+            r: 4,
+          },
+        });
+      },
+    });
+    waterfall.update({ ...waterfall.options, shape: 'my-custom-interval', customInfo: { test: 'hello' } });
+
+    // @ts-ignore shapeType 是私有属性
+    expect(waterfall.chart.geometries[0].elements[0].shapeType).toBe('my-custom-interval');
+    expect(customInfo?.test).toEqual('hello');
+  });
 });
diff --git a/src/adaptor/geometries/area.ts b/src/adaptor/geometries/area.ts
@@ -1,3 +1,4 @@
+import { deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { deepAssign } from '../../utils';
 import { getTooltipMapping } from '../../utils/tooltip';
@@ -34,11 +35,13 @@ export function area<O extends AreaGeometryOptions>(params: Params<O>): Params<O
             type: 'area',
             colorField: seriesField,
             tooltipFields: fields,
-            mapping: {
-              shape: smooth ? 'smooth' : 'area',
-              tooltip: formatter,
-              ...area,
-            },
+            mapping: deepMix(
+              {
+                shape: smooth ? 'smooth' : 'area',
+                tooltip: formatter,
+              },
+              area
+            ),
             args: { useDeferredLabel },
           },
         })

diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts
@@ -30,6 +30,7 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
   const {
     data,
     areaStyle,
+    areaShape,
     color,
     point: pointMapping,
     line: lineMapping,
@@ -56,7 +57,11 @@ function geometry(params: Params<AreaOptions>): Params<AreaOptions> {
     : tooltip;
   const primary = deepAssign({}, params, {
     options: {
-      area: { color, style: areaStyle },
+      area: {
+        color,
+        style: areaStyle,
+        shape: areaShape,
+      },
       point: pointMapping && {
         color,
         ...pointMapping,

diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts
@@ -1,4 +1,9 @@
-import { GeometryOptions, LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
+import {
+  GeometryOptions,
+  AreaGeometryOptions,
+  LineGeometryOptions,
+  PointGeometryOptions,
+} from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
 import { Transformations } from '../../types/coordinate';
 
@@ -35,6 +40,10 @@ export interface AreaOptions extends Options, Pick<GeometryOptions, 'customInfo'
    * @title 面积图形样式
    */
   readonly areaStyle?: StyleAttr;
+  /**
+   * @title 面积 shape 配置
+   */
+  readonly areaShape?: Required<AreaGeometryOptions>['area']['shape'];
   /**
    * @title 面积中折线的样式
    */

diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts
@@ -12,7 +12,7 @@ import { getScaleMax, getStackedData } from './utils';
  */
 function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
   const { chart, options } = params;
-  const { barStyle: style, color, tooltip, colorField, type, xField, yField, data } = options;
+  const { barStyle: style, color, tooltip, colorField, type, xField, yField, data, shape } = options;
 
   // 处理不合法的数据
   const processData = processIllegalData(data, yField);
@@ -25,7 +25,7 @@ function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
       interval: {
         style,
         color,
-        shape: type === 'line' ? 'line' : 'intervel',
+        shape: shape || (type === 'line' ? 'line' : 'intervel'),
       },
       // 柱子的一些样式设置：柱子最小宽度、柱子最大宽度、柱子背景
       minColumnWidth: options.minBarWidth,

diff --git a/src/plots/radial-bar/types.ts b/src/plots/radial-bar/types.ts
@@ -1,9 +1,13 @@
 import { ShapeAttrs } from '@antv/g-base';
+import { GeometryOptions } from '../../adaptor/geometries';
 import { Options } from '../../types';
 import { BarOptions } from '../bar';
 
 /** 配置类型定义 */
-export interface RadialBarOptions extends Options, Pick<BarOptions, 'barBackground' | 'minBarWidth' | 'maxBarWidth'> {
+export interface RadialBarOptions
+  extends Options,
+    Pick<BarOptions, 'barBackground' | 'minBarWidth' | 'maxBarWidth'>,
+    Pick<GeometryOptions, 'customInfo'> {
   /**
    * @title x轴字段
    */
@@ -55,4 +59,9 @@ export interface RadialBarOptions extends Options, Pick<BarOptions, 'barBackgrou
    * @default false
    */
   readonly isGroup?: boolean;
+  /**
+   * @title 自定义玉珏图
+   * @description interval/line 图形元素展示形状
+   */
+  readonly shape?: string;
 }
diff --git a/src/plots/rose/adaptor.ts b/src/plots/rose/adaptor.ts
@@ -11,7 +11,7 @@ import { RoseOptions } from './types';
  */
 function geometry(params: Params<RoseOptions>): Params<RoseOptions> {
   const { chart, options } = params;
-  const { data, sectorStyle, color } = options;
+  const { data, sectorStyle, shape, color } = options;
 
   // 装载数据
   chart.data(data);
@@ -23,6 +23,7 @@ function geometry(params: Params<RoseOptions>): Params<RoseOptions> {
         interval: {
           style: sectorStyle,
           color,
+          shape: shape,
         },
       },
     })

diff --git a/src/plots/rose/types.ts b/src/plots/rose/types.ts
@@ -1,6 +1,7 @@
+import { GeometryOptions, IntervalGeometryOptions } from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
 
-export interface RoseOptions extends Options {
+export interface RoseOptions extends Options, Pick<GeometryOptions, 'customInfo'> {
   /**
    * @title 扇形切片分类所对应的数据字段名
    * @description 每个扇形的弧度相等
@@ -47,4 +48,9 @@ export interface RoseOptions extends Options {
    * @description sectorStyle 中的fill会覆盖 color 的配置,sectorStyle 可以直接指定，也可以通过 callback 的方式，根据数据为每个扇形切片指定单独的样式
    */
   readonly sectorStyle?: StyleAttr;
+  /**
+   * @title 扇形自定义形状
+   * @description interval 图形元素展示形状
+   */
+  readonly shape?: Required<IntervalGeometryOptions>['interval']['shape'];
 }
diff --git a/src/plots/sunburst/adaptor.ts b/src/plots/sunburst/adaptor.ts
@@ -24,7 +24,7 @@ import { transformData } from './utils';
  */
 function geometry(params: Params<SunburstOptions>): Params<SunburstOptions> {
   const { chart, options } = params;
-  const { color, colorField = SUNBURST_ANCESTOR_FIELD, sunburstStyle, rawFields = [] } = options;
+  const { color, colorField = SUNBURST_ANCESTOR_FIELD, sunburstStyle, rawFields = [], shape } = options;
   const data = transformData(options);
   chart.data(data);
 
@@ -53,6 +53,7 @@ function geometry(params: Params<SunburstOptions>): Params<SunburstOptions> {
         polygon: {
           color,
           style,
+          shape,
         },
       },
     })