feat: new widget charts

src/mixins/charts/chartMixins.js

@@ -0,0 +1,54 @@
+import { deepObjectsMerge } from '@coreui/coreui/dist/js/coreui-utilities'
+import getColor from '@coreui/coreui/js/src/utilities/get-color'
+
+const generatedLabels = {
+  computed:{
+    generatedLabels() {
+      if(this.labels !== undefined)
+        return this.labels
+      let labels = [];
+      for(let i=1; i<=this.data.length; i++)
+        labels.push('')
+      return labels
+    },
+  },
+}
+const generatedBackgroundColor = {
+  computed:{
+    generatedBackgroundColor(){
+      return getColor(this.backgroundColor)
+    },
+  },
+}
+const generatedBorderColor = {
+  computed:{
+    generatedBorderColor(){
+      return getColor(this.borderColor)
+    },
+  },
+}
+const generatedPointHoverBackgroundColor = {
+  computed:{
+    generatedPointHoverBackgroundColor () {
+     if(this.$options.propsData.pointHoverBackgroundColor === undefined)
+       return this.generatedBorderColor
+     return getColor(this.pointHoverBackgroundColor)
+    },
+  },
+}
+const generatedOptions = {
+  computed:{
+    generatedOptions () {
+     if(this.$options.propsData.options !== undefined)
+       deepObjectsMerge(this.finalOptions, this.options)
+     return this.finalOptions
+    },
+  },
+}
+export{
+  generatedLabels,
+  generatedBackgroundColor,
+  generatedBorderColor,
+  generatedPointHoverBackgroundColor,
+  generatedOptions
+}

src/views/Dashboard.vue

@@ -155,6 +155,7 @@
         </widget04>
        </b-col>
     </b-row><!--/.row-->
+    <b-row>
       <b-col md="12">
         <b-card header="Traffic &amp; Sales">
           <b-row>

src/views/Widgets.vue

@@ -107,25 +107,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>
@@ -194,7 +198,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>
@@ -212,9 +216,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>
@@ -234,7 +239,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>
@@ -253,7 +259,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>
@@ -262,58 +268,63 @@
       <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)'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
         </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)'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
         </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)'/>
+          <bar-chart1 style="height:40px" chartId="widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
         </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)'
+          <bar-chart1 style="height:40px" chartId="widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-                      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)'/>
+          <line-chart1 style="height:40px" chartId="widget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                       label='Sales' borderColor='danger'/>
         </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)'/>
+          <line-chart1 style="height:40px" chartId="widget08_2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                       label='Sales' borderColor='primary'/>
         </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)'/>
+          <line-chart1 style="height:40px" chartId="widget08_3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                       label='Sales' borderColor='success'/>
         </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)'/>
+          <bar-chart1 style="height:40px" chartId="widget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                      label='Sales' backgroundColor='danger'/>
         </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)'/>
+          <bar-chart1 style="height:40px" chartId="widget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                      label='Sales' backgroundColor='primary'/>
         </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)'/>
+          <bar-chart1 style="height:40px" chartId="widget08_6" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+                      label='Sales' backgroundColor='success'/>
         </widget08>
       </b-col>
     </b-row>

src/views/charts/BarExample.vue

@@ -3,6 +3,7 @@ import { Bar } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
 
 export default {
+  // name: 'BarExample',
   extends: Bar,
   mounted () {
     // Overwriting base render method with actual data.

src/views/charts/DoughnutExample.vue

@@ -2,6 +2,7 @@
 import { Doughnut } from 'vue-chartjs'
 
 export default {
+  name: 'DoughnutExample',
   extends: Doughnut,
   mounted () {
     this.renderChart({

src/views/dashboard/BarChart1.vue

@@ -1,9 +1,12 @@
 <script>
 import { Bar } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
+import { generatedLabels, generatedBackgroundColor,generatedBorderColor, generatedOptions } from '@/mixins/charts/chartMixins'
 
 export default {
+  name: 'BarChart',
   extends: Bar,
+  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedOptions],
   props: {
     data: {
       type: Array,
@@ -17,33 +20,19 @@ export default {
       type: String,
       default: 'label|string'
     },
-    labels:{
+    borderColor:{
-      type: Array,
+      type: String,
-      default () {
+      default: 'rgba(255,255,255,.55)'
-        return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
-      }
     },
     backgroundColor:{
       type: String,
-      default: 'rgba(255,255,255,.3)'
+      default: 'rgba(0,0,0,.2)'
     },
-    pointHoverBackgroundColor: String,
+    labels: Array,
-  },
+    options:Object,
-  mounted () {
+    finalOptions:{
-    const dataset = [
+      type: Object,
-      {
+      default: () => ({
-        label: this.label,
-        backgroundColor: this.backgroundColor,
-        borderColor: 'transparent',
-        data: this.data
-      }
-    ]
-    this.renderChart(
-      {
-        labels: this.labels,
-        datasets: dataset
-      },
-      {
         tooltips: {
           enabled: false,
           custom: CustomTooltips
@@ -62,7 +51,24 @@ export default {
             display: false
           }]
         }
+      })
+    }
+  },
+  mounted () {
+    const dataset = [
+      {
+        label: this.label,
+        backgroundColor: this.generatedBackgroundColor,
+        borderColor: this.generatedBorderColor,
+        data: this.data
       }
+    ]
+    this.renderChart(
+      {
+        labels: this.generatedLabels,
+        datasets: dataset
+      },
+      this.generatedOptions
     )
   }
 }

src/views/dashboard/LineChart1.vue

@@ -1,11 +1,12 @@
 <script>
 import { Line } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
-const defaultBorderColor = 'rgba(255,255,255,.55)'
 
 export default {
+  name: 'LineChart1',
   extends: Line,
+  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
   props: {
     data: {
       type: Array,
@@ -19,53 +20,28 @@ export default {
       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
+      default: 'rgba(255,255,255,.55)'
     },
+    labels: Array,
     backgroundColor:{
       type: String,
       default: 'transparent'
     },
-    pointHoverBackgroundColor: String,
+    pointHoverBackgroundColor:{
-  },
+      type: String,
-  computed:{
+      default: 'transparent'
-    hoverBackgroundColor () {
+    },
-     if(this.pointHoverBackgroundColor !== undefined)
+    options:Object,
-       return this.pointHoverBackgroundColor
+    finalOptions:{
-     if(this.borderColor !== defaultBorderColor)
+      type: Object,
-       return this.borderColor
+      default: () => ({
-     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,
+        responsive: true,
         maintainAspectRatio: false,
         legend: {
           display: false
@@ -88,8 +64,26 @@ export default {
             hoverRadius: 4
           }
         }
+      })
+    }
+  },
+  mounted () {
+    const datasets = [
+      {
+        label: this.label,
+        borderColor: this.generatedBorderColor,
+        backgroundColor: this.generatedBackgroundColor,
+        pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
+        data: this.data
       }
+    ]
+    this.renderChart(
+      {
+        labels: this.generatedLabels,
+        datasets: datasets
+      },
+      this.generatedOptions
     )
-  }
+  },
 }
 </script>

src/views/dashboard/LineChart2.vue

@@ -1,11 +1,12 @@
 <script>
 import { Line } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
+import { generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions } from '@/mixins/charts/chartMixins'
-const defaultBorderColor = 'rgba(255,255,255,.55)'
 
 export default {
+  name: 'LineChart2',
   extends: Line,
+  mixins: [generatedLabels, generatedBackgroundColor, generatedBorderColor, generatedPointHoverBackgroundColor, generatedOptions],
   props: {
     data: {
       type: Array,
@@ -19,48 +20,24 @@ export default {
       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
+      default: 'rgba(255,255,255,.55)'
     },
+    labels: Array,
     backgroundColor:{
       type: String,
       default: 'transparent'
     },
-    pointHoverBackgroundColor: String,
+    pointHoverBackgroundColor:{
+      type: String,
+      default: 'transparent'
+    },
+    options:Object,
   },
   computed:{
-    hoverBackgroundColor () {
+    finalOptions () {
-     if(this.pointHoverBackgroundColor !== undefined)
+      return{
-       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
@@ -87,15 +64,14 @@ export default {
               display: false,
               ticks: {
                 display: false,
-                min: Math.min.apply(Math, datasets1[0].data) - 5,
+                min: Math.min.apply(Math, this.data) - 5,
-                max: Math.max.apply(Math, datasets1[0].data) + 5
+                max: Math.max.apply(Math, this.data) + 5
               }
             }
           ]
         },
         elements: {
           line: {
-            tension: 0.00001,
             borderWidth: 1
           },
           point: {
@@ -105,6 +81,24 @@ export default {
           }
         }
       }
+    }
+  },
+  mounted () {
+    const datasets1 = [
+      {
+        label: this.label,
+        borderColor: this.generatedBorderColor,
+        backgroundColor: this.generatedBackgroundColor,
+        pointHoverBackgroundColor: this.generatedPointHoverBackgroundColor,
+        data: this.data
+      }
+    ]
+    this.renderChart(
+      {
+        labels: this.generatedLabels,
+        datasets: datasets1
+      },
+      this.generatedOptions
     )
   }
 }

src/views/widgets/Widget08.vue

@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  name: 'Widget07',
+  name: 'Widget08',
   props: {
     cardClasses: {
       type: String,

tests/unit/theme/ColorTheme.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import BootstrapVue from 'bootstrap-vue'
 import Component from '@/views/theme/ColorTheme'
 

tests/unit/theme/ColorView.spec.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import BootstrapVue from 'bootstrap-vue'
 import Component from '@/views/theme/ColorView'