Added chart component

Author: mugetsu

nuxt.config.js

@@ -37,7 +37,10 @@ module.exports = {
   /*
   ** Customize the progress-bar color
   */
- loading: '~/components/Loader/index.vue',
+ loading: {
+    color: '#ffa500',
+    height: '2px'
+  },
 
   /*
   ** Global CSS
@@ -55,6 +58,13 @@ module.exports = {
     '@nuxtjs/google-gtag'
   ],
 
+  /*
+  ** Plugins
+  */
+  plugins: [
+    { src: '~/plugins/vue-chartjs.js', mode: 'client' }
+  ],
+
   /*
   ** Axios configuration
   */

package-lock.json

@@ -24,10 +24,12 @@
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "animated-number-vue": "^1.0.0",
     "babel-runtime": "^6.26.0",
+    "chart.js": "^2.9.3",
     "cross-env": "^5.2.0",
     "mapbox-gl": "^1.8.1",
     "mapbox-gl-vue": "^2.0.4",
-    "nuxt": "^2.11.0"
+    "nuxt": "^2.11.0",
+    "vue-chartjs": "^3.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",

package.json

@@ -115,7 +115,13 @@ export default {
         })
       }, 800)
     }
-  }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$nuxt.$loading.start()
+      setTimeout(() => this.$nuxt.$loading.finish(), 500)
+    })
+  },
 }
 </script>
 

pages/index.vue

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import { Line } from 'vue-chartjs'
+
+Vue.component('LineChart', {
+	extends: Line,
+	props: [ 'chartdata', 'options' ],
+	mounted() {
+		this.renderChart(this.chartdata, this.options)
+	}
+})