Skip to content
This repository was archived by the owner on May 7, 2021. It is now read-only.

Commit f8539f3

Browse files
mucho613mucho613
committed
ちゃんと表示するようにした
1 parent 01c5835 commit f8539f3

File tree

2 files changed

+138
-174
lines changed

2 files changed

+138
-174
lines changed

‎src/components/GitHubContributionsGraph.vue‎

Lines changed: 137 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,173 +1,137 @@
1-
<template>
2-
<div class="container">
3-
<div class="wrapper">
4-
<div class="contributions-graph">
5-
<div class="user" id="user1">
6-
<div class="user-info">
7-
<dl>
8-
<dt>USER NAME</dt>
9-
<dd class="user-name">{{ contributionsCollection.contribution_collections[0].user.github_user_name }}</dd>
10-
<dt>TOTAL CONTRIBUTIONS</dt>
11-
<dd class="total-contributions">{{ contributionsCollection.contribution_collections[0].total_count }}</dd>
12-
</dl>
13-
</div>
14-
<div class="graph">
15-
<svg viewbox="0 0 25 300" width="25" height="300">
16-
<line x1=0 v-bind:y1="index * 5 + 2"
17-
v-bind:x2="item.count" v-bind:y2="index * 5 + 2"
18-
stroke-width="4" v-bind:opacity="item.count / 10"
19-
v-for="(item, index) in contributionsCollection.contribution_collections[0].days"
20-
v-bind:key="item.date"></line>
21-
</svg>
22-
</div>
23-
</div>
24-
<div class="user" id="user2">
25-
<div class="user-info">
26-
<dl>
27-
<dt>USER NAME</dt>
28-
<dd class="user-name">{{ contributionsCollection.contribution_collections[1].user.github_user_name }}</dd>
29-
<dt>TOTAL CONTRIBUTIONS</dt>
30-
<dd class="total-contributions">{{ contributionsCollection.contribution_collections[1].total_count }}</dd>
31-
</dl>
32-
</div>
33-
<div class="graph">
34-
<svg viewbox="0 0 25 300" width="25" height="300">
35-
<line x1=0 v-bind:y1="index * 5 + 2"
36-
v-bind:x2="item.count" v-bind:y2="index * 5 + 2"
37-
stroke-width="4" v-bind:opacity="item.count / 10"
38-
v-for="(item, index) in contributionsCollection.contribution_collections[1].days"
39-
v-bind:key="item.date"></line>
40-
</svg>
41-
</div>
42-
</div>
43-
<div class="user" id="user3">
44-
<div class="user-info">
45-
<dl>
46-
<dt>USER NAME</dt>
47-
<dd class="user-name">{{ contributionsCollection.contribution_collections[2].user.github_user_name }}</dd>
48-
<dt>TOTAL CONTRIBUTIONS</dt>
49-
<dd class="total-contributions">{{ contributionsCollection.contribution_collections[2].total_count }}</dd>
50-
</dl>
51-
</div>
52-
<svg viewbox="0 0 25 300" width="25" height="300">
53-
<line x1=0 v-bind:y1="index * 5 + 2"
54-
v-bind:x2="item.count" v-bind:y2="index * 5 + 2"
55-
stroke-width="4" v-bind:opacity="item.count / 10"
56-
v-for="(item, index) in contributionsCollection.contribution_collections[2].days"
57-
v-bind:key="item.date"></line>
58-
</svg>
59-
</div>
60-
</div>
61-
</div>
62-
</div>
63-
</div>
64-
</template>
65-
66-
<script>
67-
import { mapState, mapActions } from 'vuex';
68-
69-
export default {
70-
name: 'GitHubContributionsGraph',
71-
computed: mapState(
72-
'contributionsCollection', ['contributionsCollection'],
73-
),
74-
methods: {
75-
...mapActions(
76-
'contributionsCollection', ['getContributionsCollection'],
77-
),
78-
},
79-
async created() {
80-
this.getContributionsCollection();
81-
},
82-
};
83-
</script>
84-
85-
<style scoped>
86-
@keyframes rotate {
87-
from { transform: rotateY(0deg); }
88-
to { transform: rotateY(360deg); }
89-
}
90-
@keyframes inverse-rotate {
91-
from { transform: rotateY(0deg); }
92-
to { transform: rotateY(-360deg); }
93-
}
94-
@keyframes dash {
95-
to {
96-
stroke-dashoffset: 1000;
97-
}
98-
}
99-
.contributions-graph {
100-
animation: rotate 60s infinite linear;
101-
transform-style: preserve-3d;
102-
}
103-
.graph {
104-
transform-style: preserve-3d;
105-
border-top: 1px solid black;
106-
padding-top: 20px;
107-
}
108-
svg {
109-
width: 100%;
110-
transform-origin: top left;
111-
transform: scale(30, 2);
112-
}
113-
#user1 {
114-
transform: rotateY(0deg);
115-
stroke: rgb(24, 112, 228);
116-
}
117-
#user2 {
118-
transform: rotateY(120deg);
119-
stroke: rgb(0, 110, 24);
120-
}
121-
#user3 {
122-
transform: rotateY(240deg);
123-
stroke: rgb(212, 127, 0);
124-
}
125-
#user4 {
126-
transform: rotateY(270deg);
127-
}
128-
#user2 .user-info {
129-
animation-delay: -20s;
130-
}
131-
#user3 .user-info {
132-
animation-delay: -40s;
133-
}
134-
dl {
135-
letter-spacing: -1px;
136-
}
137-
dt {
138-
font-size: 0.7em;
139-
line-height: 1px;
140-
}
141-
.user-name {
142-
font-size: 3rem;
143-
}
144-
.total-contributions {
145-
font-size: 3rem;
146-
}
147-
.container {
148-
perspective: 1000px;
149-
}
150-
.wrapper {
151-
font-family: 'Barlow';
152-
font-weight: bold;
153-
height: 700px;
154-
155-
transform: rotateX(-20deg);
156-
transform-style: preserve-3d;
157-
width: 60%;
158-
margin: 50px auto;
159-
}
160-
.user {
161-
width: 50%;
162-
margin-left: 50%;
163-
position: absolute;
164-
transform-origin: 0;
165-
transform-style: preserve-3d;
166-
}
167-
.user-info {
168-
margin-left: 70%;
169-
animation: inverse-rotate 60s infinite linear;
170-
border-top: 1px solid black;
171-
padding-top: 20px;
172-
}
173-
</style>
1+
<template>
2+
<div class="container">
3+
<div class="wrapper">
4+
<div class="contributions-graph">
5+
<div class="user"
6+
v-for="(user, index) in
7+
contributionsCollection.contribution_collections.slice(0, displayUsersNumber)"
8+
v-bind:key="user.name"
9+
v-bind:style="{ transform: 'rotateY(' + 360 / displayUsersNumber * index + 'deg)' }">
10+
<div class="user-info" v-bind:style=
11+
"{ 'animation-delay': -60 / displayUsersNumber * index + 's' }">
12+
<img v-bind:src="user.user.icon_url">
13+
<dl>
14+
<dt>USER NAME</dt>
15+
<dd class="user-name">{{ user.user.github_user_name }}</dd>
16+
<dt>TOTAL CONTRIBUTIONS</dt>
17+
<dd class="total-contributions">{{ user.total_count }}</dd>
18+
</dl>
19+
</div>
20+
<div class="graph" v-bind:style=
21+
"{ stroke: 'hsl(' + 360 / displayUsersNumber * index + ', 70%, 45%)' }">
22+
<svg viewbox="0 0 25 300" width="25" height="300">
23+
<line x1=0 v-bind:y1="300 - (dayIndex * 5 + 2)"
24+
v-bind:x2="item.count" v-bind:y2="300 - (dayIndex * 5 + 2)"
25+
stroke-width="4" v-bind:opacity="item.count / 5"
26+
v-for="(item, dayIndex) in user.days"
27+
v-bind:key="item.date"></line>
28+
</svg>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</template>
35+
36+
<script>
37+
import { mapState, mapActions } from 'vuex';
38+
39+
export default {
40+
name: 'GitHubContributionsGraph',
41+
props: ['displayUsersNumber'],
42+
computed: mapState(
43+
'contributionsCollection', ['contributionsCollection'],
44+
),
45+
methods: {
46+
...mapActions(
47+
'contributionsCollection', ['getContributionsCollection'],
48+
),
49+
},
50+
async created() {
51+
this.getContributionsCollection();
52+
},
53+
};
54+
</script>
55+
56+
<style scoped>
57+
@keyframes rotate {
58+
from { transform: rotateY(0deg); }
59+
to { transform: rotateY(360deg); }
60+
}
61+
@keyframes fukan {
62+
from { transform: rotateX(0deg); }
63+
to { transform: rotateX(-30deg); }
64+
}
65+
@keyframes dash {
66+
from { stroke-dashoffset: 50; }
67+
to { stroke-dashoffset: 0; }
68+
}
69+
.container {
70+
perspective: 1000px;
71+
}
72+
.wrapper {
73+
font-family: 'Barlow';
74+
font-weight: bold;
75+
height: 700px;
76+
animation: fukan 10s ease-in-out;
77+
transform-style: preserve-3d;
78+
width: 60%;
79+
margin: 100px auto;
80+
transform: rotateX(-30deg);
81+
}
82+
dl {
83+
letter-spacing: 1px;
84+
}
85+
dt {
86+
font-size: 0.7em;
87+
line-height: 1px;
88+
}
89+
.user {
90+
width: 50%;
91+
margin-left: 50%;
92+
position: absolute;
93+
transform-origin: 0;
94+
transform-style: preserve-3d;
95+
}
96+
.user-info {
97+
margin-left: 70%;
98+
animation: rotate 60s infinite reverse linear;
99+
border-top: 1px solid black;
100+
padding-top: 20px;
101+
font-size: 16px;
102+
}
103+
.user-info img {
104+
width: 64px;
105+
height: 64px;
106+
object-fit: contain;
107+
position: absolute;
108+
left: -85px;
109+
top: 16px;
110+
border: 1px solid black;
111+
}
112+
.user-name, .total-contributions{
113+
font-size: 3em;
114+
}
115+
.contributions-graph {
116+
animation: rotate 60s infinite linear;
117+
transform-style: preserve-3d;
118+
}
119+
.graph {
120+
transform-style: preserve-3d;
121+
padding-top: 20px;
122+
}
123+
svg {
124+
width: 100%;
125+
transform-origin: top left;
126+
transform: scale(30, 2);
127+
}
128+
svg line {
129+
stroke-dasharray: 50;
130+
animation: dash 10s ease-in-out;
131+
}
132+
@media screen and (max-width: 480px) {
133+
.user-info {
134+
font-size: 6px;
135+
}
136+
}
137+
</style>

‎src/views/Home.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<section class="github-contributions-graph">
2727
<h2>GitHub Contributions Graph</h2>
2828
<div>
29-
<GitHubContributionsGraph/>
29+
<GitHubContributionsGraph displayUsersNumber="5"/>
3030
</div>
3131
</section>
3232

0 commit comments

Comments
 (0)