update login page, tables page, charts page, notifications page, dashboard page. remove jquery from tha app

Author: shoudaos

package.json

@@ -10,20 +10,27 @@
   },
   "dependencies": {
     "animate.css": "^3.6.1",
+    "apexcharts": "^3.8.6",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "bootstrap": "^4.1.1",
-    "bootstrap-vue": "^2.0.0-rc.11",
+    "bootstrap-vue": "^2.0.0-rc.24",
     "css-loader": "^1.0.0",
+    "echarts": "^4.3.0",
     "expose-loader": "^0.7.5",
     "font-awesome": "4.7.0",
     "glyphicons-halflings": "1.9.1",
+    "highcharts": "^7.2.0",
+    "highcharts-vue": "^1.3.5",
     "imports-loader": "^0.8.0",
     "line-awesome": "icons8/line-awesome",
     "node-sass": "^4.9.0",
     "rickshaw": "1.6.6",
     "sass-loader": "^7.0.1",
     "vue": "^2.5.17",
+    "vue-apexcharts": "^1.5.0",
+    "vue-echarts": "^4.0.4",
     "vue-router": "^3.0.1",
+    "vue-toasted": "^1.1.27",
     "vue-touch": "2.0.0-beta.4",
     "vue2-google-maps": "^0.10.2",
     "vuetrend": "^0.3.2",
@@ -34,8 +41,8 @@
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-service": "^3.0.5",
-    "vue-template-compiler": "^2.5.17",
-    "core-js": "^2.6.5"
+    "core-js": "^2.6.5",
+    "vue-template-compiler": "^2.5.17"
   },
   "eslintConfig": {
     "root": true,

src/assets/microsoft.png

@@ -0,0 +1,3 @@
+.sparkline-chart .apexcharts-canvas {
+  background: transparent;
+}

src/components/Sparklines/Sparklines.scss

@@ -0,0 +1,59 @@
+<template>
+  <apexchart class="sparkline-chart" style="display: inline-block" :type="type" :height="height" :width="width" :options="sparkOptions" :series="data"/>
+</template>
+
+<script>
+
+export default {
+  name: 'Sparklines',
+  props: {
+    type: { type: String, default: "bar" },
+    data: { type: Array },
+    height: { type: [Number, String], default: 20 },
+    width: { type: [Number, String], default: 50 },
+    options: { type: Object },
+  },
+  computed: {
+    sparkOptions() {
+      return {
+        chart: {
+          height: this.height,
+          width: this.width,
+          sparkline: {
+            enabled: true
+          }
+        },
+        plotOptions: {
+          bar: {
+            columnWidth: '60%'
+          }
+        },
+        xaxis: {
+          crosshairs: {
+            width: 1
+          },
+        },
+        tooltip: {
+          fixed: {
+            enabled: false
+          },
+          x: {
+            show: false
+          },
+          y: {
+            title: {
+              formatter: function () {
+                return ''
+              }
+            }
+          },
+          marker: {
+            show: false
+          }
+        }, ...this.options
+      }
+    }
+  }
+}
+</script>
+<style src="./Sparklines.scss" lang="scss"></style>

src/components/Sparklines/Sparklines.vue

@@ -1,12 +1,12 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import 'expose-loader?jQuery!jquery' // eslint-disable-line
-import 'expose-loader?$!jquery' // eslint-disable-line
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import * as VueGoogleMaps from 'vue2-google-maps';
 import VueTouch from 'vue-touch';
 import Trend from 'vuetrend';
+import Toasted from 'vue-toasted';
+import VueApexCharts from 'vue-apexcharts';
 
 import store from './store';
 import router from './Routes';
@@ -20,6 +20,8 @@ Vue.use(VueGoogleMaps, {
     key: 'AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg',
   },
 });
+Vue.use(Toasted, {duration: 10000});
+Vue.component('apexchart', VueApexCharts);
 
 Vue.config.productionTip = false;