Added graphs to insights page

src/components/BarChart.vue

@@ -0,0 +1,65 @@
+<template>
+<div id = "statsDiv">
+    <div id = "lateGraph">
+        <Bar
+        id="my-chart-id"
+        :options="chartOptions"
+        :data="chartData"
+        />
+    </div>
+</div>
+  </template>
+  
+  <script scoped>
+  import { Bar } from 'vue-chartjs'
+  import {store} from '../store/store'
+  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+  import { resolveDirective } from 'vue'
+  
+  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+  
+  export default {
+    name: 'BarChart',
+    components: { Bar },
+    data() {
+      return {
+        chartData: {
+          labels: [ 'Punctuality Percentage' ],
+          datasets: [ { 
+            label: 'Late', 
+            backgroundColor: '#FF0000', 
+            data: [store.insights["percentageLate"]] 
+          },
+          {
+            label: 'Early/On Time', 
+            backgroundColor: '#4ADC57', 
+            data: [store.insights["percentageNotLate"]] 
+
+          }
+        ]
+        },
+        chartOptions: {
+          responsive: true
+          
+        }
+      }
+
+    }
+
+    
+  }
+  </script>
+
+<style scoped>
+
+
+
+
+#lateGraph{
+    position: relative;
+    height:48%;
+    left:0px;
+}
+
+
+</style>

src/components/pieChart.vue

@@ -0,0 +1,47 @@
+<template>
+    <div id = "statsDiv">
+    <div id = "trainPie">
+        <Pie 
+            :data="chartData" 
+            :options="chartOptions" 
+        />
+    </div>
+    </div>
+</template>
+  
+<script lang="ts">
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { Pie } from 'vue-chartjs'
+import {store} from '../store/store.js'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+export default {
+name: 'pieChart',
+components: { Pie },
+data() {
+    return{
+        chartData:{
+            labels: ['Mainland', 'Suburban', 'Darts'],
+            datasets: [{
+                backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
+                data: [store.insights["numMainland"], store.insights["numSuburban"], store.insights["numDart"]]
+            }]
+        },
+        chartOptions:{
+            responsive: true,
+            maintainAspectRatio: false,
+            radius: 80,
+            hoverOffset: 0
+
+        }
+        
+    }
+}
+}
+</script>
+
+<style scoped>
+
+
+</style>