minor changes

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+.idea
+node_modules/
+dist/

Vue_Full_Project/package.json

@@ -14,31 +14,31 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "bootstrap-vue": "0.20.1",
+    "bootstrap-vue": "^0.23.0",
     "chart.js": "2.6.0",
     "vue": "2.4.2",
-    "vue-chartjs": "2.8.1",
+    "vue-chartjs": "2.8.2",
     "vue-router": "2.7.0",
     "font-awesome": "^4.7.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.2",
+    "autoprefixer": "7.1.3",
-    "babel-core": "6.25.0",
+    "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
-    "babel-loader": "7.1.1",
+    "babel-loader": "7.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "1.6.0",
     "babel-preset-stage-2": "6.24.1",
-    "babel-register": "6.24.1",
+    "babel-register": "6.26.0",
     "chalk": "2.1.0",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "0.28.4",
+    "css-loader": "0.28.7",
-    "eslint": "4.4.1",
+    "eslint": "4.5.0",
     "eslint-friendly-formatter": "3.0.0",
     "eslint-loader": "1.9.0",
-    "eslint-plugin-html": "3.1.1",
+    "eslint-plugin-html": "3.2.0",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-node": "5.1.1",
     "eslint-config-standard": "10.2.1",
@@ -53,38 +53,38 @@
     "http-proxy-middleware": "0.17.4",
     "webpack-bundle-analyzer": "2.9.0",
     "cross-env": "5.0.5",
-    "karma": "1.7.0",
+    "karma": "1.7.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "1.3.1",
+    "karma-sinon-chai": "1.3.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
     "karma-webpack": "2.0.4",
     "lolex": "2.1.2",
     "mocha": "3.5.0",
     "chai": "4.1.1",
-    "sinon": "3.2.0",
+    "sinon": "3.2.1",
-    "sinon-chai": "2.12.0",
+    "sinon-chai": "2.13.0",
     "inject-loader": "3.0.1",
     "babel-plugin-istanbul": "4.1.4",
-    "phantomjs-prebuilt": "^2.1.14",
+    "phantomjs-prebuilt": "^2.1.15",
     "chromedriver": "2.31.0",
     "cross-spawn": "^5.0.1",
     "nightwatch": "0.9.16",
-    "selenium-server": "3.4.0",
+    "selenium-server": "3.5.2",
     "semver": "5.4.1",
     "shelljs": "0.7.8",
     "opn": "5.1.0",
-    "optimize-css-assets-webpack-plugin": "3.0.0",
+    "optimize-css-assets-webpack-plugin": "3.1.1",
     "ora": "1.3.0",
     "rimraf": "^2.6.0",
     "url-loader": "0.5.9",
     "vue-loader": "13.0.4",
     "vue-style-loader": "3.0.1",
     "vue-template-compiler": "2.4.2",
-    "webpack": "3.5.3",
+    "webpack": "3.5.5",
     "webpack-dev-middleware": "1.12.0",
     "webpack-hot-middleware": "2.18.2",
     "webpack-merge": "4.1.0",

Vue_Full_Project/scss/core/_callout.scss

@@ -12,9 +12,9 @@
   .chart-wrapper {
     position: absolute;
     top: 18px;
-    left: 45%;
+    left: 50%;
     float: right;
-    width: 100px;
+    width: 60%;
   }
 }
 

Vue_Full_Project/scss/core/_temp.scss

@@ -12,7 +12,7 @@
   border-radius: 1rem !important;
 }
 
-// temp fix for Vue-Strap
+// temp fix for Vue & React
 
 // Open state for the dropdown
 .open, .show {
@@ -20,7 +20,10 @@
   > .dropdown-menu {
     display: block;
   }
-
+  > .dropdown-menu-right {
+    right: 0;
+    left: auto; // Reset the default from `.dropdown-menu`
+  }
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;

Vue_Full_Project/src/_nav.js

@@ -11,7 +11,12 @@ export default {
     },
     {
       title: true,
-      name: 'UI elements'
+      name: 'UI elements',
+      class: '',
+      wrapper: {
+        element: '',
+        attributes: {}
+      }
     },
     {
       name: 'Components',
@@ -63,7 +68,11 @@ export default {
         {
           name: 'Font Awesome',
           url: '/icons/font-awesome',
-          icon: 'icon-star'
+          icon: 'icon-star',
+          badge: {
+            variant: 'secondary',
+            text: '4.7'
+          }
         },
         {
           name: 'Simple Line Icons',
@@ -77,7 +86,7 @@ export default {
       url: '/widgets',
       icon: 'icon-calculator',
       badge: {
-        variant: 'danger',
+        variant: 'primary',
         text: 'NEW'
       }
     },

Vue_Full_Project/src/components/Sidebar.vue

@@ -5,7 +5,7 @@
       <ul class="nav">
         <li class="nav-item" v-for="(item, index) in navItems">
           <template v-if="item.title">
-            <SidebarNavTitle :name="item.name"/>
+            <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
           </template>
           <template v-else-if="item.divider">
             <li class="divider"></li>

Vue_Full_Project/src/components/SidebarNavTitle.vue

@@ -1,6 +1,13 @@
 <template>
-  <li class="nav-title">
+  <li class="nav-title" v-bind:class="classes">
-    {{name}}
+    <template v-if="wrapper && wrapper.element">
+      <component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
+        {{name}}
+      </component>
+    </template>
+    <template v-else>
+      {{name}}
+    </template>
   </li>
 </template>
 
@@ -10,6 +17,14 @@ export default {
     name: {
       type: String,
       default: ''
+    },
+    classes: {
+      type: String,
+      default: ''
+    },
+    wrapper: {
+      type: Object,
+      default: () => {}
     }
   }
 }

Vue_Full_Project/src/views/Dashboard.vue

@@ -207,12 +207,18 @@
                   <Callout variant="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
+                    <div class="chart-wrapper" style="width:60%">
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />
+                    </div>
                   </Callout>
                 </div><!--/.col-->
                 <div class="col-sm-6">
                   <Callout variant="danger">
-                    <small class="text-muted">Recuring Clients</small><br>
+                    <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
+                    <div class="chart-wrapper" style="width:60%">
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#f86c6b" width="80" height="30" />
+                    </div>
                   </Callout>
                 </div><!--/.col-->
               </div><!--/.row-->
@@ -292,12 +298,18 @@
                   <Callout variant="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
+                    <div class="chart-wrapper" style="width:60%">
+                      <callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30" />
+                    </div>
                   </Callout>
                 </div><!--/.col-->
                 <div class="col-sm-6">
                   <Callout variant="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
+                    <div class="chart-wrapper" style="width:60%">
+                      <callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80px" height="30" />
+                    </div>
                   </Callout>
                 </div><!--/.col-->
               </div><!--/.row-->
@@ -363,12 +375,18 @@
                   <Callout>
                     <small class="text-muted">CTR</small><br>
                     <strong class="h4">23%</strong>
+                    <div class="chart-wrapper" style="width:60%">
+                      <callout-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" width="80px" height="30" />
+                    </div>
                   </Callout>
                 </div><!--/.col-->
                 <div class="col-sm-6">
                   <Callout variant="primary">
                     <small class="text-muted">Bounce Rate</small><br>
                     <strong class="h4">5%</strong>
+                    <div class="chart-wrapper" style="width:60%">
+                      <callout-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" variant="#20a8d8" width="80px" height="30" />
+                    </div>
                   </Callout>
                 </div><!--/.col-->
               </div><!--/.row-->
@@ -534,6 +552,7 @@ 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 '../components/'
 
 export default {
@@ -545,7 +564,8 @@ export default {
     CardLine3ChartExample,
     CardBarChartExample,
     MainChartExample,
-    SocialBoxChartExample
+    SocialBoxChartExample,
+    CalloutChartExample
   },
   data: function () {
     return {

Vue_Full_Project/src/views/dashboard/CalloutChartExample.vue

@@ -0,0 +1,50 @@
+<script>
+import { Line } from 'vue-chartjs'
+
+// const brandPrimary = '#20a8d8'
+// const brandSuccess = '#4dbd74'
+// const brandInfo = '#63c2de'
+// const brandWarning = '#f8cb00'
+// const brandDanger = '#f86c6b'
+
+export default Line.extend({
+  props: ['data', 'height', 'width', 'variant'],
+  mounted () {
+    this.renderChart({
+      labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+      datasets: [
+        {
+          backgroundColor: 'transparent',
+          borderColor: this.variant ? this.variant : '#c2cfd6',
+          data: this.data
+        }
+      ]
+    }, {
+      responsive: true,
+      maintainAspectRatio: true,
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false
+        }]
+      },
+      elements: {
+        line: {
+          borderWidth: 2
+        },
+        point: {
+          radius: 0,
+          hitRadius: 10,
+          hoverRadius: 4,
+          hoverBorderWidth: 3
+        }
+      },
+      legend: {
+        display: false
+      }
+    })
+  }
+})
+</script>

Vue_Full_Project/src/views/icons/FontAwesome.vue

@@ -2155,7 +2155,7 @@
         <div class="row text-center">
 
           <div class="col-6 col-sm-4 col-md-3 col-lg-2">
-            <i class="fa fa-circle-o-notch fa-lg mt-4"></i><br>circle-o-notch
+            <i class="fa fa-circle-o-notch fa-lg mt-4 fa-spin"></i><br>circle-o-notch
           </div>
 
           <div class="col-6 col-sm-4 col-md-3 col-lg-2">

Vue_Starter/scss/core/_callout.scss

@@ -12,9 +12,9 @@
   .chart-wrapper {
     position: absolute;
     top: 18px;
-    left: 45%;
+    left: 50%;
     float: right;
-    width: 100px;
+    width: 60%;
   }
 }
 

Vue_Starter/scss/core/_temp.scss

@@ -12,7 +12,7 @@
   border-radius: 1rem !important;
 }
 
-// temp fix for Vue-Strap
+// temp fix for Vue & React
 
 // Open state for the dropdown
 .open, .show {
@@ -20,7 +20,10 @@
   > .dropdown-menu {
     display: block;
   }
-
+  > .dropdown-menu-right {
+    right: 0;
+    left: auto; // Reset the default from `.dropdown-menu`
+  }
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;
@@ -28,9 +31,9 @@
 }
 
 //
-.modal-open .modal {
+//.modal-open .modal {
-  display: block;
+//  display: block;
-}
+//}
 
 // navbar dropdown fix
 .navbar .dropdown-toggle {