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

Author: rbenjos

Closure_Front_End/src/components/BarChart.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>

Closure_Front_End/src/components/LineChart.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>

Closure_Front_End/src/components/PieChart.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: {},