Merge pull request #40 from 0hAodha/graphs

Added graphs to insights page

package-lock.json

@@ -11,9 +11,11 @@
         "@popperjs/core": "^2.11.6",
         "axios": "^1.3.1",
         "bootstrap": "^5.2.3",
+        "chart.js": "^4.2.1",
         "firebase": "^9.17.1",
         "ol": "^7.2.2",
         "vue": "^3.2.45",
+        "vue-chartjs": "^5.2.0",
         "vue-loading-overlay": "^6.0.3",
         "vue-marquee-text-component": "^2.0.1",
         "vue-router": "^4.1.6",
@@ -952,6 +954,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@@ -1300,6 +1307,17 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz",
+      "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": "^7.0.0"
+      }
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -2225,6 +2243,15 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz",
+      "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-loading-overlay": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-6.0.3.tgz",

package.json

@@ -11,9 +11,11 @@
     "@popperjs/core": "^2.11.6",
     "axios": "^1.3.1",
     "bootstrap": "^5.2.3",
+    "chart.js": "^4.2.1",
     "firebase": "^9.17.1",
     "ol": "^7.2.2",
     "vue": "^3.2.45",
+    "vue-chartjs": "^5.2.0",
     "vue-loading-overlay": "^6.0.3",
     "vue-marquee-text-component": "^2.0.1",
     "vue-router": "^4.1.6",

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>

src/pages/InsightsPage.vue

@@ -1,20 +1,46 @@
 <template>
 <Navbar />
 
-<h1>Insights</h1>
+
-<div v-if="this.insights">
+<div v-if="this.insights" id="insightDiv">
-    <p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
+    <h1 style="padding-left: 10px; ">Insights</h1>
+    <div id="trainTotal">
+        <div id = "trainTotalText">
+            <p>Total number of trains: {{ this.insights["totalNumTrains"] }}</p>
+            <ul>
+                <li><p>Mainland: {{ this.insights["numMainland"] }}</p></li>
+                <li><p>Suburban: {{ this.insights["numSuburban"] }}</p></li>
+                <li><p>Darts: {{ this.insights["numDart"] }}</p></li>
+            </ul>
+        </div>
+        <div id="trainTotalChart">
+            <pieChart id="trainPie" />
+        </div>
+
+    </div>
+    <hr>
     <p>Number of actively running trains: {{ this.insights["numRunningTrains"] }}</p>
     <p>Percentage late: {{ this.insights["percentageLate"] }}%</p>
     <p>Percentage early or ontime: {{ this.insights["percentageNotLate"] }}%</p>
-
+    <div id ="statsDiv">
+        <BarChart id ="lateGraph" /> 
+    </div>
     <p v-if="this.latestTrain['TrainCode']">Latest train: {{ this.latestTrain["TrainCode"][0] }}, {{ this.insights["latestTime"] }} mins late</p>
     <p v-if="this.earliestTrain['TrainCode']">Earliest train: {{ this.earliestTrain["TrainCode"][0] }}, {{ this.insights["earliestTime"] * -1 }} mins early</p>
     
-    <p>Mainland: {{ this.insights["numMainland"] }}</p>
+    
-    <p>Suburban: {{ this.insights["numSuburban"] }}</p>
-    <p>Darts: {{ this.insights["numDart"] }}</p>
 </div>
+<div id="ads">
+    <h2>AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
+        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
+        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
+        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
+        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
+        AdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAdsAds
+    </h2>
+</div>
+<hr>
+
 
 <h1>Leaderboard</h1>
 <div v-for="item in orderedTrains">
@@ -22,11 +48,15 @@
     <p v-if="item.time > 0">{{ item.time }} mins late</p>
     <p v-else>{{ item.time * -1}} mins early</p>
 </div>
+
+
 </template>
     
 <script>
 import {store} from '../store/store'
 import Navbar from '../components/Navbar.vue'
+import BarChart from '../components/BarChart.vue'
+import pieChart from '../components/pieChart.vue'
 export default {
     name: "InsightsPage",
 
@@ -42,7 +72,10 @@ export default {
     },
 
     components: {
-      Navbar
+      Navbar,
+      pieChart,
+      BarChart
+      
     },
 
     created() {
@@ -56,7 +89,50 @@ export default {
 </script>
     
 <style scoped>
-body{
+#insightDiv{
-    background-color: rgb(44, 102, 102);
+    color: black;
+    padding-left: 10px;
+    width:80%;
+    background-color: antiquewhite;
+}
+
+#trainTotal{
+    height: 280px;
+
+}
+#trainTotalText{
+    position: relative;
+    width: 30%;
+    height: 100%;
+    right:0px;
+}
+#trainTotalChart{
+    position: absolute;
+    top:114px;
+    width: 50%;
+    height: 20%;
+    left: 20%;
+}
+
+#lateGraph{
+    position: absolute;
+    height:50%;
+
+    left:0px;
+}
+
+#statsDiv{
+    height: 230px;
+}
+
+#ads{
+    position: absolute;
+    background-color:rgb(78, 232, 109);
+    right: 0px;
+    width:20%;
+    height: 110%;
+    top:66px;
+    word-wrap: break-word;
+    overflow-y: hidden;
 }
 </style>

src/pages/MapPage.vue

@@ -284,10 +284,10 @@ export default {
 
 #sidebar{
   position: absolute;
-  height: 85%;
+  height: 80%;
   width: 20%;
   left: 2%;
-  top: 12%;
+  top: 14%;
   z-index: 2;
   text-align: center;
   animation: gradient 15s ease infinite;