columns updated

src/views/widgets/Widget04.vue

@@ -1,50 +1,57 @@
 <template>
-    <b-card :class="styleClasses">
-      <div class="h1 text-muted text-right mb-4">
-        <i :class="iconClasses"></i>
+  <div class="brand-card">
+    <div :class="'bg-' + type" class="brand-card-header bg-facebook">
+      <i  class="fa" :class="'fa-'+ type"></i>
+      <div class="chart-wrapper">
+        <social-box-chart-example :data="dataPoints" />
       </div>
-      <div class="h4 mb-0">{{header}}</div>
-      <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
-      <b-progress height={} :variant="variant" :value="value"
-                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
-    </b-card>
+    </div>
+    <div class="brand-card-body">
+      <div>
+        <div class="text-value">{{rightHeader}}</div>
+        <div class="text-uppercase text-muted small">{{rightFooter}}</div>
+      </div>
+      <div>
+        <div class="text-value">{{leftHeader}}</div>
+        <div class="text-uppercase text-muted small">{{leftFooter}}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
+
+
 export default {
   name: 'Widget04',
-  data () {
-    return{
-      backgroundColor: '',
-      styleClasses: '',
-    }
-  },
-  created ()  {
-    if(this.variant.includes('background')){
-      this.backgroundColor = this.variant.replace('background-','');
-      this.styleClasses = 'text-white bg-' + this.backgroundColor
-    }
+  components: {
+    SocialBoxChartExample
   },
   props: {
-    iconClasses: {
+    type: {
       type: String,
-      default: 'icon-people'
+      default: 'facebook'
     },
-    header: {
+    dataPoints: {
+      type: Array,
+      default: [65, 59, 84, 84, 51, 55, 40]
+    },
+    rightHeader: {
       type: String,
-      default: 'Lorem ipsum...'
+      default: '89k'
     },
-    text: {
+    rightFooter: {
       type: String,
-      default: 'Lorem ipsum...'
+      default: 'friends'
     },
-    variant: {
+    leftHeader: {
       type: String,
-      default: ''
+      default: '459'
     },
-    value: {
-      type: Number,
-      default: 25
+    leftFooter: {
+      type: String,
+      default: 'feeds'
     },
   }
 }