feat(line): add style, tooltip options

__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: (color: string) => {
+        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: (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/plots/line/adaptor.ts

@@ -1,4 +1,4 @@
-import { deepMix } from '@antv/util';
+import { deepMix, isFunction } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { tooltip } from '../../common/adaptor';
 import { flow, pick } from '../../utils';
@@ -82,12 +82,35 @@ function legend(params: Params<LineOptions>): Params<LineOptions> {
   return params;
 }
 
+/**
+ * 样式
+ * @param params
+ */
+function style(params: Params<LineOptions>): Params<LineOptions> {
+  const { chart, options } = params;
+  const { seriesField, lineStyle } = options;
+
+  const geometry = chart.geometries[0];
+  if (lineStyle && geometry) {
+    if (isFunction(lineStyle)) {
+      geometry.style(seriesField ? seriesField : '', lineStyle);
+    } else {
+      geometry.style(lineStyle);
+    }
+  }
+  return params;
+}
+
+function label(params: Params<LineOptions>): Params<LineOptions> {
+  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)(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 | ((color: any) => ShapeStyle);
   /** 折线数据点图形样式 */
-  point?: {
+  readonly point?: {
     visible?: boolean;
     shape?: ShapeStyle;
     size?: number;

src/types/style.ts

@@ -1,10 +1,10 @@
 /** G shape style 配置, 按道理应该从 G 中引入 */
 export type ShapeStyle = Readonly<{
-  fill?: string;
-  stroke?: string;
-  lineWidth?: number;
-  lineDash?: number[];
-  opacity?: number;
-  fillOpacity?: number;
-  strokeOpacity?: number;
+  readonly fill?: string;
+  readonly stroke?: string;
+  readonly lineWidth?: number;
+  readonly lineDash?: number[];
+  readonly opacity?: number;
+  readonly fillOpacity?: number;
+  readonly strokeOpacity?: number;
 }>;

src/types/tooltip.ts

@@ -1,43 +1,3 @@
-export type Tooltip = {
-  /** 是否展示 */
-  visible?: boolean;
+import { TooltipOption } from '@antv/g2/lib/interface';
 
-  /** 设置 tooltip 内容字段，默认为[ xField, yField, colorField] */
-  fields?: string[];
-
-  /** 是否跟随 */
-  shared?: boolean;
-
-  /** 是否 title */
-  showTitle?: boolean;
-
-  /** 是否展示 */
-  titleField?: string;
-
-  /** 是否展示十字辅助线 */
-  showCrosshairs?: boolean;
-
-  /** 十字辅助线 */
-  crosshairs?: object;
-
-  /** 距离鼠标位置偏移值 */
-  offset?: number;
-
-  /** 是否展示 markers */
-  showMarkers?: boolean;
-
-  /** 配置 tooltip 样式 */
-  domStyles?: {
-    'g2-tooltip'?: any;
-    'g2-tooltip-title'?: any;
-    'g2-tooltip-list'?: any;
-    'g2-tooltip-marker'?: any;
-    'g2-tooltip-value'?: any;
-  };
-
-  /** 是否展示 */
-  follow?: boolean;
-
-  /** 自定义 */
-  htmlContent?: (...args: any[]) => string;
-};
+export type Tooltip = TooltipOption;