feat(line): add line options

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

@@ -0,0 +1,61 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('x*y and label', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      appendPadding: 10,
+      label: {
+        layout: {
+          type: 'overlap',
+        },
+      },
+    });
+
+    line.render();
+    // @ts-ignore
+    expect(line.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: {
+        type: 'overlap',
+      },
+    });
+
+    line.update({
+      ...line.options,
+      label: false,
+    });
+    // @ts-ignore
+    expect(line.chart.geometries[0].labelOption).toBe(false);
+  });
+
+  it('x*y*color and label', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      label: {
+        layout: {
+          type: 'overlap',
+        },
+      },
+    });
+
+    line.render();
+    // @ts-ignore
+    expect(line.chart.geometries[0].labelOption.cfg).toEqual({
+      layout: {
+        type: 'overlap',
+      },
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('x*y and shape', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      appendPadding: 10,
+      smooth: false,
+    });
+
+    line.render();
+    expect(line.chart.geometries[0].attributes.shape.values).toEqual(['line']);
+  });
+
+  it('x*y*color and shape', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      smooth: true,
+    });
+
+    line.render();
+    expect(line.chart.geometries[0].attributes.shape.values).toEqual(['smooth']);
+  });
+});

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

@@ -0,0 +1,63 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('x*y and style', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      lineStyle: {
+        lineDash: [2, 2],
+      },
+      appendPadding: 10,
+    });
+
+    line.render();
+
+    const geometry = line.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('lineDash')).toEqual([2, 2]);
+
+    line.update({
+      ...line.options,
+      lineStyle: () => {
+        return { lineDash: [4, 4] };
+      },
+    });
+    expect(line.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
+  });
+
+  it('x*y*color and style', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      lineStyle: {
+        lineDash: [2, 2],
+      },
+      appendPadding: 10,
+    });
+
+    line.render();
+
+    const geometry = line.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('lineDash')).toEqual([2, 2]);
+
+    line.update({
+      ...line.options,
+      lineStyle: (x: string, y: number, color: string) => {
+        if (color === 'FF') return { lineDash: [4, 4] };
+      },
+    });
+    expect(line.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
+    expect(line.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual(undefined);
+  });
+});

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

@@ -0,0 +1,53 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('x*y and tooltip', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      appendPadding: 10,
+      tooltip: {
+        title: 'hello wold',
+      },
+    });
+
+    line.render();
+    // @ts-ignore
+    expect(line.chart.options.tooltip.title).toBe('hello wold');
+
+    line.update({
+      ...line.options,
+      tooltip: false,
+    });
+    // @ts-ignore
+    expect(line.chart.options.tooltip).toBe(false);
+    expect(line.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);
+  });
+
+  it('x*y*color and toolip', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      appendPadding: 10,
+      tooltip: {
+        shared: true,
+        showCrosshairs: true,
+      },
+    });
+
+    line.render();
+    // @ts-ignore
+    expect(line.chart.options.tooltip.shared).toBe(true);
+    // @ts-ignore
+    expect(line.chart.options.tooltip.showCrosshairs).toBe(true);
+  });
+});

src/common/adaptor.ts

@@ -12,7 +12,7 @@ export function tooltip<O extends Options>(params: Params<O>): Params<O> {
   const { chart, options } = params;
   const { tooltip } = options;
 
-  if (tooltip) {
+  if (tooltip !== undefined) {
     chart.tooltip(tooltip);
   }
 

src/core/adaptor.ts

@@ -1,4 +1,4 @@
-import { Chart, Geometry } from '@antv/g2';
+import { Chart } from '@antv/g2';
 import { Options } from '../types';
 
 /**

src/plots/line/adaptor.ts

@@ -1,4 +1,5 @@
-import { deepMix } from '@antv/util';
+import { Geometry } from '@antv/g2';
+import { deepMix, isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { tooltip } from '../../common/adaptor';
 import { flow, pick } from '../../utils';
@@ -82,12 +83,70 @@ function legend(params: Params<LineOptions>): Params<LineOptions> {
   return params;
 }
 
+/**
+ * 样式
+ * @param params
+ */
+function style(params: Params<LineOptions>): Params<LineOptions> {
+  const { chart, options } = params;
+  const { xField, yField, seriesField, lineStyle } = options;
+
+  const geometry = chart.geometries[0];
+  if (lineStyle && geometry) {
+    if (isFunction(lineStyle)) {
+      geometry.style(`${xField}*${yField}*${seriesField}`, lineStyle);
+    } else {
+      geometry.style(lineStyle);
+    }
+  }
+  return params;
+}
+
+/**
+ * shape 的配置处理
+ * @param params
+ */
+function shape(params: Params<LineOptions>): Params<LineOptions> {
+  const { chart, options } = params;
+  const { smooth } = options;
+
+  const lineGeometry = chart.geometries.find((g: Geometry) => g.type === 'line');
+
+  lineGeometry.shape(smooth ? 'smooth' : 'line');
+  return params;
+}
+
+/**
+ * 数据标签
+ * @param params
+ */
+function label(params: Params<LineOptions>): Params<LineOptions> {
+  const { chart, options } = params;
+  const { label, yField } = options;
+
+  const lineGeometry = chart.geometries.find((g: Geometry) => g.type === 'line');
+
+  // label 为 false, 空 则不显示 label
+  if (!label) {
+    lineGeometry.label(false);
+  } else {
+    const { callback, ...cfg } = label;
+    lineGeometry.label({
+      fields: [yField],
+      callback,
+      cfg,
+    });
+  }
+
+  return params;
+}
+
 /**
  * 折线图适配器
  * @param chart
  * @param options
  */
 export function adaptor(params: Params<LineOptions>) {
   // flow 的方式处理所有的配置到 G2 API
-  flow(field, meta, axis, legend, tooltip)(params);
+  flow(field, meta, axis, legend, tooltip, style, shape, label)(params);
 }

src/plots/line/types.ts

@@ -3,20 +3,20 @@ import { ShapeStyle } from '../../types/style';
 
 export interface LineOptions extends Options {
   /** x 轴字段 */
-  xField?: string;
+  readonly xField?: string;
   /** y 轴字段 */
-  yField?: string;
+  readonly yField?: string;
   /** 分组字段 */
-  seriesField?: string;
+  readonly seriesField?: string;
 
   /** 是否平滑 */
-  smooth?: boolean;
+  readonly smooth?: boolean;
   /** 是否连接空数据 */
-  connectNulls?: boolean;
-  /** 折线extra图形样式 */
-  lineStyle?: ShapeStyle | (() => ShapeStyle);
+  readonly connectNulls?: boolean;
+  /** 折线 extra 图形样式 */
+  readonly lineStyle?: ShapeStyle | ((x?: any, y?: any, color?: any) => ShapeStyle);
   /** 折线数据点图形样式 */
-  point?: {
+  readonly point?: {
     visible?: boolean;
     shape?: ShapeStyle;
     size?: number;

src/plots/scatter/adaptor.ts

@@ -1,6 +1,7 @@
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { ScatterOptions } from './types';
+import { tooltip } from '../../common/adaptor';
 
 /**
  * 字段
@@ -55,22 +56,6 @@ function legend(params: Params<ScatterOptions>): Params<ScatterOptions> {
   return params;
 }
 
-/**
- * tooltip 配置
- * @param params
- */
-function tooltip(params: Params<ScatterOptions>): Params<ScatterOptions> {
-  const {
-    chart,
-    options: { tooltip },
-  } = params;
-
-  if (tooltip) {
-    chart.tooltip({ ...tooltip });
-  }
-  return params;
-}
-
 /**
  * 散点图适配器
  * @param chart

src/types/label.ts

@@ -1 +1,10 @@
-export type Label = {};
+import { LabelCallback, GeometryLabelCfg } from '@antv/g2/lib/interface';
+
+export type Label =
+  | false
+  | ({
+      /** 映射的字段。 */
+      readonly fields?: string[];
+      /** 回调函数。 */
+      readonly callback?: LabelCallback;
+    } & GeometryLabelCfg);