WakaTime Dashboard Pro

项目地址
项目 Demo

---

之前一直有使用一个开源项目， superman66大神的wakatime-dashboard ，大致介绍一下这个项目，就是利用另一个同步的项目：wakatime-sync，每天将你的 WakaTime 的数据同步到你的 github 的 gist 上，然后再读取 gist 上的 json 数据，用图表去展示你的代码使用情况，非常喜欢 wakatime 这个统计工具，是因为自己很喜欢回顾之前做的项目情况，知道自己这段时间究竟做了哪些事情，也有利于自己更好地分配时间

INFO

什么是WakaTime: 它是一个可以统计你日常开发项目具体信息的工具。 在相应的编辑器中安装插件后，您可以获取您过去 7 天的代码信息。 如果您需要获得更多，则需要付费升级到高级版本

开始优化

但是个人因为用久了觉得之前的图表不能那么方便地显示一些项目具体信息，于是乎对大神原有的项目进行了重构，主要有以下这些功能的改进和增加：

一、功能增加

1. 增加日历选择工具，可以选择具体的某段时间，而不是只能选择前 N 天
2. 增加下载图表功能，可以方便地下载自己的项目图表数据
3. 在图表数据日期比较多的情况下，可以让用户横向滚动或出现日期筛选滚动条
4. 增加选择时间内的总的项目使用情况（原有的只是每天的项目情况）
5. 增加选择时间内的总的编程语言使用情况
6. 增加选择时间内的开发工具的使用情况
7. 增加夜间模式
8. 结合 GIthub Action 随时同步自己的修改到 master 分支，方便 Github Page 直接使用项目

二、功能去除

1. 去掉登录功能，直接让用户随时输入 gistid
2. 去除相关友情链接

技术栈和构建框架选择

之前一直想着试试Vite开发，于是乎这次正好就用上了，主体依然是用React开发，但因为之前项目用的图框架是bizcharts，所以这次想着直接简单点直接用**Ant Design+Antd 的图表框架**，整个项目使用下来，觉得 Vite 确实挺方便的

某些插件用的时候可能会有兼容问题，因为其强制采用了ES Module 来实现模块的加载，所以如果你使用的包有问题，可能要搜一下对应的一些兼容方法

\