Merge branch 'dashboard-data-visualisation-tab'

pgksunilkumar · Jul 31, 2017 · 6b1ddab · 6b1ddab
2 parents 362ad02 + d86b1dd
commit 6b1ddab
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 6 deletions.
diff --git a/src/components/common/vuestic-datatable/DataTable.vue b/src/components/common/vuestic-datatable/DataTable.vue
@@ -20,6 +20,7 @@
       <div class="d-flex justify-content-center mb-4">
         <vuetable-pagination ref="pagination"
                              :css="css.pagination"
+                             :onEachSide="onEachSide"
                              @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
       </div>
     </div>
@@ -56,6 +57,10 @@
       itemsPerPage: {
         type: Array,
         required: true
+      },
+      onEachSide: {
+        type: Number,
+        default: 2
       }
     },
     data () {

diff --git a/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue b/src/components/dashboard/data-visualisation-tab/DataVisualisation.vue
@@ -1,30 +1,68 @@
 <template>
   <div class="data-visualisation-tab dashboard-tab">
     <div class="row">
-      <div class="col-md-5">
+      <div class="col-md-6">
         <div class="chart-container">
           <vuestic-chart v-bind:data="donutChartData" type="donut"></vuestic-chart>
         </div>
       </div>
+      <div class="col-md-6">
+        <data-table :apiUrl="apiUrl"
+                    :tableFields="tableFields"
+                    :itemsPerPage="itemsPerPage"
+                    :onEachSide="1">
+        </data-table>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  import VuesticChart from 'components/common/vuestic-chart/VuesticChart.vue'
+  import VuesticChart from '../../common/vuestic-chart/VuesticChart.vue'
   import DonutChartData from './DonutChartData'
+  import DataTable from '../../common/vuestic-datatable/DataTable.vue'
+  import Vue from 'vue'
+  import BadgeColumn from '../../tables/BadgeColumn.vue'
+
+  Vue.component('badge-column', BadgeColumn)
 
   export default {
     name: 'data-visualisation-tab',
 
     components: {
+      DataTable,
       VuesticChart,
       DonutChartData
     },
 
     data () {
       return {
-        donutChartData: DonutChartData
+        donutChartData: DonutChartData,
+        apiUrl: 'https://vuetable.ratiw.net/api/users',
+        tableFields: [
+          {
+            name: '__component:badge-column',
+            title: '',
+            dataClass: 'text-center'
+          },
+          {
+            name: 'name',
+            title: 'user',
+            sortField: 'name'
+          },
+          {
+            name: 'salary',
+            title: 'score'
+          }
+        ],
+        itemsPerPage: [
+          {
+            value: 5
+          },
+          {
+            value: 6
+          }
+        ]
       }
     }
   }

diff --git a/src/components/dashboard/data-visualisation-tab/DonutChartData.js b/src/components/dashboard/data-visualisation-tab/DonutChartData.js
@@ -6,7 +6,7 @@ export default {
   labels: ['North America', 'South America', 'Australia'],
   datasets: [{
     label: 'Population (millions)',
-    backgroundColor: [palette.danger, palette.info, palette.success],
-    data: [2478, 5267, 734]
+    backgroundColor: [palette.info, palette.warning, palette.primary],
+    data: [3000, 6000, 1500]
   }]
 }
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -181,7 +181,7 @@ $btn-with-icon-icon-top: .75rem;
 $btn-with-icon-rounded-icon-left: 1.23rem;
 $btn-with-icon-icon-size: 2rem;
 $btn-group-button-padding-x: 1.53rem;
-$btn-box-shadow: 0px 4px 70px -16px rgb(111, 67, 67);
+$btn-box-shadow: $greeny-box-shadow;
 $btn-box-danger-shadow: 0px 4px 70px -16px $brand-danger;
 $btn-box-warning-shadow: 0px 4px 70px -16px $brand-warning;
 $btn-box-success-shadow: 0px 4px 70px -16px $brand-success;