From 2023248ee26c7028487324cbba7ccde5266fb684 Mon Sep 17 00:00:00 2001
From: woothu <woothu@gmail.com>
Date: Tue, 9 Oct 2018 14:42:41 +0200
Subject: [PATCH] added widgets from dashboard

---
 src/views/Dashboard.vue             | 223 +++++++++-------------------
 src/views/widgets/Widget05.vue      |  18 +--
 src/views/widgets/Widget06.vue      |  59 ++++++++
 tests/unit/widgets/Widget06.spec.js |  25 ++++
 4 files changed, 160 insertions(+), 165 deletions(-)
 create mode 100644 src/views/widgets/Widget06.vue
 create mode 100644 tests/unit/widgets/Widget06.spec.js

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c4745c67..2b72a6b0 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -2,79 +2,58 @@
   <div class="animated fadeIn">
     <b-row>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-primary">
-          <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>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <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>
-            <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>
+        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
+          <b-dropdown class="float-right" variant="transparent p-0" right>
+            <template slot="button-content">
+              <i class="icon-settings"></i>
+            </template>
+            <b-dropdown-item>Action</b-dropdown-item>
+            <b-dropdown-item>Another action</b-dropdown-item>
+            <b-dropdown-item>Something else here...</b-dropdown-item>
+            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
+          </b-dropdown>
+        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-info">
-          <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>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <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>
-            <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>
+        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
+          <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
+            <template slot="button-content">
+              <i class="icon-location-pin"></i>
+            </template>
+            <b-dropdown-item>Action</b-dropdown-item>
+            <b-dropdown-item>Another action</b-dropdown-item>
+            <b-dropdown-item>Something else here...</b-dropdown-item>
+            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
+          </b-dropdown>
+        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-warning">
-          <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>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <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>
-            <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>
+        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+          <b-dropdown class="float-right" variant="transparent p-0" right>
+            <template slot="button-content">
+              <i class="icon-settings"></i>
+            </template>
+            <b-dropdown-item>Action</b-dropdown-item>
+            <b-dropdown-item>Another action</b-dropdown-item>
+            <b-dropdown-item>Something else here...</b-dropdown-item>
+            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
+          </b-dropdown>
+        </widget06>
       </b-col>
       <b-col sm="6" lg="3">
-        <b-card no-body class="bg-danger">
-          <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>
-              </template>
-              <b-dropdown-item>Action</b-dropdown-item>
-              <b-dropdown-item>Another action</b-dropdown-item>
-              <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>
-            <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>
+        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
+          <b-dropdown class="float-right" variant="transparent p-0" right>
+            <template slot="button-content">
+              <i class="icon-settings"></i>
+            </template>
+            <b-dropdown-item>Action</b-dropdown-item>
+            <b-dropdown-item>Another action</b-dropdown-item>
+            <b-dropdown-item>Something else here...</b-dropdown-item>
+            <b-dropdown-item disabled>Disabled action</b-dropdown-item>
+          </b-dropdown>
+        </widget06>
       </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">
-        <div class="brand-card">
-          <div class="brand-card-header bg-facebook">
-            <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">
-        <div class="brand-card">
-          <div class="brand-card-header bg-twitter">
-            <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">
-        <div class="brand-card">
-          <div class="brand-card-header bg-linkedin">
-            <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">
-        <div class="brand-card">
-          <div class="brand-card-header bg-google-plus">
-            <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>
+      <b-col md="3" sm="6">
+        <widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+                             rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+                             rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+                             rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+                             rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
+       </b-col>
+    </b-row><!--/.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 {
diff --git a/src/views/widgets/Widget05.vue b/src/views/widgets/Widget05.vue
index 2314703d..c26ba977 100644
--- a/src/views/widgets/Widget05.vue
+++ b/src/views/widgets/Widget05.vue
@@ -1,13 +1,13 @@
 <template>
-    <b-card :class="styleClasses">
-      <div class="h1 text-muted text-right mb-4">
-        <i :class="iconClasses"></i>
-      </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>
+  <b-card :class="styleClasses">
+    <div class="h1 text-muted text-right mb-4">
+      <i :class="iconClasses"></i>
+    </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>
 </template>
 
 <script>
diff --git a/src/views/widgets/Widget06.vue b/src/views/widgets/Widget06.vue
new file mode 100644
index 00000000..91756625
--- /dev/null
+++ b/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>
diff --git a/tests/unit/widgets/Widget06.spec.js b/tests/unit/widgets/Widget06.spec.js
new file mode 100644
index 00000000..78a87618
--- /dev/null
+++ b/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)
+  })
+})