Skip to content

Commit 7ea4af6

Browse files
committed
managed to do css and some js but might need to re-write js
1 parent 3dab43a commit 7ea4af6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+31401
-82
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
token.js

code/chart.js

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,61 @@
22
const ctx = document.getElementById('chart').getContext('2d')
33

44
//"Draw" the chart here 👇
5-
const myChart = () => {
6-
const config = {
7-
type: 'doughnut',
8-
backgroundColor: [
9-
'#1400D1',
10-
'#CEE6FF'
11-
]
12-
5+
6+
const drawChart = (amount) => {
7+
const labels = [
8+
'Projects done',
9+
'Projects to be done',
10+
11+
];
12+
13+
const data = {
14+
labels: labels,
15+
datasets: [ {
16+
label: 'My First dataset',
17+
backgroundColor: ['rgb(131, 28, 147)', 'rgba(19, 115, 199, 0.776)' ],
18+
borderColor: 'none',
19+
data: [amount, 19-amount],
20+
}]
21+
};
22+
23+
const config = {
24+
type: 'doughnut',
25+
data: data,
26+
options: {
27+
responsive: true,
28+
// maintainAspectRatio: false,
1329
}
14-
}
30+
};
31+
32+
const myChart = new Chart(
33+
document.getElementById('chart'),
34+
config
35+
36+
);
37+
38+
};
39+
40+
41+
42+
43+
44+
45+
46+
47+
48+
49+
50+
51+
52+
53+
// const myChart = () => {
54+
// const config = {
55+
// type: 'doughnut',
56+
// backgroundColor: [
57+
// '#1400D1',
58+
// '#CEE6FF'
59+
// ]
60+
61+
// }
62+
// }

code/index.html

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,38 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link rel="preconnect" href="https://fonts.googleapis.com">
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cutive+Mono&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
11+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cutive+Mono&family=Montserrat:wght@400;700&family=Raleway:wght@100;200&display=swap" rel="stylesheet">
1215
<title>Emma Springs Project GitHub Tracker</title>
1316
<link rel="stylesheet" href="./style.css" />
1417
</head>
1518
<body>
1619

1720

1821
<section id="header" class="header-container">
19-
<h1>GitHub Tracker of = {Emma Springs}</h1>
20-
<img width="100" src="https://avatars.githubusercontent.com/u/94292545?v=4"/>
22+
<!-- <img width="100" src="https://avatars.githubusercontent.com/u/94292545?v=4"/> -->
23+
<!-- <h1>GitHub tracker for = {Emma Springs}</h1> -->
24+
<!-- <h3>GitHub username = EmmaSprings</h3> -->
2125
</section>
2226

27+
<section class="project-chart-container">
2328

24-
<main id="projects" class="projects-container"></main>
25-
29+
30+
<main id="projects" class="projects-container"></main>
31+
<section id="pullsRepo" class="pulls"></section>
32+
2633
<!-- This will be used to draw the chart 👇 -->
27-
<canvas id="chart" width="400px" height="400px"></canvas>
34+
<div class="chart-container">
35+
<canvas id="chart" width="200" height="200"></canvas>
36+
</div>
37+
38+
</section>
39+
2840

29-
<script src="./script.js"></script>
3041
<script src="./chart.js"></script>
42+
<script src="./token.js"></script>
43+
<script src="./script.js"></script>
3144
</body>
3245
</html>

code/script.js

Lines changed: 143 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
2+
13
const username = 'EmmaSprings'
24
const projects = document.getElementById('projects')
5+
const API_URL_USER = `https://api.github.com/users/${username}`
6+
const API_URL_REPO = `https://api.github.com/users/${username}/repos`
7+
8+
39

410
const fetchUser = () => {
511

@@ -9,66 +15,155 @@ const fetchUser = () => {
915
Authorization: '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'
1016
}
1117
}
12-
const API_URL_USER = `https://api.github.com/users/${username}`
18+
1319
fetch(API_URL_USER, options)
1420
.then((res) => res.json())
1521
.then((data) => {
1622
projects.innerHTML += `
17-
<p>GitHub username = ${data.login}</p>
18-
<h2>Projects = [</h2>
19-
20-
`
21-
// header.innerHTML += `
22-
// <img width="100" src="https://avatars.githubusercontent.com/u/94292545?v=4"/>
23-
// `
23+
<div class="header-container">
24+
<img src="https://avatars.githubusercontent.com/u/94292545?v=4"/>
25+
<h1>GitHub tracker for Emma Springs</h1>
26+
<h2>user: <a href="https://api.github.com/users/EmmaSprings" class="login-name"> ${data.login}</a> <br>
27+
${data.bio}
28+
</h2>
29+
30+
<p class="title">projects = [</p>
31+
</div>
32+
`
33+
console.log(data) //remove
34+
2435
fetchRepos();
36+
37+
2538
})
26-
2739

2840

29-
const fetchRepos = () => {
30-
const API_URL_REPO = `https://api.github.com/users/${username}/repos`
31-
fetch(API_URL_REPO, options)
32-
.then((res) => res.json())
33-
.then((data) => {
41+
42+
const fetchRepos = (myProjects) => {
43+
fetch(API_URL_REPO, options)
44+
.then((res) => res.json())
45+
.then((data) => {
3446

35-
const myProjects = data.filter((repo) => repo.name.includes("project-") && repo.fork);
36-
47+
const myProjects = data.filter((repo) => repo.name.startsWith("project-") && repo.fork);
48+
3749
myProjects.forEach((repo => {
3850
projects.innerHTML += `
39-
<li>
40-
<a href="${repo.html_url}" target="_blank">${repo.name}</a>
41-
<p>
42-
This is ${repo.name}
43-
</p>
44-
<li>
45-
`
46-
}))
47-
48-
projects.innerHTML += `<h2 class="sign">]</h2>`
49-
50-
})
51-
52-
};
53-
myChart();
54-
};
55-
56-
57-
fetchUser();
51+
<li>
52+
<a href="${repo.html_url}" target="_blank" class="repo-link">${repo.name}</a>
53+
<p class="repo-info">
54+
<!-- This is ${repo.name} -->
55+
</p>
56+
<p class="latest-push">
57+
latest push: ${new Date(repo.pushed_at).toDateString()}</p>
58+
<p class="extra-info">main language: ${repo.language}<br>
59+
branch: ${repo.default_branch}<br>
60+
commits amount: ${repo.commits_url.length}<br>
61+
<p id ="${repo.name}">Commits made by team member</p>
62+
pr: ${length}
63+
</p>
64+
65+
<li>
66+
`
67+
}))
5868

69+
projects.innerHTML += `
70+
<p class="title">]</p>
71+
<h3>hello</h3>
72+
<!--<p>total repos = </p>-->
73+
`
5974

75+
drawChart(myProjects.length);
76+
fetchPullRequests(myProjects);
77+
console.log(myProjects)
78+
})
79+
};
80+
81+
const fetchPullRequests = (myProjects) => {
82+
// const API_URL_PRS = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`
83+
84+
myProjects.forEach(repo => {
85+
fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
86+
.then((res) => res.json())
87+
.then((data) => {
88+
const myPullRes = data.find(pull => pull.user.login === repo.owner.login);
6089

90+
const myCommitsURL = data.commits_url
91+
const repoName = repo.name
92+
fetchCommits(myCommitsURL, repoName);
93+
console.log(myPullRes)
94+
6195

62-
// const myProjects = data.filter((data) => data.name.includes("project-") && data.fork));
63-
// const userRepos = data[0].name;
64-
// for (i = 0; i < data.length; i++){
65-
// projects.innerHTML += `
66-
// <li>
67-
// <a href="${data[i].html_url}" target="_blank">${data[i].name}</a>
68-
// <p>
69-
// This is ${data[i].name}
70-
// </p>
71-
// <li>
72-
// `
73-
74-
// };
96+
97+
})
98+
})
99+
}
100+
101+
};
102+
103+
104+
105+
fetchUser();
106+
107+
108+
109+
110+
111+
const fetchCommits = (myCommitsURL, repoName) => {
112+
113+
fetch(myCommitsURL, repoName)
114+
.then((res) => res.json())
115+
.then((data) => {
116+
document.getElementById(repoName).innerHTML =`Number of commit: ${data.length}`
117+
// document.getElementById(`commit-${dataName}`).innerHTML += data.length
118+
})
119+
}
120+
121+
122+
123+
124+
125+
126+
127+
128+
// const myProjects = data.filter((data) => data.name.includes("project-") && data.fork));
129+
// const userRepos = data[0].name;
130+
// for (i = 0; i < data.length; i++){
131+
// projects.innerHTML += `
132+
// <li>
133+
// <a href="${data[i].html_url}" target="_blank">${data[i].name}</a>
134+
// <p>
135+
// This is ${data[i].name}
136+
// </p>
137+
// <li>
138+
// `
139+
140+
// };
141+
142+
143+
144+
145+
146+
// const fetchPulls = () => {
147+
148+
// const API_URL_PRS = `https://api.github.com/repos/Technigo/project-chatbot/pulls?per_page=100`
149+
150+
// fetch(API_URL_PRS)
151+
// .then((res) => res.json())
152+
// .then((data) => {
153+
154+
// const myPulls = data.filter((repo) => repo.login.includes(`${username}`)
155+
156+
// myPulls.forEach((repo {
157+
158+
// }))
159+
160+
// // projects.innerHTML += `
161+
// // <p>hello total repos = ${data[1].base.label} </p>
162+
// // `
163+
// console.log(data)
164+
165+
// fetchPullRequests(myProjects)
166+
167+
// });
168+
169+
// }

0 commit comments

Comments
 (0)