Added widget charts, chart extracted from widgets.

src/views/Dashboard.vue

@@ -3,6 +3,7 @@
     <b-row>
       <b-col sm="6" lg="3">
         <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
+          <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -12,10 +13,17 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
+          </template>
+          <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'/>
+          </template>
         </widget06>
       </b-col>
       <b-col sm="6" lg="3">
         <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
+          <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right no-caret>
               <template slot="button-content">
                 <i class="icon-location-pin"></i>
@@ -25,10 +33,17 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
+          </template>
+          <template slot='chart'>
+            <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'/>
+          </template>
         </widget06>
       </b-col>
       <b-col sm="6" lg="3">
         <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+          <template slot='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -38,10 +53,17 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
+          </template>
+          <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'/>
+          </template>
         </widget06>
       </b-col>
       <b-col sm="6" lg="3">
         <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
+          <template name='dropdown'>
             <b-dropdown class="float-right" variant="transparent p-0" right>
               <template slot="button-content">
                 <i class="icon-settings"></i>
@@ -51,6 +73,11 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
+          </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'/>
+          </template>
         </widget06>
       </b-col>
     </b-row>
@@ -104,20 +131,28 @@
     </b-card>
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-                             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'
+                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-                             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'
+                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-                             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'
+                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-                             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'
+                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
     </b-row><!--/.row-->
       <b-col md="12">
@@ -369,6 +404,10 @@ import CalloutChartExample from './dashboard/CalloutChartExample'
 import { Callout } from '@coreui/vue'
 import Widget04 from './widgets/Widget04'
 import Widget06 from './widgets/Widget06'
+import LineChart1 from './dashboard/LineChart1'
+import LineChart2 from './dashboard/LineChart2'
+
+import BarChart1 from './dashboard/BarChart1'
 
 
 export default {
@@ -379,7 +418,10 @@ export default {
     SocialBoxChartExample,
     CalloutChartExample,
     Widget04,
-    Widget06
+    Widget06,
+    LineChart1,
+    LineChart2,
+    BarChart1
   },
   data: function () {
     return {

src/views/Widgets.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="animated fadeIn" @dblclick="copyTry($event)">
     <b-row>
       <b-col sm="6" lg="3">
         <widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
@@ -79,35 +79,55 @@
       </b-col>
     </b-row><!--/.row-->
     <b-row>
-      <b-col cols="12" sm="6" lg="3">
+      <b-col cols="12" sm="6" lg="4">
         <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
       </b-col>
-      <b-col cols="12" sm="6" lg="3">
+      <b-col cols="12" sm="6" lg="4">
         <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
       </b-col>
-      <b-col cols="12" sm="6" lg="3">
+      <b-col cols="12" sm="6" lg="4">
         <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
       </b-col>
-      <b-col cols="12" sm="6" lg="3">
+
-        <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger px-5"/>
+    </b-row><!--/.row-->
+    <b-row>
+      <b-col md="3" sm="6">
+        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+       </b-col>
+       <b-col md="3" sm="6">
+        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+       </b-col>
+       <b-col md="3" sm="6" class="codeContainer" data-code="<widget04 type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>">
+        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'/>
        </b-col>
     </b-row><!--/.row-->
     <b-row>
       <b-col md="3" sm="6">
-        <widget04 type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+        <widget04 type="facebook" rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds">
-                             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'
+                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+        <widget04 type="twitter" rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets">
-                             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'
+                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+        <widget04 type="linkedin" rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds">
-                             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'
+                       style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
        <b-col md="3" sm="6">
-        <widget04 type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+        <widget04  type='google-plus' rightHeader='894' rightFooter='followers' leftHeader='92' leftFooter='circles'>
-                             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'
+                       style='height:100px' backgroundColor='rgba(255,255,255,.1)'/>
+        </widget04>
        </b-col>
     </b-row><!--/.row-->
     <b-card-group class="mb-4">
@@ -157,6 +177,146 @@
         <widget05 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
       </b-col>
     </b-row>
+    <b-row>
+      <b-col sm="6" lg="3">
+        <widget06 cardClasses="bg-primary" header="9.823" text="Members online" chartType="chart1">
+          <template slot='dropdown'>
+            <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>
+          </template>
+          <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'/>
+          </template>
+        </widget06>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget06 cardClasses="bg-info" header="9.823" text="Members online" chartType="chart2">
+          <template slot='dropdown'>
+            <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>
+          </template>
+          <template slot='chart'>
+            <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'/>
+          </template>
+        </widget06>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget06 cardClasses="bg-warning" header="9.823" text="Members online" chartType="chart3">
+          <template slot='dropdown'>
+            <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>
+          </template>
+          <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'/>
+          </template>
+        </widget06>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget06 cardClasses="bg-danger" header="9.823" text="Members online" chartType="chart4">
+          <template name='dropdown'>
+            <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>
+          </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'/>
+          </template>
+        </widget06>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="6" lg="3">
+        <widget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <line-chart1 style="height:40px" chartId="widget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
+        </widget07>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <line-chart1 style="height:40px" chartId="widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
+        </widget07>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <line-chart1 style="height:40px" chartId="widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'/>
+        </widget07>
+      </b-col>
+      <b-col sm="6" lg="3">
+        <widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <line-chart1 style="height:40px" chartId="widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgba(0,0,0,.2)'
+                      pointHoverBackgroundColor='#FFC107'/>
+        </widget07>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col sm="4" lg="2">
+        <widget08 header='title' text='1,123'>
+          <line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(248, 108, 107, 1)'/>
+        </widget08>
+      </b-col>
+      <b-col sm="4" lg="2">
+        <widget08 header='title' text='1,123'>
+          <line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(32, 168, 216, 1)'/>
+        </widget08>
+      </b-col>
+      <b-col sm="4" lg="2">
+        <widget08 header='title' text='1,123'>
+          <line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' borderColor='rgb(77, 189, 116)'/>
+        </widget08>
+      </b-col>
+      <b-col sm="4" lg="2">
+        <widget08  header='title' text='1,123'>
+          <bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(248, 108, 107, 1)'/>
+        </widget08>
+      </b-col>
+      <b-col sm="4" lg="2">
+        <widget08  header='title' text='1,123'>
+          <bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(32, 168, 216, 1)'/>
+        </widget08>
+      </b-col>
+      <b-col sm="4" lg="2">
+        <widget08  header='title' text='1,123'>
+          <bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales' backgroundColor='rgb(77, 189, 116)'/>
+        </widget08>
+      </b-col>
+    </b-row>
   </div>
 </template>
 
@@ -166,6 +326,13 @@ import Widget02 from './widgets/Widget02'
 import Widget03 from './widgets/Widget03'
 import Widget04 from './widgets/Widget04'
 import Widget05 from './widgets/Widget05'
+import Widget06 from './widgets/Widget06'
+import Widget07 from './widgets/Widget07'
+import Widget08 from './widgets/Widget08'
+import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
+import LineChart1 from './dashboard/LineChart1'
+import LineChart2 from './dashboard/LineChart2'
+import BarChart1 from './dashboard/BarChart1'
 
 export default {
   name: 'Widgets',
@@ -174,7 +341,27 @@ export default {
     Widget02,
     Widget03,
     Widget04,
-    Widget05
+    Widget05,
+    Widget06,
+    Widget07,
+    Widget08,
+    SocialBoxChartExample,
+    LineChart1,
+    LineChart2,
+    BarChart1,
   },
+  methods:{
+    copyTry:function($event){
+      var componentCode = $event.target.closest('.col-md-3').getAttribute('data-code')
+      if(componentCode)
+        console.log(componentCode)
+        const el = document.createElement('textarea');
+        el.value = componentCode;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+    },
+  }
 }
 </script>

src/views/dashboard/BarChart1.vue

@@ -0,0 +1,69 @@
+<script>
+import { Bar } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+
+export default {
+  extends: Bar,
+  props: {
+    data: {
+      type: Array,
+      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    height: {
+      type: Number,
+      default: 40
+    },
+    label:{
+      type: String,
+      default: 'label|string'
+    },
+    labels:{
+      type: Array,
+      default () {
+        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
+      }
+    },
+    backgroundColor:{
+      type: String,
+      default: 'rgba(255,255,255,.3)'
+    },
+    pointHoverBackgroundColor: String,
+  },
+  mounted () {
+    const dataset = [
+      {
+        label: this.label,
+        backgroundColor: this.backgroundColor,
+        borderColor: 'transparent',
+        data: this.data
+      }
+    ]
+    this.renderChart(
+      {
+        labels: this.labels,
+        datasets: dataset
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            display: false,
+            categoryPercentage: 1,
+            barPercentage: 0.5
+          }],
+          yAxes: [{
+            display: false
+          }]
+        }
+      }
+    )
+  }
+}
+</script>

src/views/dashboard/LineChart1.vue

@@ -0,0 +1,95 @@
+<script>
+import { Line } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+const defaultBorderColor = 'rgba(255,255,255,.55)'
+
+export default {
+  extends: Line,
+  props: {
+    data: {
+      type: Array,
+      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    height: {
+      type: Number,
+      default: 40
+    },
+    label:{
+      type: String,
+      default: 'label|string'
+    },
+    labels:{
+      type: Array,
+      default () {
+        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
+      }
+    },
+    borderColor:{
+      type: String,
+      default: defaultBorderColor
+    },
+    backgroundColor:{
+      type: String,
+      default: 'transparent'
+    },
+    pointHoverBackgroundColor: String,
+  },
+  computed:{
+    hoverBackgroundColor () {
+     if(this.pointHoverBackgroundColor !== undefined)
+       return this.pointHoverBackgroundColor
+     if(this.borderColor !== defaultBorderColor)
+       return this.borderColor
+     return 'transparent'
+    }
+  },
+  mounted () {
+    const datasets1 = [
+      {
+        label: this.label,
+        borderColor: this.borderColor,
+        backgroundColor: this.backgroundColor,
+        pointHoverBackgroundColor: this.hoverBackgroundColor,
+        data: this.data
+      }
+    ]
+
+    this.renderChart(
+      {
+        labels: this.labels,
+        datasets: datasets1
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
+        // responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        },
+        elements: {
+          line: {
+            borderWidth: 2
+          },
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    )
+  }
+}
+</script>

src/views/dashboard/LineChart2.vue

@@ -0,0 +1,111 @@
+<script>
+import { Line } from 'vue-chartjs'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+const defaultBorderColor = 'rgba(255,255,255,.55)'
+
+export default {
+  extends: Line,
+  props: {
+    data: {
+      type: Array,
+      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
+    },
+    height: {
+      type: Number,
+      default: 40
+    },
+    label:{
+      type: String,
+      default: 'label|string'
+    },
+    labels:{
+      type: Array,
+      default () {
+        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
+      }
+    },
+    borderColor:{
+      type: String,
+      default: defaultBorderColor
+    },
+    backgroundColor:{
+      type: String,
+      default: 'transparent'
+    },
+    pointHoverBackgroundColor: String,
+  },
+  computed:{
+    hoverBackgroundColor () {
+     if(this.pointHoverBackgroundColor !== undefined)
+       return this.pointHoverBackgroundColor
+     if(this.borderColor !== defaultBorderColor)
+       return this.borderColor
+     return 'transparent'
+    }
+  },
+  mounted () {
+    const datasets1 = [
+      {
+        label: this.label,
+        borderColor: this.borderColor,
+        backgroundColor: this.backgroundColor,
+        pointHoverBackgroundColor: this.hoverBackgroundColor,
+        data: this.data
+      }
+    ]
+
+    this.renderChart(
+      {
+        labels: this.labels,
+        datasets: datasets1
+      },
+      {
+        tooltips: {
+          enabled: false,
+          custom: CustomTooltips
+        },
+        maintainAspectRatio: false,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                color: 'transparent',
+                zeroLineColor: 'transparent'
+              },
+              ticks: {
+                fontSize: 2,
+                fontColor: 'transparent'
+              }
+            }
+          ],
+          yAxes: [
+            {
+              display: false,
+              ticks: {
+                display: false,
+                min: Math.min.apply(Math, datasets1[0].data) - 5,
+                max: Math.max.apply(Math, datasets1[0].data) + 5
+              }
+            }
+          ]
+        },
+        elements: {
+          line: {
+            tension: 0.00001,
+            borderWidth: 1
+          },
+          point: {
+            radius: 4,
+            hitRadius: 10,
+            hoverRadius: 4
+          }
+        }
+      }
+    )
+  }
+}
+</script>

src/views/dashboard/SocialBoxChartExample.vue

@@ -7,18 +7,29 @@ export default {
   props: {
     data: {
       type: Array,
-      default: () => [0, 22, 34, 46, 58, 70, 46]
+      default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
     },
     height: {
       type: String,
       default: '100'
+    },
+    label:{
+      type: String,
+      default: 'label|string'
+    },
+    labels:{
+      type: Array,
+      default () {
+        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
+      }
     }
   },
   mounted () {
     this.renderChart({
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      labels: this.labels,
       datasets: [
         {
+          label: this.label,
           backgroundColor: 'rgba(255,255,255,.1)',
           borderColor: 'rgba(255,255,255,.55)',
           pointHoverBackgroundColor: '#fff',

src/views/widgets/Widget01.md

@@ -0,0 +1,17 @@
+### Widget01
+
+This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
+
+Value is the procentage value of displayed progress-bar.
+
+prop | default
+--- | ---
+variant  | `''`
+value | `25`
+header| `'header:string'`
+text   | `'text:string'`
+footer    | `'footer:string'`
+
+#### Example:
+>        <widget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+>                  variant="info" :value="30"/>

src/views/widgets/Widget01.vue

@@ -26,11 +26,11 @@ export default {
   props: {
     header: {
       type: String,
-      default: 'header|string'
+      default: 'header:string'
     },
     text: {
       type: String,
-      default: 'text|string'
+      default: 'text:string'
     },
     variant: {
       type: String,
@@ -38,7 +38,7 @@ export default {
     },
     footer: {
       type: String,
-      default: 'footer|string'
+      default: 'footer:string'
     },
     value: {
       type: Number,

src/views/widgets/Widget02.md

@@ -0,0 +1,14 @@
+### Widget02
+This widget can be display with or without link. If you want to display link set showLink property to true.
+
+prop | default
+--- | ---
+iconClasses  | `'fa fa-cogs bg-primary'`
+showLink | `true`
+header| `'header:string'`
+text   | `'text:string'`
+link    | `'#'`
+
+#### Example:
+>     <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"
+              :showLink="true" link="#"/>

src/views/widgets/Widget02.vue

@@ -21,11 +21,11 @@ export default {
     },
     header: {
       type: String,
-      default: 'header|string'
+      default: 'header:string'
     },
     text: {
       type: String,
-      default: 'text|string'
+      default: 'text:string'
     },
     showLink: {
       type: Boolean,

src/views/widgets/Widget03.md

@@ -0,0 +1,11 @@
+### Widget03
+This widget style depends classes attached to iconClasses property. If you want to get diffrent size of icon block just add padding utility classes (i.e. 'px-5').
+
+prop | default
+--- | ---
+iconClasses  | `'fa fa-cogs bg-primary'`
+header| `'header:string'`
+text   | `'text:string'`
+
+#### Example:
+>     <widget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>

src/views/widgets/Widget03.vue

@@ -18,11 +18,11 @@ export default {
     },
     header: {
       type: String,
-      default: 'header|string'
+      default: 'header:string'
     },
     text: {
       type: String,
-      default: 'text|string'
+      default: 'text:string'
     },
   }
 }

src/views/widgets/Widget04.md

@@ -0,0 +1,17 @@
+### Widget04
+This widget style depends on type property which defines which social widget background color and icon will be used (i.e facebook, twitter, linkedin, google-plus). Inside component there is slot for placing data chart.
+
+prop | default
+--- | ---
+type  | `facebook`
+rightHeader   | `'rightHeader:string'`
+rightFooter   | `'rightFooter:string'`
+leftHeader   | `'leftHeader:string'`
+leftFooter   | `'leftFooter:string'`
+
+
+#### Example:
+>     <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' style='height:100px'  backgroundColor='rgba(255,255,255,.1)'/>
+>     </widget04>

src/views/widgets/Widget04.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="brand-card">
-    <div :class="'bg-' + type" class="brand-card-header bg-facebook">
+    <div :class="'bg-' + type" class="brand-card-header">
       <i  class="fa" :class="'fa-'+ type"></i>
       <div class="chart-wrapper">
-        <social-box-chart-example :data="dataPoints" />
+        <slot></slot>
       </div>
     </div>
     <div class="brand-card-body">
@@ -20,38 +20,28 @@
 </template>
 
 <script>
-import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
-
-
 export default {
   name: 'Widget04',
-  components: {
-    SocialBoxChartExample
-  },
   props: {
     type: {
       type: String,
       default: 'facebook'
     },
-    dataPoints: {
-      type: Array,
-      default: [65, 59, 84, 84, 51, 55, 40]
-    },
     rightHeader: {
       type: String,
-      default: 'rightHeader|string'
+      default: 'rightHeader:string'
     },
     rightFooter: {
       type: String,
-      default: 'rightFooter|string'
+      default: 'rightFooter:string'
     },
     leftHeader: {
       type: String,
-      default: 'leftHeader|string'
+      default: 'leftHeader:string'
     },
     leftFooter: {
       type: String,
-      default: 'leftFooter|string'
+      default: 'leftFooter:string'
     },
   }
 }

src/views/widgets/Widget05.md

@@ -0,0 +1,15 @@
+### Widget05
+
+This widget style can be configured by changing variant property, which name is one of standard bootstrap classes (i.e. success, info, warning, danger). If you want to change background color of widget instead of changing progress bar style add background- prefix to class (i.e. 'background-success').
+
+Value is the procentage value of displayed progress-bar.
+
+prop | default
+--- | ---
+variant  | `success`
+value | `30`
+iconClasses  |  `icon-people`
+header| `header:string`
+text   | `text:string`
+
+>     <widget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>

src/views/widgets/Widget05.vue

@@ -32,11 +32,11 @@ export default {
     },
     header: {
       type: String,
-      default: 'header|string'
+      default: 'header:string'
     },
     text: {
       type: String,
-      default: 'text|string'
+      default: 'text:string'
     },
     variant: {
       type: String,

src/views/widgets/Widget06.md

@@ -0,0 +1,21 @@
+### Widget06
+
+This widget can style is defined by cardClasses.
+
+prop | default
+--- | ---
+cardClasses  | `''`
+header| `header:string`
+text   | `text:string`
+
+>     <widget06 cardClasses="bg-primary" header="9.823" text="Members online">
+      <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>

src/views/widgets/Widget06.vue

@@ -1,30 +1,16 @@
 <template>
   <b-card no-body :class="cardClasses">
     <b-card-body class="pb-0">
-      <slot></slot>
+      <slot name='dropdown'></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"/>
+    <slot name='chart'></slot>
-    <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{
@@ -40,19 +26,11 @@ export default {
     },
     header: {
       type: String,
-      default: 'header|string'
+      default: 'header:string'
     },
     text: {
       type: String,
-      default: 'text|string'
+      default: 'text:string'
-    },
-    chartType:{
-      type: String,
-      default: 'chart1'
-    },
-    chartHeight:{
-      type: Number,
-      default: 70
     },
   }
 }

src/views/widgets/Widget07.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="card">
+    <div :class="cardClasses" class="card-header">
+      <div class="font-weight-bold">
+        <span>{{rightHeader}}</span>
+        <span class="float-right">{{leftHeader}}</span>
+      </div>
+      <div>
+        <span>
+          <small>{{rightFooter}}</small>
+        </span>
+        <span class="float-right">
+          <small>{{leftFooter}}</small>
+        </span>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Widget07',
+  props: {
+    cardClasses: {
+      type: String,
+      default: 'bg-primary'
+    },
+    rightHeader: {
+      type: String,
+      default: 'rightHeader:string'
+    },
+    rightFooter: {
+      type: String,
+      default: 'rightFooter:string'
+    },
+    leftHeader: {
+      type: String,
+      default: 'leftHeader:string'
+    },
+    leftFooter: {
+      type: String,
+      default: 'leftFooter:string'
+    },
+  }
+}
+</script>

src/views/widgets/Widget08.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card">
+    <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"> -->
+            <slot></slot>
+          <!-- </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Widget07',
+  props: {
+    cardClasses: {
+      type: String,
+      default: 'bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'header:string'
+    },
+    text: {
+      type: String,
+      default: 'text:string'
+    },
+  }
+}
+</script>

tests/unit/widgets/Widget01.spec.js

@@ -22,10 +22,10 @@ describe(ComponentName + '.vue', () => {
     const vm = new Vue(Component).$mount()
     expect(vm.backgroundColor).toBe('')
     expect(vm.styleClasses).toBe('')
-    expect(vm.header).toBe('header|string')
+    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text|string')
+    expect(vm.text).toBe('text:string')
     expect(vm.variant).toBe('')
-    expect(vm.footer).toBe('footer|string')
+    expect(vm.footer).toBe('footer:string')
     expect(vm.value == 25).toBe(true)
   })
   it('correctly sets variant when background is not white', () => {

tests/unit/widgets/Widget02.spec.js

@@ -17,8 +17,8 @@ describe(ComponentName + '.vue', () => {
   })
   it('correctly sets default props when created', () => {
     const vm = new Vue(Component).$mount()
-    expect(vm.header).toBe('header|string')
+    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text|string')
+    expect(vm.text).toBe('text:string')
     expect(vm.link).toBe('#')
     expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
     expect(vm.showLink).toBe(false)

tests/unit/widgets/Widget03.spec.js

@@ -17,8 +17,8 @@ describe(ComponentName + '.vue', () => {
   })
   it('correctly sets default props when created', () => {
     const vm = new Vue(Component).$mount()
-    expect(vm.header).toBe('header|string')
+    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text|string')
+    expect(vm.text).toBe('text:string')
     expect(vm.iconClasses).toBe('fa fa-cogs bg-primary')
   })
 })

tests/unit/widgets/Widget04.spec.js

@@ -16,10 +16,9 @@ describe(ComponentName + '.vue', () => {
     expect(wrapper.isVueInstance()).toBe(true)
   })
   it('correctly sets default props and data when created', () => {
-    const vm = new Vue(Component).$mount()
+    expect(wrapper.props().rightHeader).toBe('rightHeader:string')
-    expect(vm.rightHeader).toBe('rightHeader|string')
+    expect(wrapper.props().rightFooter).toBe('rightFooter:string')
-    expect(vm.rightFooter).toBe('rightFooter|string')
+    expect(wrapper.props().leftHeader).toBe('leftHeader:string')
-    expect(vm.leftHeader).toBe('leftHeader|string')
+    expect(wrapper.props().leftFooter).toBe('leftFooter:string')
-    expect(vm.leftFooter).toBe('leftFooter|string')
   })
 })

tests/unit/widgets/Widget05.spec.js

@@ -22,8 +22,8 @@ describe(ComponentName + '.vue', () => {
     const vm = new Vue(Component).$mount()
     expect(vm.backgroundColor).toBe('')
     expect(vm.styleClasses).toBe('')
-    expect(vm.header).toBe('header|string')
+    expect(vm.header).toBe('header:string')
-    expect(vm.text).toBe('text|string')
+    expect(vm.text).toBe('text:string')
     expect(vm.variant).toBe('')
     expect(vm.value == 25).toBe(true)
   })

tests/unit/widgets/Widget06.spec.js

@@ -17,8 +17,8 @@ describe(ComponentName + '.vue', () => {
   })
   it('correctly sets default props and data when created', () => {
     expect(wrapper.props().cardClasses).toBe('')
-    expect(wrapper.props().header).toBe('header|string')
+    expect(wrapper.props().header).toBe('header:string')
-    expect(wrapper.props().text).toBe('text|string')
+    expect(wrapper.props().text).toBe('text:string')
     expect(wrapper.props().chartType).toBe('chart1')
     expect(wrapper.props().chartHeight == 70).toBe(true)
   })