Add stations

src/components/BarChart.vue

@@ -1,6 +1,6 @@
 <template>
-<div id = "statsDiv">
-    <div id = "lateGraph">
+<div id="statsDiv">
+    <div id="lateGraph">
         <Bar
         id="my-chart-id"
         :options="chartOptions"
@@ -8,58 +8,44 @@
         />
     </div>
 </div>
-  </template>
+</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"]] 
+<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'
+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"]] 
         },
-        chartOptions: {
-          responsive: true
-          
-        }
+        {
+          label: 'Early/ontime', 
+          backgroundColor: '#4ADC57', 
+          data: [store.insights["percentageNotLate"]] 
+        }]
+      },
+      chartOptions: {
+        responsive: true
       }
-
     }
-
-    
   }
-  </script>
+}
+</script>
 
 <style scoped>
-
-
-
-
 #lateGraph{
     position: relative;
     height:48%;
     left:0px;
 }
-
-
 </style>