Added graphs to insights page

2023-03-09 14:11:36 +00:00
parent 7e5ab20748
commit 8f018de332
6 changed files with 229 additions and 12 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/BarChart.vue
+++ b/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>
--- a/src/components/pieChart.vue
+++ b/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>
--- a/src/pages/InsightsPage.vue
+++ b/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">
+    <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{
-    background-color: rgb(44, 102, 102);
+#insightDiv{
+    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>
--- a/src/pages/MapPage.vue
+++ b/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;