From eeb4942d7da9941cb91fab1fc68d81b8770bc56d Mon Sep 17 00:00:00 2001 From: vrill <52007698+vrill@users.noreply.github.com> Date: Sun, 17 Oct 2021 00:21:34 +0200 Subject: [PATCH 1/4] First and final commit. --- README.md | 11 +++--- code/chart.js | 36 +++++++++++++++++-- code/index.html | 33 ++++++++++++++---- code/script.js | 79 ++++++++++++++++++++++++++++++++++++++++++ code/style.css | 91 ++++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 236 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..051b5bb6 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The assignment was to create a tracker of our GitHub repositories, using their API. Flesh it out with profile name & avatar, commits per repo and a chart among a few more things. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +We had to fetch the data from the GitHub API, parse it and present it on our page. With a lot of repositories and objects in general, we had to apply a few filters in order to find the ones we want to use. + +The Rate Limit of the API (60 per hour) had me frustrated more than once. However, it was good practice to be more thorough when coding; to rely less on the Live Server output showing you small changes. DevTools is a good alternative to try iterative type of improvements. + +Had the Rate Limit not been such a time sink, I would've spent more time pulling different types of data in & presenting it, sorting of the projects, and styling. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. diff --git a/code/chart.js b/code/chart.js index 92e85a30..a5c09205 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,36 @@ -//DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const technigoProjects = 20 -//"Draw" the chart here 👇 +const drawBarChart = (repos) => { + new Chart(ctx, { + type: 'doughnut', + data: { + labels: [ + 'Technigo projects', + 'Finished projects' + ], + datasets: [ + { + data: [ + technigoProjects, + repos.length + ], + backgroundColor: [ + '#d5a7b6', + '#5c7fe9' + ] + } + ] + }, + options: { + plugins: { + legend: { + display: true, + labels: { + color: 'rgb(0, 0, 0)' + } + } + }, + }, + }) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..8700a4e8 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,42 @@ + - Project GitHub Tracker + Ziko's GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
- - +
+

Ziko's GitHub Tracker

+
+ +
+ +
+ +

Projects:

+
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..b7276220 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,79 @@ +let USER = 'vrill' + +const USER_URL = `https://api.github.com/users/${USER}` +const USER_REPOS_URL = `${USER_URL}/repos` + +const profileContainer = document.getElementById('profile-wrapper') +const projectsContainer = document.getElementById('projects') + +const fetchProfile = () => { + fetch(USER_URL) + .then((response) => response.json()) + .then((data) => { + console.log('fetchProfile', data) + profileContainer.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

Amount of public repositories: ${data.public_repos}.

+
+ ` + }) +} +fetchProfile() + +const fetchRepos = () => { + fetch(USER_REPOS_URL) + .then((response) => response.json()) + .then((data) => { + console.log('fetchRepos', data) + const technigoRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ) + technigoRepos.forEach((repo) => { + projectsContainer.innerHTML += ` +
+

${repo.name} (${repo.default_branch})

+

Most recent push: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits:

+

Main language: ${repo.language}

+
+ ` + }) + fetchPullRequestsArray(technigoRepos) + drawBarChart(technigoRepos) + }) +} + + /* This URL only seems to work for open pull requests, closed ones do not show up. */ + const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((response) => response.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit_${repo.name}`) + .innerHTML = 'Pull request unavailable, or closed.'; + } + }) + }) + } + + const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit_${myRepoName}`).innerHTML += data.length + }) + } + +fetchRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..a8c007d4 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito'); + +html { + scroll-behavior: smooth; +} + body { - background: #FFECE9; + background: rgb(130, 60, 60); + font-family: 'Nunito', sans-serif; + margin: 0 auto; +} + +h1 { + font-size: 1.4rem; +} + +h2 { + font-size: 1.2rem; + text-align: center; +} + +h3 { + text-align: center; + background-color: rgba(130, 60, 60, 0.2); + border-radius: 0.4rem; + margin-top: 0; + padding: 1rem 0rem; +} + +#profile-wrapper { + display: block; + text-align: center; +} + +#profile { + display: inline-block; + justify-content: center; +} + +.profile-image { + display: inline-block; + width: 160px; + height: 160px; + border-radius: 50%; + border: 2px solid whitesmoke; + overflow: hidden; + margin-bottom: 0; +} + +.profile-image > a > img { + width: 100%; +} + +#projects { + display: flex; + flex-flow: row wrap; + justify-content: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.projects-card { + width: 320px; + background-color: #f2f2f2; + box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem; + border-radius: 0.4rem; + padding: 1rem; +} + +header { + position: sticky; + top: 0; +} + +footer { + margin-top: 1rem; +} + +header, footer { + background-color: #f2f2f2; + text-align: center; + padding: 1rem; + width: 100%; +} + +footer, a { + color: rgb(130, 60, 60) +} + +footer > p > a { + text-decoration: none; } \ No newline at end of file From b610db33d589a71bcb71fd8e9d77ba3aefb6a79f Mon Sep 17 00:00:00 2001 From: vrill <52007698+vrill@users.noreply.github.com> Date: Sun, 17 Oct 2021 01:05:00 +0200 Subject: [PATCH 2/4] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 051b5bb6..195a6a18 100644 --- a/README.md +++ b/README.md @@ -12,3 +12,4 @@ Had the Rate Limit not been such a time sink, I would've spent more time pulling ## View it live +Cheers https://jolly-kirch-bd4816.netlify.app/ From 6e8084ffcde07846621b444eb2b8533b4b7c8fab Mon Sep 17 00:00:00 2001 From: vrill <52007698+vrill@users.noreply.github.com> Date: Tue, 28 Dec 2021 19:58:48 +0100 Subject: [PATCH 3/4] Fixed the width of the chart, a centering & padding issue, removed console.logs and made the chart a bit less static. --- code/chart.js | 8 ++++---- code/index.html | 5 +++-- code/script.js | 2 -- code/style.css | 8 +++++++- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/code/chart.js b/code/chart.js index a5c09205..aee9cb7e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,19 +1,19 @@ const ctx = document.getElementById('chart').getContext('2d') -const technigoProjects = 20 +const technigoProjects = 21 const drawBarChart = (repos) => { new Chart(ctx, { type: 'doughnut', data: { labels: [ - 'Technigo projects', + 'Projects to do', 'Finished projects' ], datasets: [ { data: [ - technigoProjects, - repos.length + repos, + technigoProjects - repos ], backgroundColor: [ '#d5a7b6', diff --git a/code/index.html b/code/index.html index 8700a4e8..b69ee605 100644 --- a/code/index.html +++ b/code/index.html @@ -5,9 +5,10 @@ - Ziko's GitHub Tracker + Project Four: Ziko's GitHub Tracker + @@ -20,7 +21,7 @@

Ziko's GitHub Tracker

-

Projects:

+

"Project" repos:

diff --git a/code/script.js b/code/script.js index b7276220..4d046ab8 100644 --- a/code/script.js +++ b/code/script.js @@ -10,7 +10,6 @@ const fetchProfile = () => { fetch(USER_URL) .then((response) => response.json()) .then((data) => { - console.log('fetchProfile', data) profileContainer.innerHTML += `
@@ -30,7 +29,6 @@ const fetchRepos = () => { fetch(USER_REPOS_URL) .then((response) => response.json()) .then((data) => { - console.log('fetchRepos', data) const technigoRepos = data.filter( (repo) => repo.name.includes('project-') && repo.fork ) diff --git a/code/style.css b/code/style.css index a8c007d4..804caa6b 100644 --- a/code/style.css +++ b/code/style.css @@ -67,6 +67,12 @@ h3 { padding: 1rem; } +#chart-wrapper { + width: 90vw; + max-width: 512px; + margin: 0 auto; +} + header { position: sticky; top: 0; @@ -79,7 +85,7 @@ footer { header, footer { background-color: #f2f2f2; text-align: center; - padding: 1rem; + padding: 1rem 0rem; width: 100%; } From 9e5ba634ec9b0e65f4e05a0642f3ea4726008532 Mon Sep 17 00:00:00 2001 From: vrill <52007698+vrill@users.noreply.github.com> Date: Tue, 28 Dec 2021 22:16:36 +0100 Subject: [PATCH 4/4] Fixed the order for the chart. --- code/chart.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/chart.js b/code/chart.js index aee9cb7e..ca48a905 100644 --- a/code/chart.js +++ b/code/chart.js @@ -12,8 +12,8 @@ const drawBarChart = (repos) => { datasets: [ { data: [ - repos, - technigoProjects - repos + technigoProjects - repos.length, + repos.length, ], backgroundColor: [ '#d5a7b6',