From 0d43ffec34c530628b90c9ded68c950303513f3d Mon Sep 17 00:00:00 2001
From: noabarlia <noa.barlia@mail.huji.ac.il>
Date: Sat, 26 Jun 2021 16:51:24 +0300
Subject: [PATCH 1/8] Added empty Analytics page, analytics button and routing.

---
 Closure_Front_End/src/App.vue             | 20 +++++++++++++++++---
 Closure_Front_End/src/router/index.js     |  7 +++++++
 Closure_Front_End/src/views/Analytics.vue |  0
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 Closure_Front_End/src/views/Analytics.vue

diff --git a/Closure_Front_End/src/App.vue b/Closure_Front_End/src/App.vue
index 26b72ece..59e6378a 100644
--- a/Closure_Front_End/src/App.vue
+++ b/Closure_Front_End/src/App.vue
@@ -8,6 +8,18 @@
       <div class="navbar-item">
         <div class="buttons">
           <!-- Check that the SDK client is not currently loading before accessing is methods -->
+          <!-- analytics -->
+          <router-link
+            v-if="$auth.isAuthenticated.value"
+            class="button is-small is-dark"
+            to="/analytics"
+          >
+            <span class="icon is-small is-right">
+              <i class="fas fa-chart-pie"></i>
+            </span>
+          </router-link>
+
+          <!-- settings -->
           <router-link
             v-if="$auth.isAuthenticated.value"
             class="button is-small is-dark"
@@ -17,6 +29,7 @@
               <i class="fas fa-user-cog"></i>
             </span>
           </router-link>
+
           <div v-if="!$auth.loading.value">
             <button
               class="button is-small is-dark menu-label"
@@ -56,8 +69,9 @@ export default {
       this.$auth
         .getIdTokenClaims()
         .then((response) => (this.username = response.nickname));
-      this.$http.get(`students/${this.username}`)
-        .then((response) => this.student = response);
+      this.$http
+        .get(`students/${this.username}`)
+        .then((response) => (this.student = response));
     }
   },
   methods: {
@@ -68,7 +82,7 @@ export default {
     // Log the user out
     logout() {
       this.$auth.logout({
-        returnTo: process.env.VUE_APP_AUTH0_REDIRECT_URI
+        returnTo: process.env.VUE_APP_AUTH0_REDIRECT_URI,
       });
     },
   },
diff --git a/Closure_Front_End/src/router/index.js b/Closure_Front_End/src/router/index.js
index a9e33bca..0a90ee64 100644
--- a/Closure_Front_End/src/router/index.js
+++ b/Closure_Front_End/src/router/index.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import Settings from '../views/Settings.vue'
+import Analytics from '../views/Analytics.vue'
 import { routeGuard } from '@/auth/index.js'
 
 const routes = [
@@ -15,6 +16,12 @@ const routes = [
     component: Settings,
     beforeEnter: routeGuard
   },
+  {
+    path: '/analytics',
+    name: 'Analytics',
+    component: Analytics,
+    beforeEnter: routeGuard
+  },
 ]
 
 const router = createRouter({
diff --git a/Closure_Front_End/src/views/Analytics.vue b/Closure_Front_End/src/views/Analytics.vue
new file mode 100644
index 00000000..e69de29b

From 33e76e7531a36ca4563cc5ff0a87f2c63e7b44b4 Mon Sep 17 00:00:00 2001
From: roey <rbenjos@gmail.com>
Date: Sat, 26 Jun 2021 17:22:30 +0300
Subject: [PATCH 2/8] added mock analytics

---
 Closure_Front_End/src/components/BarChart.vue | 23 +++++++++++++
 .../src/components/LineChart.vue              | 25 ++++++++++++++
 Closure_Front_End/src/views/Analytics.vue     | 34 +++++++++++++++++++
 3 files changed, 82 insertions(+)
 create mode 100644 Closure_Front_End/src/components/BarChart.vue
 create mode 100644 Closure_Front_End/src/components/LineChart.vue

diff --git a/Closure_Front_End/src/components/BarChart.vue b/Closure_Front_End/src/components/BarChart.vue
new file mode 100644
index 00000000..4daf0ec8
--- /dev/null
+++ b/Closure_Front_End/src/components/BarChart.vue
@@ -0,0 +1,23 @@
+
+<script>
+import { defineComponent } from 'vue';
+import { Bar } from 'vue3-chart-v2';
+
+export default defineComponent({
+  name: 'MonthlyChart',
+  extends: Bar,
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    })
+  }
+})
+</script>
diff --git a/Closure_Front_End/src/components/LineChart.vue b/Closure_Front_End/src/components/LineChart.vue
new file mode 100644
index 00000000..cc950a44
--- /dev/null
+++ b/Closure_Front_End/src/components/LineChart.vue
@@ -0,0 +1,25 @@
+
+
+<script>
+import { defineComponent } from 'vue';
+import { Line } from 'vue3-chart-v2';
+
+
+export default defineComponent({
+  name: 'MonthlyChart',
+  extends: Line,
+  props: {
+    chartData: {
+      type: Object,
+      required: true
+    },
+    chartOptions: {
+      type: Object,
+      required: false
+    },
+  },
+  mounted () {
+    this.renderChart(this.chartData, this.chartOptions)
+  }
+})
+</script>
\ No newline at end of file
diff --git a/Closure_Front_End/src/views/Analytics.vue b/Closure_Front_End/src/views/Analytics.vue
index e69de29b..bc62435e 100644
--- a/Closure_Front_End/src/views/Analytics.vue
+++ b/Closure_Front_End/src/views/Analytics.vue
@@ -0,0 +1,34 @@
+<template>
+
+<div class="columns">
+  <div class="column">
+    <BarChart/>
+  </div>
+  <div class="column">
+    <LineChart/>
+  </div>
+  <div class="column">
+  </div>
+  <div class="column">
+  </div>
+</div>
+
+
+</template>
+
+<script>
+import BarChart from "../components/BarChart.vue";
+import LineChart from "../components/LineChart.vue";
+
+export default {
+  name: "Analytics",
+  components: { BarChart,LineChart },
+  data() {},
+
+  methods: {},
+};
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

From f38d3da4a08f0984094e1edb9f52153109c22adb Mon Sep 17 00:00:00 2001
From: rbenjos <rbenjos@gmail.com>
Date: Sat, 26 Jun 2021 18:53:33 +0300
Subject: [PATCH 3/8] added static analytics to the analytics view. right now
 they are not connected to allcourses, but they still function and present the
 information needed. all we need to do now is replace datasets>data with the
 relevant information

---
 Closure_Front_End/src/components/BarChart.vue | 23 --------
 .../src/components/LineChart.vue              | 53 +++++++++++++------
 Closure_Front_End/src/components/PieChart.vue | 22 ++++++++
 Closure_Front_End/src/views/Analytics.vue     |  6 +--
 4 files changed, 61 insertions(+), 43 deletions(-)
 delete mode 100644 Closure_Front_End/src/components/BarChart.vue
 create mode 100644 Closure_Front_End/src/components/PieChart.vue

diff --git a/Closure_Front_End/src/components/BarChart.vue b/Closure_Front_End/src/components/BarChart.vue
deleted file mode 100644
index 4daf0ec8..00000000
--- a/Closure_Front_End/src/components/BarChart.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-
-<script>
-import { defineComponent } from 'vue';
-import { Bar } from 'vue3-chart-v2';
-
-export default defineComponent({
-  name: 'MonthlyChart',
-  extends: Bar,
-  mounted () {
-    // Overwriting base render method with actual data.
-    this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-      datasets: [
-        {
-          label: 'GitHub Commits',
-          backgroundColor: '#f87979',
-          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
-        }
-      ]
-    })
-  }
-})
-</script>
diff --git a/Closure_Front_End/src/components/LineChart.vue b/Closure_Front_End/src/components/LineChart.vue
index cc950a44..3bb5f5ed 100644
--- a/Closure_Front_End/src/components/LineChart.vue
+++ b/Closure_Front_End/src/components/LineChart.vue
@@ -1,25 +1,44 @@
 
 
 <script>
-import { defineComponent } from 'vue';
-import { Line } from 'vue3-chart-v2';
-
+import { defineComponent } from "vue";
+import { Line } from "vue3-chart-v2";
 
 export default defineComponent({
-  name: 'MonthlyChart',
+  name: "MonthlyChart",
   extends: Line,
-  props: {
-    chartData: {
-      type: Object,
-      required: true
-    },
-    chartOptions: {
-      type: Object,
-      required: false
-    },
+  // props: {
+  //   chartData: {
+  //     type: Object,
+  //     required: true
+  //   },
+  //   chartOptions: {
+  //     type: Object,
+  //     required: false
+  //   },
+  // },
+  mounted() {
+    this.renderChart({
+      labels: [0,1, 2, 3, 4, 5, 6, 7, 8],
+      datasets: [
+        {
+          label: "total points",
+          backgroundColor: "#999999",
+          fill: false,
+          data: [0,25, 56, 70, 80, 90, 105, 125, 134],
+          xAxisId: "semester",
+          options: {
+            scales: {
+              title:
+              {
+                display: true,
+                text : 'semester',
+              },
+            },
+          },
+        },
+      ],
+    });
   },
-  mounted () {
-    this.renderChart(this.chartData, this.chartOptions)
-  }
-})
+});
 </script>
\ No newline at end of file
diff --git a/Closure_Front_End/src/components/PieChart.vue b/Closure_Front_End/src/components/PieChart.vue
new file mode 100644
index 00000000..2e7a89ab
--- /dev/null
+++ b/Closure_Front_End/src/components/PieChart.vue
@@ -0,0 +1,22 @@
+
+<script>
+import { defineComponent } from 'vue';
+import { Pie } from 'vue3-chart-v2';
+
+export default defineComponent({
+  name: 'MonthlyChart',
+  extends: Pie,
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['Must', 'Choose from list', 'Choice'],
+      datasets: [
+        {
+          backgroundColor: ['#bc87d0','#fbaf5d','#f06eaa'],
+          data: [70, 20, 40]
+        }
+      ]
+    })
+  }
+})
+</script>
diff --git a/Closure_Front_End/src/views/Analytics.vue b/Closure_Front_End/src/views/Analytics.vue
index bc62435e..e1263f3b 100644
--- a/Closure_Front_End/src/views/Analytics.vue
+++ b/Closure_Front_End/src/views/Analytics.vue
@@ -2,7 +2,7 @@
 
 <div class="columns">
   <div class="column">
-    <BarChart/>
+    <PieChart/>
   </div>
   <div class="column">
     <LineChart/>
@@ -17,12 +17,12 @@
 </template>
 
 <script>
-import BarChart from "../components/BarChart.vue";
+import PieChart from "../components/PieChart.vue";
 import LineChart from "../components/LineChart.vue";
 
 export default {
   name: "Analytics",
-  components: { BarChart,LineChart },
+  components: { PieChart,LineChart },
   data() {},
 
   methods: {},

From 25c069b312aeb934efccfbed2ba02cb283807ee3 Mon Sep 17 00:00:00 2001
From: rbenjos <rbenjos@gmail.com>
Date: Mon, 28 Jun 2021 08:17:13 +0300
Subject: [PATCH 4/8] managed to properly connect the progress bar to the data

---
 Closure_Front_End/package-lock.json           | 224 +++++++++++-------
 Closure_Front_End/package.json                |   3 +-
 .../src/components/ProgressBox.vue            |  39 +--
 3 files changed, 163 insertions(+), 103 deletions(-)

diff --git a/Closure_Front_End/package-lock.json b/Closure_Front_End/package-lock.json
index 70c3fda8..2fd3d025 100644
--- a/Closure_Front_End/package-lock.json
+++ b/Closure_Front_End/package-lock.json
@@ -1466,6 +1466,14 @@
         "@types/node": "*"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.32",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.32.tgz",
+      "integrity": "sha512-d45JiRQwEOlZiKwukjqmqpbqbYzUX2yrXdH9qVn6kXpPDsTYCo6YbfFOlnUaJ8S/DhJwbBJiLsMjKpW5oP8B2A==",
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
@@ -2077,87 +2085,6 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.2.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
-          "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -3890,6 +3817,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -4276,7 +4229,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -4284,8 +4236,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.5",
@@ -9681,6 +9632,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -14146,6 +14102,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.2.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
+      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.9.tgz",
@@ -14178,6 +14215,25 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue3-chart-v2": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/vue3-chart-v2/-/vue3-chart-v2-0.8.2.tgz",
+      "integrity": "sha512-J+v3Q0ayYyWstPY1zOmdx6l/wkHT63Kzrp5X5PNNXrSUoJT8p608danWIJtncpWhuJB8qQ3t2/jWsg4WF8qJjg==",
+      "requires": {
+        "@types/chart.js": "^2.9.29",
+        "chart.js": "^2.9.4",
+        "core-js": "^3.6.5",
+        "prettier": "^2.2.1",
+        "vue": "^3.0.0"
+      },
+      "dependencies": {
+        "prettier": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+          "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ=="
+        }
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/Closure_Front_End/package.json b/Closure_Front_End/package.json
index 0a48cf4d..05c1f853 100644
--- a/Closure_Front_End/package.json
+++ b/Closure_Front_End/package.json
@@ -15,7 +15,8 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vue3-chart-v2": "^0.8.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/Closure_Front_End/src/components/ProgressBox.vue b/Closure_Front_End/src/components/ProgressBox.vue
index d16644b1..149dc19b 100644
--- a/Closure_Front_End/src/components/ProgressBox.vue
+++ b/Closure_Front_End/src/components/ProgressBox.vue
@@ -3,14 +3,14 @@
     <br />
     <div class="sub">
       סך הכל:
-      <progress class="progress total" v-bind:value="total" max="100">
+      <progress class="progress total" v-bind:value="len(allcourses,1)+len(allcourses,2)+len(allcourses,3)" max="100">
         15%
       </progress>
     </div>
 
     <div class="sub">
       חובה:
-      <progress class="progress must" v-bind:value="mustValue" max="80">
+      <progress class="progress must" v-bind:value="len(allcourses,1)" max="80">
         15%
       </progress>
     </div>
@@ -19,7 +19,7 @@
       חובת בחירה:
       <progress
         class="progress choose_from_list"
-        v-bind:value="chooseListValue"
+        v-bind:value="len(allcourses,2)"
         max="15"
       >
         15%
@@ -28,7 +28,7 @@
 
     <div class="sub">
       בחירה:
-      <progress class="progress choice" v-bind:value="choiceValue" max="30">
+      <progress class="progress choice" v-bind:value="len(allcourses,3)" max="30">
         15%
       </progress>
     </div>
@@ -44,10 +44,10 @@ export default {
       mandatory: 30,
       mand_choice: 20,
       choice: 15,
-      coursesByType: null,
-      mustValue: null,
-      chooseListValue: null,
-      choiceValue: null,
+      coursesByType:  this.groupBy(this.allcourses, "type"),
+      // mustValue: this.len(coursesByType,1),
+      // chooseListValue: this.coursesByType[2].length,
+      // choiceValue: this.coursesByType[3].length,
     };
   },
 
@@ -58,22 +58,25 @@ export default {
         return rv;
       }, {});
     },
+    len: function(allcourses, index){
+      return this.groupBy(this.allcourses, "type")[index].length;
+    }
   },
 
   mounted() {
-    this.coursesByType = this.groupBy(this.allcourses, "type");
-    this.mustValue = this.coursesByType[1].length;
-    this.chooseListValue = this.coursesByType[2].length;
-    this.choiceValue = this.coursesByType[3].length;
-    console.log(this.coursesByType);
+    // this.coursesByType = this.groupBy(this.allcourses, "type");
+    // this.mustValue = this.coursesByType[1].length;
+    // this.chooseListValue = this.coursesByType[2].length;
+    // this.choiceValue = this.coursesByType[3].length;
+    // console.log(this.coursesByType);
   },
 
   updated() {
-    this.coursesByType = this.groupBy(this.allcourses, "type");
-    this.mustValue = this.coursesByType[1].length;
-    this.chooseListValue = this.coursesByType[2].length;
-    this.choiceValue = this.coursesByType[3].length;
-    console.log(this.coursesByType);
+  //   this.coursesByType = this.groupBy(this.allcourses, "type");
+  //   this.mustValue = this.coursesByType[1].length;
+  //   this.chooseListValue = this.coursesByType[2].length;
+  //   this.choiceValue = this.coursesByType[3].length;
+  //   console.log(this.coursesByType);
   },
 };
 </script>

From 314bac8c04221eb56ee5fd7ebda855890d6a4658 Mon Sep 17 00:00:00 2001
From: rbenjos <rbenjos@gmail.com>
Date: Mon, 28 Jun 2021 08:19:08 +0300
Subject: [PATCH 5/8] managed to properly connect the progress bar to the data

---
 .../src/components/ProgressBox.vue            | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/Closure_Front_End/src/components/ProgressBox.vue b/Closure_Front_End/src/components/ProgressBox.vue
index 149dc19b..3eaad9d2 100644
--- a/Closure_Front_End/src/components/ProgressBox.vue
+++ b/Closure_Front_End/src/components/ProgressBox.vue
@@ -43,11 +43,7 @@ export default {
       total: 50,
       mandatory: 30,
       mand_choice: 20,
-      choice: 15,
-      coursesByType:  this.groupBy(this.allcourses, "type"),
-      // mustValue: this.len(coursesByType,1),
-      // chooseListValue: this.coursesByType[2].length,
-      // choiceValue: this.coursesByType[3].length,
+      choice: 15
     };
   },
 
@@ -62,22 +58,6 @@ export default {
       return this.groupBy(this.allcourses, "type")[index].length;
     }
   },
-
-  mounted() {
-    // this.coursesByType = this.groupBy(this.allcourses, "type");
-    // this.mustValue = this.coursesByType[1].length;
-    // this.chooseListValue = this.coursesByType[2].length;
-    // this.choiceValue = this.coursesByType[3].length;
-    // console.log(this.coursesByType);
-  },
-
-  updated() {
-  //   this.coursesByType = this.groupBy(this.allcourses, "type");
-  //   this.mustValue = this.coursesByType[1].length;
-  //   this.chooseListValue = this.coursesByType[2].length;
-  //   this.choiceValue = this.coursesByType[3].length;
-  //   console.log(this.coursesByType);
-  },
 };
 </script>
 

From e26bd9a6942f748da506a7e3dc4df3f6aa36b22a Mon Sep 17 00:00:00 2001
From: rbenjos <rbenjos@gmail.com>
Date: Mon, 28 Jun 2021 08:52:27 +0300
Subject: [PATCH 6/8] now points are summed instead of counted

---
 .../src/components/ProgressBox.vue            | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/Closure_Front_End/src/components/ProgressBox.vue b/Closure_Front_End/src/components/ProgressBox.vue
index 3eaad9d2..1bb0f6aa 100644
--- a/Closure_Front_End/src/components/ProgressBox.vue
+++ b/Closure_Front_End/src/components/ProgressBox.vue
@@ -3,14 +3,14 @@
     <br />
     <div class="sub">
       סך הכל:
-      <progress class="progress total" v-bind:value="len(allcourses,1)+len(allcourses,2)+len(allcourses,3)" max="100">
+      <progress class="progress total" v-bind:value="sum(allcourses,1)+sum(allcourses,2)+sum(allcourses,3)" max="100">
         15%
       </progress>
     </div>
 
     <div class="sub">
       חובה:
-      <progress class="progress must" v-bind:value="len(allcourses,1)" max="80">
+      <progress class="progress must" v-bind:value="sum(allcourses,1)" max="80">
         15%
       </progress>
     </div>
@@ -19,7 +19,7 @@
       חובת בחירה:
       <progress
         class="progress choose_from_list"
-        v-bind:value="len(allcourses,2)"
+        v-bind:value="sum(allcourses,2)"
         max="15"
       >
         15%
@@ -28,7 +28,7 @@
 
     <div class="sub">
       בחירה:
-      <progress class="progress choice" v-bind:value="len(allcourses,3)" max="30">
+      <progress class="progress choice" v-bind:value="sum(allcourses,3)" max="30">
         15%
       </progress>
     </div>
@@ -54,8 +54,16 @@ export default {
         return rv;
       }, {});
     },
-    len: function(allcourses, index){
-      return this.groupBy(this.allcourses, "type")[index].length;
+    sum: function(allcourses, index){
+      var courses = this.groupBy(this.allcourses, "type")[index];
+      var sum = 0;
+      for (var i = 0; i<courses.length; i++)
+      {
+        sum += courses[i]["points"];
+      }
+      console.log(sum);
+      return sum;
+      
     }
   },
 };

From eb75e16a39d953c55d74c0cd76fbe7b862ac9e80 Mon Sep 17 00:00:00 2001
From: rbenjos <rbenjos@gmail.com>
Date: Tue, 29 Jun 2021 18:43:06 +0300
Subject: [PATCH 7/8] fixed the bug of the progress update methods

---
 .../src/components/ProgressBox.vue            | 45 ++++++++++++-------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/Closure_Front_End/src/components/ProgressBox.vue b/Closure_Front_End/src/components/ProgressBox.vue
index 1bb0f6aa..171ff2b5 100644
--- a/Closure_Front_End/src/components/ProgressBox.vue
+++ b/Closure_Front_End/src/components/ProgressBox.vue
@@ -3,14 +3,18 @@
     <br />
     <div class="sub">
       סך הכל:
-      <progress class="progress total" v-bind:value="sum(allcourses,1)+sum(allcourses,2)+sum(allcourses,3)" max="100">
+      <progress
+        class="progress total"
+        v-bind:value="sum(1) + sum(2) + sum(3)"
+        max="100"
+      >
         15%
       </progress>
     </div>
 
     <div class="sub">
       חובה:
-      <progress class="progress must" v-bind:value="sum(allcourses,1)" max="80">
+      <progress class="progress must" v-bind:value="sum(1)" max="80">
         15%
       </progress>
     </div>
@@ -19,7 +23,7 @@
       חובת בחירה:
       <progress
         class="progress choose_from_list"
-        v-bind:value="sum(allcourses,2)"
+        v-bind:value="sum(2)"
         max="15"
       >
         15%
@@ -28,7 +32,7 @@
 
     <div class="sub">
       בחירה:
-      <progress class="progress choice" v-bind:value="sum(allcourses,3)" max="30">
+      <progress class="progress choice" v-bind:value="sum(3)" max="30">
         15%
       </progress>
     </div>
@@ -43,28 +47,39 @@ export default {
       total: 50,
       mandatory: 30,
       mand_choice: 20,
-      choice: 15
+      choice: 15,
     };
   },
 
   methods: {
+    /**
+     * a helper method for grouping courses.
+     * will be mostly used to group by type
+     */
     groupBy: function (xs, key) {
       return xs.reduce(function (rv, x) {
         (rv[x[key]] = rv[x[key]] || []).push(x);
         return rv;
       }, {});
     },
-    sum: function(allcourses, index){
-      var courses = this.groupBy(this.allcourses, "type")[index];
-      var sum = 0;
-      for (var i = 0; i<courses.length; i++)
-      {
-        sum += courses[i]["points"];
+    /**
+     * sums up the total points for a given course type
+     */
+    sum: function (type) {
+      var courses = this.groupBy(this.allcourses, "type");
+      // first we need to check if we have a course from this type
+      if (type in courses) {
+        // if so, we will sum up the points from that course group,
+        var sum = 0;
+        for (var i = 0; i < courses[type].length; i++) {
+          sum += courses[type][i]["points"];
+        }
+        return sum;
+      } else {
+        // otherwise we will return 0.
+        return 0;
       }
-      console.log(sum);
-      return sum;
-      
-    }
+    },
   },
 };
 </script>

From a300b1bbe0e0e75b3bc4a74968830e889f762cd5 Mon Sep 17 00:00:00 2001
From: rbenjos <rbenjos@gmail.com>
Date: Wed, 30 Jun 2021 14:46:24 +0300
Subject: [PATCH 8/8] fixed naming issues and added cornerstones bar

---
 .../src/components/ProgressBox.vue            | 60 +++++++++++++------
 1 file changed, 41 insertions(+), 19 deletions(-)

diff --git a/Closure_Front_End/src/components/ProgressBox.vue b/Closure_Front_End/src/components/ProgressBox.vue
index 171ff2b5..8eb59973 100644
--- a/Closure_Front_End/src/components/ProgressBox.vue
+++ b/Closure_Front_End/src/components/ProgressBox.vue
@@ -1,40 +1,50 @@
 <template>
   <div class="progressbox">
     <br />
+
     <div class="sub">
-      סך הכל:
+      סך הכל:&ensp; {{ allPoints() }}/{{ 100 }}
       <progress
         class="progress total"
-        v-bind:value="sum(1) + sum(2) + sum(3)"
+        v-bind:value="allPoints()"
         max="100"
-      >
-        15%
-      </progress>
+      ></progress>
     </div>
 
     <div class="sub">
-      חובה:
-      <progress class="progress must" v-bind:value="sum(1)" max="80">
-        15%
-      </progress>
+      חובה:&ensp; {{pointsByType(MUST_TYPE)}}/{{80}}
+      <progress
+        class="progress must"
+        v-bind:value="pointsByType(MUST_TYPE)"
+        max="80"
+      ></progress>
     </div>
 
     <div class="sub">
-      חובת בחירה:
+       חובת בחירה:&ensp; {{pointsByType(MUST_CHOOSE_LIST_TYPE)}}/{{15}}
       <progress
         class="progress choose_from_list"
-        v-bind:value="sum(2)"
+        v-bind:value="pointsByType(CHOOSE_LIST_TYPE)"
         max="15"
-      >
-        15%
-      </progress>
+      ></progress>
+    </div>
+
+    <div class="sub">
+     בחירה:&ensp; {{pointsByType(CHOICE_TYPE)}}/{{30}}
+      <progress
+        class="progress choice"
+        v-bind:value="pointsByType(CHOICE_TYPE)"
+        max="30"
+      ></progress>
     </div>
 
     <div class="sub">
-      בחירה:
-      <progress class="progress choice" v-bind:value="sum(3)" max="30">
-        15%
-      </progress>
+       אבני פינה:&ensp; {{pointsByType(CORNER)}}/{{8}}
+      <progress
+        class="progress choice"
+        v-bind:value="pointsByType(CORNER)"
+        max="8"
+      ></progress>
     </div>
   </div>
 </template>
@@ -48,6 +58,10 @@ export default {
       mandatory: 30,
       mand_choice: 20,
       choice: 15,
+      MUST_TYPE: 0,
+      CHOOSE_LIST_TYPE: 1,
+      CHOICE_TYPE: 2,
+      CORNER_TYPE: 3,
     };
   },
 
@@ -65,7 +79,7 @@ export default {
     /**
      * sums up the total points for a given course type
      */
-    sum: function (type) {
+    pointsByType: function (type) {
       var courses = this.groupBy(this.allcourses, "type");
       // first we need to check if we have a course from this type
       if (type in courses) {
@@ -80,6 +94,14 @@ export default {
         return 0;
       }
     },
+    allPoints: function () {
+      return (
+        this.pointsByType(this.MUST_TYPE) +
+        this.pointsByType(this.CHOOSE_LIST_TYPE) +
+        this.pointsByType(this.CHOICE_TYPE) +
+        this.pointsByType(this.CORNER_TYPE)
+      );
+    },
   },
 };
 </script>