Done for the day

Author: Neaa99

code/chart.js

@@ -2,6 +2,9 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (repos) => {
+
+
 const labels = [
     'Compleated Projects',
     'Remaining Projects',
@@ -13,7 +16,7 @@ const labels = [
       label: 'My First dataset',
       backgroundColor: ['#B6766D', '#F8E8DE'],
       borderColor: '#f7e9e7',
-      data: [5, 1],
+      data: [repos, 19-repos],
     }]
   };
 
@@ -26,4 +29,6 @@ const labels = [
   const myChart = new Chart(
     document.getElementById('chart'),
     config
-  );
+  );
+
+}

code/index.html

@@ -22,9 +22,9 @@
 
   <!-- This will be used to draw the chart 👇 -->
 
-  <div class="chart-container">
-  <canvas id="chart"></canvas>
-</div>
+  <div id="canvas" class="chart-container">
+    <canvas id="chart"></canvas>
+  </div>
 
 
 

code/script.js

@@ -74,7 +74,8 @@ fetch(API_USER, options)
 
 
             })
-            getPullRequests(technigoRepositories)
+            drawChart(technigoRepositories.length) // Calling the chart
+            getPullRequests(technigoRepositories) // Calling the pull req and commits function
         })
 
 
@@ -88,24 +89,12 @@ const getPullRequests = (repos) => {
       .then(res => res.json())
       .then(data => {
         const commits = document.getElementById(`commit-${repo.name}`)
-              //TODO
-          //1. Find only the PR that you made by comparing pull.user.login
-              // with repo.owner.login
+
               const pulls = data.find((pull) => pull.user.login === repo.owner.login);
-            //   console.log(pulls)
-            //   commits.innerHTML += `
-            //     ${pulls.number}
-            //   `
+
               fetchCommits(pulls.commits_url, repo.name)
               console.log(pulls.commits_url)
 
-              
-              
-              //2. Now you're able to get the commits for each repo by using
-              // the commits_url as an argument to call another function
-
-              //3. You can also get the comments for each PR by calling
-              // another function with the review_comments_url as argument
           })
     })
   }
@@ -119,4 +108,11 @@ const getPullRequests = (repos) => {
             document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
 
         })
-  }
+  }
+
+  // Center canvas/chart
+  window.onload = window.onresize = function() {
+    const canvas = document.getElementById('canvas');
+    canvas.width = window.innerWidth * 0.8;
+    canvas.height = window.innerHeight * 0.8;
+}

code/style.css

@@ -12,7 +12,7 @@ body {
   left: 100px;
    /* padding: 600px 800px; Utöka första vid fler reops */
    width: 90vw;
-   height: 120rem;
+   height: 230rem;
    background: linear-gradient(100deg, #f7e9e7, #B6766D);
    z-index: -1;
 }
@@ -129,13 +129,14 @@ a:visited, a:link {
   text-decoration: none;
 }
 
-/* .chart-container {
- width: 600px;
- height: auto;
- padding: 100px;
- border: 1px solid black;
-} */
-
+.chart-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin:auto;
+  width: 600px;
+  
+}
 
 @keyframes colorChange {
   0%   {background-color: #f7f1f0;}
@@ -157,8 +158,6 @@ a:visited, a:link {
   .myDiv {
     left: 0;
     width: 100vw;
-
-    
   }
 
   .container {
@@ -167,8 +166,6 @@ a:visited, a:link {
     align-items: center;
     justify-content: center;
     margin: 110px 0;
-
-
   }
 
   .header {
@@ -195,6 +192,10 @@ a:visited, a:link {
   .header p {
     margin: 10px;
   }
+
+  .chart-container {
+    width: 400px;
+  }
 }
 
 /* TABLET LANDSCAPE */
@@ -209,8 +210,6 @@ a:visited, a:link {
   .myDiv {
     left: 0;
     width: 100vw;;
-
-    
   }
 
   .container {
@@ -249,4 +248,8 @@ a:visited, a:link {
   .header p {
     margin: 10px;
   }
+
+  .chart-container {
+    width: 600px;
+  }
 }