Show repo types pie chart on coder page

yaph · yaph · commit 1eb65733cb59 · 2019-06-03T23:25:31.000+02:00
diff --git a/README.md b/README.md
@@ -1,3 +1,9 @@
 # README
 
-Source files for [coderstats.net](https://coderstats.net/).
+Source files for [coderstats.net](https://coderstats.net/).
+
+# GitHub API Calls
+
+* https://api.github.com/search/issues?q=user:yaph&sort=created&order=desc
+* https://api.github.com/users/yaph/events/public
+* https://api.github.com/users/yaph/received_events/public
diff --git a/src/js/coder.js b/src/js/coder.js
@@ -57,6 +57,36 @@ let coder = new Vue({
         forks: function() {
             return this.repoRanking('forks_count');
         },
+        repo_types: function() {
+            let labels = [];
+            let values = [];
+            let types = {
+                active_sources: 0,
+                archived: 0,
+                disabled: 0,
+                forked: 0,
+                mirrors: 0
+            };
+            for (let repo of this.repos_pushed) {
+                if (repo.archived)
+                    types.archived++;
+                else if (repo.disabled)
+                    types.disabled++;
+                else if (repo.fork)
+                    types.forked++;
+                else if (repo.mirror)
+                    types.mirrors++;
+                else
+                    types.active_sources++;
+            }
+            for (let [label, value] of Object.entries(types)) {
+                if (value > 0) {
+                    labels.push(label);
+                    values.push(value);
+                }
+            }
+            return {labels: labels, values: values};
+        },
         stars: function() {
             return this.repoRanking('stargazers_count');
         },
@@ -99,6 +129,10 @@ let coder = new Vue({
         this.rankingGraph(this.issues.slice(0, 10), 'open_issues_count', '#issues-ranking');
         this.rankingGraph(this.forks.slice(0, 10), 'forks_count', '#forks-ranking');
         this.rankingGraph(this.stars.slice(0, 10), 'stargazers_count', '#stars-ranking');
+
+        new Chartist.Pie('#repo-types-chart', {
+            labels: this.repo_types.labels.map(d => d.replace('_', ' ')),
+            series: this.repo_types.values});
     },
     methods: {
         fetchRepos: function() {
diff --git a/src/scss/coder.scss b/src/scss/coder.scss
@@ -32,6 +32,30 @@
     stroke: $color2;
 }
 
+.ct-chart-pie {
+    min-height: 250px;
+}
+
+.ct-chart-pie .ct-label {
+    fill: #222;
+}
+
+.ct-series-a .ct-slice-pie {
+    fill:rgb(141,211,199)
+}
+.ct-series-b .ct-slice-pie {
+    fill:rgb(255,255,179)
+}
+.ct-series-c .ct-slice-pie {
+    fill:rgb(190,186,218)
+}
+.ct-series-d .ct-slice-pie {
+    fill:rgb(251,128,114)
+}
+.ct-series-e .ct-slice-pie {
+    fill:rgb(128,177,211)
+}
+
 .meta {
     background-color: $color4;
 }
diff --git a/templates/coder.html b/templates/coder.html
@@ -22,7 +22,7 @@
 {% raw %}
 <div id="coder">
     <div v-if="user" class="row">
-        <div class="col-12 col-2-xl col-2-l col-4-m meta">
+        <div class="col-12 col-2-xl col-3-l col-4-m meta">
             <div class="padh">
                 <header>
                     <h3>{{ user.name }}</h3>
@@ -34,12 +34,17 @@ <h3>{{ user.name }}</h3>
                 <span v-if="user.location" class="block"><i class="fa fa-globe" aria-hidden="true"></i> {{ user.location }}</span>
                 <span v-if="user.company" class="block"><i class="fa fa-money" aria-hidden="true"></i> {{ user.company }}</span>
                 <blockquote v-if="user.bio"><p>{{ user.bio }}</p></blockquote>
+
+                <div v-if="repo_types" class="padv">
+                    <h3>Repo types</h3>
+                    <div id="repo-types-chart"></div>
+                </div>
             </div>
         </div>
         <div v-if="repos_pushed.length < 2" class="col-12 error">
             {{ user.name }} has not pushed changes to enough public repositories to show any interesting data here.
         </div>
-        <div v-else class="col-12 col-10-xl col-10-l col-8-m no-padding main">
+        <div v-else class="col-12 col-10-xl col-9-l col-8-m no-padding main">
             <div class="flex flex-wrap boxes">
                 <div class="box-stat" title="The number of loaded repositories this user has pushed to.">
                     <i class="fa fa-code" aria-hidden="true"></i> Pushed to repos
