Merge remote-tracking branch 'origin/master'

components/BarChart.js

@@ -1,9 +1,20 @@
-import { Pie } from 'vue-chartjs'
+import { Bar } from 'vue-chartjs'
 
 export default {
-  extends: Pie,
-  props: ['data', 'options'],
-  mounted () {
-    this.renderChart(this.data, this.options)
-  }
-}
+    extends: Bar,
+    props: {
+        chartdata: {
+            type: Object,
+            default: null
+        },
+        options: {
+            type: Object,
+            default: null
+        }
+    },
+    // props: ['data', 'options'],
+    mounted () {
+        this.renderChart(this.chartdata, this.options)
+    }
+}
+

components/PieChart.js

@@ -0,0 +1,20 @@
+import { Pie } from 'vue-chartjs'
+
+export default {
+    extends: Pie,
+    props: {
+        chartdata: {
+            type: Object,
+            default: null
+        },
+        options: {
+            type: Object,
+            default: null
+        }
+    },
+    // props: ['data', 'options'],
+    mounted () {
+        this.renderChart(this.chartdata, this.options)
+    }
+}
+

package.json

@@ -21,22 +21,22 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@popperjs/core": "2.9.2",
     "@stripe/stripe-js": "^1.14.0",
-    "chart.js": "^3.2.0",
-    "core-js": "^3.11.1",
+    "chart.js": "2.9.4",
+    "core-js": "^3.12.1",
     "d3": "^6.7.0",
-    "d3-dag": "^0.6.3",
+    "d3-dag": "^0.7.0",
     "d3-tip": "^0.9.1",
     "js-cookie": "^2.2.1",
     "laravel-echo": "^1.10.0",
-    "nuxt": "^2.15.4",
+    "nuxt": "^2.15.6",
     "nuxt-fontawesome": "^0.4.0",
-    "nuxt-socket-io": "^1.1.17",
+    "nuxt-socket-io": "^1.1.18",
     "nuxt-stripe-module": "^3.2.0",
     "pusher-js": "^7.0.3",
     "sass": "^1.29.0",
     "sass-loader": "10.1.1",
-    "socket.io": "^4.0.1",
-    "socket.io-client": "^4.0.1",
+    "socket.io": "^4.1.1",
+    "socket.io-client": "^4.1.1",
     "v-calendar": "^2.3.0",
     "vue": "^2.6.12",
     "vue-beautiful-chat": "^2.5.0",

pages/dashboard.vue

@@ -67,7 +67,7 @@
                         </div>
                     </div>
                     <div class="card-content" style="height: 400px;">
-                        <bar-chart  v-if="loaded" :data="barChartData" :height="300" />
+                        <pie-chart  v-if="loaded" :chartdata="pieChartData" :options="chartOptions" :height="300" />
                     </div>
                 </div>
             </div>
@@ -150,7 +150,7 @@
                             Plan </NuxtLink>
                     </div>
                 </div>
-                
+
             </div>
             <div class="column is-4-desktop is-6-tablet is-flex">
                 <div class="card has-background-white has-text-black">
@@ -169,7 +169,6 @@
                         <p class="is-size-7 mb-2 has-text-weight-medium">{{ loggedInUser.email }}</p>
                         <p class="is-size-7 mb-4 has-text-weight-medium">{{ loggedInUser.first_name }} {{ loggedInUser.last_name }}</p>
                         <p class="is-size-7 is-uppercase">Use Tree</p>
-
                     </div>
                 </div>
             </div>
@@ -182,10 +181,13 @@
 import Loading from 'vue-loading-overlay';
 import 'vue-loading-overlay/dist/vue-loading.css';
 import { mapGetters, mapActions } from "vuex";
+import PieChart from '../components/PieChart.js';
+
 export default {
     layout: 'auth',
     components: {
-        Loading
+        Loading,
+        PieChart
     },
     middleware: ['permission', 'verification'],
     meta: {
@@ -203,9 +205,10 @@ export default {
             color: '#4fcf8d',
             changedb: null,
             backgroundColor: '#ffffff',
-            barChartData: {
+            pieChartData: {
                 datasets: [{
-                    data: [],
+                    label: 'Data One',
+                    data: [40,20,30],
                     backgroundColor: [
                         'rgba(79, 207, 141, 1)',
                         'rgba(251, 145, 58, 1)',
@@ -218,6 +221,10 @@ export default {
                     'Other'
                 ]
             },
+            chartOptions: {
+                responsive: true,
+                maintainAspectRatio: false
+            },
             trial: null,
             familiesjoined: 0,
             peoplesattached: 0,
@@ -244,7 +251,7 @@ export default {
                     this.changedb = response.changedb
                 })
         },
-        
+
         getCompanies() {
             this.$axios.$get("/api/get_companies")
                 .then(response => {
@@ -254,7 +261,7 @@ export default {
                             this.selected_company = company.id
                             this.getTree()
                         }
-                            
+
                     })
                 })
         },
@@ -269,32 +276,32 @@ export default {
                         if(tree.current_tenant == 1) {
                             this.selected_tree = tree.id
                         }
-                            
+
                     })
                 })
         },
         async loadChart() {
             this.loaded = false
             const { data: data } = await this.$axios.get("/api/dashboard");
-            const { data: trial } = await this.$axios.get("/api/trial"); 
-            this.barChartData.datasets[0].data = data.chart 
+            const { data: trial } = await this.$axios.get("/api/trial");
+            this.pieChartData.datasets[0].data = data.chart
             this.familiesjoined = data.familiesjoined
             this.peoplesattached = data.peoplesattached
             this.loaded = true
-            this.isLoading = false 
+            this.isLoading = false
             this.trial = trial
         }
     },
     created() {
         this.loadRole()
         this.loadPermission()
-        this.getCompanies()  
+        this.getCompanies()
     },
     async mounted () {
         this.loadChart()
     },
-    
-    
+
+
 }
 </script>