Skip to content

Instantly share code, notes, and snippets.

@viperfx

viperfx/demo.html

Created July 21, 2012 12:45
Show Gist options
  • Save viperfx/3155741 to your computer and use it in GitHub Desktop.
Save viperfx/3155741 to your computer and use it in GitHub Desktop.
Download ZIP
Final Participation graph Hg
Raw
demo.html
<!DOCTYPE html>
<html>
<head>
<title>Github - participation graph</title>
</head>
<body>
<script src="http://www.prototypejs.org/assets/2009/6/16/prototype.js" type="text/javascript"></script>
<script>
var GHPG = Class.create({
initialize: function(data){
if (!Object.isArray(data)) data = data.split("\n");
this.total = data[0];
console.log(this.total);
this.own = data[1];
console.log(this.own);
console.log(this.total.max())
},
draw: function(options){
var canvas = this.canvas(options || {}),
context = canvas.getContext("2d"),
width = canvas.getWidth() / this.total.length,
height = canvas.getHeight(),
max = this.total.max(),
scale = max >= height ? parseFloat(height - 1) / max : 2;
console.log(scale)
console.log(this.total.length)
function render(value, index){
value *= scale;
context.fillRect(index * width, height - value, width - 1, value);
}
context.fillStyle = 'rgb(202, 202, 202)';
this.total.each(render);
context.fillStyle = 'rgb(51, 102, 153)';
this.own.each(render);
},
canvas: function(options){
if (Object.isString(options) || Object.isElement(options))
return $(options);
var canvas = new Element('canvas', { width: options.width || GHPG.CANVAS_WIDTH, height: options.height || GHPG.CANVAS_HEIGHT });
($(options.parent) || document.body).appendChild(canvas);
return canvas;
}
});
GHPG.CANVAS_WIDTH = 416;
GHPG.CANVAS_HEIGHT = 20;
var g = new GHPG([
[3, 3, 4, 3, 2, 1, 2, 7, 5, 6, 3, 1, 7, 6, 7, 5, 6, 7, 5, 5, 3, 4, 2, 3, 4, 3, 4, 3, 3, 2, 4, 7, 10, 5, 2, 2, 4, 4, 3, 2, 4, 1, 1, 7, 0, 5, 6, 5, 3, 4, 2, 0],
[0, 0, 0, 0, 1, 0, 0, 1, 0, 2, 0, 0, 3, 1, 2, 0, 1, 2, 1, 2, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 3, 1, 2, 0, 0, 0, 3, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0]
]);
g.draw();
</script>
</body>
</html>
Raw
demo2.html
<!DOCTYPE html>
<html>
<head>
<title>Github - participation graph</title>
<script src="Gitgraph.js" type="text/javascript"></script>
</head>
<body>
<script>
//
// Pure JS GitHub participation graph
// http://bouchon.github.com/Gitgraph
//
var Gitgraph = function(args){
if(!args || !args.all || !args.owner){
// throw new Error('Gitgraph: missing user and/or repo arg ');
}else{
//Rips through data point arrays and renders canvas
this.go = function(){
//1. Vars
this.total = args.all; //array of all commit data points
this.own = args.owner; //array of just your commit data points
//2. Create canvas
this.createCanvas();
//3. Create bottom of graph img
this.createLower();
//4. Populate canvas with data points
this.populate();
};
//Render canvas element
this.createCanvas = function(){
this.graphContainer.innerHTML = '';
this.canvas = dojo.create('canvas',{
width:this.width,height:this.height,style:'position:relative;margin-top:11px;'
},this.graphContainer);
};
//Render bottom part of graph
this.createLower = function(){
var img = this.createKey();
//Participation key
dojo.create('span',{
innerHTML:'52 week participation',
style:'position:absolute;right:7px;font:10px arial;'
},img,'after');
//Commits by owner key
dojo.create('span',{
innerHTML:'commits by owner',
style:'position:absolute;left:82px;font:10px arial;'
},img,'after');
//All commits key
dojo.create('span',{
innerHTML:'all commits',
style:'position:absolute;left:16px;float:left;font:10px arial;'
},img,'after');
//Color legends
dojo.create('div',{
style:'display:inline-block;position:absolute;left:7px;'+
'background:lightgrey;width:7px;height:7px;top:35px'
},img,'after');
dojo.create('div',{
style:'display:inline-block;position:absolute;left:73px;'+
'background:#3377CC;width:7px;height:7px;top:35px'
},img,'after');
};
//Builds graph key
this.createKey = function(){
var img = dojo.create('img',{
src:'http://bouchon.github.com/Gitgraph/bin/gitgraph.png',
style:'position:relative;top:-11px;'
},this.graphContainer);
var currHeight = img.offsetHeight;
dojo.style(img,'width',this.width+'px');
dojo.style(img,'height','4px');
dojo.create('br',{},img,'after');
return img;
};
//Populates graph with data points
this.populate = function(){
var context = this.canvas.getContext("2d"),
width = this.width / this.total.length,
height = this.height,
max = Math.max.apply(Math, this.total),
scale = max >= height ? parseFloat(height - 1) / max : 2;
console.log(scale, height, max)
function render(value, index){
value *= scale;
context.fillRect(index * width, height - value, width - 1, value);
}
context.fillStyle = 'rgb(202, 202, 202)';
dojo.forEach(this.total, render);
context.fillStyle = 'rgb(51, 102, 153)';
dojo.forEach(this.own, render);
};
//Dynamically load JS
this.loadScript = function(sScriptSrc,callbackfunction) {
var oHead = document.getElementsByTagName('head')[0];
if(oHead){
var oScript = document.createElement('script');
oScript.setAttribute('src',sScriptSrc);
oScript.setAttribute('type','text/javascript');
var loadFunction = function(){
if (this.readyState == 'complete' || this.readyState == 'loaded')
callbackfunction();
};
oScript.onreadystatechange = loadFunction;
oScript.onload = callbackfunction;
oHead.appendChild(oScript);
}
};
//Kick things off
this.kickStart = function(){
dojo.ready(this, function(){
//Touch up graph container
dojo.attr(this.graphContainer, 'innerHTML',
'<img src="http://biganimals.com/wp-content/themes/biganimals/images/loading_transparent_4.gif"/>');
dojo.attr(this.graphContainer, 'style',
'color:grey;position:relative;line-height:15px;border-radius:3px;border:1px solid #E5E5E5;'+
'background:white;height:55px;text-align:center;width:'+(this.width+14)+'px');
//Get particiption data
this.go();
});
};
//Initialization
this.height = 20;
this.width = args.width ? parseInt(args.width.substring(0,args.width.length-2)) : 416;
this.node = args.domNode ? args.domNode : document.body;
if (!Function.prototype.bind) Function.prototype.bind = this.bind;
//build container
this.graphContainer = document.createElement('div');
this.node.appendChild(this.graphContainer);
if(!window.dojo)
this.loadScript('http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js',this.kickStart.bind(this));
else this.kickStart.bind(this)();
return this.graphContainer;
}
};
//Make Jquery folks happy
if (window.jQuery) {
jQuery.fn.gitgraph = function (args) {
if(!args || !args.all || !args.owner){
throw new Error('Gitgraph: missing user and/or repo arg ');
}else{
this.each(function () {
var view = new Gitgraph({
all : args.user,
domNode : $(this)[0],
owner : args.owner,
width: args.width ? args.width : '416px'
});
});
}
};
}
var graph = new Gitgraph({
all : [3, 3, 4, 3, 2, 1, 2, 7, 5, 6, 3, 1, 7, 6, 7, 5, 6, 7, 5, 5, 3, 4, 2, 3, 4, 3, 4, 3, 3, 2, 4, 7, 10, 5, 2, 2, 4, 4, 3, 2, 4, 1, 1, 7, 0, 5, 6, 5, 3, 4, 2, 0], // any github username
owner : [0, 0, 0, 0, 1, 0, 0, 1, 0, 2, 0, 0, 3, 1, 2, 0, 1, 2, 1, 2, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 3, 1, 2, 0, 0, 0, 3, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0], // name of repo
domNode : document.body, // (optional) domNode to attach to
width : '416px' // (optional) custom graph width
});
</script>
</body>
</html>
Raw
participation_graph.py
from datetime import *
import random
import time
import pdb
# repo
# - cl = changelog list
# for ch in cl:
# ch.date()
def main():
today = date.today().replace(month=12)
w = []
authors = {}
owner = "Tharshan"
sample_list = newsample()
values = sample_list.values()
for v in values:
delta = today - v[1]
w.append((delta.days/7))
counter = 0
for v in values:
delta = today - v[1]
authors[counter] = [(delta.days/7), v[0]]
counter = counter + 1
print "--- how many weeks away from current date (commit) ---"
print w
dlist = {}
for i in set(w):
dlist[i] = w.count(i)
print "--- the number of commits per week (others) ---"
print dlist
print "--- the number of commits per week (owner) ---"
print authors
plist = [0] * 52
nlist = [0] * 52
for i in range(0,52):
try:
plist[i] = dlist[i]
except:
pass
for v in authors.values():
if v[1] == "Tharshan":
nlist[v[0]] = nlist[v[0]] + 1
print "--- the number of commits in each week (52 weeks) (others) --- "
print plist
print "--- the number of commits in each week (52 weeks) (owner) --- "
print nlist
def newsample():
sample = {}
start_date = date.today().replace(day=1, month=1).toordinal()
end_date = date.today().replace(month=12).toordinal()
for i in range(0,200):
authors = { 0:"Dan", 1:"Emilio", 2:"Stephen", 3:"Tharshan", 4:"Simon"}
sample[i] = [authors[random.randint(0,4)], date.fromordinal(random.randint(start_date, end_date))]
return sample
main()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment