Skip to content

Put data in a single compact bar chart #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
verhovsky wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Put data in a single compact bar chart #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 11 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<title>Tabs or Spaces</title>
<meta name="description" content="Top Github repos have been analysed to understand which whitespace types are most common in different programming languages">
<meta name="description" content="Top GitHub repos were analysed to understand which whitespace types are most common in different programming languages">
<meta name="author" content="Uku Pattak">

<link rel="shortcut icon" href="web/fav.png" type="image/png">
Expand All @@ -18,76 +18,27 @@
<body>
<header>
<div class="pure-g">
<div class="pure-u-1-3">
<h1 class="tabs">\t</h1>
</div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3">
<h1 class="spaces">\s</h1>
</div>

<div class="pure-u-1-3 long-title">
<h2>Tabs</h2>
</div>
<div class="pure-u-1-3 vs">
<h2>or</h2>
</div>
<div class="pure-u-1-3 long-title">
<h2>Spaces</h2>
</div>
<h1>
<span class="tabs">Tabs</span> or <span class="spaces">Spaces</span>
</h1>
</div>
<h3>The Top Starred repositories in Github have been analysed to understand which are the most common whitespace types in different programming languages.</h3>
<h3>The Top Starred repositories on <a href="https://github.com">GitHub</a> were analysed in 2017 to find the most common type of indentation for different programming languages.</h3>
</header>

<main>
<section id="charts">
<div class="loading" v-bind:class="{ 'hide': languages}">
<i class="fa fa-refresh fa-spin"></i>
</div>
<div class="chart" v-for="language in languages | orderBy 'name'" v-bind:class="{ 'show': languages}">
<h2>
<a href="https://github.com/search?l={{ encodeURIComponent(language.name) }}&q=stars%3A%3E1&s=stars&type=Repositories" target="_blank">
{{ language.name }}
</a>
</h2>
<h3>
Analysed <span class="amount">{{ language.analysedReposAmount }}</span> repositories
</h3>

<canvas id="{{ language.name }}Chart" width="300" height="300"></canvas>
</div>
</section>

<section class="legend">
<div class="tab-1">
<i class="fa fa-circle"></i> Tabs
</div>
<div class="spaces-2">
<i class="fa fa-circle"></i> 2 Spaces
</div>
<div class="spaces-3">
<i class="fa fa-circle"></i> 3 Spaces
</div>
<div class="spaces-4">
<i class="fa fa-circle"></i> 4 Spaces
</div>
<div class="spaces-8">
<i class="fa fa-circle"></i> 8 Spaces
</div>
<iframe src="https://ghbtns.com/github-btn.html?user=ukupat&amp;repo=tabs-or-spaces&amp;type=star&amp;count=true&amp" frameborder="0" scrolling="0" width="100px" height="30px"></iframe>
</section>
<div class="chart">
<canvas id="Chart" height="1100"></canvas>
</div>
</main>

<footer>
<iframe src="https://ghbtns.com/github-btn.html?user=ukupat&amp;repo=tabs-or-spaces&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="140px" height="30px"></iframe>
<a href="https://github.com/ukupat/tabs-or-spaces/issues/new" target="_blank">Require an analysis for a new language</a>
<a href="https://github.com/ukupat/tabs-or-spaces/issues/new" target="_blank">Request an analysis for a new language</a>
<a href="https://github.com/ukupat" target="_blank">Check out the author</a>
<a href="https://github.com/ukupat/tabs-or-spaces" target="_blank">Review the source code</a>
<a href="https://github.com/ukupat/tabs-or-spaces" target="_blank">View the source code</a>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.17/vue-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="web/index.js"></script>

Expand Down
127 changes: 21 additions & 106 deletions web/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Loading