Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kagol/calendar-graph
生成指定的Github贡献图
https://github.com/kagol/calendar-graph
angular calendar-component component component-library devui frontend
Last synced: about 2 months ago
JSON representation
生成指定的Github贡献图
- Host: GitHub
- URL: https://github.com/kagol/calendar-graph
- Owner: kagol
- License: mit
- Created: 2020-03-01T05:55:35.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T22:02:28.000Z (almost 2 years ago)
- Last Synced: 2024-10-12T14:49:46.633Z (3 months ago)
- Topics: angular, calendar-component, component, component-library, devui, frontend
- Language: TypeScript
- Homepage: https://github.com/kagol/calendar-graph
- Size: 660 KB
- Stars: 8
- Watchers: 0
- Forks: 3
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Calendar Graph
生成自定义的Github提交图。
## 快速开始
``` html
```
## 支持的字母和符号
A-Za-z0-9❤️
## API
### date
自定义日期区间
``` javascript
const date = '2020-06-01';
const date = ['2020-06-01'];
const date = ['2020-06-01', '2020-11-03'];
```
### text
自定义显示文本
``` javascript
const text = '❤ DevUI';
const text = 'DevUI is excellent';
const text = 'Today is 20201103';
```
### dataSource
1. 更灵活的配置
``` javascript
const dataSource = transpose([
// I
[ 1, 1, 1, 1, 1, 1, 1 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// a
[ 0, 1, 0, 0, 1, 0, 0 ],
[ 0, 1, 0, 1, 0, 1, 0 ],
[ 0, 1, 0, 1, 0, 1, 0 ],
[ 0, 0, 1, 1, 1, 1, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// m
[ 0, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 0, 0, 0, 0, 0 ],
[ 0, 1, 0, 0, 0, 0, 0 ],
[ 0, 1, 1, 1, 1, 1, 0 ],
[ 0, 1, 0, 0, 0, 0, 0 ],
[ 0, 1, 0, 0, 0, 0, 0 ],
[ 0, 0, 1, 1, 1, 1, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// K
[ 1, 1, 1, 1, 1, 1, 1 ],
[ 0, 0, 0, 1, 0, 0, 0 ],
[ 0, 0, 0, 1, 0, 0, 0 ],
[ 0, 0, 1, 0, 1, 0, 0 ],
[ 1, 1, 0, 0, 0, 1, 1 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// a
[ 0, 1, 0, 0, 1, 0, 0 ],
[ 0, 1, 0, 1, 0, 1, 0 ],
[ 0, 1, 0, 1, 0, 1, 0 ],
[ 0, 0, 1, 1, 1, 1, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// g
[ 0, 1, 1, 1, 0, 0, 1 ],
[ 1, 0, 0, 0, 1, 0, 1 ],
[ 1, 0, 0, 0, 1, 0, 1 ],
[ 1, 1, 1, 1, 1, 1, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// o
[ 0, 0, 1, 1, 1, 0, 0 ],
[ 0, 1, 0, 0, 0, 1, 0 ],
[ 0, 1, 0, 0, 0, 1, 0 ],
[ 0, 0, 1, 1, 1, 0, 0 ],
[ 0, 0, 0, 0, 0, 0, 0 ],
// l
[ 1, 1, 1, 1, 1, 1, 0 ],
])
```
2. 也可以使用定义好的字符变量
``` javascript
const dataSource = [].concat(
LETTER_I, EMPTY_WEEK, EMPTY_WEEK,
LETTER_a, EMPTY_WEEK, LETTER_m, EMPTY_WEEK, EMPTY_WEEK,
LETTER_K, EMPTY_WEEK, LETTER_a, EMPTY_WEEK, LETTER_g, EMPTY_WEEK, LETTER_o, EMPTY_WEEK, LETTER_l
);
```
### schedule
这是一个boolean类型的参数，用于打印提交日程，默认值为false，即不打印提交日程。
提交日程的格式是：
您需要在X年X月X日，提交X次代码。
只要按照日程规定的日期进行Github代码提交，即可在你的Github提交日历图上画出想要的图形，快试试吧！
### theme
``` javascript
类型 string ｜ string[] | object
```
自定义主题
默认主题 [ '#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127' ];
案例
``` html
```
## 栗子🌰
❤️ DevUI
[❤️ DevUI](src/assets/lovedevui.png)
DevUI is excellent
[DevUI is excellent](src/assets/devui-excellent.png)
## TODO
- 解析多种格式的theme
- 主题名称，如：'halloween'
- 基本色，如：'#7F7FF0'
- 颜色数组，如：[ '#e55648', ... ]
- 阶梯查找表，如：{ source: [], target: [] }
- 数值/颜色映射表，如：{ 10: '#fdcf7d', ... }
- 完善提交日历
- 完善Tooltip显示内容