chore(api): add API for chart, view, geometry (#3377)

* chore(api): add API for chart, view, geometry

* test: fix eslint

* chore: add limit-size

.eslintrc

@@ -17,16 +17,6 @@
     "@typescript-eslint",
     "import"
   ],
-  "rules": {
-    "semi": "error",
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error"
-    ],
-    "import/extensions": "off",
-    "import/prefer-default-export": "off",
-    "object-curly-newline": "off"
-  },
   "settings": {
     "import/parsers": {
       "@typescript-eslint/parser": [
@@ -39,5 +29,17 @@
         "alwaysTryTypes": true
       }
     }
+  },
+  "rules": {
+    "semi": "error",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn"
+    ],
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "object-curly-newline": "off",
+    "class-methods-use-this": "off",
+    "no-useless-constructor": "warn"
   }
 }

package.json

@@ -38,7 +38,7 @@
     "@antv/component": "^0.8.11",
     "@antv/coord": "^0.3.1",
     "@antv/dom-util": "^2.0.3",
-    "@antv/event-emitter": "~0.1.2",
+    "@antv/event-emitter": "^0.1.2",
     "@antv/g-base": "0.5.7",
     "@antv/g-canvas": "0.5.7",
     "@antv/g-svg": "0.5.6",
@@ -67,6 +67,7 @@
     "husky": "^6.0.0",
     "jest": "^24.0.0",
     "jest-electron": "^0.1.11",
+    "limit-size": "^0.1.4",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",

src/chart/chart.ts

@@ -0,0 +1,52 @@
+import { View } from './view';
+
+/**
+ * 图表入口类，继承自 View，会额外增加：
+ * - 初始化 G.Canvas
+ * - resize 的处理
+ */
+export class Chart extends View {
+  constructor() {
+    super();
+
+    this.initGCanvas();
+    this.bindResizeEvent();
+  }
+
+  /**
+   * 初始化 G 的容器
+   */
+  private initGCanvas() {}
+
+  /**
+   * 绑定 window.resize 事件，用于做 autoFit
+   */
+  private bindResizeEvent() {
+    document.addEventListener('resize', this.onDocumentResize);
+  }
+
+  private onDocumentResize = () => {
+    this.forceFit();
+  };
+
+  /**
+   * 重新设置画布的大小
+   * @param width
+   * @param height
+   */
+  public resize(width: number, height: number) {}
+
+  /**
+   * 强制触发一次 Fit，让图表大小和容器保持一致
+   */
+  public forceFit() {
+    this.resize(100, 100);
+  }
+
+  public destroy() {
+    super.destroy();
+
+    // 移除事件
+    document.removeEventListener('resize', this.onDocumentResize);
+  }
+}

src/chart/index.ts

@@ -6,3 +6,6 @@
  * 3. 交互（Interaction）的生命周期管理
  * 4. 提供 API
  */
+
+export { Chart } from './chart';
+export { View } from './view';

src/chart/view.ts

@@ -0,0 +1,175 @@
+import EE from '@antv/event-emitter';
+import { Geometry } from '../geometry/geometry';
+import { Data } from '../types';
+
+/**
+ * 图表容器，可以嵌套迭代。容器中主要包含有三类组件：
+ * 1. 组件
+ * 2. 图形
+ * 3. 子容器
+ */
+export class View extends EE {
+  /**
+   * 所有的子 views
+   */
+  public views: View[];
+
+  /**
+   * 当前 view 包含的图形 Geometry 数组
+   */
+  public geometries: Geometry[];
+
+  /**
+   * 当前 view 包含的组件 Component 数组
+   */
+  public components: any[];
+
+  /**
+   * 加入的数据
+   */
+  private originalData: Data;
+
+  constructor() {
+    super();
+  }
+
+  /** 初始化 View 配置 API    **************************************************** */
+
+  /**
+   * 设置数据
+   * @param data 明细数据数组
+   */
+  public data(data: Data) {
+    this.originalData = data;
+
+    return this;
+  }
+
+  /**
+   * 设置字段 scale 配置
+   */
+  public scale() {}
+
+  /**
+   * 设置 coordinate 配置
+   */
+  public coordinate() {}
+
+  /**
+   * 设置分面配置
+   */
+  public facet() {}
+
+  /**
+   * 设置交互
+   */
+  public interaction() {}
+
+  /**
+   * 设置组件 tooltip 配置
+   */
+  public tooltip() {}
+
+  /**
+   * 设置组件 legend 配置
+   */
+  public legend() {}
+
+  /**
+   * 设置组件 axis 配置
+   */
+  public axis() {}
+
+  /**
+   * 设置组件 slider 配置
+   */
+  public slider() {}
+
+  /**
+   * 设置组件 scrollbar 配置
+   */
+  public scrollbar() {}
+
+  /**
+   * 设置组件 timeline 配置
+   */
+  public timeline() {}
+
+  /**
+   * 是否开启动画
+   */
+  public animation() {}
+
+  /** 创建 Geometry 的 API       ********************************************** */
+
+  public line() {}
+
+  public point() {}
+
+  public interval() {}
+
+  public area() {}
+
+  public polygon() {}
+
+  public edge() {}
+
+  /** 生命周期的 API 函数     ************************************** */
+
+  /**
+   * 初始化
+   */
+  public init() {}
+
+  /**
+   * 渲染（异步）
+   */
+  public async render() {
+    // do render
+  }
+
+  /**
+   * 销毁
+   */
+  public destroy() {}
+
+  /** Get 数据的一些 API，做自定义的数据来源   ******************************************* */
+
+  /**
+   * 获得所有的 scale 数组信息
+   */
+  public getScales() {}
+
+  /**
+   * 获得某一个字段的 scale
+   * @param field 字段 id
+   */
+  public getScale(field: string) {}
+
+  /**
+   * 获取实际展示在画布中的数据（经过过滤后的）
+   */
+  public getData() {}
+
+  /**
+   * 获取原始传入的数据
+   */
+  public getOriginalData() {}
+
+  /** 数据操作的一些 API  **************************************** */
+
+  /**
+   * 进行数据的过滤（数据分析：筛选、过滤）
+   */
+  public filter() {}
+
+  /**
+   * 更新数据（数据分析：下钻）
+   */
+  public changeData() {}
+
+  /**
+   *  设置数据的状态（数据分析：联动）
+   */
+  public state() {}
+}

src/core.ts

@@ -1 +1,14 @@
 export const VERSION = '5.0.0-beta.1';
+
+/** 通用的类型定义 */
+export { Datum, Data } from './types';
+
+/**
+ *
+ */
+export { Chart, View } from './chart';
+
+/**
+ *
+ */
+export { Geometry, Element } from './geometry';

src/geometry/element.ts

@@ -1,3 +1,32 @@
+import EE from '@antv/event-emitter';
 /**
  * 每个 Geometry 中对应多个分组的 Element，Element 对于不同的 Geometry 都是统一的一个类。
  */
+
+export class Element extends EE {
+  /**
+   * 绘制图形 Element 对应的数据层模型
+   */
+  private model: any;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * 获取数据模型
+   */
+  public getModel() {
+    return this.model;
+  }
+
+  /**
+   * 显示
+   */
+  public show() {}
+
+  /**
+   * 隐藏
+   */
+  public hide() {}
+}

src/geometry/geometry.ts

@@ -1,3 +1,49 @@
+import EE from '@antv/event-emitter';
+
 /**
  * 所有 Geometry 的基类
  */
+export class Geometry extends EE {
+  constructor() {
+    super();
+  }
+
+  /** 设置图形的视觉通道字段和配置       ************************************* */
+
+  /**
+   * 位置通道：x, y
+   */
+  public position() {}
+
+  /**
+   * 位置通道：x, y
+   */
+  public color() {}
+
+  /**
+   * 大小通道：size
+   */
+  public size() {}
+
+  /**
+   * 数据标签通道：label
+   */
+  public label() {}
+
+  /**
+   * tooltip 通道：tooltip
+   */
+  public tooltip() {}
+
+  /**
+   * sequence 序列通道：sequence
+   */
+  public sequence() {}
+
+  /** 获取信息的 API         **************************************** */
+
+  /**
+   * 获取当前 Geometry 对应的 elements 绘图元素
+   */
+  public getElements() {}
+}

src/geometry/index.ts

@@ -5,3 +5,6 @@
  * 3. Geometry，Element 及 API
  * 4. 各种内置的 Geometry
  */
+
+export { Geometry } from './geometry';
+export { Element } from './element';

src/types.ts

@@ -0,0 +1,3 @@
+export type Datum = Record<string, any>;
+
+export type Data = Datum[];