Skip to content

Instantly share code, notes, and snippets.

@shellscape
Last active June 28, 2021 00:28
Show Gist options
  • Save shellscape/a2ec2f0432a6383b94d18cb4417a1d10 to your computer and use it in GitHub Desktop.
Save shellscape/a2ec2f0432a6383b94d18cb4417a1d10 to your computer and use it in GitHub Desktop.
Embedding the Github Contribution Calendar
var proxy = 'https://urlreq.appspot.com/req?method=GET&url=',
url = proxy + 'https://github.com/{{ site.github }}',
colors = {
'eeeeee': 'github-graph-none',
'd6e685': 'github-graph-litte',
'8cc665': 'github-graph-some',
'44a340': 'github-graph-more',
'1e6823': 'github-graph-most'
};
document.addEventListener('DOMContentLoaded', function () {
fetch(url)
.then(function responseThen (response) {
return response.text();
})
.then(function fetchThen (body) {
var wrapper = document.createElement('div'),
container = document.querySelector('#github-graph'),
graph,
gs,
fill,
index;
wrapper.innerHTML = body;
graph = wrapper.querySelector('svg.js-calendar-graph-svg');
gs = [].slice.call(graph.querySelectorAll('g g'));
for (var g of gs) {
index = gs.indexOf(g);
if (index < 26) {
g.parentElement.removeChild(g);
}
else {
g.attributes.transform.value = 'translate(' + (13 * (index - 26)) + ', 0)';
}
}
for(var rect of graph.querySelectorAll('rect')) {
fill = rect.getAttribute('fill').substring(1);
if (colors[fill]) {
rect.classList.add(colors[fill]);
}
}
graph.setAttribute('version', '1.1');
graph.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
graph.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
graph.setAttribute('xml:space', 'preserve');
container.innerHTML = graph.outerHTML;
});
});
@Lustellz
Copy link

Hello, I'm a novice on programming. Doing my small project with my team mates, I got a responsible for getting gitlab commit graph on our page. Although I had searched so many methods for doing this, I couldn't find a suitable way. The only way for solving this problem would be disassembling all of the data, and reassemble in a graph but I cannot afford to do it.
So, I wonder how can I apply this to other pages. If you are willing to let me learn how to use this, please reply me whenever you're available.

@Nathan-R1
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment