diff --git a/README.md b/README.md index 1613a3b0..cedda8b4 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,6 @@ -# GitHub Tracker +GitHub Tracker -Replace this readme with your own information about your project. +I created a tracker for my GitHub repositories that I have forked from Technigo using the GitHub API. I also showed how many projects I have done and how many I have left with the help of a pie chart built with chart.js. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. -## 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? - -## 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. +https://github-tracker-joanna.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..9f5d8e11 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,28 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const showChart = (countRepos) => { -//"Draw" the chart here 👇 + const ctx = document.getElementById('chart').getContext('2d'); + + const labels = [ + `Finished projects`, + `Projects left` + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My Technigo projects', + backgroundColor: ['rgb(245, 217, 237)', 'rgb(217, 245, 239)'], + borderColor: 'rgb(66, 66, 66)', + data: [countRepos, 19-countRepos], + }] + }; + + const config = { + type: 'pie', + data: data, + options: {} + }; + + const myChart = new Chart(ctx, config); + +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..d8177f97 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,44 @@ + + + + Project GitHub Tracker -

GitHub Tracker

-

Projects:

-
- - - +
+

GitHub Tracker for:

+
+

+ +
+
- +
+ + + + + + + + + + + + +
Repo nameUpdated atDefault branchNumber of commitsURL
+
+ + +

+ + + + - \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..0aae233f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,88 @@ +const owner = 'joannaringqvist'; +const API_URL_REPOS = `https://api.github.com/users/${owner}/repos`; +const projects = document.getElementById('projects'); +const username = document.getElementById('username'); +const picture = document.getElementById('picture'); +const numberOfProjects = document.getElementById('numberOfProjects'); +const sort = document.getElementById('sort'); +let ownerLogin = ''; + +//Function for getting all my repos from Github +const getRepos = (sort) => { + fetch(API_URL_REPOS) + .then((res) => res.json()) + .then((data) => { + + //Get the name and picture from the user and pass it to the function for showing them + ownerLogin = data[0].owner.login; + userPic = data[0].owner.avatar_url; + showUsernameAndPic(ownerLogin, userPic); + + //Array for storing the repos and counting them + let arrayWithRepos = []; + + data.forEach((repo) => { + //I only want to continue working with the repos from Technigo, so they should be forked and start with project + if (repo.fork === true && repo.name.startsWith('project')) { + arrayWithRepos.push(repo.name); + //Write the table rows and cells + projects.innerHTML += ` + + ${repo.name} + ${new Date(repo.updated_at).toLocaleDateString('sv-SE')} + ${repo.default_branch} + + ${repo.html_url} + `; + } + }); + + //Count the repos and show the chart + countRepos = arrayWithRepos.length; + numberOfProjects.innerHTML = `I have finished ${countRepos} projects and have ${19-countRepos} left.`; + showChart(countRepos); + + //Get the pull requests for each repo + getPullRequests(arrayWithRepos); + }) +} + +//Function for showing username and picture +const showUsernameAndPic = (ownerLogin, userPic) => { + username.innerHTML = ownerLogin; + picture.src = userPic; +} + +//Function for getting the pull requests to be able to show the commits and the comments +const getPullRequests = (repos) => { + repos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo}/pulls?per_page=90`) + .then((res) => res.json()) + .then(data => { + + let commitsURL = ''; + + data.forEach((repoData) => { + //Only go on with the PRs that are from the user + if (ownerLogin === repoData.user.login) { + + //Get the commits for each repo through the commitsURL. Pass it to the fetchCommits function. + commitsURL = repoData.commits_url; + fetchCommits(commitsURL, repo); + } + }); + }) + }) +} + +//Function for showing how many commits are made for each repo +const fetchCommits = (commitsURL, repoName) => { + fetch(commitsURL) + .then((res) => res.json()) + .then(data => { + document.getElementById(`commits-${repoName}`).innerHTML += data.length; + }); +} + +//Invoke the getRepo function +getRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..9bccbed7 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,114 @@ body { - background: #FFECE9; -} \ No newline at end of file + margin: 0; + font-family: 'Roboto', sans-serif; + padding: 2rem 1rem; +} + +/* --- HEADER --- */ +.user { + display: flex; +} + +h1 { + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 300; + color: #888; + margin: 0; +} + +.heading { + align-self: flex-start; +} + +.username { + align-self: center; + margin: 0 0.5rem 0 0; + font-size: 2.2rem; +} + +.picture { + border-radius: 50%; + height: 13vw; +} + +/* --- MAIN --- */ +main { + padding: 2rem 0 0 0; + overflow-x: auto; +} + +.projects { + overflow: auto; + white-space: nowrap; + margin: 1rem 0 1.5rem 0; +} + +table { + width: 100%; + border-collapse: collapse; +} + +thead { + font-weight: 700; + color: #888; +} + +td { + padding: 0.3rem 1rem; + border: 1px solid rgb(202, 202, 202); +} + +.repo-url { + text-decoration: none; + color: #000; +} + +canvas { + margin-top: 2rem; +} + +.number-of-projects { + text-align: center; + margin: 1.6rem 0; +} + + +/* --- Desktop --- */ +@media screen and (min-width:768px) { + + h1 { + font-size: 1.5rem; + } + + header { + display: flex; + justify-content: space-between; + } + + .heading { + align-self: flex-start; + } + + .username { + align-self: center; + margin: 0 1rem 0 1.3rem; + font-size: 2.5rem; + } + + .repo-url { + text-decoration: none; + color: #000; + } + + .repo-url:hover { + color: #888; + cursor: pointer; + } + + /* --- CHART -- */ + .chart { + max-height: 60vh; + } + +}