Skip to content

fangge/wakatime-dashboard-pro

Repository files navigation

Wakatime Dashboard pro

Wakatime Dashboard gets data from Gist.

原大神项目地址:https://github.com/superman66/wakatime-dashboard

Demo

en doc

感谢大神弄了那么方便的 wakatime 图表展示,因为自己本身也是 wakatime 的忠实粉丝,很喜欢回看自己的编程数据

但是原来的这个项目虽然自己 fork 了之后加上了时间,也有 push 一个 request 给大神一个访问 gist 数据方式的优化,但终究还是觉得自己重新折腾一下,增加一些数据展示会清晰一些,所以制作了这个自称 pro 的版本

升级的功能

  1. 柱状图可以有联动效果,知道每个项目每天的时间变化
  2. 可以选择具体的某个时间段,而不是只是单纯的前 N 天
  3. 增加选择的时间区间内的项目矩形树图,清晰知道自己这段时间每个项目占用的时间
  4. 增加选择的时间区间内使用的编程语言汇总
  5. 增加选择时间范围内的项目汇总表格,展示项目开发时间,而且增加编辑行,可以方便编辑每一行的内容,便于输出项目周报
  6. 增加所选时间范围内的项目统计:总共花费的时长、打代码最长时间的日期、用时最长的项目和最短的项目

使用步骤

  1. 备份 WakaTime 数据到 Gist 的具体步骤请看:wakatime-sync
  2. 将建好的 GistId 输入到输入框中,即可访问你的项目 Waka 概况

wakatime-sync 的使用有个需要注意的地方,就是 gits 存放的数据是有限的,个人是建议每一年结束后自己备份一下全年数据,然后清空一下,重新再保存下一年的数据,因为我是从 18 年用到现在的,19 年的时候突然某段时间发现数据断了,后来才发现 gist 提示数据过多,所以各位可以定时备份一下,或者每一年用不同的 gistid 也可以

Oauth Apps

因为https://api.github.com/gists 这个方法请求 gist 每日是有次数限制的,如果你觉得项目可能需要多次访问,建议可以新建一个 Oauth Apps,创建地址:https://github.com/settings/developers 创建

创建好后,你请求的地址就改成

`https://api.github.com/gists/${gistid}?client_id=${client_id}&client_secret={$client_secret}`;

项目构建

Vite + React + Ant Design + Ant Design Charts

Usage

git clone https://github.com/fangge/wakatime-dashboardpro.git && cd wakatime-dashboardv2
npm i && npm run dev

build

npm run build

Github Action 搭配 Page 使用

本项目默认分支是设置了 source,然后将构建好的文件推送到 master 分支,然后 github page 生成的时候读取的是 master 分支内的文件,可在.github/workflows/main.yml中修改相关分支,已写相关注释

在项目的Setting中增加两个参数:ACCESS_TOKEN 和 BASE_DOMAIN

  • ACCESS_TOKEN: 在Personal access tokens 中新建 token
  • BASE_DOMAIN:BASE_DOMAIN 可选,如果你的 Github Page 自定义了域名,则需要添加,如果不需要,可自行在 yml 中删除构建的--base 参数