feat(line): support lineShape config (#2053)

* feat(line): support lineShape config

* feat(line): do not affect stepType config

Author: lessmost

__tests__/unit/plots/line/line-mapping-spec.ts

@@ -0,0 +1,44 @@
+import { Line } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+import { salesByArea, subSalesByArea } from '../../../data/sales';
+
+describe('line shape', () => {
+  it('undefined shape', () => {
+    const plot = new Line(createDiv('undefined mapping'), {
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+    });
+
+    expect(() => plot.render()).not.toThrow();
+  });
+
+  it('shape mapping, value', () => {
+    const plot = new Line(createDiv('shape mapping'), {
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+      lineShape: 'hvh',
+    });
+    plot.render();
+
+    expect(plot.chart.geometries[0].attributes.shape.values).toEqual(['hvh']);
+  });
+
+  it('shape mapping, callback', () => {
+    const shapeCallback = (datum) => ({ 公司: 'smooth', 小型企业: 'line', 消费者: 'hv' }[datum.series]);
+    const plot = new Line(createDiv('shape mapping'), {
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      seriesField: 'series',
+      lineShape: shapeCallback,
+    });
+    plot.render();
+
+    plot.chart.geometries[0].elements.forEach((element) => {
+      const model = element.getModel();
+      expect(model.shape).toBe(shapeCallback(model.data[0]));
+    });
+  });
+});

src/adaptor/geometries/line.ts

@@ -1,17 +1,9 @@
+import { deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { ColorAttr, StyleAttr, SizeAttr } from '../../types';
+import { ColorAttr, StyleAttr, SizeAttr, ShapeAttr } from '../../types';
 import { getTooltipMapping } from '../../utils/tooltip';
 import { deepAssign } from '../../utils';
-import { GeometryOptions, geometry } from './base';
-
-type LineOption = {
-  /** line color 映射, 提供回调的方式, 不开放 field 映射配置 */
-  readonly color?: ColorAttr;
-  /** 样式映射 */
-  readonly style?: StyleAttr;
-  /** 折线宽度 */
-  readonly size?: SizeAttr;
-};
+import { GeometryOptions, geometry, MappingOptions } from './base';
 
 export interface LineGeometryOptions extends GeometryOptions {
   /** x 轴字段 */
@@ -25,7 +17,7 @@ export interface LineGeometryOptions extends GeometryOptions {
   /** 是否连接空数据 */
   readonly connectNulls?: boolean;
   /** line 映射配置 */
-  readonly line?: LineOption;
+  readonly line?: MappingOptions;
   /** 阶梯折线图类型 */
   readonly stepType?: string;
 }
@@ -48,11 +40,13 @@ export function line<O extends LineGeometryOptions>(params: Params<O>): Params<O
             type: 'line',
             colorField: seriesField,
             tooltipFields: fields,
-            mapping: {
-              shape: stepType || (smooth ? 'smooth' : 'line'),
-              tooltip: formatter,
-              ...line,
-            },
+            mapping: deepMix(
+              {
+                shape: stepType || (smooth ? 'smooth' : 'line'),
+                tooltip: formatter,
+              },
+              line
+            ),
             args: { connectNulls },
           },
         })

src/plots/line/adaptor.ts

@@ -14,7 +14,7 @@ import { LineOptions } from './types';
  */
 function geometry(params: Params<LineOptions>): Params<LineOptions> {
   const { chart, options } = params;
-  const { data, color, lineStyle, point: pointMapping, seriesField } = options;
+  const { data, color, lineStyle, lineShape, point: pointMapping, seriesField } = options;
 
   chart.data(data);
 
@@ -25,6 +25,7 @@ function geometry(params: Params<LineOptions>): Params<LineOptions> {
       line: {
         color,
         style: lineStyle,
+        shape: lineShape,
       },
       // 颜色保持一致，因为如果颜色不一致，会导致 tooltip 中元素重复。
       // 如果存在，才设置，否则为空

src/plots/line/types.ts

@@ -1,4 +1,4 @@
-import { PointGeometryOptions } from '../../adaptor/geometries';
+import { LineGeometryOptions, PointGeometryOptions } from '../../adaptor/geometries';
 import { Options, StyleAttr } from '../../types';
 
 export interface LineOptions extends Options {
@@ -18,6 +18,8 @@ export interface LineOptions extends Options {
   readonly connectNulls?: boolean;
   /** 折线图形样式 */
   readonly lineStyle?: StyleAttr;
+  /** 折线 shape 配置 */
+  readonly lineShape?: LineGeometryOptions['line']['shape'];
   /** 折线数据点图形样式 */
   readonly point?: PointGeometryOptions['point'];
 }