chore: init

.commitlintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', 'wip'],
+    ],
+  },
+};

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc

@@ -0,0 +1,38 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["prettier", "@typescript-eslint", "import"],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "impliedStrict": true
+  },
+  "rules": {
+    "no-sparse-arrays": 0,
+    "no-self-assign": 0,
+    "no-unused-vars": 0, // @typescript-eslint/no-unused-vars
+    "no-inner-declarations": 0,
+    "prettier/prettier": 2,
+    "@typescript-eslint/no-unused-vars": 1,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-use-before-define": [2, { "functions": false }],
+    "@typescript-eslint/ban-ts-ignore": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/camelcase": 0,
+    "@typescript-eslint/no-inferrable-types": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/type-annotation-spacing": 0,
+    "@typescript-eslint/no-empty-function": 1,
+    "no-undef": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "import/order": 2,
+    "import/no-default-export": 2
+  }
+}

.github/workflows/build.yml

@@ -0,0 +1,21 @@
+name: build
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm i
+    - run: npm run lint
+    - run: npm run build

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea
+.cache
+
+build
+package-lock.json
+
+public

.prettierignore

@@ -0,0 +1,4 @@
+stats.json
+.cache
+dist
+.umi

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

README.md

@@ -0,0 +1,45 @@
+# chart-perf
+
+> G2 栈的性能测试监控工具！防止在迭代过程中性能出现急剧下降！ 线上[运行地址](https://git.hust.cc/charts-perf/)。
+
+
+## 设计原型
+
+![](https://cdn.nlark.com/yuque/0/2021/png/86342/1611302802385-2480e366-4d5d-4d61-8f08-331b84cc3161.png)
+
+说明：
+
+ - 头部、尾部样式按照主流网站，保证基本好看即可
+ - 内容部分分成两部分：
+    - 配置：
+      - 选择引擎（G2, G2Plot, ECharts, Highcharts） 三种；
+      - 选择 Case（折线图、面积图、柱形图、散点图）
+      - 选择数据量
+    - 开始执行（执行过程中，页面增加 loading 框，过程中会进行串行运行性能测试，时间可能比较长）
+    - 完成之后，获得数据进行图表的绘制（按照 Case 分成不同的图）
+      - X 轴是数据量，从 200 ~ 20000
+      - Y 轴是渲染时间
+      - 按照图表引擎的类型分组
+
+
+## 技术栈
+
+ - 使用 Ant Design 进行 UI 绘制
+ - 样式使用 less 文件
+ - 图表绘制使用 [G2Plot](https://github.com/antvis/G2Plot)
+ - ~~~性能测试的 Case 使用 iframe 沙箱运行~~~
+
+
+## 运行
+
+```bash
+# 安装依赖
+$ tnpm i
+
+# 运行，本地启动
+$ tnpm start
+```
+
+## License
+
+MIT@[hustcc](https://github.com/hustcc).

gatsby-config.js

@@ -0,0 +1,34 @@
+/**
+ * Configure your Gatsby site with this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/gatsby-config/
+ */
+
+module.exports = {
+  siteMetadata: {
+    author: 'hustcc',
+    title: '👋 Performance Test for Charts',
+    siteUrl: `https://git.hust.cc/charts-perf`,
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-antd',
+      options: {
+        style: true,
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-less',
+      options: {
+        strictMath: true,
+        lessOptions: {
+          javascriptEnabled: true,
+          modifyVars: {
+            'primary-color': '#873bf4',
+            'font-family': 'Arial',
+          },
+        },
+      },
+    },
+  ],
+};

package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@antv/perf",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "gatsby develop",
+    "lint": "eslint --ext .ts ./src && prettier --check ./src",
+    "fix": "eslint --ext .ts ./src --fix && prettier --write ./src",
+    "lint-staged": "lint-staged",
+    "build": "rimraf public && gatsby build && rimraf public/**/*.js.map",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "deploy": "npm run build && gh-pages -d public"
+  },
+  "dependencies": {
+    "@antv/g2": "^4.1.9",
+    "@antv/g2plot": "^2.3.10",
+    "antd": "^4.11.2",
+    "echarts": "^5.0.1",
+    "highcharts": "^9.0.0",
+    "lodash": "^4.17.10",
+    "miz": "^1.0.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-g2plot": "^0.3.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-angular": "^11.0.0",
+    "@types/lodash": "^4.14.168",
+    "@types/react": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/parser": "^4.14.1",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "gatsby": "^2.31.1",
+    "gatsby-plugin-antd": "^2.2.0",
+    "gatsby-plugin-less": "^4.6.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.0",
+    "pre-commit": "^1.2.2",
+    "prettier": "^2.2.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.1.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}

src/common/const.ts

@@ -0,0 +1,9 @@
+// 默认提供的 引擎
+export const ENGINES = ['G2', 'G2Plot', 'ECharts','Highcharts'];
+// 默认提供的 图表
+export const CHART_TYPES = [
+  { value: 'Line', label: 'Line' },
+  { value: 'Area', label: 'Area' },
+  { value: 'Bar', label: 'Bar' },
+  { value: 'Scatter', label: 'Scatter' },
+];

src/helper.ts

@@ -0,0 +1,71 @@
+import * as _ from 'lodash';
+import { M } from 'miz'; // ES6
+
+/**
+ * 创建一个 div 节点
+ */
+export const createDIV = (parent: HTMLElement): HTMLElement => {
+  const div = document.createElement('div');
+
+  parent.appendChild(div);
+
+  return div;
+};
+
+/**
+ * 移除 dom 元素
+ * @param dom
+ */
+export const removeDIV = (dom: HTMLElement): void => dom.remove();
+
+/**
+ * 获得测试的数据长度序列（按需配置）
+ * @param start
+ * @param end
+ * @param step
+ */
+export const getSeq = (start = 200, end = 10000, step = 200): number[] => {
+  const r = [];
+  for (let i = start; i <= end; i += step) {
+    r.push(i);
+  }
+
+  return r;
+};
+
+export const X_FIELD = 'x';
+export const Y_FIELD = 'y';
+export const Z_FIELD = 'z';
+
+// 容器宽高
+export const size = {
+  // 长宽
+  height: 500,
+  width: 800,
+};
+
+/**
+ * 数据 mock，根据数据量缓存
+ * @param length
+ * @param x
+ * @param y
+ */
+export const mock = _.memoize((length: number, x: string = X_FIELD, y: string = Y_FIELD, z: string = Z_FIELD) =>
+  M.arrayOf(
+    M.shape({
+      [x]: M.string(10),
+      [y]: M.number(10, 1000),
+      [z]: M.number(10, 1000),
+    }),
+    length
+  ).mock()
+);
+
+// 阻塞进程
+export function sleep(ms: number = 50): Promise<boolean> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, ms);
+  });
+}