Visualize GitHub code contribution using app link

Hello, dear friends. As you know we have added the possibility to visualize data using external links. It is not a big deal to visualize the data by the link from apps which already have well-formed JSON or CSV data via their API. But sometimes data is not ready to be visualized without some transformation. I am going to discover how to visualize data using link app to create charts from the data which requires pre-processing. We will use GitHub API weekly contributions for this purpose. Find below step by step explanation.

Create HTTP application

First of all, we need to create an application which will connect to the external platform, process data in the way we need and expose the processed data to the world using GET route or using several GET routes. Let’s assume we want to visualize weekly contributions to GitHub for all repositories of the organization or for the team of the organization. It is not possible to do out the box using GitHub API, because GitHub allows retrieving contribution stats only by one repository – https://developer.github.com/v3/repos/statistics/. Looks like we need to create some code which will combine stats data from GitHub into one single data point.

So we have created node.js application for that. The source code is available at https://github.com/vizydrop/github-data-link.

The API of the application:

GET: /me

Retrieve stats of repositories where you are added as a collaborator.

GET: /:organization

Retrieve stats of repositories by the organization.
– :organization is the organization at GitHub.

GET: /:owner/:repository

Retrieve stats of concrete repository.
– :owner is user or organization at GitHub
– :repository is the name of the repository

GET: /:organization/team/:team

Retrieve stats of repositories by the team.
– :organization is an organization at GitHub
– :team is team name or slug at GitHub

We implemented a way to authenticate the user to his GitHub account using query token or special request header posted to our application.

Deploy created application

After creating application we need to deploy it to some cloud, like Heroku or Amazon, or we can use our own cluster to make it available at some static address or IP. We used our cluster for that and configured it to be available at https://links.vizydrop.com/github.

Create Link Account

Now we need to configure account for the link app in Visual Editor, so let’s proceed with that:

1. Start creating new report, select “Chart from link”, click on “Switch accounts” and click “Add Account” button

2. Generate personal access token in GitHub at https://github.com/settings/tokens, copy it into value textbox, fill the rest account form and click connect.

Provide link

It is time to provide the link to repositories I am going to visualize. I will proceed with all repositories for our GitHub organization “vizydrop”. So I put the following URL into link textbox: “https://links.vizydrop.com/github/vizydrop”.

Data processing can take time, so please wait until the platform parses incoming data. After processing we will see the blank editor with discovered fields.

Create charts, explore data in a visual way

It is a showtime. Now we are ready to build reports like these:

You GitHub Team Pulse

X: MONTH([Date])
Y1: SUM([Code Additions])
Y2: -SUM([Code Deletions])

GitHub Code Contribution by Repository

X: SUM([Code Deletions])
Y: SUM([Code Additions])
SIZE: SUM([Code Commits])
COLOR: [Repository]

Please feel free to use https://links.vizydrop.com/github or use it’s source code (docker image is available as well) to visualize code contribution to your repositories.  Let us know about any questions or comments.