GitHub のコントリビューションが見れるグラフ

src/api/contributions_collection/index.js

@@ -0,0 +1,13 @@
+import api from '@/api';
+import getHeader from '@/api/utils/get-header';
+
+export default {
+  async getContributionsCollection(sessionID) {
+    let option = null;
+    if (sessionID) {
+      option = getHeader(sessionID);
+    }
+    const contributionsCollectionData = (await api.client.get('/contribution_collections', option)).data;
+    return contributionsCollectionData;
+  },
+};

src/components/GitHubContributionGraph.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="container">
+    <div class="wrapper">
+      <div class="contributions-graph">
+        <div class="user"
+        v-for="(user, index) in
+        contributionsCollection.contribution_collections.slice(0, displayUsersNumber)"
+        v-bind:key="user.name"
+        v-bind:style="{ transform: 'rotateY(' + 360 / displayUsersNumber * index + 'deg)' }">
+          <div class="user-info" v-bind:style=
+          "{ 'animation-delay': -60 / displayUsersNumber * index + 's' }">
+            <img v-bind:src="user.user.icon_url">
+            <dl>
+              <dt>USER NAME</dt>
+              <dd class="user-name">{{ user.user.github_user_name }}</dd>
+              <dt>TOTAL CONTRIBUTIONS</dt>
+              <dd class="total-contributions">{{ user.total_count }}</dd>
+            </dl>
+          </div>
+          <div class="graph" v-bind:style=
+          "{ stroke: 'hsl(' + 360 / displayUsersNumber * index + ', 70%, 45%)' }">
+            <svg viewbox="0 0 25 300" width="25" height="300">
+              <line x1=0 v-bind:y1="300 - (dayIndex * 5 + 2)"
+              v-bind:x2="item.count" v-bind:y2="300 - (dayIndex * 5 + 2)"
+              stroke-width="4" v-bind:opacity="item.count / 5"
+              v-for="(item, dayIndex) in user.days"
+              v-bind:key="item.date"></line>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'GitHubContributionsGraph',
+  props: ['displayUsersNumber'],
+  computed: mapState(
+    'contributionsCollection', ['contributionsCollection'],
+  ),
+  methods: {
+    ...mapActions(
+      'contributionsCollection', ['getContributionsCollection'],
+    ),
+  },
+  async created() {
+    this.getContributionsCollection();
+  },
+};
+</script>
+
+<style scoped>
+@keyframes rotate {
+  from { transform: rotateY(0deg); }
+  to { transform: rotateY(360deg); }
+}
+@keyframes fukan {
+  from { transform: rotateX(0deg); }
+  to { transform: rotateX(-30deg); }
+}
+@keyframes dash {
+  from { stroke-dashoffset: 50; }
+  to { stroke-dashoffset: 0; }
+}
+.container {
+  perspective: 1000px;
+}
+.wrapper {
+  font-family: 'Barlow';
+  font-weight: bold;
+  height: 700px;
+  animation: fukan 10s ease-in-out;
+  transform-style: preserve-3d;
+  width: 60%;
+  margin: 100px auto;
+  transform: rotateX(-30deg);
+}
+dl {
+  letter-spacing: 1px;
+}
+dt {
+  font-size: 0.7em;
+  line-height: 1px;
+}
+.user {
+  width: 50%;
+  margin-left: 50%;
+  position: absolute;
+  transform-origin: 0;
+  transform-style: preserve-3d;
+}
+.user-info {
+  margin-left: 70%;
+  animation: rotate 60s infinite reverse linear;
+  border-top: 1px solid black;
+  padding-top: 20px;
+  font-size: 16px;
+}
+.user-info img {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  position: absolute;
+  left: -85px;
+  top: 16px;
+  border: 1px solid black;
+}
+.user-name, .total-contributions{
+  font-size: 3em;
+}
+.contributions-graph {
+  animation: rotate 60s infinite linear;
+  transform-style: preserve-3d;
+}
+.graph {
+  transform-style: preserve-3d;
+  padding-top: 20px;
+}
+svg {
+  width: 100%;
+  transform-origin: top left;
+  transform: scale(30, 2);
+}
+svg line {
+  stroke-dasharray: 50;
+  animation: dash 10s ease-in-out;
+}
+@media screen and (max-width: 480px) {
+  .user-info {
+    font-size: 6px;
+  }
+}
+</style>

src/store/index.js

@@ -12,6 +12,7 @@ import memberIntroduction from './modules/memberIntroduction';
 import editUser from './modules/editUser';
 import invitation from './modules/invitation';
 import ui from './modules/ui';
+import contributionsCollection from './modules/githubContributionsCollection';
 
 Vue.use(Vuex);
 
@@ -29,6 +30,7 @@ export default new Vuex.Store({
     editUser,
     invitation,
     ui,
+    contributionsCollection,
   },
   plugins: [
     createPersistedState({

src/store/modules/githubContributionsCollection/index.js

@@ -0,0 +1,24 @@
+import ContributionsCollectionClient from '@/api/contributions_collection';
+
+export default {
+  namespaced: true,
+  state: {
+    contributionsCollection: null,
+  },
+  /* eslint-disable no-param-reassign */
+  mutations: {
+    setContributionsCollection(state, contributionsCollection) {
+      state.contributionsCollection = contributionsCollection;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+  actions: {
+    async getContributionsCollection({ commit, dispatch }, sessionID) {
+      try {
+        commit('setContributionsCollection', await ContributionsCollectionClient.getContributionsCollection(sessionID));
+      } catch (e) {
+        dispatch('criticalError/createError', e, { root: true });
+      }
+    },
+  },
+};

src/views/Home.vue

@@ -1,24 +1,32 @@
 <template>
   <div class="home">
-    <section>
-      <h2>部員募集中!</h2>
-      <p>
-        久留米高専プロラボ部は平日授業を終えた学生が集まり次第、電気電子・制御情報工学科棟のSJ（制御情報実験室）で活動しています。<br>
-        興味のある方は、活動時間にSJ教室を訪ねてみてくださいね！
-      </p>
-    </section>
+    <div class="overlay">
+      <section>
+        <h2>部員募集中!</h2>
+        <p>
+          久留米高専プロラボ部は平日授業を終えた学生が集まり次第、電気電子・制御情報工学科棟のSJ（制御情報実験室）で活動しています。<br>
+          興味のある方は、活動時間にSJ教室を訪ねてみてくださいね！
+        </p>
+      </section>
 
-    <section class="achievements-list">
-      <h2>戦歴</h2>
-      <div>
-        <AchievementsList/>
-      </div>
-    </section>
+      <section class="achievements-list">
+        <h2>戦歴</h2>
+        <div>
+          <AchievementsList/>
+        </div>
+      </section>
+
+      <section class="member-list">
+        <h2>部員一覧</h2>
+        <div>
+          <publicMemberList includeLeftUser/>
+        </div>
+      </section>
+    </div>
 
-    <section class="member-list">
-      <h2>部員一覧</h2>
+    <section class="github-contributions-graph">
       <div>
-        <publicMemberList includeLeftUser/>
+        <GitHubContributionGraph displayUsersNumber="5"/>
       </div>
     </section>
   </div>
@@ -27,6 +35,7 @@
 <script>
 import AchievementsList from '@/components/AchievementsList.vue';
 import publicMemberList from '@/components/PublicMemberList.vue';
+import GitHubContributionGraph from '@/components/GitHubContributionGraph.vue';
 
 export default {
   name: 'home',
@@ -37,6 +46,7 @@ export default {
   components: {
     AchievementsList,
     publicMemberList,
+    GitHubContributionGraph,
   },
 };
 </script>
@@ -61,6 +71,16 @@ export default {
   margin-right: 30px;
 }
 
+.github-contributions-graph {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  opacity: 0.5;
+  z-index: -1;
+}
+
 section {
   margin: 40px 0;
 }