From cda8b6dfb9f30d9f4db710025d4daa7e376e6ddf Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Thu, 15 Mar 2018 09:28:26 +1100
Subject: [PATCH] show charts on dashboard

---
 Vue_Full_Project/package.json            |  4 +-
 Vue_Full_Project/src/dex/Chart.vue       | 26 +++++++++++
 Vue_Full_Project/src/dex/Database.vue    | 40 ++++++++++++++++-
 Vue_Full_Project/src/dex/Endpoint.vue    | 55 +++++++++++++++++++++++-
 Vue_Full_Project/src/main.js             |  3 ++
 Vue_Full_Project/src/views/Dashboard.vue |  9 ++--
 6 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 Vue_Full_Project/src/dex/Chart.vue

diff --git a/Vue_Full_Project/package.json b/Vue_Full_Project/package.json
index c77269b..52e8183 100644
--- a/Vue_Full_Project/package.json
+++ b/Vue_Full_Project/package.json
@@ -20,13 +20,13 @@
     "axios": "^0.18.0",
     "bootstrap": "4.0.0",
     "bootstrap-vue": "2.0.0-rc.1",
-    "chart.js": "2.7.1",
+    "chart.js": "^2.7.1",
     "flag-icon-css": "2.9.0",
     "font-awesome": "^4.7.0",
     "lodash": "^4.17.5",
     "simple-line-icons": "^2.4.1",
     "vue": "2.5.13",
-    "vue-chartjs": "3.1.0",
+    "vue-chartjs": "^3.1.0",
     "vue-router": "3.0.1",
     "vuetrend": "^0.3.2",
     "vuex": "^3.0.1"
diff --git a/Vue_Full_Project/src/dex/Chart.vue b/Vue_Full_Project/src/dex/Chart.vue
new file mode 100644
index 0000000..fffef50
--- /dev/null
+++ b/Vue_Full_Project/src/dex/Chart.vue
@@ -0,0 +1,26 @@
+<script>
+import {Bar} from 'vue-chartjs'
+
+export default {
+  extends: Bar,
+  props: ['labels', 'data'],
+  data () {
+    return {
+      datacollection: {
+        labels: this.labels,
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#4875b4',
+            data: this.data
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.renderChart(this.data, this.options)
+    // this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+}
+</script>
diff --git a/Vue_Full_Project/src/dex/Database.vue b/Vue_Full_Project/src/dex/Database.vue
index 24c8346..7640a7f 100644
--- a/Vue_Full_Project/src/dex/Database.vue
+++ b/Vue_Full_Project/src/dex/Database.vue
@@ -20,6 +20,7 @@
         <span>Today</span>
       </li>
     </ul>
+    <!-- <chart :data="summaryPoints" :labels="times"/> -->
   </div><!--/.social-box-->
 </template>
 <script>
@@ -27,10 +28,12 @@ import axios from 'axios'
 import SocialBoxChart from '../views/dashboard/SocialBoxChartExample.vue'
 import {BASE_URL} from '../vuex.js'
 import _ from 'lodash'
+import Chart from './Chart'
 export default {
   name: 'Database',
   components: {
-    SocialBoxChart
+    SocialBoxChart,
+    Chart
   },
   computed: {
     latestCount () {
@@ -40,6 +43,11 @@ export default {
         return 0
       }
     },
+    times () {
+      return _.map(this.points, (item) => {
+        return item.created_at
+      })
+    },
     summaryPoints () {
       return _.map(this.points, (item) => {
         return item.count
@@ -80,4 +88,32 @@ export default {
     color: #fff;
     font-size: 18px;
   }
-</style>
\ No newline at end of file
+  .social-box ul li strong {
+    font-size: 24;
+  }
+</style>
+
+
+
+
+
+export default {
+  extends: Bar,
+  data () {
+    return {
+      datacollection: {
+        labels: ['January', 'February'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+}
\ No newline at end of file
diff --git a/Vue_Full_Project/src/dex/Endpoint.vue b/Vue_Full_Project/src/dex/Endpoint.vue
index b65b8e0..04615a8 100644
--- a/Vue_Full_Project/src/dex/Endpoint.vue
+++ b/Vue_Full_Project/src/dex/Endpoint.vue
@@ -1,5 +1,56 @@
 <template>
-  <b-card class="card-accent-primary" header="Card with accent">
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  <b-card :class="getClass" :header="url">
+
+    <trend
+      :data="pointsSummary"
+      :gradient="['#6fa8dc', '#42b983', '#2c3e50']"
+      auto-draw
+      smooth>
+    </trend>
   </b-card>
 </template>
+
+<script>
+import axios from 'axios'
+import {BASE_URL} from '../vuex.js'
+import _ from 'lodash'
+export default {
+  props: ['url', 'name'],
+  data () {
+    return {
+      points: []
+    }
+  },
+  computed: {
+    pointsSummary () {
+      return _.map(this.points, (point) => {
+        return point.responseTime
+      }).reverse()
+    },
+    getClass () {
+      if (this.points.length === 0) {
+        return 'card-accent-primary'
+      }
+      return this.points[0].statusCode === 200 ? 'card-accent-primary' : 'card-accent-danger'
+    }
+  },
+  methods: {
+    fetchPoints () {
+      axios.get(BASE_URL + `/dashboard/http/${this.name}`).then((response) => {
+        this.points = response.data
+      })
+    }
+  },
+  mounted () {
+    setInterval(() => {
+      this.fetchPoints()
+    }, 5000)
+  }
+}
+</script>
+
+<style>
+.card {
+  border-top-width: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/Vue_Full_Project/src/main.js b/Vue_Full_Project/src/main.js
index ac8dad7..36afbef 100644
--- a/Vue_Full_Project/src/main.js
+++ b/Vue_Full_Project/src/main.js
@@ -5,6 +5,9 @@ import BootstrapVue from 'bootstrap-vue'
 import App from './App'
 import router from './router'
 import store from './vuex.js'
+import Trend from 'vuetrend'
+
+Vue.use(Trend)
 Vue.use(BootstrapVue)
 
 /* eslint-disable no-new */
diff --git a/Vue_Full_Project/src/views/Dashboard.vue b/Vue_Full_Project/src/views/Dashboard.vue
index 7966117..c50eae7 100644
--- a/Vue_Full_Project/src/views/Dashboard.vue
+++ b/Vue_Full_Project/src/views/Dashboard.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="animated fadeIn">
     <b-row>
-      <b-col sm="6" lg="3" v-for="item, index in dashboard.db.checks" :key="index">
+      <b-col sm="6" lg="6" v-for="item, index in dashboard.db.checks" :key="index">
         <database :table="item.table" :name="item.name" :field="item.field" :value="item.value"/>
       </b-col>
     </b-row>
     <b-row>
-      <b-col sm="6" md="4">
+      <b-col sm="6" md="4" v-for="item, index in dashboard.http.checks">
+        <endpoint :name="item.name" :url="item.url"/>
       </b-col>
     </b-row>
   </div>
@@ -16,12 +17,14 @@
 
 import { Callout } from '../components/'
 import Database from '../dex/Database'
+import Endpoint from '../dex/Endpoint'
 import { mapGetters, mapActions } from 'vuex'
 export default {
   name: 'dashboard',
   components: {
     Callout,
-    Database
+    Database,
+    Endpoint
   },
   computed: mapGetters([
     'dashboard'