show charts on dashboard

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"

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>

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>
+  .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})
+  }
+}

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>

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 */

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'