├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── README.md
├── app.ts
├── app
├── controller
│ ├── home.ts
│ └── repo.ts
├── entity
│ └── ChartsOptions.ts
├── extend
│ ├── context.ts
│ └── helper.ts
├── router.ts
├── service
│ ├── fork.ts
│ ├── home.ts
│ ├── language.ts
│ └── star.ts
├── utils
│ ├── charts-render.ts
│ └── index.ts
└── validator
│ ├── home.ts
│ └── repo.ts
├── appveyor.yml
├── charts-theme
├── language
│ └── default.js
└── star
│ └── default.js
├── config
├── config.default.ts
├── config.prod.ts
└── plugin.ts
├── examples
└── test.svg
├── html
├── .browserslistrc
├── .eslintrc.js
├── .postcssrc.js
├── .prettierrc.js
├── babel.config.js
├── public
│ ├── favicon.ico
│ └── index.html
└── src
│ ├── App.vue
│ ├── assets
│ └── logo.png
│ ├── components
│ └── HelloWorld.vue
│ ├── main.js
│ ├── router.js
│ ├── store.js
│ └── views
│ ├── About.vue
│ └── Home.vue
├── laboratory
├── echartsOptions.js
├── puppeteerTest.js
├── testChartist.js
├── testEchartSVG.js
├── testLanguageData.js
└── testStarData.js
├── package-lock.json
├── package.json
├── tsconfig.json
├── typings
├── app
│ ├── controller
│ │ └── index.d.ts
│ ├── extend
│ │ ├── context.d.ts
│ │ └── helper.d.ts
│ ├── index.d.ts
│ └── service
│ │ └── index.d.ts
├── config
│ ├── index.d.ts
│ └── plugin.d.ts
└── index.d.ts
└── vue.config.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | end_of_line = lf
9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 |
12 | [*.md]
13 | insert_final_newline = false
14 | trim_trailing_whitespace = false
15 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/*.d.ts
2 | node_modules/
3 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "extends": [
4 | "plugin:@typescript-eslint/recommended",
5 | "prettier/@typescript-eslint",
6 | "plugin:prettier/recommended"
7 | ],
8 | "plugins": [
9 | "@typescript-eslint",
10 | "prettier"
11 | ],
12 | "parserOptions": {
13 | "project": "./tsconfig.json"
14 | },
15 | "env": {
16 | "node": true,
17 | "es6": true
18 | },
19 | "rules": {
20 | "prettier/prettier": 1,
21 | "no-console": ["off", { "allow": ["warn", "error"] }],
22 | "eqeqeq": ["warn", "always"],
23 | "quotes": ["error", "single"],
24 | "semi": ["error", "never"],
25 | "prefer-const": ["error", {"destructuring": "all", "ignoreReadBeforeAssign": true}],
26 | "@typescript-eslint/indent": ["off", 2, { "VariableDeclarator": 4, "SwitchCase": 1 }],
27 | "@typescript-eslint/no-explicit-any": 0,
28 | "@typescript-eslint/no-unused-vars": 0,
29 | "@typescript-eslint/interface-name-prefix": 0,
30 | "@typescript-eslint/explicit-member-accessibility": 0,
31 | "@typescript-eslint/no-triple-slash-reference": 0,
32 | "@typescript-eslint/ban-ts-ignore": 0,
33 | "@typescript-eslint/no-this-alias": 0,
34 | "@typescript-eslint/triple-slash-reference": ["error", { "path": "always", "types": "never", "lib": "never" }],
35 | "@typescript-eslint/no-array-constructor": 0,
36 | "@typescript-eslint/explicit-function-return-type": 0
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .env
2 | logs/
3 | npm-debug.log
4 | node_modules/
5 | coverage/
6 | .idea/
7 | run/
8 | logs/
9 | .DS_Store
10 | .vscode
11 | *.swp
12 | *.lock
13 | !.autod.conf.js
14 |
15 | app.js
16 | app/**/*.js
17 | test/**/*.js
18 | config/**/*.js
19 | app/**/*.map
20 | test/**/*.map
21 | config/**/*.map
22 |
23 | report*
24 |
25 | ## Vue.js
26 | .DS_Store
27 | node_modules
28 | /dist
29 |
30 | # local env files
31 | .env.local
32 | .env.*.local
33 |
34 | # Log files
35 | npm-debug.log*
36 | yarn-debug.log*
37 | yarn-error.log*
38 |
39 | # Editor directories and files
40 | .idea
41 | .vscode
42 | *.suo
43 | *.ntvs*
44 | *.njsproj
45 | *.sln
46 | *.sw?
47 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | tabWidth: 2,
3 | singleQuote: true,
4 | semi: false,
5 | trailingComma: 'es5',
6 | bracketSpacing: true,
7 | jsxBracketSameLine: true,
8 | arrowParens: 'always',
9 | parser: 'typescript',
10 | };
11 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - '8'
5 | - '10'
6 | - '12'
7 | before_install:
8 | - npm i npminstall -g
9 | install:
10 | - npminstall
11 | script:
12 | - npm run ci
13 | after_script:
14 | - npminstall codecov && codecov
15 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
Github Repo Charts
4 | 为你的 README 生成 GitHub 仓库成长图，个人数据报表
5 |
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
17 |
18 |
19 |
20 |
21 | 
22 |
23 |
24 | 
25 |
26 |
27 |
32 |
33 |
34 | ## 特性
35 | * [生成仓库成长图表](#生成仓库成长图表)
36 | * [生成仓库语言图](#生成仓库语言图)
37 | * [全部 Demo](#全部-Demo)
38 | * [开发](#开发)
39 | * [TODO](#TODO)
40 |
41 | ## 生成仓库成长图表
42 |
43 | > Github Star 成长图例是循环访问了 Github API 并获取到仓库的 Star 列表，由于 API 的限制，我们不能完美的获取到所有 Star 和其对应的时间节点，所以只提供了少于 500Star 项目的图例，如果你的项目 Star 数超过500，那么图例也仅仅会渲染前500条，姑且认为超过500条的项目已经是稍微成熟点的项目了，哈哈
44 |
45 | #### 生成 Stars 图表
46 |
47 | 将以下代码复制到你的 markdown 文件中，即可欣赏你的仓库成长图了
48 | 需要更新 `repo=` 为你的仓库名称，`owner=` 为你的用户名称
49 |
50 | ```md
51 | 
52 | ```
53 |
54 | #### 设置标题与副标题
55 |
56 | 在图例中，我们默认使用 `${owner}/${repo}` 的形式作为主标题，`Star 成长曲线` 作为副标题，你也可以通过传参来修改他们
57 | 修改 `title=` 为你的主标题，`subtitle=` 为你的副标题
58 | 你也可以使用 `showTitle=true` 或者 `showSubtitle=false` 来控制主标题与副标题的隐藏
59 | ```md
60 | 
61 | ```
62 |
63 | #### 生成 Forks 图表
64 |
65 | > Forks 与 Stars 的原因一样，出于 Github API 的限制，我们只能获取到500条数据
66 |
67 |
68 | 以下代码即可生成Forks成长图例，或许你已经注意到，我们只是加了一个特殊的参数 `from=fork`，`from`参数用于区分数据来源于`star`还是`fork`，如果你不传递该参数，则默认使用`star`，其他参数与获取 Star 图例的接口一致
69 |
70 | ```md
71 | 
72 | ```
73 |
74 | ## 生成仓库语言图
75 |
76 | 该图例支持两种生成方式，当 `owner=` 不为空时，会获得该用户名下所有仓库的语言图，如果 `owner=` 和 `repo=` 皆不为空的时候，会生成该仓库的语言图
77 | > 图例的颜色选项来自 GitHub, GitHub 对每一种语言都有唯一的颜色定义
78 |
79 | #### 获取用户所有语言
80 | ```md
81 | 
82 | ```
83 |
84 |
85 | 
86 |
87 |
88 |
89 | #### 获取单个仓库语言
90 |
91 | ```md
92 | 
93 | ```
94 |
95 |
96 | 
97 |
98 |
99 | ## 全部 Demo
100 | 
101 | 
102 | 
103 |
104 | ## 开发
105 |
106 | 如果你有意参与此项目，或者你仅仅只是想本地运行，那么你只需要以下步骤即可正常运行
107 |
108 | #### 步骤一
109 | 我们需要你把项目正确的clone下来，并安装相关依赖，需要注意的是，项目中含有 [puppeteer](https://github.com/puppeteer/puppeteer) 相关依赖，如果存在下载不成功的情况，请参阅其他文档
110 |
111 | ```bash
112 | git clone https://github.com/TaroXin/github-repo-charts.git
113 | cd github-repo-charts && npm i
114 | ```
115 |
116 | #### 步骤二
117 | 新建 `.env` 文件，这是我们的私有变量文件，存储个人的`Github Access Token`以及我们需要用作数据缓存的`Redis`相关配置，以下配置不可用，需要你配置好自己的数据
118 | ```bash
119 | GITHUB_ACCESS_TOKEN=
120 |
121 | REDIS_IP=
122 | REDIS_PORT=
123 | REDIS_PASSWORD=
124 |
125 | ```
126 |
127 | #### 步骤三
128 | 运行项目，并访问
129 | ```bash
130 | npm run dev
131 | open http://localhost:7001/api/repo/starChart
132 | ```
133 | 你会得到一个`422`错误，来提醒你缺少相应的参数配置
134 |
135 | ## TODO
136 | * 生成原创项目 Star 与 Fork 对比柱状图
137 | * 生成 Github 数据主页
138 | * Docker 私有化部署
--------------------------------------------------------------------------------
/app.ts:
--------------------------------------------------------------------------------
1 | import { Application } from 'egg'
2 | import 'reflect-metadata'
3 | import { createApolloFetch } from 'apollo-fetch'
4 | require('dotenv').config({ path: '.env' })
5 |
6 | export default (app: Application) => {
7 | app.ready(async () => {
8 | console.log('====== application ready =======')
9 |
10 | const apolloFetch = createApolloFetch({
11 | uri: 'https://api.github.com/graphql',
12 | })
13 |
14 | apolloFetch.use(({ options }, next) => {
15 | if (!options.headers) {
16 | options.headers = {}
17 | }
18 | options.headers[
19 | 'authorization'
20 | ] = `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`
21 | options.headers['Accept'] = 'application/vnd.github.cloak-preview'
22 | options.headers['Content-Type'] = 'application/json'
23 | next()
24 | })
25 | app.apolloFetch = apolloFetch
26 | })
27 | }
28 |
--------------------------------------------------------------------------------
/app/controller/home.ts:
--------------------------------------------------------------------------------
1 | import { Controller } from 'egg'
2 |
3 | export default class HomeController extends Controller {
4 | public async test() {
5 | const { ctx } = this
6 |
7 | ctx.resSucc({
8 | result: 'Get it',
9 | })
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/app/controller/repo.ts:
--------------------------------------------------------------------------------
1 | import { Controller } from 'egg'
2 | import { formatLanguageList } from '../utils'
3 |
4 | export default class RepoController extends Controller {
5 | /**
6 | * @name 获取仓库的Star成长图表
7 | * @router get /api/repo/starChart
8 | */
9 | public async starChart() {
10 | const { ctx, app } = this
11 | const params = ctx.validate(app.validator.repo.starChart, ctx.query, {
12 | allowUnknown: true,
13 | })
14 |
15 | const {
16 | repo,
17 | owner,
18 | title,
19 | subtitle,
20 | showTitle,
21 | showSubtitle,
22 | from,
23 | } = params.value
24 |
25 | const repoFullname = `${owner}/${repo}`
26 | const cacheKey = `${repoFullname}/${from}`
27 | const cacheData = await app.redis.get(cacheKey)
28 | let dataList: any[] = []
29 | if (cacheData) {
30 | dataList = JSON.parse(cacheData)
31 | } else {
32 | if (from === 'star') {
33 | const [
34 | totalCount,
35 | createdAt,
36 | ] = await ctx.service.star.getStarTotalCount(repo, owner)
37 | dataList = await ctx.service.star.getStarListWithREST(
38 | repo,
39 | owner,
40 | totalCount,
41 | createdAt
42 | )
43 | await app.redis.set(
44 | cacheKey,
45 | JSON.stringify(dataList),
46 | 'EX',
47 | 3600 * 2 // redis 缓存请求结果 2小时
48 | )
49 | } else {
50 | const [
51 | totalCount,
52 | createdAt,
53 | ] = await ctx.service.fork.getStarTotalCount(repo, owner)
54 | dataList = await ctx.service.fork.getForkListWithREST(
55 | repo,
56 | owner,
57 | totalCount,
58 | createdAt
59 | )
60 | await app.redis.set(
61 | cacheKey,
62 | JSON.stringify(dataList),
63 | 'EX',
64 | 3600 * 2 // redis 缓存请求结果 2小时
65 | )
66 | }
67 | }
68 |
69 | const defaultSubtitle =
70 | from === 'star' ? 'Star成长曲线图' : 'Fork成长曲线图'
71 | await ctx.resCharts(dataList, {
72 | title: title || repoFullname,
73 | subtitle: subtitle || defaultSubtitle,
74 | theme: 'default',
75 | showTitle,
76 | showSubtitle,
77 | })
78 | }
79 |
80 | /**
81 | * @name 获取语言玫瑰图
82 | * @router get /api/repo/languageChart
83 | */
84 | public async languageChart() {
85 | const { ctx, app } = this
86 | const params = ctx.validate(app.validator.repo.languageChart, ctx.query, {
87 | allowUnknown: true,
88 | })
89 |
90 | const { owner, repo } = params.value
91 |
92 | const cacheKey = repo ? `language/${owner}/${repo}` : `language/${owner}`
93 | const cacheData = await app.redis.get(cacheKey)
94 | let dataList: any[] = []
95 | let colors: string[] = []
96 | let legendItems: string[] = []
97 | if (cacheData) {
98 | const [nodes, colorNodes, items] = formatLanguageList(
99 | JSON.parse(cacheData),
100 | !!repo
101 | )
102 | dataList = nodes
103 | colors = colorNodes
104 | legendItems = items
105 | } else {
106 | const loadedData = await ctx.service.language.getLanguageList(owner, repo)
107 | await app.redis.set(
108 | cacheKey,
109 | JSON.stringify(loadedData),
110 | 'EX',
111 | 3600 * 2 // redis 缓存请求结果 2小时
112 | )
113 | const [nodes, colorNodes, items] = formatLanguageList(loadedData, !!repo)
114 | dataList = nodes
115 | colors = colorNodes
116 | legendItems = items
117 | }
118 |
119 | await ctx.resCharts(
120 | dataList,
121 | {
122 | title: `${owner}'s Language`,
123 | subtitle: '',
124 | showTitle: true,
125 | showSubtitle: true,
126 | theme: 'default',
127 | colors,
128 | legendItems,
129 | },
130 | 'language'
131 | )
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/app/entity/ChartsOptions.ts:
--------------------------------------------------------------------------------
1 | export default class ChartsOptions {
2 | title: string
3 | subtitle: string
4 | theme?: 'default' = 'default'
5 | showTitle? = true
6 | showSubtitle? = true
7 | colors?: string[] = []
8 | legendItems?: string[] = []
9 | }
10 |
--------------------------------------------------------------------------------
/app/extend/context.ts:
--------------------------------------------------------------------------------
1 | // app/extend/context.ts
2 | import { Context } from 'egg'
3 | import { starChartsRender, languageChartsRender } from '../utils/charts-render'
4 | import ChartsOptions from '../entity/ChartsOptions'
5 |
6 | export default {
7 | resSucc(this: Context, data: Record = {}) {
8 | this.body = {
9 | code: 0,
10 | data,
11 | }
12 | },
13 |
14 | resFail(this: Context, message: string) {
15 | this.body = {
16 | code: 30001,
17 | message,
18 | }
19 | },
20 |
21 | resParamError(this: Context, message = '请求参数不符合接口规则') {
22 | this.body = {
23 | code: 30002,
24 | message,
25 | }
26 | },
27 |
28 | resDataError(this: Context, message = '请求参数错误', code = 30003) {
29 | this.body = {
30 | code,
31 | message,
32 | }
33 | },
34 |
35 | async resCharts(
36 | this: Context,
37 | data: any[],
38 | options: ChartsOptions,
39 | type: 'star' | 'language' = 'star'
40 | ) {
41 | let svg = ''
42 | switch (type) {
43 | case 'star':
44 | svg = await starChartsRender(data, options)
45 | break
46 | case 'language':
47 | svg = await languageChartsRender(data, options)
48 | break
49 | }
50 | this.set('content-type', 'image/svg+xml;charset=utf-8')
51 | this.set('cache-control', 'public, max-age=86400')
52 | this.set('date', new Date().toDateString())
53 | this.set('expires', new Date(Date.now() + 3600 * 2 * 1000).toDateString())
54 | this.body = svg
55 | },
56 | }
57 |
--------------------------------------------------------------------------------
/app/extend/helper.ts:
--------------------------------------------------------------------------------
1 | // import { IHelper } from 'egg'
2 |
3 | export default {
4 | // async requestGithubGraphQL(this: IHelper, query: string) {
5 | // //
6 | // },
7 | }
8 |
--------------------------------------------------------------------------------
/app/router.ts:
--------------------------------------------------------------------------------
1 | import { Application } from 'egg'
2 |
3 | export default (app: Application) => {
4 | // const { controller, router, jwt } = app
5 | const { controller, router } = app
6 |
7 | router.get('/', controller.home.test)
8 |
9 | // 仓库相关
10 | const repoRouteBase = '/api/repo'
11 | router.get(`${repoRouteBase}/starChart`, app.controller.repo.starChart)
12 | router.get(
13 | `${repoRouteBase}/languageChart`,
14 | app.controller.repo.languageChart
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/app/service/fork.ts:
--------------------------------------------------------------------------------
1 | import { Service } from 'egg'
2 | import { RequestOptions2 as RequestOptions } from 'urllib'
3 |
4 | export default class FormService extends Service {
5 | // 获得Fork总数目 [totalCount, createdAt]
6 | async getStarTotalCount(
7 | repo: string,
8 | owner: string
9 | ): Promise<[number, string]> {
10 | const { ctx, app } = this
11 | const query = `
12 | query($repo: String!, $owner: String!) {
13 | repository(name: $repo, owner: $owner) {
14 | createdAt
15 | forks {
16 | totalCount
17 | }
18 | }
19 | }
20 | `
21 |
22 | const { errors, data } = await app.apolloFetch({
23 | query,
24 | variables: {
25 | repo,
26 | owner,
27 | },
28 | })
29 |
30 | if (errors) {
31 | const message = errors.length ? errors[0].message : errors
32 | ctx.resDataError(message)
33 | throw new Error(message)
34 | }
35 |
36 | return [data.repository.forks.totalCount, data.repository.createdAt]
37 | }
38 |
39 | // 获取 Fork 列表
40 | async getForkListWithREST(
41 | repo: string,
42 | owner: string,
43 | totalCount: number,
44 | createdAt: string
45 | ): Promise {
46 | console.log('获取仓库Fork列表', `${owner}/${repo}`)
47 |
48 | const { ctx } = this
49 | const options: RequestOptions = {
50 | headers: {
51 | Accept: 'application/vnd.github.v3.star+json',
52 | Authorization: 'bearer ' + process.env.GITHUB_ACCESS_TOKEN,
53 | },
54 | contentType: 'json',
55 | timeout: 1000 * 60,
56 | retry: 7,
57 | }
58 |
59 | const url = `https://api.github.com/repos/${owner}/${repo}/forks`
60 | let promises: Promise[] = []
61 | if (totalCount <= 500) {
62 | promises = new Array(Math.ceil(totalCount / 100)).fill(null)
63 | promises = promises.map((_, index) => {
64 | return new Promise(async (resolve) => {
65 | const res = await ctx.curl(
66 | `${url}?page=${index + 1}&per_page=100&sort=oldest`,
67 | options
68 | )
69 | resolve(JSON.parse(res.data.toString()))
70 | })
71 | })
72 | } else {
73 | // Forks 也500个
74 | promises = new Array(5).fill(null)
75 | promises = promises.map((_, index) => {
76 | return new Promise(async (resolve) => {
77 | const res = await ctx.curl(
78 | `${url}?page=${index + 1}&per_page=100&sort=oldest`,
79 | options
80 | )
81 | resolve(JSON.parse(res.data.toString()))
82 | })
83 | })
84 | }
85 |
86 | const data: any[] = []
87 | if (promises.length) {
88 | const list = await Promise.all(promises)
89 | list.forEach((item) => data.push(...item))
90 | }
91 |
92 | // 第一个 Fork 为 0 的时候应该是项目创建的时候
93 | // eslint-disable-next-line @typescript-eslint/camelcase
94 | data.unshift({ created_at: createdAt })
95 | return data.map((item, index) => ({
96 | name: item.created_at,
97 | value: [item.created_at, index],
98 | }))
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/app/service/home.ts:
--------------------------------------------------------------------------------
1 | import { Service } from 'egg'
2 |
3 | export default class HomeService extends Service {
4 | //
5 | }
6 |
--------------------------------------------------------------------------------
/app/service/language.ts:
--------------------------------------------------------------------------------
1 | import { Service } from 'egg'
2 |
3 | export default class LanguageService extends Service {
4 | // 获得仓库语言占比列表
5 | async getLanguageList(owner: string, repo?: string): Promise {
6 | const { ctx, app } = this
7 | const query = `
8 | query($owner: String!) {
9 | user(login: $owner) {
10 | repositories(first: 100) {
11 | nodes {
12 | isFork
13 | languages(first: 10) {
14 | edges {
15 | size
16 | node {
17 | color
18 | name
19 | id
20 | }
21 | }
22 | totalSize
23 | }
24 | }
25 | }
26 | }
27 | }
28 | `
29 |
30 | const repoQuery = `
31 | query($owner: String!, $repo: String!) {
32 | user(login: $owner) {
33 | repository(name: $repo) {
34 | isFork
35 | languages(first: 10) {
36 | edges {
37 | size
38 | node {
39 | color
40 | name
41 | id
42 | }
43 | }
44 | totalSize
45 | }
46 | }
47 | }
48 | }
49 | `
50 |
51 | const { errors, data } = await app.apolloFetch({
52 | query: repo ? repoQuery : query,
53 | variables: repo
54 | ? {
55 | owner,
56 | repo,
57 | }
58 | : {
59 | owner,
60 | },
61 | })
62 |
63 | if (errors) {
64 | const message = errors.length ? errors[0].message : errors
65 | ctx.resDataError(message)
66 | throw new Error(message)
67 | }
68 |
69 | return data
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/app/service/star.ts:
--------------------------------------------------------------------------------
1 | import { Service } from 'egg'
2 | import { RequestOptions2 as RequestOptions } from 'urllib'
3 |
4 | export default class StarService extends Service {
5 | // 获得Star总数目 [totalCount, createdAt]
6 | async getStarTotalCount(
7 | repo: string,
8 | owner: string
9 | ): Promise<[number, string]> {
10 | const { ctx, app } = this
11 | const query = `
12 | query($repo: String!, $owner: String!) {
13 | repository(name: $repo, owner: $owner) {
14 | createdAt
15 | stargazers {
16 | totalCount
17 | }
18 | }
19 | }
20 | `
21 |
22 | const { errors, data } = await app.apolloFetch({
23 | query,
24 | variables: {
25 | repo,
26 | owner,
27 | },
28 | })
29 |
30 | if (errors) {
31 | const message = errors.length ? errors[0].message : errors
32 | ctx.resDataError(message)
33 | throw new Error(message)
34 | }
35 |
36 | return [data.repository.stargazers.totalCount, data.repository.createdAt]
37 | }
38 |
39 | // 获取 Star 列表
40 | async getStarListWithREST(
41 | repo: string,
42 | owner: string,
43 | totalCount: number,
44 | createdAt: string
45 | ): Promise {
46 | console.log('获取仓库Star列表', `${owner}/${repo}`)
47 |
48 | const { ctx } = this
49 | const options: RequestOptions = {
50 | headers: {
51 | Accept: 'application/vnd.github.v3.star+json',
52 | Authorization: 'bearer ' + process.env.GITHUB_ACCESS_TOKEN,
53 | },
54 | contentType: 'json',
55 | timeout: 1000 * 60,
56 | retry: 7,
57 | }
58 |
59 | const url = `https://api.github.com/repos/${owner}/${repo}/stargazers`
60 | let promises: Promise[] = []
61 | if (totalCount <= 500) {
62 | promises = new Array(Math.ceil(totalCount / 100)).fill(null)
63 | promises = promises.map((_, index) => {
64 | return new Promise(async (resolve) => {
65 | const res = await ctx.curl(
66 | `${url}?page=${index + 1}&per_page=100`,
67 | options
68 | )
69 | resolve(JSON.parse(res.data.toString()))
70 | })
71 | })
72 | } else {
73 | // 对大于1000star的项目采用抽样形式，无法做到较为精确
74 | // 抽样有限制，Github API限制页数过多的请求，不知道怎么解决
75 | // 1000 个也搞不了，哎，五百个吧😌
76 | promises = new Array(5).fill(null)
77 | promises = promises.map((_, index) => {
78 | return new Promise(async (resolve) => {
79 | const res = await ctx.curl(
80 | `${url}?page=${index + 1}&per_page=100`,
81 | options
82 | )
83 | resolve(JSON.parse(res.data.toString()))
84 | })
85 | })
86 | }
87 |
88 | const data: any[] = []
89 | if (promises.length) {
90 | const list = await Promise.all(promises)
91 | list.forEach((item) => data.push(...item))
92 | }
93 |
94 | // 第一个Star为0的时候应该是项目创建的时候
95 | // eslint-disable-next-line @typescript-eslint/camelcase
96 | data.unshift({ starred_at: createdAt })
97 | return data.map((item, index) => ({
98 | name: item.starred_at,
99 | value: [item.starred_at, index],
100 | }))
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/app/utils/charts-render.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | import puppeteer = require('puppeteer')
3 | import ChartsOptions from '../entity/ChartsOptions'
4 |
5 | const render = async (options): Promise => {
6 | const browser = await puppeteer.launch({
7 | args: ['--no-sandbox'],
8 | })
9 |
10 | const page = await browser.newPage()
11 | await page.setContent(`
12 |
13 | `)
14 |
15 | await page.evaluate((options) => {
16 | // @ts-ignore
17 | window.chart = {
18 | options,
19 | }
20 | }, options)
21 |
22 | await page.addScriptTag({
23 | url: 'https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js',
24 | })
25 |
26 | //echarts 初始化脚本注入页面
27 | await page.addScriptTag({
28 | content: `
29 | (function (window) {
30 | let option = window.chart.options;
31 | var myChart = window.echarts.init(document.getElementById('container'), null, {
32 | renderer: 'svg'
33 | });
34 | myChart.setOption(option);
35 | })(this);
36 | `,
37 | })
38 |
39 | const eles = await page.$eval('#container svg', (el) => el.outerHTML)
40 | await page.close()
41 | await browser.close()
42 | return eles
43 | }
44 |
45 | export async function starChartsRender(
46 | data: any[],
47 | options: ChartsOptions
48 | ): Promise {
49 | const optionData = require(`../../charts-theme/star/${options.theme}.js`)(
50 | data,
51 | options
52 | )
53 | return await render(optionData)
54 | }
55 |
56 | export async function languageChartsRender(
57 | data: any[],
58 | options: ChartsOptions
59 | ): Promise {
60 | const optionData = require(`../../charts-theme/language/${options.theme}.js`)(
61 | data,
62 | options
63 | )
64 | return await render(optionData)
65 | }
66 |
--------------------------------------------------------------------------------
/app/utils/index.ts:
--------------------------------------------------------------------------------
1 | // 格式化语言数组
2 | export function formatLanguageList(
3 | data: any,
4 | hasRepo: boolean
5 | ): [any[], string[], string[]] {
6 | const nodes: any = []
7 | if (hasRepo) {
8 | data.user.repository.languages.edges.forEach((item) => {
9 | const exists = nodes.find((el) => el.id === item.node.id)
10 | if (exists) {
11 | exists.value += item.size
12 | } else {
13 | nodes.push({
14 | ...item.node,
15 | value: item.size,
16 | })
17 | }
18 | })
19 | } else {
20 | data.user.repositories.nodes.forEach((l) => {
21 | if (l.languages.edges && !l.isFork) {
22 | l.languages.edges.forEach((item) => {
23 | const exists = nodes.find((el) => el.id === item.node.id)
24 | if (exists) {
25 | exists.value += item.size
26 | } else {
27 | nodes.push({
28 | ...item.node,
29 | value: item.size,
30 | })
31 | }
32 | })
33 | }
34 | })
35 | }
36 |
37 | nodes.sort((a, b) => b.value - a.value)
38 | const colors = nodes.map((item) => item.color)
39 | const items = nodes.map((item) => item.name)
40 | return [nodes, colors, items]
41 | }
42 |
--------------------------------------------------------------------------------
/app/validator/home.ts:
--------------------------------------------------------------------------------
1 | import { Application } from 'egg'
2 |
3 | export default (app: Application) => {
4 | const { Joi } = app
5 |
6 | return {
7 | // Joi常用的验证类型
8 | index: Joi.object()
9 | .keys({
10 | // 3 - 30 个 数字、字符
11 | username: Joi.string().alphanum().min(3).max(30).required(),
12 | // 3 - 30 位 字母数字组合密码
13 | password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/),
14 | // string || number 都可以通过
15 | accessToken: [Joi.string(), Joi.number()],
16 | // 生日限制
17 | birthyear: Joi.number().integer().min(1900).max(2018),
18 | // email 限制
19 | email: Joi.string().email(),
20 | // URI限制
21 | website: Joi.string().uri({
22 | scheme: ['git', /git\+https?/],
23 | }),
24 | // ==== 允许为空/ 否认不允许为空 ====
25 | search: Joi.string().allow(''),
26 | // 验证枚举值，如果不传，默认为all
27 | type: Joi.string().valid('disabled', 'normal', 'all').default('all'),
28 | // 开始时间 会自动格式化
29 | startTime: Joi.date().min('1-1-1974').max('now'),
30 | // 结束时间 必须大于开始时间，小于2100
31 | endTime: Joi.when(Joi.ref('startTime'), {
32 | is: Joi.date().required(),
33 | then: Joi.date().max('1-1-2100'),
34 | }),
35 | // 页码 限制最小值
36 | page: Joi.number().integer().min(1).default(1),
37 | pageSize: Joi.number().integer().default(8),
38 | //
39 | deleteWhenLtTen: Joi.number().integer().max(10).strip(),
40 | // 数组中包含某个字段 && 数字
41 | arrayString: Joi.array().items(
42 | // 数组中必须包含 name1
43 | Joi.string().label('name1').required(),
44 | // 数组中必须包含 数字
45 | Joi.number().required(),
46 | // 数组中可以包含其他类型，如bool, 但是最终结果会==除掉【以上类型的以外字段】
47 | Joi.any().strip()
48 | ),
49 | // 数组对象, 如需其参考以上字段
50 | arrayObject: Joi.array().items(
51 | Joi.object().keys({
52 | age: Joi.number().integer().max(200),
53 | sex: Joi.boolean(),
54 | })
55 | ),
56 | })
57 | // with 中必须同时存在某些字段，故不可以填写一个参数
58 | .with('username', 'password')
59 | // .without() 同理，不可以一个字段，不能同时存在
60 | .without('a', 'b'),
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/app/validator/repo.ts:
--------------------------------------------------------------------------------
1 | import { Application } from 'egg'
2 |
3 | export default (app: Application) => {
4 | const { Joi } = app
5 |
6 | return {
7 | // Joi常用的验证类型
8 | starChart: Joi.object().keys({
9 | repo: Joi.string().required(),
10 | owner: Joi.string().required(),
11 | title: Joi.string(),
12 | subtitle: Joi.string(),
13 | showTitle: Joi.boolean().default(true),
14 | showSubtitle: Joi.boolean().default(true),
15 | from: Joi.string().valid('star', 'fork').default('star'),
16 | }),
17 |
18 | languageChart: Joi.object().keys({
19 | owner: Joi.string().required(),
20 | repo: Joi.string(),
21 | }),
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
1 | environment:
2 | matrix:
3 | - nodejs_version: '8'
4 | - nodejs_version: '10'
5 | - nodejs_version: '12'
6 |
7 | install:
8 | - ps: Install-Product node $env:nodejs_version
9 | - npm i npminstall && node_modules\.bin\npminstall
10 |
11 | test_script:
12 | - node --version
13 | - npm --version
14 | - npm run test
15 |
16 | build: off
17 |
--------------------------------------------------------------------------------
/charts-theme/language/default.js:
--------------------------------------------------------------------------------
1 | module.exports = (data, options) => {
2 | const defaultColors = [
3 | '#c23531',
4 | '#2f4554',
5 | '#61a0a8',
6 | '#d48265',
7 | '#91c7ae',
8 | '#749f83',
9 | '#ca8622',
10 | '#bda29a',
11 | '#6e7074',
12 | '#546570',
13 | '#c4ccd3',
14 | ]
15 |
16 | let legend = {
17 | left: 'center',
18 | top: 'bottom',
19 | data: options.legendItems,
20 | }
21 |
22 | if (options.legendItems.length > 5) {
23 | const tempArray = new Array(Math.ceil(options.legendItems.length / 5)).fill(
24 | null
25 | )
26 | const bottom = (tempArray.length - 1) * 25
27 | legend = tempArray.map((_, index) => ({
28 | left: 'center',
29 | bottom: bottom - index * 25,
30 | data: options.legendItems.slice(index * 5, index * 5 + 5),
31 | }))
32 | }
33 |
34 | return {
35 | animation: false,
36 | color: options.colors.length ? options.colors : defaultColors,
37 | title: {
38 | show: options.showTitle || options.showSubtitle,
39 | text: options.showTitle ? options.title : '',
40 | textStyle: {
41 | color: '#2468cf',
42 | fontSize: 18,
43 | fontWeight: 'bold',
44 | },
45 | subtext: options.showSubtitle ? 'Powered by github-repo-charts' : '',
46 | subtextStyle: {
47 | color: '#7e848a',
48 | fontSize: 12,
49 | },
50 | left: 'center',
51 | },
52 | legend,
53 | series: [
54 | {
55 | type: 'pie',
56 | radius: [20, 120],
57 | roseType: 'area',
58 | data,
59 | minShowLabelAngle: 5,
60 | label: {
61 | formatter: '{b}: {d}%',
62 | },
63 | },
64 | ],
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/charts-theme/star/default.js:
--------------------------------------------------------------------------------
1 | module.exports = (data, options) => {
2 | const grid = {
3 | left: '3%',
4 | right: '1%',
5 | bottom: '0',
6 | containLabel: true,
7 | }
8 |
9 | if (!options.showTitle && !options.showSubtitle) {
10 | grid.top = '2%'
11 | } else if (!options.showTitle || !options.showSubtitle) {
12 | grid.top = '40px'
13 | }
14 |
15 | return {
16 | animation: false,
17 | title: {
18 | show: options.showTitle || options.showSubtitle,
19 | text: options.showTitle ? options.title : '',
20 | textStyle: {
21 | color: '#2468cf',
22 | fontSize: 18,
23 | fontWeight: 'bold',
24 | },
25 | subtext: options.showSubtitle
26 | ? options.subtitle + '. Powered by github-repo-charts'
27 | : '',
28 | subtextStyle: {
29 | color: '#7e848a',
30 | fontSize: 12,
31 | },
32 | },
33 | grid,
34 | xAxis: [
35 | {
36 | type: 'time',
37 | boundaryGap: false,
38 | nameLocation: 'center',
39 | axisLine: {
40 | show: false,
41 | },
42 | axisTick: {
43 | show: false,
44 | },
45 | },
46 | ],
47 | yAxis: {
48 | position: 'right',
49 | axisLine: {
50 | show: false,
51 | },
52 | axisTick: {
53 | show: false,
54 | },
55 | },
56 | series: [
57 | {
58 | type: 'line',
59 | data,
60 | smooth: true,
61 | smoothMonotone: 'x',
62 | symbol: 'none',
63 | lineStyle: {
64 | color: '#2468cf',
65 | },
66 | areaStyle: {
67 | color: '#2468cf',
68 | },
69 | },
70 | ],
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/config/config.default.ts:
--------------------------------------------------------------------------------
1 | import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg'
2 | require('dotenv').config({ path: '.env' })
3 |
4 | export default (appInfo: EggAppInfo) => {
5 | const config = {} as PowerPartial
6 |
7 | config.keys = appInfo.name + '_1585035503822_2810'
8 |
9 | config.middleware = []
10 |
11 | config.security = {
12 | csrf: {
13 | enable: false,
14 | ignoreJSON: true,
15 | },
16 | domainWhiteList: ['*'],
17 | }
18 |
19 | config.cors = {
20 | origin: '*',
21 | credentials: true,
22 | allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
23 | }
24 |
25 | config.joi = {
26 | options: {},
27 | locale: {
28 | 'zh-cn': {},
29 | },
30 | throw: true,
31 | }
32 |
33 | config.redis = {
34 | client: {
35 | port: Number(process.env.REDIS_PORT),
36 | host: process.env.REDIS_IP,
37 | password: process.env.REDIS_PASSWORD,
38 | db: 0,
39 | },
40 | }
41 |
42 | return {
43 | ...config,
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/config/config.prod.ts:
--------------------------------------------------------------------------------
1 | import { EggAppConfig, PowerPartial } from 'egg'
2 |
3 | export default () => {
4 | const config: PowerPartial = {}
5 |
6 | return config
7 | }
8 |
--------------------------------------------------------------------------------
/config/plugin.ts:
--------------------------------------------------------------------------------
1 | import { EggPlugin } from 'egg'
2 |
3 | const plugin: EggPlugin = {
4 | cors: {
5 | enable: true,
6 | package: 'egg-cors',
7 | },
8 |
9 | joi: {
10 | enable: true,
11 | package: 'egg-joi',
12 | },
13 |
14 | redis: {
15 | enable: true,
16 | package: 'egg-redis',
17 | },
18 | }
19 |
20 | export default plugin
21 |
--------------------------------------------------------------------------------
/examples/test.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/html/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 |
--------------------------------------------------------------------------------
/html/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | node: true,
5 | },
6 | extends: ['plugin:vue/essential', '@vue/prettier'],
7 | rules: {
8 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
9 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
10 | },
11 | parserOptions: {
12 | parser: 'babel-eslint',
13 | },
14 | }
15 |
--------------------------------------------------------------------------------
/html/.postcssrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | autoprefixer: {},
4 | },
5 | }
6 |
--------------------------------------------------------------------------------
/html/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | tabWidth: 2,
3 | singleQuote: true,
4 | semi: false,
5 | trailingComma: 'all',
6 | bracketSpacing: true,
7 | jsxBracketSameLine: false,
8 | arrowParens: 'always',
9 | };
10 |
--------------------------------------------------------------------------------
/html/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['@vue/app'],
3 | }
4 |
--------------------------------------------------------------------------------
/html/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TaroXin/github-repo-charts/f560458437be50b2188034eb024f86bcedfcbd4b/html/public/favicon.ico
--------------------------------------------------------------------------------
/html/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | html
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/html/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Home |
5 | About
6 |
7 |
8 |
3 |
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
10 |
11 |
Installed CLI Plugins
12 |
30 |
Essential Links
31 |
54 |
Ecosystem
55 |
86 |
3 |
This is an about page
4 |
5 |
6 |
--------------------------------------------------------------------------------
/html/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |