feat(line): add code example by line (#1255)

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

@@ -0,0 +1,35 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('x*y', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => o.type === 'FF'),
+      x: 'date',
+      y: 'value',
+    });
+
+    line.render();
+    expect(line.chart).toBeDefined();
+    setTimeout(() => {
+      line.render();
+    }, 1000);
+  });
+
+  it('x*y with color', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport,
+      x: 'date',
+      y: 'value',
+      color: 'type',
+    });
+
+    line.render();
+    expect(line.chart).toBeDefined();
+  });
+});

__tests__/utils/dom.ts

@@ -1,10 +1,23 @@
-export const createDiv = (id?: string): HTMLDivElement => {
-  const canvasDiv = document.createElement('div');
-  canvasDiv.style.width = '600px';
-  canvasDiv.style.height = '600px';
-  canvasDiv.style.left = '30px';
-  canvasDiv.style.top = '30px';
-  canvasDiv.id = id;
-  document.body.appendChild(canvasDiv);
-  return canvasDiv;
-};
+/**
+ * 创建一个 div 节点，并放到 container，默认放到 body 上
+ * @param container
+ */
+export function createDiv(container: HTMLElement = document.body): HTMLElement {
+  const div = document.createElement('div');
+
+  container.appendChild(div);
+
+  return div;
+}
+
+/**
+ * 移除 dom 元素
+ * @param dom
+ */
+export function removeDom(dom: HTMLElement) {
+  const parent = dom.parentNode;
+
+  if (parent) {
+    parent.removeChild(dom);
+  }
+}

package.json

@@ -33,7 +33,7 @@
     "lint": "eslint --ext .ts ./src ./__tests__",
     "lint-staged": "lint-staged",
     "test": "jest",
-    "test-live": "DEBUG_MODE=1 jest --watch ./__tests__",
+    "test-live": "DEBUG_MODE=1 jest ./__tests__",
     "coverage": "jest --coverage",
     "ci": "run-s lint build coverage",
     "changelog": "conventional-changelog -i CHANGELOG.md -a -s",
@@ -46,26 +46,20 @@
     }
   },
   "dependencies": {
-    "@antv/component": "~0.6.1",
-    "@antv/coord": "~0.3.0",
-    "@antv/dom-util": "~2.0.2",
-    "@antv/event-emitter": "~0.1.2",
-    "@antv/g-base": "~0.4.0",
-    "@antv/g-canvas": "~0.4.0",
-    "@antv/g-svg": "~0.4.0",
-    "@antv/g2": "~4.0.9",
-    "@antv/matrix-util": "~3.1.0-beta.1",
-    "@antv/scale": "~0.3.1",
-    "@antv/util": "~2.0.7",
+    "@antv/event-emitter": "^0.1.2",
+    "@antv/g2": "^4.0.12",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^1.11.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-angular": "^8.2.0",
     "@types/jest": "^25.2.1",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
+    "babel-loader": "^8.1.0",
     "conventional-changelog-cli": "^2.0.28",
     "eslint": "^6.1.0",
     "eslint-config-prettier": "^6.0.0",

src/core/adaptor.ts

@@ -1,8 +1,14 @@
+import { Chart } from '@antv/g2';
 import { Options } from '../types';
 
 /**
  * schema 转 G2 的适配器基类
  */
 export abstract class Adaptor<O extends Options> {
-  public convent(options: O) {}
+  /**
+   * 将 G2Plot 配置转换成 G2 的逻辑操作
+   * @param chart
+   * @param options
+   */
+  public abstract convent(chart: Chart, options: O);
 }

src/core/plot.ts

@@ -1,4 +1,6 @@
-import { Options, Adaptor } from '../types';
+import { Chart } from '@antv/g2';
+import { Adaptor } from './adaptor';
+import { Options } from '../types';
 
 /**
  * 所有 plot 的基类
@@ -10,24 +12,49 @@ export abstract class Plot<O extends Options> {
   public options: O;
   /** plot 绘制的 dom */
   public container: HTMLElement;
-  public chart: any;
+  /** G2 chart 实例 */
+  public chart: Chart;
 
   constructor(container: string | HTMLElement, options: O) {
     this.container = typeof container === 'string' ? document.querySelector(container) : container;
     this.options = options;
 
-    this.render();
+    this.createG2();
+  }
+
+  /**
+   * 创建 G2 实例
+   */
+  private createG2() {
+    const { width, height, padding } = this.options;
+
+    this.chart = new Chart({
+      container: this.container,
+      autoFit: false, // G2Plot 使用 size sensor 进行 autoFit
+      height,
+      width,
+      padding,
+    });
   }
 
   /**
    * 每个组件有自己的 schema adaptor
    */
-  protected abstract getSchemaAdaptator(): Adaptor;
+  protected abstract getSchemaAdaptor(): Adaptor<O>;
 
   /**
    * 绘制
    */
-  public render() {}
+  public render() {
+    // 暴力处理，先清空再渲染，需要 G2 层自行做好更新渲染
+    this.chart.clear();
+
+    const adaptor = this.getSchemaAdaptor();
+
+    adaptor.convent(this.chart, this.options);
+
+    this.chart.render();
+  }
 
   /**
    * 更新配置
@@ -42,10 +69,14 @@ export abstract class Plot<O extends Options> {
    * @param width
    * @param height
    */
-  public changeSize(width: number, height: number) {}
+  public changeSize(width: number, height: number) {
+    this.chart.changeSize(width, height);
+  }
 
   /**
    * 销毁
    */
-  public destroy() {}
+  public destroy() {
+    this.chart.destroy();
+  }
 }

src/plots/line/adaptor.ts

@@ -1,4 +1,20 @@
 import { Adaptor } from '../../core/adaptor';
 import { LineOptions } from './types';
+import { Chart } from '@antv/g2';
 
-export class LineAdaptor extends Adaptor<LineOptions> {}
+/**
+ * 折线图适配器
+ */
+export class LineAdaptor extends Adaptor<LineOptions> {
+  public convent(chart: Chart, options: LineOptions) {
+    const { data, x, y, color } = options;
+
+    // TODO 具体的折线图操作逻辑
+    chart.data(data);
+    const geometry = chart.line().position(`${x}*${y}`);
+
+    if (color) {
+      geometry.color(color);
+    }
+  }
+}

src/plots/line/index.ts

@@ -1,11 +1,16 @@
 import { Plot } from '../../core/plot';
 import { LineOptions } from './types';
 import { LineAdaptor } from './adaptor';
+import { Adaptor } from '../../core/adaptor';
 
 export class Line extends Plot<LineOptions> {
+  /** 图表类型 */
   public type: string = 'line';
 
-  protected getSchemaAdaptator(): LineAdaptor {
-    return;
+  /**
+   * 获取 折线图 的适配器
+   */
+  protected getSchemaAdaptor(): Adaptor<LineOptions> {
+    return new LineAdaptor();
   }
 }

src/plots/line/types.ts

@@ -1,3 +1,7 @@
 import { Options } from '../../types';
 
-export interface LineOptions extends Options {}
+export interface LineOptions extends Options {
+  x: string;
+  y: string;
+  color?: string;
+}

src/types/index.ts

@@ -1,7 +1,7 @@
 export type Options = {
-  // TODO
-};
-
-export type Adaptor = {
-  // TODO
+  readonly width: number;
+  readonly height: number;
+  readonly autoFit?: boolean;
+  readonly padding?: number[] | 'auto';
+  readonly data: Record<string, any>[];
 };