isogunro

<!-- updated code to reflect YouTube Video to add gridsystem layout --->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.0.10/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />

<script src="https://cdn.jsdelivr.net/npm/babel-regenerator-runtime@6.5.0/runtime.js"></script>

isogunro

Vue.component('my-bar-chart', {
    extends: VueChartJs.Bar,
    props: ['barData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.barData, this.chartOptions);
    }
})

isogunro

Vue.component("close-ticket-count", {
    props: ["hdCloseCount"],
    template: `                            
    <v-card max-width="344" class="mx-auto" color="info">
    <v-card-title><span class="white--text">Closed</span></v-card-title>
    <v-card-text><span class="white--text">{{hdCloseCount}}</span></v-card-text>
</v-card>     
    `
});