feat(plugin): add plugin plot for customize (#1519)

Author: hustcc

__tests__/unit/plugin/index-spec.ts

@@ -0,0 +1,27 @@
+import { G2Plot } from '../../../src';
+import { createDiv } from '../../utils/dom';
+import { partySupport } from '../../data/party-support';
+import { StepLineAdaptor, StepLineOption } from './step-line';
+
+describe('plugin - G2Plot', () => {
+  it('StepLine', () => {
+    const plot = new G2Plot<StepLineOption>(
+      createDiv(),
+      {
+        width: 400,
+        height: 300,
+        appendPadding: 10,
+        data: partySupport.filter((o) => o.type === 'FF'),
+        xField: 'date',
+        yField: 'value',
+        stepType: 'hv',
+      },
+      StepLineAdaptor
+    );
+
+    plot.render();
+
+    expect(plot.type).toBe('g2-plot');
+    expect(plot.chart.geometries[0].type).toBe('line');
+  });
+});

__tests__/unit/plugin/step-line.ts

@@ -0,0 +1,18 @@
+import { Params, Options } from '../../../src';
+
+export interface StepLineOption extends Options {
+  readonly xField: string;
+  readonly yField: string;
+  readonly stepType?: 'vh' | 'hv' | 'vhv' | 'hvh';
+}
+
+/** 这个方法作为一个包 export 出去 */
+export function StepLineAdaptor(params: Params<StepLineOption>): Params<StepLineOption> {
+  const { chart, options } = params;
+  const { xField, yField, stepType = 'vh', data } = options;
+
+  chart.line().position(`${xField}*${yField}`).shape(stepType);
+  chart.data(data);
+
+  return params;
+}

src/core/plot.ts

@@ -8,7 +8,7 @@ import { getContainerSize, getAllElements } from '../utils';
 import { Adaptor } from './adaptor';
 
 /** 单独 pick 出来的用于基类的类型定义 */
-type PickOptions = Pick<
+export type PickOptions = Pick<
   Options,
   'width' | 'height' | 'padding' | 'appendPadding' | 'renderer' | 'pixelRatio' | 'autoFit'
 >;

src/index.ts

@@ -62,3 +62,11 @@ export { Heatmap, HeatmapOptions } from './plots/heatmap';
 
 // 箱线图及类型定义 | author by [BBSQQ](https://github.com/BBSQQ)
 export { Box, BoxOptions } from './plots/box';
+
+// 以下开放自定义图表开发的能力（目前仅仅是孵化中）
+
+/** 所有开放图表都使用 G2Plot 作为入口开发，理论上官方的所有图表都可以走 G2Plot 的入口（暂时不处理） */
+export { G2Plot } from './plugin';
+
+/** 开发 adaptor 可能会用到 flow 方法，不强制使用 */
+export { flow } from './utils';

src/plugin/index.ts

@@ -0,0 +1,50 @@
+import { Plot, PickOptions } from '../core/plot';
+import { Adaptor } from '../core/adaptor';
+/**
+ * 给 G2Plot 提供非常简单的开放开发的机制。目的是能够让社区和业务上自己基于 G2Plot 开发自己的定制图表库。主要分成几类图表：
+ * 1. 领域专业的图表，内部同学因为没有场景，不一定能做的完善。
+ * 2. 定制业务的图表，不具备通用性
+ * 3. 趣味性的可视化组件
+ * 然后官方可以根据社区的情况，可以进行一些官方推荐和采纳。
+ *
+ * 如果使用？
+ *
+ * ```ts
+ * import { G2Plot } from '@antv/g2plot';
+ * import { GeoWorldMap, GeoWorldMapOptions } from 'g2plot-geo-world-map';
+ *
+ * const plot = new G2Plot('container', {
+ *   geoJson: '',
+ *   longitude: '',
+ *   latitude: '',
+ * }, GeoWorldMap);
+ *
+ * plot.render();
+ * ```
+ */
+export class G2Plot<O extends PickOptions> extends Plot<O> {
+  /** 统一为 any plot */
+  public readonly type = 'g2-plot';
+
+  /** 外部传入的 adaptor 函数 */
+  private adaptor: Adaptor<O>;
+
+  /**
+   * 相比普通图表增加 adaptor 参数。后续还可以考虑增加 defaultOptions
+   * @param container
+   * @param options
+   * @param adaptor
+   */
+  constructor(container: string | HTMLElement, options: O, adaptor: Adaptor<O>) {
+    super(container, options);
+
+    this.adaptor = adaptor;
+  }
+
+  /**
+   * 实现父类方法，直接使用传入的
+   */
+  protected getSchemaAdaptor(): Adaptor<O> {
+    return this.adaptor;
+  }
+}