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:
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:
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:
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.
Experience PubNub
PubNub has helped numerous clients achieve success with their real-time applications. For instance, LinkedIn's real-time notifications system...
Get Setup
Sign up for a PubNub account to gain immediate access to PubNub keys for free. The latest features available in your PubNub account include ...
Get Started
Our comprehensive PubNub docs will get you up and running in no time, regardless of your use case or SDK.
PubNub offers a user-friendly platform to enhance your user-experience. Our services are designed keeping developers in mind for a seamless integration process.
Remember, we're here to make your real-time development journey smoother and more efficient. Set up your payload URL and let's get started!
Official documentation and authoritative sources can be referenced throughout the blog post to confirm the validity of the information.