-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
225 lines (213 loc) · 12.9 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bug Life - Interactive visualization of GitHub issues for a given repository</title>
<link rel="stylesheet" href="css/bootstrap-with-docs.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nv.d3.min.css">
<!-- TODO: replace with cdn version before deploy -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Base64/1.0.0/base64.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="js/vendor/bootstrap-custom.min.js"></script>
<script src="js/vendor/github-custom.js"></script>
<script src="js/vendor/nv.d3.js"></script>
<script src="js/vendor/hello.all.js"></script>
<script src="js/parser.js"></script>
<script src="js/visuals.js"></script>
<script src="js/script.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54181734-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/bug-life" class="navbar-brand">Bug life</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#examples">Examples</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#explained">Showcase</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="bs-docs-header" id="content">
<div class="container">
<h1 id="repo-title">Loading...</h1>
<p id="repo-description">Loading...</p>
</div>
</div>
<div class="container bs-docs-container" id="repository-form">
<div class="height-placeholder"></div>
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form" id="repository-form">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="repository-button" data-loading-text="Loading...">Render</button>
</span>
<input type="text" class="form-control" id="repository-input" placeholder="author/repository" value="deanmalmgren/textract">
<span class="input-group-btn">
<button class="btn btn-default toggle-token-input" type="button"><span class="glyphicon glyphicon-cog"></span></button>
</span>
</div>
</form>
<div class="alert alert-warning" role="alert" id="repository-alert" style="display: none;"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form" id="token-form" style="display: none">
<div class="height-placeholder"></div>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="token-button" data-loading-text="Loading...">Update token</button>
</span>
<input type="text" class="form-control" id="token-input" placeholder="your token here" value="">
</div>
<p class="help-block">Tokens are used to increase <a href="https://developer.github.com/v3/#rate-limiting" target="_blank">API rate limit</a>. Tokens can be <a href="https://help.github.com/articles/creating-an-access-token-for-command-line-use" target="_blank">manually generated</a>. If you want to view data for private repositories then you have to generate a token that has access to your private repositories.</p>
<p class="help-block">Tokens are stored in cookies. If you want to remove a token from cookies - set it as an empty string.</p>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="progress" id="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
</div>
</div>
<div class="col-md-12" id="graphs">
<div id="stackedArea" class="stackedArea" style="width: auto">
<svg style="height: 300px"></svg>
</div>
<div id="semiCircles" class="semiCircles" style="width: auto">
<svg style="height: 400px"></svg>
<div class="nvtooltip xy-tooltip nv-pointer-events-none foreign" id="nvtooltip-semicircles" style="top: 0; left: 0; opacity: 1; position: absolute; display: none;">
<table class="nv-pointer-events-none">
<thead>
<tr class="nv-pointer-events-none">
<td colspan="2" class="nv-pointer-events-none">
<strong class="x-value title" style="max-width: 180px; white-space: normal; display: block;"></strong>
</td>
</tr>
</thead>
<tbody>
<tr class="nv-pointer-events-none stub" style="display: none">
<td class="legend-color-guide nv-pointer-events-none" width="9">
<div class="nv-pointer-events-none"></div>
</td>
<td class="key nv-pointer-events-none"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container bs-docs-container">
<div class="row">
<div class="col-md-12">
<h2 id="nav" class="page-header">Examples</h2>
<p>Click on a link to load selected example:</p>
<div class="examples">
<ul>
<li><a href="#repository-form" data-github="ruipgil/scraperjs">ruipgil/scraperjs</a> - small and readable graph with right-side activity</li>
<li><a href="#repository-form" data-github="deanmalmgren/textract">deanmalmgren/textract</a> - active usage of labels from beginning of project</li>
<li><a href="#repository-form" data-github="NYTimes/backbone.stickit">NYTimes/backbone.stickit</a> - labeling abandoning</li>
<li><a href="#repository-form" data-github="HubSpot/pace">HubSpot/pace</a> - not a single label and growing piles of issues</li>
<li><a href="#repository-form" data-github="cuckoobox/cuckoo">cuckoobox/cuckoo</a> - with a gap in development</li>
<li><a href="#repository-form" data-github="uranusjr/macdown">uranusjr/macdown</a> - in continuous enhancement</li>
<li><a href="#repository-form" data-github="gogits/gogs">gogits/gogs</a> - rich in labels with both short and big lifespan issues</li>
<li><a href="#repository-form" data-github="jashkenas/backbone">jashkenas/backbone</a> - huge mountains of data</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container bs-docs-container" id="about">
<div class="row">
<div class="col-md-12">
<h2 id="nav" class="page-header">About</h2>
<h4>General</h4>
<p>The following project was created for <a href="https://github.com/blog/1864-third-annual-github-data-challenge">Third Annual Github Data Challenge</a> and targets repository issues.</p>
<p>Bug-life is a visualization of repository issues from 2 perspectives:</p>
<ul>
<li>Amount of issues labels during the lifespan of the repo</li>
<li>Lifespan of an issue (since creation until closing)</li>
</ul>
<p>The data is collected using <a href="https://developer.github.com/v3/">Github API</a> and it includes:</p>
<ul>
<li>generic information about a repo (name, description, date created)</li>
<li>labels used in issues</li>
<li>repository issues</li>
<li>repository issues events</li>
</ul>
<h4>How it works?</h4>
<p>The top graph shows the number of labels of open issues at a specific date. It also presents the usage of issues and labels during the lifetime of the repo. Only current issue labels are shown, i.e. the unlabeled/labeled events are not tracked. Each label represents one unit, hence it gives an overview of the generic status of the project. For example, if there are many open issues with <code>enhancement</code> or <code>feature</code> labels, then most probably the team is working on a new version. If there are many <code>bug</code> and <code>documentation</code> labels, then the team is getting ready for a new release. It might be seen that some projects have no issues at all or are not using labels.</p>
<p>The bottom graph shows the lifespan of issues. The bigger the semicircle radius, the longer it takes to close an issue. If the end point of the semicircle is not visible on the graph, then the issue is still open. Each open/close event is visible on the graph. The color of the issue is set by the issue label. This is a good representation to determine old pending issues and view project agility.</p>
<h4>Why authorize?</h4>
<p>For unauthenticated requests, Github sets a requests rate limit up to <a href="https://developer.github.com/v3/#rate-limiting">60 requests per hour</a>. In case the number of requests to collect data is bigger than the rate limit you'll have to authenticate yourself via Github OAuth and authorize our application. After authorization your requests rate limit will be 5,000 requests per hour. Enjoy :)</p>
</div>
</div>
</div>
<div class="container bs-docs-container" id="explained">
<div class="row">
<div class="col-md-12">
<h2 id="nav" class="page-header">Showcase</h2>
<h3>Cute fresh repo</h3>
<div class="explained-image">
<img src="screenshots/showcase-1.png" alt="deanmalmgren/textract graph">
</div>
<p>From the top graph it is seen that the repo contains mostly labeled issues, thus the maintainers keep track of different types of issues. There are few bugs and mostly feature requests. From the below graph - about half of issues have short lifespan. Feature requests require more time to be implemented and closed. As well, feature requests make out the main part of open issues at the moment.</p>
<div class="examples">
<a href="#repository-form" data-github="deanmalmgren/textract" class="btn btn-default">Load cute repo</a>
</div>
<h3>Mighty-mighty mountains</h3>
<div class="explained-image">
<img src="screenshots/showcase-2.png" alt="jashkenas/backbone graph">
</div>
<p>This is a popular repo on github - <a href="https://github.com/jashkenas/backbone" target="_blank">backbone</a>. It has a rich history, well organized labels and release cycles. On version 0.9.0, when backbone reached a relatively stable state, many issues were closed. Before this release there were other important ones, for example 0.5.0.</p>
<p>After 0.9.0 backbone lived through 3 other important milestones: 0.9.9, 1.0.0 and 1.1.0. Each of these releases was focused on different aspects. Right before version 0.9.9 most open issues were of type <code>change</code>, while before version 1.1.0 most open issues were of type <code>bug</code>.</p>
<div class="examples">
<a href="#repository-form" data-github="jashkenas/backbone" class="btn btn-default">Load mighty mountains</a>
</div>
<h3>Your own example</h3>
<p>Do you want your own example here? Create a <a target="_blank" href="https://github.com/9-volt/bug-life">pull request</a>.</p>
</div>
</div>
</div>
<footer class="bs-docs-footer" role="contentinfo">
<div class="container">
<p>Built by <a href="http://bumbu.ru" target="_blank">bumbu</a> and <a href="https://github.com/ana-balica" target="_blank">ana</a>.</p>
<p>Licensed under <a href="https://github.com/9-volt/bug-life/blob/gh-pages/LICENSE" target="_blank">MIT</a>. Available on <a href="https://github.com/9-volt/bug-life">9-volt/bug-life</a></p>
<p>The authors do not hold any responsibility for displayed data.</p>
</div>
</footer>
</body>
</html>