GitStats

Merhaba !

GitHub'ta herhangi bir projede Insights sekmesinden Contributors linkine tıklarsak, o projeye kimin ne kadar katkı yaptığını detaylı olarak görebiliriz. Kişinin projeye kaç kod satır kod ekleyip/sildiğini yada kaç commit yaptığını rakamsal olarak ve tarih çizelgesinde grafiksel olarakta görebiliyoruz.

Örnek olarak Google'ın Fonts projesini seçtim. Burada her kullanıcı bilgileri Box sınıfı içerisinde tutulmuş. Şimdi biraz daha teknik bilgi gerektiren kısma geçip, bu veriler ile nasıl yüzdelik hesaplaması yapabileceğimizi gösterelim.

Başlarken

İlk olarak bu Box kutularını bir değişkende dizi halinde tutmak için querySelectorAll(); fonksiyonunu kullandım.

var lists = document.querySelectorAll(".contrib-person .Box");

Ardından toplam commit sayısını, kullanıcı adı, kullanıcının commit'i, yüzdelik katkısını tutmak için değişkenlerini tanımladım.

var totalCommits = 0;
var username, commit, percent;

Kişilerin bilgilerini tutabileceğim bir githubPercent objesi ve değişkenleri set edebilmek için gitHub adında bir fonksiyon tanımladım.

var githubPercent = {};
 
function gitHub(username, commit, percent) {
	this.username = username;
	this.commit = commit;
	this.percent = percent;
}

Toplam Commit Sayısı

Toplam commit sayısı sayfada görülmüyor; sadece kişilerin toplam katkısı var. O zaman öncelikle bir döngü ile her kullanıcının katkılarını toplayarak toplam commit sayısına erişelim. Aşağıdaki JavaScript döngüsünde Box sınıfına ait etiketin içerisinde commit sayısına erişip bu ifadeyi tam sayıya çevirdim.

Array.prototype.forEach.call(lists, function (el, i) {
	totalCommits += parseInt(
		el.querySelector(".cmeta .link-gray").text.replace(",", "")
	);
});

Yüzdelik Katkı İstatistikleri

Tekrardan bir döngü oluşturarak bu sefer; kullanıcı adı, commit sayısı çekiyoruz. Commit sayısını, toplam commit sayısına bölerekte yüzdelik olarak değeri elde etmiş olacağız. Son olarak bu değerleri fonksiyona gönderip bunuda objemize ekliyoruz.

Array.prototype.forEach.call(lists, function (el, i) {
	username = el.querySelector("a.text-normal").text;
	commit = parseInt(el.querySelector(".cmeta .link-gray").text.replace(",", ""));
	percent = parseFloat((commit / totalCommits) * 100).toFixed(2);
	githubPercent[i] = new gitHub(username, commit, percent);
});

JavaScript'te console.log() fonksiyonu ile ekrana objeyi yazabiliriz fakat daha açıklayıcı olması açısından console.table() fonksiyonunu kullanmayı daha doğru buldum. Google'ın fonts projesinde testimizi yapıyorduk. GitStats kodlarını konsola yazdığımızda hangi kullanıcının ne kadar katkı sağladığını tablo halinde görebiliyoruz.

GitHub Rest API

GitStats kodlarının çalışması için mecburen GitHub'tan proje ile ilgili sayfayı açıp konsoldan çalıştırabiliyoruz. Ajax isteği gönderip herhangi bir sayfadan bu verileri çekebilir miyiz diye kısa bir araştırma yapmıştım fakat konsola yazdığım kodlarda güvenlik engeline takıldım.

Bu verilere uzaktan erişip aynı çalışma mantığını GitHub Rest API kullanarak tekrardan geliştirmek istiyorum. GitStats sadece kişisel olarak JavaScript ile haşır neşirliğim artsın diye yapılmış bir minik projeydi. API ile tamamladığım taktirde v2 olarak projeyi güncelleyip yeni bir makale ile yapılışını anlatacağım.

GitHub GitStats

GitHub üzerinden GitStats kodlarını inceleyip, geliştirilmesi için destek olabilirsiniz. Beğendiyseniz projeye yıldız atabilir ve daha fazla kişinin dikkatini çekmesini sağlayabilirsiniz.