In the realm of software development, real-time C3.js charts offer an effective way to monitor activity in your organization. For engineering teams, one of the trackable metrics is GitHub commits. Exploring this topic, this blog post provides a tutorial to guide you through the process of utilizing GitHub's API to retrieve and display GitHub commit data in a real-time, interactive graph. We'll leverage the power of HTML, Javascript, CSS, and use PubNub to create the GitHub dashboard and stream the commit data, while C3.js will help with the visualization.

To learn more about real-time C3.js charts, we have a great tutorial. Now, let's dive in!

How to create a real-time GitHub dashboard

Creating a real-time GitHub dashboard involves connecting to various data sources such as GitHub repository and taking care of some necessary dependencies. Be aware of the necessary cybersecurity measures like secure coding and data encryption. Following industry-standard security protocols is imperative.

Here's a step-by-step guide:

Add a GitHub Webhook

To set up the webhook, follow these steps:

Create a GitHub repository or use an existing git repository.
Click ‘Settings’ on the right side of the page
Click ‘Webhooks’ on the left side of the page
Click ‘Add Webhook’ in the upper right
GitHub will prompt for your password, enter it
Under ‘Payload URL’ enter: http://pubnub-git-hook.herokuapp.com/github/ORG-NAME/TEAM-NAME. Replace ORG-NAME with the name of your organization and TEAM-NAME with the team controlling the repo.

Load the Visual Dashboard

Visit this page. You’ll see a list of all the commits sent through the PubNub dashboard — sweet! When you push one of your commits to GitHub, you should see a message appear on your GitHub commit dashboard within a few dozens of milliseconds, and the charts will update in real time.

How we built the Github commit dashboard

The dashboard is a mashup of GitHub, the PubNub Data Stream Network, and D3 chart visualizations powered by C3.js. When a commit is pushed to GitHub, the commit metadata is posted to a small Heroku instance which publishes it to the PubNub network. We’re hosting on dashboard page on GitHub pages.

Once our Heroku instance receives the commit data from GitHub, it publishes a summary of that data to PubNub using the public publish/subscribe keys on the channel pubnub-git. You can monitor the pubnub-git channel through our developer console here.

Here’s an example message payload:



{ 
  "name":"drnugent",
  "avatar_url":"https://avatars.githubusercontent.com/u/857270?v=3",
  "num_commits":4,
  "team":"team-pubnub",
  "org":"pubnub",
  "time":1430436692806,
  "repo_name":"drnugent/test"
}

The second half of the magic happens when the dashboard receives this information through its subscribe callback. If you look at the source of the dashboard, you’ll see this code:



pubnub.subscribe({
  channel: 'pubnub-git',
  message: displayLiveMessage

});

This subscribe call ensures that the JavaScript function displayLiveMessage() gets called every time a message is received on the pubnub-git channel. displayLiveMessage() adds the commit push notification to the top of the log and updates the C3 visualization charts.

But wait, how is the dashboard populated when it first loads?

Leveraging the PubNub Storage & Playback API for your dashboard

PubNub keeps a record of each message sent, and provides developers a way to access those saved messages with the Storage & Playback (History) API. Deeper in the web dashboard, you’ll see the following code:



var displayMessages = function(ms) { ms[0].forEach(displayMessage); };

pubnub.history({
  channel: 'pubnub-git',
  callback: displayMessages,
  count: 100
});

This is a request to retrieve the last 1,000 messages sent over the pubnub-git channel. So, even though the web dashboard may have been offline when those messages were sent, it is able to retrieve them and use that data to populate the dashboard as though it was permanently online.

This feature is especially useful when dealing with devices with intermittent or unreliable connectivity, such as mobile apps on cellular networks or connected cars. Thanks to the PubNub network, our visualization dashboard doesn’t require a backend to store the state of the application.

Building Your Own GitHub Dashboard

To start building your Github dashboard, fork the Git Commit UI repository on github.com and follow the README for setup instructions. Pull requests are welcomed as part of the open source community collaboration.

Future trends and developments in real-time dashboards

Keeping an eye on the last trends and developments in real-time dashboards and related technologies is crucial. That includes websockets for real-time data transmission, use of notifications for immediate insights, and use of real-time dashboard in various workflows.

How can PubNub help you?

This article was originally published on PubNub.com

Our platform helps developers build, deliver, and manage real-time interactivity for web apps, mobile apps, and IoT devices.

The foundation of our platform is the industry's largest and most scalable real-time edge messaging network. With over 15 points-of-presence worldwide supporting 800 million monthly active users, and 99.999% reliability, you'll never have to worry about outages, concurrency limits, or any latency issues caused by traffic spikes.