JS & SVG 实现的 Git 提交热力图可视化工具

前端

2023-09-29 05:23:22

马赛克墙：一款强大的 Git 提交数据可视化工具

在当今快节奏的软件开发环境中，团队需要快速获取关键信息来保持效率。掌握数据可视化工具的运用，对于优秀的开发人员至关重要，而马赛克墙就是这样一款强大的工具，可以直观地展示 Git 提交数据，帮助开发者更清晰地查看代码贡献和提交情况。

马赛克墙的优势

马赛克墙不仅仅是一款赏心悦目的工具，它还具有以下优势：

日历型热力图： 按日期和星期组织提交，直观地展示代码提交模式。
自定义热力图： 允许自定义横轴和纵轴，关联提交数据和文件类型等其他因素。
灵活的颜色方案： 提供多种颜色选项，满足个人喜好和项目风格。
提交记录查询： 支持查询特定日期或范围内的提交记录。
代码贡献分析： 以饼图或柱状图展示代码贡献情况。
导出功能： 支持将热力图导出为 PNG 或 SVG 图片文件，便于分享和保存。

使用场景

马赛克墙在以下场景中尤为实用：

团队协作： 代码提交热力图可以快速展示团队成员的参与情况，帮助项目负责人评估工作量。
代码审查： 代码审查员可以通过热力图掌握团队成员的代码提交周期，确保项目进度符合预期。

实现原理

马赛克墙通过以下步骤实现：

使用 Git 命令获取提交记录。
将数据解析为 JSON 等合适的数据结构。
使用 JavaScript 生成热力图并渲染到 SVG 中。
将 SVG 插入 HTML 文档。

示例

// 获取提交数据
const gitLog = await exec('git log --pretty=format:"%H %ai"');
// 解析提交数据
const data = gitLog.split('\n').map(line => {
  const [hash, date] = line.split(' ');
  return { hash, date };
});
// 生成热力图
const heatmap = new Heatmap({
  container: document.getElementById('heatmap'),
  data: data,
  startDate: new Date(2023, 0, 1),
  endDate: new Date(),
  xLabel: 'Date',
  yLabel: 'Week'
});