-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (63 loc) · 2.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<title>GitHub => GitgraphJS auto script</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.1/gitgraph.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.1/gitgraph.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Simple GitHub visualizer using GitGraphJS</h1>
<p>Just follow the steps.</p>
<p><strong>Known issues:</strong></p>
<ul>
<li>For now it is not possible to draw a branch or a merge from a commit in the past. Such event will end up by drawing a branch from the last commit from the same branch as the past commit.</li>
</ul>
<form>
<h2>1) Get data</h2>
<p>The data we need are downloadable from GitHub, but for some reason downloading is limited by code and not possible to do in a standard manner. One way to do it is to download it with the Network graph page and save it.</p>
<ol>
<li>Open developer tools panel (press F12 key while in your browser, more info: https://developers.google.com/web/tools/chrome-devtools/console/)</li>
<li>Navigate your browser to https://github.com/:user/:repository/network</li>
<li>Scroll through the entire network graph (important to load all the data)</li>
<li>In the developer console click the Network tab</li>
<li>
Copy the data from files which look like "chunk?nethash=:some-code"
<ol style="list-style-type: lower-alpha;">
<li>Select the line and on the right side click the Response tab, contents of the file should appear</li>
<li>Select the entire line of code (best using select all or CTRL+A) in the Response tab and copy to clipboard (CTRL+C)</li>
<li>Insert data into the textarea below (CTRL+V)</li>
<li>If there were more files meeting the criterion, click "Add textarea" and repeat from a)</li>
</ol>
</li>
</ol>
<textarea class="input"></textarea><br>
<a id="addTextarea">Add textarea</a>
<h2>2) Make some tweaks</h2>
Orientation:
<select id="orientation">
<option>vertical-reverse</option>
<option selected>horizontal</option>
<option>horizontal-reverse</option>
<option>vertical</option>
</select><br>
Theme:
<select id="theme">
<option>blackarrow</option>
<option selected>metro</option>
<option>smallhill</option>
</select><br>
Display mode:
<select id="display">
<option selected>compact</option>
<option>extended</option>
</select>
<h2>3) Press this button</h2>
<button type="button" id="showGraphButton">Show graph</button>
</form>
<h2>4) Wait</h2>
<h2>5) See the chart:</h2>
<canvas id="gitGraph"></canvas>
</body>
</html>