diff --git a/index.html b/index.html
index 46de5ce..7b4b388 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
Tabs or Spaces
-
+
@@ -18,76 +18,27 @@
-
-
\t
-
-
-
-
\s
-
-
-
-
Tabs
-
-
-
or
-
-
-
Spaces
-
+
+ Tabs or Spaces
+
The Top Starred repositories in Github have been analysed to understand which are the most common whitespace types in different programming languages.
+ The Top Starred repositories on GitHub were analysed in 2017 to find the most common type of indentation for different programming languages.
-
-
-
-
-
-
-
- Analysed {{ language.analysedReposAmount }} repositories
-
-
-
-
- Tabs
-
-
- 2 Spaces
-
-
- 3 Spaces
-
-
- 4 Spaces
-
-
- 8 Spaces
-
-
-
+
+
+
-
-
-
+
diff --git a/web/index.css b/web/index.css
index d91952a..a09beec 100644
--- a/web/index.css
+++ b/web/index.css
@@ -1,136 +1,51 @@
header {
- width: 400px;
+ width: 95%;
margin: 0 auto;
- margin-top: 50px;
- margin-bottom: 100px;
- text-align: center;
-}
-@media (max-width: 400px) {
- header {
- width: 95%;
- }
}
main {
- width: 300px;
+ width: 95%;
margin: 0 auto;
}
-.chart {
- display: none;
- margin: 60px 0 100px 0;
- text-align: center;
-}
-.chart.show {
- display: block;
-}
-.loading.hide {
- display: none;
-}
-main h2 {
- text-transform: uppercase;
-}
-main h2 a {
- color: inherit;
- text-decoration: none;
-}
-main h2 a:hover {
- transition: .25s;
- color: #19ac70;
-}
-main h3 {
- margin-bottom: 40px;
- color: #666;
- font-weight: 300;
-}
-main h3 .amount {
- font-weight: 600;
-}
header h1 {
margin: 0;
margin-bottom: 5px;
- font-size: 160px;
+ color: #666;
+ font-size: 120px;
font-weight: 300;
+ text-align: center;
}
-header h1.spaces {
+header h1 span.spaces {
color: #19ac70;
+ font-weight: 500;
}
-header h1.tabs {
+header h1 span.tabs {
color: #a27eae;
+ font-weight: 500;
}
header h3 {
- position: relative;
bottom: 45px;
font-size: 15px;
- font-weight: 300;
+ font-weight: 400;
color: #666;
line-height: 23px;
}
-.long-title h2 {
- font-size: 20px;
- font-weight: 300;
- color: #999;
-}
-.vs h2 {
- position: relative;
- bottom: 50px;
- font-size: 40px;
- font-weight: 500;
-}
-@media (max-width: 400px) {
- header h1 {
- font-size: 130px;
- }
- header .vs h2 {
- font-size: 25px;
- }
-
- header h3 {
- bottom: 10px;
+@media (max-width: 850px) {
+ header h1 {
+ font-size: 75px;
}
}
-.loading {
- text-align: center;
- color: #eee;
-}
-.loading i {
- font-size: 100px;
-}
-.legend {
- position: fixed;
- right: 40px;
- bottom: 20px;
- color: #999;
- font-size: 14px;
-}
-@media (max-width: 600px) {
- .legend {
- display: none;
+@media (max-width: 520px) {
+ header h1 {
+ font-size: 65px;
}
}
-.legend div {
- margin-bottom: 7px;
-}
-.legend i {
- margin-right: 7px;
-}
-.legend .tab-1 {
- color: #a27eae;
-}
-.legend .spaces-2 {
- color: #19ac70;
-}
-.legend .spaces-3 {
- color: #08784a;
-}
-.legend .spaces-4 {
- color: #6b9f97;
-}
-.legend .spaces-8 {
- color: #96d3ca;
-}
-.legend iframe {
- margin-top: 20px;
+@media (max-width: 420px) {
+ header h1 {
+ font-size: 55px;
+ }
}
+
footer {
margin: 50px 0 30px 0;
text-align: center;
diff --git a/web/index.js b/web/index.js
index 4574698..d9e22c2 100644
--- a/web/index.js
+++ b/web/index.js
@@ -26,250 +26,245 @@
'space-4': 97,
'tab-1': 51
},
- 'Game Maker Language': {
- 'space-2': 16,
- 'space-4': 8,
- 'tab-1': 6
- },
- 'Objective-C': {
- 'space-2': 45,
- 'space-4': 340,
- 'tab-1': 55
- },
- 'Pascal': {
- 'space-2': 435,
- 'space-3': 6,
- 'space-4': 7,
- 'tab-1': 5
- },
- 'VimL': {
- 'space-2': 315,
- 'space-3': 3,
- 'space-4': 120,
- 'tab-1': 43
+ 'C#': {
+ 'space-2': 7,
+ 'space-4': 231,
+ 'space-8': 1,
+ 'tab-1': 52
},
- 'clojure': {
+ 'Clojure': {
'space-2': 425,
'space-4': 2
},
- 'coffeescript': {
+ 'CoffeeScript': {
'space-2': 259,
'space-4': 40,
'tab-1': 26
},
- 'common-lisp': {
+ 'Common Lisp': {
'space-2': 300,
'space-3': 1,
'space-4': 3,
'tab-1': 7
},
- 'csharp': {
- 'space-2': 7,
- 'space-4': 231,
- 'space-8': 1,
- 'tab-1': 52
+ 'Crystal': {
+ 'space-2': 119,
+ 'space-4': 1,
},
- 'css': {
+ 'CSS': {
'space-2': 256,
'space-4': 30,
'tab-1': 71
},
- 'd': {
+ 'D': {
'space-2': 14,
'space-4': 130,
'tab-1': 92
},
- 'elixir': {
+ 'Elixir': {
'space-2': 403,
'space-4': 6,
'tab-1': 7
},
- 'erlang': {
+ 'Erlang': {
'space-2': 57,
'space-4': 307,
'tab-1': 30
},
- 'fsharp': {
+ 'F#': {
'space-2': 25,
'space-3': 1,
'space-4': 148
},
- 'go': {
+ 'Go': {
'space-2': 2,
'space-4': 2,
'tab-1': 234
},
- 'groovy': {
+ 'Groovy': {
'space-2': 19,
'space-4': 82,
'tab-1': 9
},
- 'haskell': {
+ 'Haskell': {
'space-2': 190,
'space-4': 113,
'tab-1': 5
},
- 'haxe': {
+ 'Haxe': {
'space-2': 19,
'space-3': 2,
'space-4': 65,
'tab-1': 224
},
- 'html': {
+ 'HTML': {
'space-2': 90,
'space-3': 4,
'space-4': 29,
'tab-1': 37
},
- 'java': {
+ 'Java': {
'space-2': 68,
'space-4': 191,
'tab-1': 34
},
- 'javascript': {
+ 'JavaScript': {
'space-2': 190,
'space-4': 85,
'tab-1': 42
},
- 'julia': {
+ 'Julia': {
'space-2': 73,
'space-3': 2,
'space-4': 379,
'tab-1': 34
},
- 'lua': {
+ 'Lua': {
'space-2': 128,
'space-3': 58,
'space-4': 145,
'tab-1': 149
},
- 'nimrod': {
+ 'Nim': {
'space-2': 220,
'space-3': 2,
'space-4': 73
},
- 'ocaml': {
+ 'Objective-C': {
+ 'space-2': 45,
+ 'space-4': 340,
+ 'tab-1': 55
+ },
+ 'OCaml': {
'space-2': 449,
'space-3': 1,
'space-4': 21,
'tab-1': 6
},
- 'perl': {
+ 'Pascal': {
+ 'space-2': 435,
+ 'space-3': 6,
+ 'space-4': 7,
+ 'tab-1': 5
+ },
+ 'Perl': {
'space-2': 44,
'space-3': 6,
'space-4': 158,
'space-8': 2,
'tab-1': 62
},
- 'php': {
+ 'PHP': {
'space-2': 25,
'space-4': 266,
'tab-1': 117
},
- 'puppet': {
+ 'PowerShell': {
+ 'tab-1': 69,
+ 'space-2': 35,
+ 'space-3': 4,
+ 'space-4': 325
+ },
+ 'Puppet': {
'space-2': 285,
'space-4': 40,
'tab-1': 20
},
- 'python': {
+ 'Python': {
'space-2': 12,
'space-4': 215,
'tab-1': 7
},
- 'r': {
+ 'R': {
'space-2': 353,
'space-3': 5,
'space-4': 75,
'space-8': 3,
'tab-1': 29
},
- 'ruby': {
+ 'Ruby': {
'space-2': 489
},
- 'rust': {
+ 'Rust': {
'space-2': 20,
'space-3': 2,
'space-4': 323,
'tab-1': 10
},
- 'scala': {
+ 'SAS': {
+ 'tab-1': 24,
+ 'space-2': 7,
+ 'space-3': 6,
+ 'space-4': 6,
+ },
+ 'Scala': {
'space-2': 217,
'space-4': 3
},
- 'shell': {
+ 'Shell': {
'space-2': 139,
'space-3': 1,
'space-4': 83,
'space-8': 2,
'tab-1': 63
},
- 'sql': {
+ 'SQL': {
'space-2': 97,
'space-4': 28,
'tab-1': 81
},
- 'swift': {
+ 'Swift': {
'space-2': 10,
'space-4': 73,
'tab-1': 5
},
- 'typescript': {
+ 'TeX': {
+ 'tab-1': 54,
+ 'space-2': 269,
+ 'space-3': 5,
+ 'space-4': 57,
+ 'space-8': 1,
+ },
+ 'TypeScript': {
'space-2': 107,
'space-3': 2,
'space-4': 134,
'tab-1': 49
},
- 'vala': {
+ 'Vala': {
'space-2': 56,
'space-3': 3,
'space-4': 195,
'space-8': 6,
'tab-1': 212
},
- 'verilog': {
+ 'Verilog': {
'space-2': 109,
'space-3': 41,
'space-4': 76,
'space-8': 1,
'tab-1': 181
},
- 'xml': {
+ 'VimL': {
+ 'space-2': 315,
+ 'space-3': 3,
+ 'space-4': 120,
+ 'tab-1': 43
+ },
+ 'XML': {
'space-2': 136,
'space-3': 3,
'space-4': 68,
'tab-1': 56
},
- 'tex': {
- 'tab-1': 54,
- 'space-2': 269,
- 'space-3': 5,
- 'space-4': 57,
- 'space-8': 1,
- },
- 'Crystal': {
- 'space-2': 119,
- 'space-4': 1,
- },
- 'sas': {
- 'tab-1': 24,
- 'space-2': 7,
- 'space-3': 6,
- 'space-4': 6,
- },
- 'PowerShell': {
- 'tab-1': 69,
- 'space-2': 35,
- 'space-3': 4,
- 'space-4': 325
- }
};
var colors = {
'tab-1': '#a27eae',
'space-2': '#19ac70',
- 'space-3': '#08784a',
- 'space-4': '#6b9f97',
- 'space-8': '#96d3ca'
+ 'space-3': '#96d3ca',
+ 'space-4': '#08784a',
+ 'space-8': '#6b9f97'
};
var labels = {
@@ -280,54 +275,83 @@
'space-8': '8 Spaces'
};
- var languages = constructLanguagesFrom(db);
+ initChart(db);
- new Vue({
- el: '#charts',
- data: {
- languages: languages.sort()
- }
- });
- initCharts(db, languages);
+ function initChart(db) {
+ var datasets = [];
- function constructLanguagesFrom(db) {
- var languages = [];
+ for (const [label, labelName] of Object.entries(labels)) {
+ const data = Object.values(db).map((stats) => stats[label] ?? 0);
- for (var key in db)
- if (db.hasOwnProperty(key))
- languages.push({
- name: key,
- analysedReposAmount: _.sum(_.values(db[key]))
- });
+ datasets.push({
+ data: label === 'tab-1' ? data.map((d) => -d) : data,
+ backgroundColor: colors[label],
+ label: labelName
+ });
+ }
- return languages;
- }
+ var ctx = document.getElementById('Chart').getContext('2d');
+ console.log(datasets)
- function initCharts(db, languages) {
- for (var id in languages)
- initChart(languages[id].name, db[languages[id].name]);
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: Object.keys(db),
+ datasets
+ },
+ options: options()
+ });
}
- function initChart(language, stats) {
- var amount = _.sum(_.values(stats));
- var data = [];
-
- for (var style in stats)
- if (stats.hasOwnProperty(style))
- data.push({
- value: calculatePercentage(amount, stats[style]),
- color: colors[style],
- label: labels[style]
- });
+ function options() {
+ var options = {
+ "responsive": true,
+ "maintainAspectRatio": false,
- var ctx = document.getElementById(language + 'Chart').getContext('2d');
+ scales: {
+ x: {
+ title: {
+ text: '# of Repositories',
+ display: true
+ },
+ stacked: true,
+ min: -300,
+ max: 500,
+ ticks: {
+ // Include a dollar sign in the ticks
+ callback: function(value, index, ticks) {
+ return Math.abs(value);
+ }
+ }
+ },
+ y: {
+ stacked: true,
+ }
+ },
+ indexAxis: 'y',
+ plugins: {
+ legend: {
+ onClick: () => {}
+ // display: false
+ },
+ tooltip: {
+ callbacks: {
+ label: function(context, data) {
+ let label = context.dataset.label || '';
- new Chart(ctx).Pie(data, options());
- }
+ if (label) {
+ label += ': ';
+ }
+ if (context.parsed.x !== null) {
+ const count = Math.abs(context.parsed.x);
+ label += count + ' ' + (count === 1 ? 'repo' : 'repos');
+ }
+ return label;
+ }
+ }
+ }
- function options() {
- var options = {
- tooltipTemplate: '<%= value %>% repos use <%if (label){%><%=label%> <%}%>'
+ }
};
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))