Added a chart to display at my page,change the color i CSS and changed my structure in HTML

TereseClaesson · TereseClaesson · commit 0ffb520df8a0 · 2022-02-25T17:53:26.000+01:00
diff --git a/code/chart.js b/code/chart.js
@@ -1,39 +1,27 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById('chart').getContext('2d');
 
 //"Draw" the chart here 👇
-const myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-    
-            borderColor: [
-                'rgba(255, 99, 132, 1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            y: {
-                beginAtZero: true
-            }
-        }
-    }
-});
+const drawChart = (amount) => {
+   const data =  {
+        labels: [
+            'completed projects',
+            'projects left'
+        ],
+        datasets: [
+            {
+            backgroundColor: ['grey', 'black'],
+            data: [amount, 19 - amount],
+            hoverOffSet: 4,
+        },
+    ],
+
+};
+    const config = {
+        type: 'doughnut',
+        data: data
+    };
+    const myChart = new Chart(ctx,config);
+
+};
+
diff --git a/code/index.html b/code/index.html
@@ -6,8 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
 </head>
 <body>
+  <!-- This will be used to draw the chart 👇 -->
+  <canvas id="chart" style="width: 100%; max-width: 400px; height: 100%; max-height: 200px;"></canvas>
   <h1>GitHub Tracker</h1>
   <h2>Projects:</h2>
   <main class="container" id="container">
@@ -19,10 +22,9 @@ <h2>Projects:</h2>
   </section>
   </main>
   <footer></footer>
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
+  
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
+  
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -41,6 +41,7 @@ fetch(API_URL_REPOS)
         commits(repo.commits_url, repo.name)
     });
     getPullRequest(forkedRepos);
+    drawChart(forkedRepos.length);
   });
 }
 
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,3 @@
 body {
-  background: #FFECE9;
+  background: #d5cac4;
 }

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ fetch(API_URL_REPOS)`
`41`	`41`	`commits(repo.commits_url, repo.name)`
`42`	`42`	`});`
`43`	`43`	`getPullRequest(forkedRepos);`
	`44`	`+ drawChart(forkedRepos.length);`
`44`	`45`	`});`
`45`	`46`	`}`
`46`	`47`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`body {`
`2`		`- background: #FFECE9;`
	`2`	`+ background: #d5cac4;`
`3`	`3`	`}`