added widgets from dashboard

src/views/Dashboard.vue

@@ -2,8 +2,7 @@
   <div class="animated fadeIn">
     <b-row>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-primary">
+        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
-          <b-card-body class="pb-0">
           <b-dropdown class="float-right" variant="transparent p-0" right>
             <template slot="button-content">
               <i class="icon-settings"></i>
@@ -13,15 +12,10 @@
             <b-dropdown-item>Something else here...</b-dropdown-item>
             <b-dropdown-item disabled>Disabled action</b-dropdown-item>
           </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
+        </widget06>
-            <p>Members online</p>
-          </b-card-body>
-          <card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
-        </b-card>
       </b-col>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-info">
+        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
-          <b-card-body class="pb-0">
           <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
             <template slot="button-content">
               <i class="icon-location-pin"></i>
@@ -31,15 +25,10 @@
             <b-dropdown-item>Something else here...</b-dropdown-item>
             <b-dropdown-item disabled>Disabled action</b-dropdown-item>
           </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
+        </widget06>
-            <p>Members online</p>
-          </b-card-body>
-          <card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
-        </b-card>
       </b-col>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-warning">
+        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
-          <b-card-body class="pb-0">
           <b-dropdown class="float-right" variant="transparent p-0" right>
             <template slot="button-content">
               <i class="icon-settings"></i>
@@ -49,15 +38,10 @@
             <b-dropdown-item>Something else here...</b-dropdown-item>
             <b-dropdown-item disabled>Disabled action</b-dropdown-item>
           </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
+        </widget06>
-            <p>Members online</p>
-          </b-card-body>
-          <card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
-        </b-card>
       </b-col>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-danger">
+        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
-          <b-card-body class="pb-0">
           <b-dropdown class="float-right" variant="transparent p-0" right>
             <template slot="button-content">
               <i class="icon-settings"></i>
@@ -67,14 +51,9 @@
             <b-dropdown-item>Something else here...</b-dropdown-item>
             <b-dropdown-item disabled>Disabled action</b-dropdown-item>
           </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
+        </widget06>
-            <p>Members online</p>
-          </b-card-body>
-          <card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
-        </b-card>
       </b-col>
     </b-row>
-
     <b-card>
       <b-row>
         <b-col sm="5">
@@ -124,88 +103,23 @@
       </div>
     </b-card>
     <b-row>
-      <b-col sm="6" lg="3">
+      <b-col md="3" sm="6">
-        <div class="brand-card">
+        <widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
-          <div class="brand-card-header bg-facebook">
+                             rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
-            <i class="fa fa-facebook"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">89k</div>
-              <div class="text-uppercase text-muted small">friends</div>
-            </div>
-            <div>
-              <div class="text-value">459</div>
-              <div class="text-uppercase text-muted small">feeds</div>
-            </div>
-          </div>
-        </div>
        </b-col>
-      <b-col sm="6" lg="3">
+       <b-col md="3" sm="6">
-        <div class="brand-card">
+        <widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
-          <div class="brand-card-header bg-twitter">
+                             rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
-            <i class="fa fa-twitter"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">973k</div>
-              <div class="text-uppercase text-muted small">followers</div>
-            </div>
-            <div>
-              <div class="text-value">1.792</div>
-              <div class="text-uppercase text-muted small">tweets</div>
-            </div>
-          </div>
-          </div>
        </b-col>
-      <b-col sm="6" lg="3">
+       <b-col md="3" sm="6">
-        <div class="brand-card">
+        <widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
-          <div class="brand-card-header bg-linkedin">
+                             rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
-            <i class="fa fa-linkedin"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">500+</div>
-              <div class="text-uppercase text-muted small">contacts</div>
-            </div>
-            <div>
-              <div class="text-value">292</div>
-              <div class="text-uppercase text-muted small">feeds</div>
-            </div>
-          </div>
-        </div>
        </b-col>
-      <b-col sm="6" lg="3">
+       <b-col md="3" sm="6">
-        <div class="brand-card">
+        <widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
-          <div class="brand-card-header bg-google-plus">
+                             rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
-            <i class="fa fa-google-plus"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">894</div>
-              <div class="text-uppercase text-muted small">followers</div>
-            </div>
-            <div>
-              <div class="text-value">92</div>
-              <div class="text-uppercase text-muted small">circles</div>
-            </div>
-          </div>
-        </div>
        </b-col>
-    </b-row>
+    </b-row><!--/.row-->
-    <b-row>
       <b-col md="12">
         <b-card header="Traffic &amp; Sales">
           <b-row>
@@ -449,26 +363,23 @@
 </template>
 
 <script>
-import CardLine1ChartExample from './dashboard/CardLine1ChartExample'
-import CardLine2ChartExample from './dashboard/CardLine2ChartExample'
-import CardLine3ChartExample from './dashboard/CardLine3ChartExample'
-import CardBarChartExample from './dashboard/CardBarChartExample'
 import MainChartExample from './dashboard/MainChartExample'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
 import { Callout } from '@coreui/vue'
+import Widget04 from './widgets/Widget04'
+import Widget06 from './widgets/Widget06'
+
 
 export default {
   name: 'dashboard',
   components: {
     Callout,
-    CardLine1ChartExample,
-    CardLine2ChartExample,
-    CardLine3ChartExample,
-    CardBarChartExample,
     MainChartExample,
     SocialBoxChartExample,
-    CalloutChartExample
+    CalloutChartExample,
+    Widget04,
+    Widget06
   },
   data: function () {
     return {

src/views/widgets/Widget06.vue

@@ -0,0 +1,59 @@
+<template>
+  <b-card no-body :class="cardClasses">
+    <b-card-body class="pb-0">
+      <slot></slot>
+      <h4 class="mb-0">{{header}}</h4>
+      <p>{{text}}</p>
+    </b-card-body>
+    <card-line1-chart-example v-if="chartType == 'chart1'" chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
+    <card-line2-chart-example v-if="chartType == 'chart2'"chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
+    <card-line3-chart-example v-if="chartType == 'chart3'"chartId="card-chart-03" class="chart-wrapper" style="height:70px;" :height="chartHeight"/>
+    <card-bar-chart-example v-if="chartType == 'chart4'" chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" :height="chartHeight"/>
+  </b-card>
+</template>
+
+<script>
+import CardLine1ChartExample from './../dashboard/CardLine1ChartExample'
+import CardLine2ChartExample from './../dashboard/CardLine2ChartExample'
+import CardLine3ChartExample from './../dashboard/CardLine3ChartExample'
+import CardBarChartExample from './../dashboard/CardBarChartExample'
+
+export default {
+  components:{
+    CardLine1ChartExample,
+    CardLine2ChartExample,
+    CardLine3ChartExample,
+    CardBarChartExample
+  },
+  name: 'Widget06',
+  data () {
+    return{
+      backgroundColor: '',
+    }
+  },
+  created ()  {
+  },
+  props: {
+    cardClasses: {
+      type: String,
+      default: ''
+    },
+    header: {
+      type: String,
+      default: 'header|string'
+    },
+    text: {
+      type: String,
+      default: 'text|string'
+    },
+    chartType:{
+      type: String,
+      default: 'chart1'
+    },
+    chartHeight:{
+      type: Number,
+      default: 70
+    },
+  }
+}
+</script>

tests/unit/widgets/Widget06.spec.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import BootstrapVue from 'bootstrap-vue'
+import Component from '@/views/widgets/Widget06'
+
+Vue.use(BootstrapVue)
+
+const ComponentName = 'Widget06'
+const wrapper = shallowMount(Component)
+
+describe(ComponentName + '.vue', () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('is Vue instance', () => {
+    expect(wrapper.isVueInstance()).toBe(true)
+  })
+  it('correctly sets default props and data when created', () => {
+    expect(wrapper.props().cardClasses).toBe('')
+    expect(wrapper.props().header).toBe('header|string')
+    expect(wrapper.props().text).toBe('text|string')
+    expect(wrapper.props().chartType).toBe('chart1')
+    expect(wrapper.props().chartHeight == 70).toBe(true)
+  })
+})