refactor: chart examples

- add: getStyle()
- minor fixes

index.html

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>CoreUI - Open Source Bootstrap Admin Template</title>
+
+    <link rel="shortcut icon" href="./favicon.ico">
   </head>
 
   <!-- BODY options, add following classes to body to change options

scss/vendors/_variables.scss

@@ -1,7 +1,7 @@
 // Override Boostrap variables
 @import "../variables";
-@import "node_modules/@coreui/coreui/scss/bootstrap-variables";
+@import "~@coreui/coreui/scss/bootstrap-variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import "~bootstrap/scss/mixins";
-@import "node_modules/bootstrap/scss/functions";
+@import "~bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
+@import "~bootstrap/scss/variables";
-@import "node_modules/@coreui/coreui/scss/variables";
+@import "~@coreui/coreui/scss/variables";

src/views/Dashboard.vue

@@ -129,7 +129,7 @@
           <div class="brand-card-header bg-facebook">
             <i class="fa fa-facebook"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="100"/>
+              <social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -149,7 +149,7 @@
           <div class="brand-card-header bg-twitter">
             <i class="fa fa-twitter"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="100"/>
+              <social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -169,7 +169,7 @@
           <div class="brand-card-header bg-linkedin">
             <i class="fa fa-linkedin"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="100"/>
+              <social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -189,7 +189,7 @@
           <div class="brand-card-header bg-google-plus">
             <i class="fa fa-google-plus"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="100"/>
+              <social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -216,7 +216,8 @@
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
+                      <!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>
@@ -225,7 +226,7 @@
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
-                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
                   </Callout>
                 </b-col>

src/views/Widgets.vue

@@ -234,7 +234,7 @@
           <div class="brand-card-header bg-facebook">
             <i class="fa fa-facebook"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="100"/>
+              <social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -254,7 +254,7 @@
           <div class="brand-card-header bg-twitter">
             <i class="fa fa-twitter"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="100"/>
+              <social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -274,7 +274,7 @@
           <div class="brand-card-header bg-linkedin">
             <i class="fa fa-linkedin"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="100"/>
+              <social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">
@@ -294,7 +294,7 @@
           <div class="brand-card-header bg-google-plus">
             <i class="fa fa-google-plus"></i>
             <div class="chart-wrapper">
-              <social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="100"/>
+              <social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
             </div>
           </div>
           <div class="brand-card-body">

src/views/dashboard/CalloutChartExample.vue

@@ -1,5 +1,6 @@
 <script>
 import { Line } from 'vue-chartjs'
+import { getStyle } from '@coreui/coreui/js/src/utilities'
 
 // const brandPrimary = '#20a8d8'
 // const brandSuccess = '#4dbd74'
@@ -8,6 +9,9 @@ import { Line } from 'vue-chartjs'
 // const brandDanger = '#f86c6b'
 
 export default {
+  components: {
+    getStyle
+  },
   extends: Line,
   props: ['data', 'height', 'width', 'variant'],
   mounted () {
@@ -16,7 +20,7 @@ export default {
       datasets: [
         {
           backgroundColor: 'transparent',
-          borderColor: this.variant ? this.variant : '#c2cfd6',
+          borderColor: this.getVariant(this.variant) || '#c2cfd6',
           data: this.data
         }
       ]
@@ -46,6 +50,11 @@ export default {
         display: false
       }
     })
+  },
+  methods: {
+    getVariant (val, el) {
+      return val[0] === '#' ? val : getStyle(`--${val}`, el)
+    }
   }
 }
 </script>

src/views/dashboard/CardLine1ChartExample.vue

@@ -1,8 +1,11 @@
 <script>
 import { Line } from 'vue-chartjs'
+// import { getStyle } from '@coreui/coreui/js/src/utilities'
 
 const brandPrimary = '#20a8d8'
-const datasets = [
+// const brandPrimary = getStyle('--primary')
+
+const datasets1 = [
   {
     label: 'My First dataset',
     backgroundColor: brandPrimary,
@@ -13,11 +16,11 @@ const datasets = [
 
 export default {
   extends: Line,
-  props: ['height'],
+  props: ['height', 'width'],
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: datasets
+      datasets: datasets1
     }, {
       maintainAspectRatio: false,
       legend: {
@@ -38,8 +41,8 @@ export default {
           display: false,
           ticks: {
             display: false,
-            min: Math.min.apply(Math, datasets[0].data) - 5,
+            min: Math.min.apply(Math, datasets1[0].data) - 5,
-            max: Math.max.apply(Math, datasets[0].data) + 5
+            max: Math.max.apply(Math, datasets1[0].data) + 5
           }
         }]
       },

src/views/dashboard/CardLine2ChartExample.vue

@@ -1,8 +1,11 @@
 <script>
 import { Line } from 'vue-chartjs'
+// import { getStyle } from '@coreui/coreui/js/src/utilities'
 
 const brandInfo = '#63c2de'
-const datasets = [
+// const brandInfo = getStyle('--light-blue')
+
+const datasets2 = [
   {
     label: 'My First dataset',
     backgroundColor: brandInfo,
@@ -13,11 +16,11 @@ const datasets = [
 
 export default {
   extends: Line,
-  props: ['height'],
+  props: ['height', 'width'],
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: datasets
+      datasets: datasets2
     }, {
       maintainAspectRatio: false,
       legend: {
@@ -39,8 +42,8 @@ export default {
           display: false,
           ticks: {
             display: false,
-            min: Math.min.apply(Math, datasets[0].data) - 5,
+            min: Math.min.apply(Math, datasets2[0].data) - 5,
-            max: Math.max.apply(Math, datasets[0].data) + 5
+            max: Math.max.apply(Math, datasets2[0].data) + 5
           }
         }]
       },

src/views/dashboard/CardLine3ChartExample.vue

@@ -12,7 +12,7 @@ const datasets = [
 
 export default {
   extends: Line,
-  props: ['height'],
+  props: ['height', 'width'],
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

src/views/dashboard/MainChartExample.vue

@@ -1,10 +1,11 @@
 <script>
 import { Line } from 'vue-chartjs'
+import { getStyle } from '@coreui/coreui/js/src/utilities'
 
 // const brandPrimary = '#20a8d8'
-const brandSuccess = '#4dbd74'
+// const brandSuccess = '#4dbd74'
-const brandInfo = '#63c2de'
+// const brandInfo = '#63c2de'
-const brandDanger = '#f86c6b'
+// const brandDanger = '#f86c6b'
 
 function convertHex (hex, opacity) {
   hex = hex.replace('#', '')
@@ -12,8 +13,8 @@ function convertHex (hex, opacity) {
   const g = parseInt(hex.substring(2, 4), 16)
   const b = parseInt(hex.substring(4, 6), 16)
 
-  const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
+  // const result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')'
-  return result
+  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`
 }
 
 function random (min, max) {
@@ -24,12 +25,12 @@ export default {
   extends: Line,
   props: ['height'],
   mounted () {
-    var elements = 27
+    let elements = 27
-    var data1 = []
+    const data1 = []
-    var data2 = []
+    const data2 = []
-    var data3 = []
+    const data3 = []
 
-    for (var i = 0; i <= elements; i++) {
+    for (let i = 0; i <= elements; i++) {
       data1.push(random(50, 200))
       data2.push(random(80, 100))
       data3.push(65)
@@ -39,8 +40,8 @@ export default {
       datasets: [
         {
           label: 'My First dataset',
-          backgroundColor: convertHex(brandInfo, 10),
+          backgroundColor: convertHex(getStyle('--info'), 10),
-          borderColor: brandInfo,
+          borderColor: getStyle('--info'),
           pointHoverBackgroundColor: '#fff',
           borderWidth: 2,
           data: data1
@@ -48,7 +49,7 @@ export default {
         {
           label: 'My Second dataset',
           backgroundColor: 'transparent',
-          borderColor: brandSuccess,
+          borderColor: getStyle('--success'),
           pointHoverBackgroundColor: '#fff',
           borderWidth: 2,
           data: data2
@@ -56,7 +57,7 @@ export default {
         {
           label: 'My Third dataset',
           backgroundColor: 'transparent',
-          borderColor: brandDanger,
+          borderColor: getStyle('--danger'),
           pointHoverBackgroundColor: '#fff',
           borderWidth: 1,
           borderDash: [8, 5],