diff --git a/.eslintrc b/.eslintrc index d4db3d02a1..f5c5a84875 100644 --- a/.eslintrc +++ b/.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" } } \ No newline at end of file diff --git a/package.json b/package.json index a98f79538f..34179b8f18 100644 --- a/package.json +++ b/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", diff --git a/src/chart/chart.ts b/src/chart/chart.ts index e69de29bb2..71d2da2452 100644 --- a/src/chart/chart.ts +++ b/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); + } +} diff --git a/src/chart/index.ts b/src/chart/index.ts index 75ddfd2443..a5012149d5 100644 --- a/src/chart/index.ts +++ b/src/chart/index.ts @@ -6,3 +6,6 @@ * 3. 交互(Interaction)的生命周期管理 * 4. 提供 API */ + +export { Chart } from './chart'; +export { View } from './view'; diff --git a/src/chart/view.ts b/src/chart/view.ts index e69de29bb2..aac60f636d 100644 --- a/src/chart/view.ts +++ b/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() {} +} diff --git a/src/core.ts b/src/core.ts index bbdcb34bf1..33126da2cc 100644 --- a/src/core.ts +++ b/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'; diff --git a/src/geometry/element.ts b/src/geometry/element.ts index 368a2de5b8..af98bd47b2 100644 --- a/src/geometry/element.ts +++ b/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() {} +} diff --git a/src/geometry/geometry.ts b/src/geometry/geometry.ts index 7ad0b49466..429ba4b481 100644 --- a/src/geometry/geometry.ts +++ b/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() {} +} diff --git a/src/geometry/index.ts b/src/geometry/index.ts index 7afc3a9fbd..3ab439d5a1 100644 --- a/src/geometry/index.ts +++ b/src/geometry/index.ts @@ -5,3 +5,6 @@ * 3. Geometry,Element 及 API * 4. 各种内置的 Geometry */ + +export { Geometry } from './geometry'; +export { Element } from './element'; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000000..3baa718217 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,3 @@ +export type Datum = Record; + +export type Data = Datum[];