Skip to content

Commit 10723cd

Browse files
ariallahyarariallahyar
committed
Basic chart and styling added. Bio added
1 parent fd10b9b commit 10723cd

4 files changed

Lines changed: 135 additions & 19 deletions

File tree

‎code/chart.js‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,34 @@
1-
//DOM-selector for the canvas 👇
2-
const ctx = document.getElementById('chart').getContext('2d')
3-
41
//"Draw" the chart here 👇
2+
const renderChart = ((completedProjects) => {
3+
4+
const data = {
5+
labels: ['Projects'],
6+
datasets: [{
7+
data: [completedProjects],
8+
label: 'Completed',
9+
backgroundColor: 'rgb(63, 103, 126)',
10+
}, {
11+
data: [19],
12+
label: 'Coming',
13+
backgroundColor: 'rgb(63,203,226)',
14+
}]
15+
};
16+
17+
const config = {
18+
type: 'bar',
19+
data: data,
20+
options: {
21+
indexAxis: 'y',
22+
scales: {
23+
x: {
24+
stacked: true
25+
},
26+
y: {
27+
stacked: true
28+
}
29+
}
30+
}
31+
};
32+
33+
new Chart(document.getElementById('chart'), config);
34+
});

‎code/index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Project GitHub Tracker</title>
88
<link rel="stylesheet" href="./style.css" />
9+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
910
</head>
1011
<body>
1112
<h1>GitHub Tracker</h1>
12-
<div id="profile"></div>
13-
<h2>Projects:</h2>
14-
<main id="projects"></main>
13+
<div class="profile-wrapper" id="profile"></div>
14+
<div class="chart-wrapper">
15+
<canvas class="chart" id="chart"></canvas>
16+
</div>
17+
<main class="project-wrapper" id="projects"></main>
1518

16-
<!-- This will be used to draw the chart 👇 -->
17-
<canvas id="chart"></canvas>
1819
<script src="./token.js"></script>
1920
<script src="./script.js"></script>
2021
<script src="./chart.js"></script>

‎code/script.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,22 @@ const fetcher = (url, token, callback) => {
1818
.then((response) => {
1919
return response.json();
2020
})
21-
.then((repositories) => {
22-
callback(repositories);
21+
.then((data) => {
22+
callback(data);
2323
})
2424
.catch((error) => {
2525
console.log(error);
2626
})
2727
}
2828

29-
// WORKING, BUT WILL REDO SETUP
3029
fetcher (userUrl, PAT, ((userProfile) => {
31-
console.log(userProfile);
3230
// Profile picture and username
31+
console.log(userProfile)
3332
document.getElementById('profile').innerHTML += `
3433
<img class="profile-pic" src="${userProfile.avatar_url}" alt="profile-pic">
35-
<h2 class="username">Username: ${userProfile.login}</h2>
34+
<h2 class="profile-name">${userProfile.name}</h2>
35+
<h2 class="profile-username">${userProfile.login}</h2>
36+
<p class="profile-bio">${userProfile.bio}</p>
3637
`;
3738
}))
3839

@@ -41,20 +42,21 @@ fetcher(repoUrl, PAT, (repositories) => {
4142
return repo.fork === true && repo.name.startsWith("project-")
4243
});
4344

45+
renderChart(forkedReps.length);
46+
4447
forkedReps.forEach((rep) => {
4548
// Name, last update, default branch, URL
4649
document.getElementById('projects').innerHTML += `
47-
<div class="repo" id=${rep.name}>
48-
<h2>${rep.name}</h2>
49-
<p>Updated: ${rep.pushed_at}</p>
50+
<div class="project" id=${rep.name}>
51+
<h2 class="project-name">${rep.name}</h2>
52+
<p>URL: <span><a class="project-url" href="${rep.svn_url}">${rep.name}</span></a>
53+
<p>Updated: ${new Date(rep.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}</p>
5054
<p>Default branch: ${rep.default_branch}</p>
51-
<a href="${rep.svn_url}">Link to repository</a>
5255
</div>
5356
`;
5457
// Commits
5558
fetcher(commitUrl(rep.name), PAT, ((commits) => {
56-
console.log(commits);
57-
document.getElementById(rep.name).innerHTML += `<p>${commits.length} commits</p>`
59+
document.getElementById(rep.name).innerHTML += `<p>Number of commits: ${commits.length}</p>`
5860
}));
5961

6062
// Pull requests

‎code/style.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,86 @@
11
body {
22
background: #FFECE9;
3+
justify-content: center;
4+
margin: 0;
5+
padding: 0;
6+
text-align: center;
7+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
8+
}
9+
10+
h2 {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
.profile-bio{
16+
padding: 0rem 3rem;
17+
}
18+
19+
.profile-wrapper p {
20+
/* max-width: 50vh; */
21+
}
22+
23+
.profile-pic {
24+
max-height: 40vh;
25+
border-radius: 50%;
26+
margin: 1rem 0rem;
27+
}
28+
29+
.profile-name {
30+
font-weight: bolder;
31+
}
32+
33+
.profile-username {
34+
font-weight: lighter;
35+
}
36+
37+
.chart-wrapper {
38+
width: 100%;
39+
display: block;
40+
margin: 1rem 0rem;
41+
}
42+
43+
.chart {
44+
width: 100%;
45+
}
46+
47+
.project-wrapper {
48+
display: grid;
49+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
50+
justify-content: center;
51+
width: 100%;
52+
}
53+
54+
.project {
55+
border: 1px solid black;
56+
}
57+
58+
.project-url {
59+
color: rgb(63, 103, 126);
60+
font-weight: bold;
61+
text-decoration: none;
62+
}
63+
64+
.project-url:hover {
65+
font-weight: bolder;
66+
text-decoration: underline;
67+
}
68+
69+
70+
@media (min-width: 1024px) {
71+
.profile-bio{
72+
padding: 0rem 20rem;
73+
}
74+
.chart-wrapper {
75+
height: 30px;
76+
}
77+
}
78+
@media (min-width: 667px) {
79+
80+
.profile-bio{
81+
padding: 0rem 10rem;
82+
}
83+
.chart-wrapper {
84+
height: 30px;
85+
}
386
}

0 commit comments

Comments
 (0)