GitSnap

Visualize key metrics of a GitHub repository as charts

Report Bug · Request Feature

---

GitSnap is a browser extension that transforms your GitHub repository data into visually engaging charts.

It utilize the Echarts library to create various types of charts (such as line chart, pie chart, bar chart) for visualizing GitHub repository key metrics such as contributors' activity, branches, pull request, and issue statistics.

Features

• Contributors Metrics: See who is contributing to your project with detailed insights into distribution of contributions as well as key contributors.
• Pull Request Analytics: Monitor the status (open, merged, and closed) of pull requests over time.
• Issue Tracking: Track issues with line charts that display both open and closed issues over time.
• Branch Visualization: View branches as a tree structure, to understand the relationships and hierarchy between different branches in your repository.

Demo

How It Works

• After installation, click on the GitSnap icon in your browser's extension menu.
• Toggle the switch to activate the extension.
• Hover over any GitHub repository link to view visually engaging charts that present key data.

Note

The GitSnap extension will only work on GitHub pages. If you are not on a GitHub repository, the extension will remain disabled and no charts will be displayed.

Installation

Install from the Chrome Web Store

Local Installation

How to Locally Install GitSnap in your Chrome Browser.

1. Open Google Chrome browser and type chrome://extensions/ in the search tab.

Or simply, click the Options Menu navigate to Settings then select Extensions

2. Turn Developer mode, Click on Load Unpacked.

3. Locate the gitsnap directory and select to load the files.

Configuration Instructions

In config.js, you'll need to modify the GITHUB_API_KEY with your GitHub Personal Access Token.

• Click on your profile picture in the top right corner and select Settings from the dropdown menu.

• In the left sidebar, scroll down and click on Developer settings.

• Click on Personal access tokens. Then, Select Tokens (classic).

• Click on the Generate new token button.

• Copy your new token immediately, as you won’t be able to see it again once you leave this page.

• Update the config.js file.

  const CONFIG = {
      GITHUB_API_KEY: 'your_personal_access_token_here',
  };

Roadmap (Work In Progress)

• Custom Toggle Switches: Introduce custom toggle switches for each chart type, allowing users to display data for Contributors, Pull Requests, Issues or Branches.
• GitHub URL Input: Implement a feature to switch/select the "Enter GitHub URL" tab where users can copy and paste any GitHub repository link.

Releases

To see the latest updates and changes, please refer to the CHANGELOG.

License

This project is licensed under MIT license.