前言
在前端开发中，数据的可视化展示是一个非常重要的方面，某些情况下需要对 GitHub 上的代码提交数据进行可视化展示，这就需要用到 Kerplunk GitHub Graph 这个 npm 包。Kerplunk GitHub Graph 是一个开源的 JavaScript 库，旨在为 GitHub 上的用户和组织生成动态的提交图表。在本文中，我们将详细介绍如何在前端项目中使用 Kerplunk GitHub Graph，以及如何利用它来建立自己的提交图表。
准备工作
在使用 Kerplunk GitHub Graph 前，我们需要先准备好以下工作：
- 安装 Node.js 环境以及 npm 包管理工具。
- 在 GitHub 上创建一个新的 OAuth 应用程序用于授权。
- 了解 GitHub REST API，并掌握如何使用。
安装
在我们开始使用 Kerplunk GitHub Graph 之前，需要先通过 npm 安装这个包，方法如下：
npm install kerplunk-github-graph --save
授权
Kerplunk GitHub Graph 需要我们使用 GitHub API 访问您的组织仓库。为此，我们需要使用 OAuth 应用程序进行授权。我们需要为我们的项目注册一个 OAuth 应用程序。方法如下：
- 转到您的 GitHub 帐户并单击您的个人资料照片。
- 选择 “Settings”。
- 在左侧栏中选择 “Developer Settings”。
- 选择 “OAuth Apps” 选项卡。
- 单击右上角的“New OAuth App” 按钮。
- 输入您的应用程序的信息，包括名称、主页 URL 和授权回调 URL。
- 单击“Register Application”。
- 将“Client ID”和“Client Secret” 分别保存在您的项目中。
使用
在授权后，我们就可以开始利用 Kerplunk GitHub Graph 来建立自己的提交图表。在我们的项目中，我们需要添加以下代码：
-- -------------------- ---- -------
------ - ----- - ---- ------------------------
-------
-------- ----------------
------ ------------
----- -----------
------ -
--------- ---------------
------------- -------------------
-
---
这里我们需要传入三个参数，element 表示我们要将提交图渲染到哪个元素中，owner 表示所有者名称，repo 表示存储库名称，oauth 表示授权信息，包括我们之前申请到的 Client ID 和 Client Secret。
Kerplunk GitHub Graph 还支持其他一些参数，例如 theme 设置主题，mode 设置模式等。更多的参数和用法，请查看 Kerplunk GitHub Graph 官方文档。
示例代码
我们假设在我们的项目中，我们有一个名为 graph-target 的 div 元素用于显示提交图。我们可以按照以下方式使用 Kerplunk GitHub Graph 包：
<!-- index.html --> <body> <div id="graph-target"></div> </body>
-- -------------------- ---- -------
-- ------
------ - ----- - ---- ------------------------
-------
-------- ----------------
------ -----------
----- --------
------ -
--------- ---------------
------------- -------------------
--
----- -------
---
这样我们就可以在页面中看到一个来自 Facebook React 存储库的提交图表了。我们可以利用这个包来构建我们自己的提交图表，展示代码提交的情况，以便更好地管理和监视我们的代码库。
结论
在本文中，我们了解了如何使用 Kerplunk GitHub Graph npm 包来创建 GitHub 提交图表，以及如何使用 OAuth 应用程序进行授权。我们还提供了一个使用 Kerplunk GitHub Graph 包的示例代码，以便读者更好地理解。
Kerplunk GitHub Graph 是一个非常实用的 npm 包，它可以帮助我们更好地了解代码库的提交情况，并提供了良好的可视化效果。希望读者可以在以后的开发工作中运用到该库，并从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efe4c49986ca68d8ab7