From 143c2d91047678dfb63963610e60b3957660a71b Mon Sep 17 00:00:00 2001
From: woothu <woothu@gmail.com>
Date: Mon, 15 Oct 2018 14:09:01 +0200
Subject: [PATCH] fix: added chart wrappers + cosmetic changes

---
 src/mixins/charts/chartMixins.js |  3 +--
 src/views/Dashboard.vue          | 24 +++++++++++++++---------
 src/views/widgets/Widget06.vue   |  4 +++-
 src/views/widgets/Widget07.vue   |  4 +++-
 src/views/widgets/Widget08.vue   |  4 ++--
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/mixins/charts/chartMixins.js b/src/mixins/charts/chartMixins.js
index f0b697fd..468c0918 100644
--- a/src/mixins/charts/chartMixins.js
+++ b/src/mixins/charts/chartMixins.js
@@ -1,5 +1,4 @@
-import { deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
-import getColor from '@coreui/coreui/js/src/utilities/get-color'
+import { deepObjectsMerge, getColor } from '@coreui/coreui/dist/js/coreui-utilities'
 
 const generatedLabels = {
   computed:{
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 9adbd584..aafac39f 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -17,7 +17,7 @@
           <template slot='chart'>
             <line-chart2 chartId="widget06_1" slot='chart' class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members'/>
+                         style='height:70px' label='Members' pointHoverBackgroundColor='primary'/>
           </template>
         </widget06>
       </b-col>
@@ -35,9 +35,10 @@
             </b-dropdown>
           </template>
           <template slot='chart'>
-            <line-chart2 chartId="widget06_2" slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
+            <line-chart2 chartId='widget06_2' slot='chart' class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' label='Members'/>
+                         style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
+                         pointHoverBackgroundColor='info'/>
           </template>
         </widget06>
       </b-col>
@@ -57,7 +58,8 @@
           <template slot='chart'>
             <line-chart1 chartId="widget06_3" slot='chart' :data='[78, 81, 80, 45, 34, 12, 40]'
                          :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
-                         style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'/>
+                         style='height:70px' backgroundColor ='rgba(255,255,255,.2)' label='Members'
+                         :options="{elements: {line: {borderWidth: 2.5}}}" pointHoverBackgroundColor='warning'/>
           </template>
         </widget06>
       </b-col>
@@ -76,7 +78,7 @@
           </template>
           <template name='chart'>
             <bar-chart1 chartId="widget06_4" slot='chart' :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
-                        label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px'/>
+                        label='Members' backgroundColor='rgb(250, 152, 152)' style='height:70px' />
           </template>
         </widget06>
       </b-col>
@@ -132,25 +134,29 @@
     <b-row>
       <b-col md="3" sm="6">
         <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-          <line-chart1 chartId="facebook" :data='[0, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 70]' label='Friends'
+          <line-chart1 chartId="facebook" :data='[65, 59, 84, 84, 51, 55, 40]' label='Friends'
+                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
         </widget04>
        </b-col>
        <b-col md="3" sm="6">
         <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-          <line-chart1 chartId="twitter" :data='[5, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 72]' label='Followers'
+          <line-chart1 chartId="twitter" :data='[1, 13, 9, 17, 34, 41, 38]' label='Followers'
+                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
         </widget04>
        </b-col>
        <b-col md="3" sm="6">
         <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-          <line-chart1 chartId="linkedIn" :data='[15, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 71]' label='Contracts'
+          <line-chart1 chartId="linkedIn" :data='[78, 81, 80, 45, 34, 12, 40]' label='Contracts'
+                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
         </widget04>
        </b-col>
        <b-col md="3" sm="6">
         <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-          <line-chart1 chartId="google-plus" :data='[10, 22, 34, 46, 58, 70, 68, 58, 52, 60, 64, 74]' label='Followers'
+          <line-chart1 chartId="google-plus" :data='[35, 23, 56, 22, 97, 23, 64]' label='Followers'
+                       :labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
                        style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
         </widget04>
        </b-col>
diff --git a/src/views/widgets/Widget06.vue b/src/views/widgets/Widget06.vue
index 06b5120f..5ec8ef4d 100644
--- a/src/views/widgets/Widget06.vue
+++ b/src/views/widgets/Widget06.vue
@@ -5,7 +5,9 @@
       <h4 class="mb-0">{{header}}</h4>
       <p>{{text}}</p>
     </b-card-body>
-    <slot name='chart'></slot>
+    <div class="chart-wrapper">
+      <slot name='chart'></slot>
+    </div>
   </b-card>
 </template>
 
diff --git a/src/views/widgets/Widget07.vue b/src/views/widgets/Widget07.vue
index ff0e6e59..52864d04 100644
--- a/src/views/widgets/Widget07.vue
+++ b/src/views/widgets/Widget07.vue
@@ -13,7 +13,9 @@
           <small>{{leftFooter}}</small>
         </span>
       </div>
-      <slot></slot>
+      <div class="chart-wrapper">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/widgets/Widget08.vue b/src/views/widgets/Widget08.vue
index 9bdf5fd9..16f965de 100644
--- a/src/views/widgets/Widget08.vue
+++ b/src/views/widgets/Widget08.vue
@@ -3,9 +3,9 @@
     <div class="card-body text-center">
       <div class="text-muted small text-uppercase font-weight-bold">{{header}}</div>
         <div class="h2 py-3">{{text}}</div>
-          <!-- <div class="chart-wrapper"> -->
+          <div class="chart-wrapper">
             <slot></slot>
-          <!-- </div> -->
+          </div>
     </div>
   </div>
 </template>