StarTrack-js

<div align="center"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/722036ad-ff08-4bb9-b1cc-d14d67868a62.png" width="550" />

</div>

GitHub星标历史和统计 - 仅基于JavaScript，无需服务器端！

立即尝试：https://seladb.github.io/StarTrack-js/

<div align="center"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/d93c084e-845b-40ad-87cf-2bc712697ebd.gif" width="900" /> </div>

主要特点

• 查看GitHub仓库的星标历史
• 显示点赞者统计数据，如每日平均星标数、单日最高星标数等
• 支持同时显示多个仓库（非常适合比较）
• 根据现有数据显示点赞者预测
• 提供GitHub身份验证（通过访问令牌），以克服GitHub API速率限制器对未经身份验证的API调用次数的限制。身份验证详情存储在本地，不会发送到任何服务器
  • 默认情况下，它们存储在浏览器的会话存储中
  • 用户可以选择将其存储在浏览器的本地存储中以实现更长时间的保存
• 通过URL预加载仓库，例如：https://seladb.github.io/StarTrack-js/#/preload?r=seladb,pickledb-rs 将在加载页面时预加载 seladb/pickledb-rs
• 将点赞者数据下载为JSON或CSV文件

3.1.0版本有什么新功能？

• 增加了将点赞者数据下载为JSON或CSV格式的选项
• 为星标数量过多的仓库引入警告通知，提示加载所有数据时GitHub API的限制
• 引入深色模式
• 在无法获取最新数据时，改进了预测计算的错误处理
• 解决了在移动浏览器中粘贴仓库GitHub URL的相关问题

3.0.0版本有什么新功能？

• 使用Typescript和现代React完全重写代码库
• 从React Bootstrap迁移到Material UI，以获得更一致和精致的外观
• 将图表组件升级为Plotly.js，以更好地渲染大型数据集并改善用户体验
• 增强GitHub身份验证过程，提供更流畅和更友好的用户体验
• 改进预测选择过程，使用户更容易选择所需的预测
• 在仓库统计和图表之间同步时，显示图表的日期范围
• 对所有组件进行完整的测试覆盖

2.4.0版本有什么新功能？

• 添加了根据现有点赞者数据显示预测的选项。预测使用线性最小二乘法回归计算
• 使用 / 键在用户名和仓库名文本框之间切换（感谢 @zaldih！）

2.3.0版本有哪些新功能？

• 并行加载stargazer数据，显著提高了整体加载时间（感谢@gsaraf！）
• 以对数刻度显示图表数据（感谢@passcod！）

2.2.0版本有哪些新功能？

• 增加了对小屏幕设备（移动设备）的支持
• 整体布局略有改进

2.1.0版本有哪些新功能？

• 添加了一个复选框，用于将统计数据与当前显示的图表视图同步。这对于查看特定日期的统计数据很有用
• 现在可以直接粘贴GitHub链接，而无需输入用户名和仓库名，系统会自动解析
• 在显示仓库详情的徽章中添加了GitHub仓库的链接
• 预加载界面：修复了加载下一个仓库时进度条递减的过渡问题
• 所有React组件都从类组件替换为函数组件，并使用了React Hooks

2.0.0版本有哪些新功能？

• 使用React和现代前端技术进行了全面重写
• 显著改进了UI（基本上现在一切看起来都好多了 :-) ）
• 替换了图表组件，现在更容易导航、放大/缩小等
• 增加了删除仓库的选项（在1.0版本中只能添加但不能删除）
• 增加了停止加载数据的选项
• 每个仓库在整个页面中都有专属颜色（图表系列、统计数据、关闭按钮）
• 专门的预加载界面
  • 分别显示每个仓库的进度条
  • 显示未成功加载的仓库的错误信息
• GitHub认证改进
  • 登录后，新的工具提示显示访问令牌存储的位置（浏览器的会话存储或本地存储）
  • 移除了用户名+密码认证，因为GitHub不再支持这种方式

技术细节

本项目基于React构建，部署在GitHub Pages上。它没有后端，所有数据都存储在浏览器本地，除了从GitHub API获取stargazer数据外，不会向任何服务器传递数据。

项目使用了以下yarn包：

• Material UI：用于UI组件
• Plotly.js：用于显示图表
• Axios：用于从GitHub API获取数据
• React Router：用于处理客户端路由
• React Testing Library：作为测试框架
• Formik：用于构建表单
• React Google Analytics Module
• Moment.js：用于处理日期时间
• react-responsive：用于根据屏幕大小（桌面vs移动）调整UI
• react-github-btn：用于显示GitHub按钮
• client-zip：用于下载包含多个文件的数据

开发包：

• ESLint、Prettier及其插件：用于代码检查和格式化
• CSpell：用于拼写检查

要在本地运行，请按以下步骤操作：

• 克隆此仓库：git clone https://github.com/seladb/StarTrack-js.git
• 进入仓库目录：cd StarTrack-js
• 安装此应用所需的 node 模块：yarn install
• 在本地运行：yarn run start