feat: add tiny-line (#1304)

* feat: add tinyLine

* feat: add tiny-line

* feat: add tinyLine

* feat: add tiny-line

* feat: add tiny-line

* feat: add tiny-line

* feat: add tiny-line

Co-authored-by: yinshi.wyl <yinshi.wyl@antfin.com>

__tests__/unit/plots/tiny-line/index-spec.ts

@@ -0,0 +1,82 @@
+import { TinyLine } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('tiny-line', () => {
+  it('data', () => {
+    const tinyLine = new TinyLine(createDiv(), {
+      width: 80,
+      height: 40,
+      meta: {
+        value: {
+          min: 0,
+          max: 5000,
+        },
+      },
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+    });
+
+    tinyLine.render();
+    expect(tinyLine.chart.geometries[0].elements.length).toBe(1);
+  });
+
+  it('data with smooth', () => {
+    const tinyLine = new TinyLine(createDiv(), {
+      width: 80,
+      height: 40,
+      meta: {
+        value: {
+          min: 0,
+          max: 5000,
+        },
+      },
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      autoFit: false,
+      smooth: true,
+    });
+
+    tinyLine.render();
+    expect(tinyLine.chart.geometries[0].attributes.shape.values).toEqual(['smooth']);
+    expect(tinyLine.chart.geometries[0].elements.length).toBe(1);
+  });
+
+  it('data with style', () => {
+    const tinyLine = new TinyLine(createDiv(), {
+      width: 80,
+      height: 40,
+      data: partySupport
+        .filter((o) => o.type === 'FF')
+        .map((item) => {
+          return item.value;
+        }),
+      lineStyle: {
+        lineDash: [2, 2],
+      },
+      autoFit: false,
+      appendPadding: 10,
+    });
+
+    tinyLine.render();
+
+    const geometry = tinyLine.chart.geometries[0];
+    const elements = geometry.elements;
+    expect(elements[0].shape.attr('lineDash')).toEqual([2, 2]);
+
+    tinyLine.update({
+      ...tinyLine.options,
+      lineStyle: () => {
+        return { lineDash: [4, 4] };
+      },
+    });
+    expect(tinyLine.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
+  });
+});

src/core/adaptor.ts

@@ -1,10 +1,9 @@
 import { Chart } from '@antv/g2';
-import { Options } from '../types';
 
 /**
  * adaptor flow 的参数
  */
-export type Params<O extends Options> = {
+export type Params<O> = {
   readonly chart: Chart;
   readonly options: O;
 };
@@ -13,4 +12,4 @@ export type Params<O extends Options> = {
  * schema 转 G2 的适配器基类
  * 使用 纯函数的方式，这里只是类型定义
  */
-export type Adaptor<O extends Options> = (params: Params<O>) => void;
+export type Adaptor<O> = (params: Params<O>) => void;

src/index.ts

@@ -10,3 +10,5 @@ export { Pie, PieOptions } from './plots/pie';
 
 //散点图及类型定义
 export { Scatter, ScatterOptions } from './plots/scatter';
+
+export { TinyLine, TinyLineOptions } from './plots/tiny-line';

src/plots/tiny-line/adaptor.ts

@@ -0,0 +1,116 @@
+import { Geometry } from '@antv/g2';
+import { Params } from '../../core/adaptor';
+import { flow } from '../../utils';
+import { TinyLineOptions } from './types';
+import { isFunction } from '@antv/util';
+
+/**
+ * 字段
+ * @param params
+ */
+function field(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart, options } = params;
+  const { data, connectNulls } = options;
+
+  const seriesData = data.map((y: number, x: number) => {
+    return { x, y };
+  });
+
+  chart.data(seriesData);
+
+  chart.line({ connectNulls }).position('x*y');
+
+  return params;
+}
+
+/**
+ * meta 配置
+ * @param params
+ */
+function meta(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart, options } = params;
+  const { meta } = options;
+
+  chart.scale(meta);
+
+  return params;
+}
+
+/**
+ * axis 配置
+ * @param params
+ */
+function axis(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart } = params;
+
+  chart.axis(false);
+
+  return params;
+}
+
+/**
+ * legend 配置
+ * @param params
+ */
+function legend(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart } = params;
+
+  chart.legend(false);
+
+  return params;
+}
+
+/**
+ * tooltip 配置
+ * @param params
+ */
+function tooltip(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart } = params;
+
+  chart.tooltip(false);
+
+  return params;
+}
+
+/**
+ * 样式
+ * @param params
+ */
+function style(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  const { chart, options } = params;
+  const { lineStyle } = options;
+
+  const geometry = chart.geometries[0];
+  if (lineStyle && geometry) {
+    if (isFunction(lineStyle)) {
+      geometry.style('x*y', lineStyle);
+    } else {
+      geometry.style(lineStyle);
+    }
+  }
+  return params;
+}
+
+/**
+ * shape 的配置处理
+ * @param params
+ */
+function shape(params: Params<TinyLineOptions>): Params<TinyLineOptions> {
+  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 chart
+ * @param options
+ */
+export function adaptor(params: Params<TinyLineOptions>) {
+  // flow 的方式处理所有的配置到 G2 API
+  flow(field, meta, axis, legend, tooltip, style, shape)(params);
+}

src/plots/tiny-line/index.ts

@@ -0,0 +1,18 @@
+import { Plot } from '../../core/plot';
+import { TinyLineOptions } from './types';
+import { adaptor } from './adaptor';
+import { Adaptor } from '../../core/adaptor';
+
+export { TinyLineOptions };
+
+export class TinyLine extends Plot<TinyLineOptions> {
+  /** 图表类型 */
+  public type: string = 'tiny-line';
+
+  /**
+   * 获取 迷你折线图 的适配器
+   */
+  protected getSchemaAdaptor(): Adaptor<TinyLineOptions> {
+    return adaptor;
+  }
+}

src/plots/tiny-line/types.ts

@@ -0,0 +1,13 @@
+import { Options } from '../../types';
+import { ShapeStyle } from '../../types/style';
+
+export interface TinyLineOptions extends Options {
+  /** 具体的数据 */
+  data: any[];
+  /** 是否平滑 */
+  smooth?: boolean;
+  /** 是否连接空数据 */
+  connectNulls?: boolean;
+  /** 折线extra图形样式 */
+  lineStyle?: ShapeStyle | ((x?: number, y?: number) => ShapeStyle);
+}