From 7c77473865237a5c1972e0109dc0037edd972163 Mon Sep 17 00:00:00 2001 From: hustcc Date: Thu, 3 Sep 2020 14:12:45 +0800 Subject: [PATCH 1/2] feat(plugin): add plugin plot for customize --- __tests__/unit/plugin/index-spec.ts | 27 ++++++++++++++++ __tests__/unit/plugin/step-line.ts | 18 +++++++++++ src/core/plot.ts | 2 +- src/index.ts | 8 +++++ src/plugin/index.ts | 50 +++++++++++++++++++++++++++++ 5 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 __tests__/unit/plugin/index-spec.ts create mode 100644 __tests__/unit/plugin/step-line.ts create mode 100644 src/plugin/index.ts diff --git a/__tests__/unit/plugin/index-spec.ts b/__tests__/unit/plugin/index-spec.ts new file mode 100644 index 0000000000..cc13be4e5d --- /dev/null +++ b/__tests__/unit/plugin/index-spec.ts @@ -0,0 +1,27 @@ +import { AnyPlot } from '../../../src'; +import { createDiv } from '../../utils/dom'; +import { partySupport } from '../../data/party-support'; +import { StepLineAdaptor, StepLineOption } from './step-line'; + +describe('plugin - AnyPlot', () => { + it('StepLine', () => { + const plot = new AnyPlot( + 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('any-plot'); + expect(plot.chart.geometries[0].type).toBe('line'); + }); +}); diff --git a/__tests__/unit/plugin/step-line.ts b/__tests__/unit/plugin/step-line.ts new file mode 100644 index 0000000000..edc1d70a55 --- /dev/null +++ b/__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): Params { + const { chart, options } = params; + const { xField, yField, stepType = 'vh', data } = options; + + chart.line().position(`${xField}*${yField}`).shape(stepType); + chart.data(data); + + return params; +} diff --git a/src/core/plot.ts b/src/core/plot.ts index 22f0078e3a..921bb76c28 100644 --- a/src/core/plot.ts +++ b/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' >; diff --git a/src/index.ts b/src/index.ts index ce0279a6e0..fa9837c0be 100644 --- a/src/index.ts +++ b/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'; + +// 以下开放自定义图表开发的能力（目前仅仅是孵化中） + +/** 所有开放图表都使用 AnyPlot 作为入口开发，理论上官方的所有图表都可以走 AnyPlot 的入口（暂时不处理） */ +export { AnyPlot } from './plugin'; + +/** 开发 adaptor 可能会用到 flow 方法，不强制使用 */ +export { flow } from './utils'; diff --git a/src/plugin/index.ts b/src/plugin/index.ts new file mode 100644 index 0000000000..cdb84cff8e --- /dev/null +++ b/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 { AnyPlot } from '@antv/g2plot'; + * import { GeoWorldMap, GeoWorldMapOptions } from 'g2plot-geo-world-map'; + * + * const plot = new AnyPlot('container', { + * geoJson: '', + * longitude: '', + * latitude: '', + * }, GeoWorldMap); + * + * plot.render(); + * ``` + */ +export class AnyPlot extends Plot { + /** 统一为 any plot */ + public readonly type = 'any-plot'; + + /** 外部传入的 adaptor 函数 */ + private adaptor: Adaptor; + + /** + * 相比普通图表增加 adaptor 参数。后续还可以考虑增加 defaultOptions + * @param container + * @param options + * @param adaptor + */ + constructor(container: string | HTMLElement, options: O, adaptor: Adaptor) { + super(container, options); + + this.adaptor = adaptor; + } + + /** + * 实现父类方法，直接使用传入的 + */ + protected getSchemaAdaptor(): Adaptor { + return this.adaptor; + } +} From 16c01e17003cda08aafb58dfd41108076f7533bc Mon Sep 17 00:00:00 2001 From: hustcc Date: Thu, 3 Sep 2020 21:50:25 +0800 Subject: [PATCH 2/2] chore: remove AnyPlot with G2Plot --- __tests__/unit/plugin/index-spec.ts | 8 ++++---- src/index.ts | 4 ++-- src/plugin/index.ts | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/__tests__/unit/plugin/index-spec.ts b/__tests__/unit/plugin/index-spec.ts index cc13be4e5d..37371716e3 100644 --- a/__tests__/unit/plugin/index-spec.ts +++ b/__tests__/unit/plugin/index-spec.ts @@ -1,11 +1,11 @@ -import { AnyPlot } from '../../../src'; +import { G2Plot } from '../../../src'; import { createDiv } from '../../utils/dom'; import { partySupport } from '../../data/party-support'; import { StepLineAdaptor, StepLineOption } from './step-line'; -describe('plugin - AnyPlot', () => { +describe('plugin - G2Plot', () => { it('StepLine', () => { - const plot = new AnyPlot( + const plot = new G2Plot( createDiv(), { width: 400, @@ -21,7 +21,7 @@ describe('plugin - AnyPlot', () => { plot.render(); - expect(plot.type).toBe('any-plot'); + expect(plot.type).toBe('g2-plot'); expect(plot.chart.geometries[0].type).toBe('line'); }); }); diff --git a/src/index.ts b/src/index.ts index fa9837c0be..6b6b7a4307 100644 --- a/src/index.ts +++ b/src/index.ts @@ -65,8 +65,8 @@ export { Box, BoxOptions } from './plots/box'; // 以下开放自定义图表开发的能力（目前仅仅是孵化中） -/** 所有开放图表都使用 AnyPlot 作为入口开发，理论上官方的所有图表都可以走 AnyPlot 的入口（暂时不处理） */ -export { AnyPlot } from './plugin'; +/** 所有开放图表都使用 G2Plot 作为入口开发，理论上官方的所有图表都可以走 G2Plot 的入口（暂时不处理） */ +export { G2Plot } from './plugin'; /** 开发 adaptor 可能会用到 flow 方法，不强制使用 */ export { flow } from './utils'; diff --git a/src/plugin/index.ts b/src/plugin/index.ts index cdb84cff8e..4ceccbfe6f 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -10,10 +10,10 @@ import { Adaptor } from '../core/adaptor'; * 如果使用？ * * ```ts - * import { AnyPlot } from '@antv/g2plot'; + * import { G2Plot } from '@antv/g2plot'; * import { GeoWorldMap, GeoWorldMapOptions } from 'g2plot-geo-world-map'; * - * const plot = new AnyPlot('container', { + * const plot = new G2Plot('container', { * geoJson: '', * longitude: '', * latitude: '', @@ -22,9 +22,9 @@ import { Adaptor } from '../core/adaptor'; * plot.render(); * ``` */ -export class AnyPlot extends Plot { +export class G2Plot extends Plot { /** 统一为 any plot */ - public readonly type = 'any-plot'; + public readonly type = 'g2-plot'; /** 外部传入的 adaptor 函数 */ private adaptor: Adaptor;