From 790d101ea90f26df33d624123f1082839d544932 Mon Sep 17 00:00:00 2001 From: hustcc Date: Thu, 15 Apr 2021 17:01:13 +0800 Subject: [PATCH 1/3] chore(api): add API for chart, view, geometry --- package.json | 2 +- src/chart/chart.ts | 56 ++++++++++ src/chart/index.ts | 3 + src/chart/view.ts | 226 +++++++++++++++++++++++++++++++++++++++ src/core.ts | 13 +++ src/geometry/element.ts | 34 ++++++ src/geometry/geometry.ts | 64 +++++++++++ src/geometry/index.ts | 4 + src/types.ts | 3 + 9 files changed, 404 insertions(+), 1 deletion(-) create mode 100644 src/types.ts diff --git a/package.json b/package.json index a98f79538f..243b150cb5 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", diff --git a/src/chart/chart.ts b/src/chart/chart.ts index e69de29bb2..7e28a38e12 100644 --- a/src/chart/chart.ts +++ b/src/chart/chart.ts @@ -0,0 +1,56 @@ +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..e0640cfcd2 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'; \ No newline at end of file diff --git a/src/chart/view.ts b/src/chart/view.ts index e69de29bb2..ec8e546f63 100644 --- a/src/chart/view.ts +++ b/src/chart/view.ts @@ -0,0 +1,226 @@ +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() { + + } + + /** + * 销毁 + */ + 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..1b0bc78cf2 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'; \ No newline at end of file diff --git a/src/geometry/element.ts b/src/geometry/element.ts index 368a2de5b8..ef77f45ce5 100644 --- a/src/geometry/element.ts +++ b/src/geometry/element.ts @@ -1,3 +1,37 @@ +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() { + + } +} \ No newline at end of file diff --git a/src/geometry/geometry.ts b/src/geometry/geometry.ts index 7ad0b49466..875b219f2a 100644 --- a/src/geometry/geometry.ts +++ b/src/geometry/geometry.ts @@ -1,3 +1,67 @@ +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() { + + } + + +} + \ No newline at end of file diff --git a/src/geometry/index.ts b/src/geometry/index.ts index 7afc3a9fbd..423f7d6a02 100644 --- a/src/geometry/index.ts +++ b/src/geometry/index.ts @@ -5,3 +5,7 @@ * 3. Geometry，Element 及 API * 4. 各种内置的 Geometry */ + + export { Geometry } from './geometry'; + export { Element } from './element'; + \ No newline at end of file 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[]; From 8fd924675b105453d8d694d35d3fb00e1255aa24 Mon Sep 17 00:00:00 2001 From: hustcc Date: Thu, 15 Apr 2021 17:24:28 +0800 Subject: [PATCH 2/3] test: fix eslint --- .eslintrc | 22 ++++---- src/chart/chart.ts | 14 ++--- src/chart/index.ts | 4 +- src/chart/view.ts | 119 +++++++++++---------------------------- src/core.ts | 6 +- src/geometry/element.ts | 11 +--- src/geometry/geometry.ts | 36 +++--------- src/geometry/index.ts | 5 +- 8 files changed, 70 insertions(+), 147 deletions(-) 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/src/chart/chart.ts b/src/chart/chart.ts index 7e28a38e12..71d2da2452 100644 --- a/src/chart/chart.ts +++ b/src/chart/chart.ts @@ -16,9 +16,7 @@ export class Chart extends View { /** * 初始化 G 的容器 */ - private initGCanvas() { - - } + private initGCanvas() {} /** * 绑定 window.resize 事件，用于做 autoFit @@ -29,16 +27,14 @@ export class Chart extends View { private onDocumentResize = () => { this.forceFit(); - } + }; /** * 重新设置画布的大小 - * @param width - * @param height + * @param width + * @param height */ - public resize(width: number, height: number) { - - } + public resize(width: number, height: number) {} /** * 强制触发一次 Fit，让图表大小和容器保持一致 diff --git a/src/chart/index.ts b/src/chart/index.ts index e0640cfcd2..a5012149d5 100644 --- a/src/chart/index.ts +++ b/src/chart/index.ts @@ -7,5 +7,5 @@ * 4. 提供 API */ - export { Chart } from './chart'; - export { View } from './view'; \ No newline at end of file +export { Chart } from './chart'; +export { View } from './view'; diff --git a/src/chart/view.ts b/src/chart/view.ts index ec8e546f63..aac60f636d 100644 --- a/src/chart/view.ts +++ b/src/chart/view.ts @@ -9,15 +9,16 @@ import { Data } from '../types'; * 3. 子容器 */ export class View extends EE { - /** * 所有的子 views */ public views: View[]; + /** * 当前 view 包含的图形 Geometry 数组 */ public geometries: Geometry[]; + /** * 当前 view 包含的组件 Component 数组 */ @@ -32,7 +33,7 @@ export class View extends EE { super(); } - /** 初始化 View 配置 API ***********************************************************************************/ + /** 初始化 View 配置 API **************************************************** */ /** * 设置数据 @@ -47,180 +48,128 @@ export class View extends EE { /** * 设置字段 scale 配置 */ - public scale() { - - } + public scale() {} /** * 设置 coordinate 配置 */ - public coordinate() { - - } + public coordinate() {} /** * 设置分面配置 */ - public facet() { - - } + public facet() {} /** * 设置交互 */ - public interaction() { - - } + public interaction() {} /** * 设置组件 tooltip 配置 */ - public tooltip() { - - } + public tooltip() {} /** * 设置组件 legend 配置 */ - public legend() { - - } + public legend() {} /** * 设置组件 axis 配置 */ - public axis() { - - } + public axis() {} /** * 设置组件 slider 配置 */ - public slider() { - - } + public slider() {} /** * 设置组件 scrollbar 配置 */ - public scrollbar() { - - } + public scrollbar() {} /** * 设置组件 timeline 配置 */ - public timeline() { - - } + public timeline() {} /** * 是否开启动画 */ - public animation() { + public animation() {} - } + /** 创建 Geometry 的 API ********************************************** */ - /** 创建 Geometry 的 API ***********************************************************************************/ + public line() {} - public line() { + public point() {} - } + public interval() {} - public point() { - - } + public area() {} - public interval() { - - } + public polygon() {} - public area() { - - } + public edge() {} - public polygon() { - - } - - public edge() { - - } - - /** 生命周期的 API 函数 ***********************************************************************************/ + /** 生命周期的 API 函数 ************************************** */ /** * 初始化 */ - public init() { - - } + public init() {} /** * 渲染（异步） */ public async render() { - + // do render } /** * 销毁 */ - public destroy() { - - } + public destroy() {} - /** Get 数据的一些 API，做自定义的数据来源 **********************************************************************************/ + /** Get 数据的一些 API，做自定义的数据来源 ******************************************* */ /** * 获得所有的 scale 数组信息 */ - public getScales() { - - } + public getScales() {} /** * 获得某一个字段的 scale * @param field 字段 id */ - public getScale(field: string) { - - } + public getScale(field: string) {} /** * 获取实际展示在画布中的数据（经过过滤后的） */ - public getData() { - - } + public getData() {} /** * 获取原始传入的数据 */ - public getOriginalData() { - - } + public getOriginalData() {} - /** 数据操作的一些 API **********************************************************************************/ + /** 数据操作的一些 API **************************************** */ /** * 进行数据的过滤（数据分析：筛选、过滤） */ - public filter() { - - } + public filter() {} /** * 更新数据（数据分析：下钻） */ - public changeData() { - - } + public changeData() {} /** * 设置数据的状态（数据分析：联动） */ - public state() { - - } + public state() {} } diff --git a/src/core.ts b/src/core.ts index 1b0bc78cf2..33126da2cc 100644 --- a/src/core.ts +++ b/src/core.ts @@ -4,11 +4,11 @@ export const VERSION = '5.0.0-beta.1'; export { Datum, Data } from './types'; /** - * + * */ export { Chart, View } from './chart'; /** - * + * */ -export { Geometry, Element } from './geometry'; \ No newline at end of file +export { Geometry, Element } from './geometry'; diff --git a/src/geometry/element.ts b/src/geometry/element.ts index ef77f45ce5..af98bd47b2 100644 --- a/src/geometry/element.ts +++ b/src/geometry/element.ts @@ -4,7 +4,6 @@ import EE from '@antv/event-emitter'; */ export class Element extends EE { - /** * 绘制图形 Element 对应的数据层模型 */ @@ -24,14 +23,10 @@ export class Element extends EE { /** * 显示 */ - public show() { - - } + public show() {} /** * 隐藏 */ - public hide() { - - } -} \ No newline at end of file + public hide() {} +} diff --git a/src/geometry/geometry.ts b/src/geometry/geometry.ts index 875b219f2a..429ba4b481 100644 --- a/src/geometry/geometry.ts +++ b/src/geometry/geometry.ts @@ -4,64 +4,46 @@ import EE from '@antv/event-emitter'; * 所有 Geometry 的基类 */ export class Geometry extends EE { - constructor() { super(); } - /** 设置图形的视觉通道字段和配置 ***********************************************************************************/ + /** 设置图形的视觉通道字段和配置 ************************************* */ /** * 位置通道：x, y */ - public position() { - - } + public position() {} /** * 位置通道：x, y */ - public color() { - - } + public color() {} /** * 大小通道：size */ - public size() { - - } + public size() {} /** * 数据标签通道：label */ - public label() { - - } + public label() {} /** * tooltip 通道：tooltip */ - public tooltip() { - - } + public tooltip() {} /** * sequence 序列通道：sequence */ - public sequence() { - - } + public sequence() {} - /** 获取信息的 API ***********************************************************************************/ + /** 获取信息的 API **************************************** */ /** * 获取当前 Geometry 对应的 elements 绘图元素 */ - public getElements() { - - } - - + public getElements() {} } - \ No newline at end of file diff --git a/src/geometry/index.ts b/src/geometry/index.ts index 423f7d6a02..3ab439d5a1 100644 --- a/src/geometry/index.ts +++ b/src/geometry/index.ts @@ -6,6 +6,5 @@ * 4. 各种内置的 Geometry */ - export { Geometry } from './geometry'; - export { Element } from './element'; - \ No newline at end of file +export { Geometry } from './geometry'; +export { Element } from './element'; From 2135c3c23c2000ad263106f4cc14c3e32fc1af50 Mon Sep 17 00:00:00 2001 From: hustcc Date: Thu, 15 Apr 2021 17:29:51 +0800 Subject: [PATCH 3/3] chore: add limit-size --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 243b150cb5..34179b8f18 100644 --- a/package.json +++ b/package.json @@ -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",