chore(example): Update vue-chartjs (#7211)

* chore(example): Update vue-chartjs

* add: live demo and CSB link

* fix: lint

examples/vue-chartjs/README.md

@@ -2,5 +2,6 @@
 
 > *Vue-chartjs* is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
 
+Live demo: http://nuxt-vue-chartjs.surge.sh
 
-https://nuxtjs.org/examples
+[![Edit example-vue-chartjs](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/vue-chartjs?fontsize=14&hidenavigation=1&theme=dark)

examples/vue-chartjs/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <ul>
       <li>
         <NuxtLink to="/">
@@ -20,25 +20,43 @@
 * {
   box-sizing: border-box;
 }
+.container {
+  text-align: center;
+  padding-top: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-ul li {
+li {
   display: inline-block;
-  float: left;
-  border: 1px #ddd solid;
 }
-ul li a {
+a {
   display: inline-block;
-  width: 100%;
+  font-weight: 500;
-  height: 100%;
+  padding-top: .75rem;
-  padding: 10px;
+  padding-bottom: .75rem;
-  color: #222;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  text-transform: uppercase;
   text-decoration: none;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
+  border-radius: .25rem;
+  border: none;
+  background-color: #edf2f7;
+  color: #2f495e;
+  margin-right: 1rem;
 }
-ul li a.nuxt-link-exact-active {
+a:hover {
-  text-decoration: underline;
+  background-color: #e2e8f0;
+}
+.nuxt-link-exact-active {
+  background-color: #00c58e;
+  color: #fff;
+}
+.nuxt-link-exact-active:hover {
+  background-color: #00e0a1;
 }
 </style>

examples/vue-chartjs/nuxt.config.js

@@ -6,6 +6,10 @@ export default {
       { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     ]
   },
+  modules: [
+    // https://http.nuxtjs.org
+    '@nuxt/http'
+  ],
   env: {
     githubToken: '42cdf9fd55abf41d24f34c0f8a4d9ada5f9e9b93'
   }

examples/vue-chartjs/package.json

@@ -1,11 +1,11 @@
 {
   "name": "example-vue-chartjs",
   "dependencies": {
-    "axios": "^0.19.0",
+    "@nuxt/http": "^0.4.0",
-    "chart.js": "^2.7.1",
+    "chart.js": "^2.9.3",
-    "moment": "^2.18.1",
+    "moment": "^2.24.0",
     "nuxt": "latest",
-    "vue-chartjs": "^3.1.0"
+    "vue-chartjs": "^3.5.0"
   },
   "scripts": {
     "dev": "nuxt",

examples/vue-chartjs/pages/contributors.vue

@@ -5,9 +5,12 @@
 </template>
 
 <script>
-import axios from 'axios'
 import DoughnutChart from '~/components/doughnut-chart'
 
+function isBot (username) {
+  return username.includes('[bot]') || username.includes('-bot')
+}
+
 function getRandomColor () {
   const letters = '0123456789ABCDEF'
   let color = '#'
@@ -21,16 +24,21 @@ export default {
   components: {
     DoughnutChart
   },
-  async asyncData ({ env }) {
+  async asyncData ({ $http, env }) {
-    const res = await axios.get(`https://api.github.com/repos/nuxt/nuxt.js/stats/contributors?access_token=${env.githubToken}`)
+    let contributors = await $http.$get('https://api.github.com/repos/nuxt/nuxt.js/contributors', {
+      headers: {
+        Authorization: `token ${env.githubToken}`
+      }
+    })
+    contributors = contributors.filter(c => c.contributions >= 10 && !isBot(c.login))
     return {
       doughnutChartData: {
-        labels: res.data.map(stat => stat.author.login),
+        labels: contributors.map(c => c.login),
         datasets: [
           {
             label: 'Nuxt.js Contributors',
-            backgroundColor: res.data.map(getRandomColor),
+            backgroundColor: contributors.map(getRandomColor),
-            data: res.data.map(() => 1)
+            data: contributors.map(c => c.contributions)
           }
         ]
       }
@@ -41,10 +49,9 @@ export default {
 
 <style scoped>
 .doughnut-chart {
-  position: fixed;
-  left: 10%;
-  top: 10%;
   width: 80%;
   height: 80%;
+  margin: auto;
+  margin-top: 30px;
 }
 </style>

examples/vue-chartjs/pages/index.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 import moment from 'moment'
 import BarChart from '~/components/bar-chart'
 
@@ -13,16 +12,20 @@ export default {
   components: {
     BarChart
   },
-  async asyncData ({ env }) {
+  async asyncData ({ env, $http, $dayjs }) {
-    const res = await axios.get(`https://api.github.com/repos/nuxt/nuxt.js/stats/commit_activity?access_token=${env.githubToken}`)
+    const stats = await $http.$get('https://api.github.com/repos/nuxt/nuxt.js/stats/commit_activity', {
+      headers: {
+        Authorization: `token ${env.githubToken}`
+      }
+    })
     return {
       barChartData: {
-        labels: res.data.map(stat => moment(stat.week * 1000).format('GGGG[-W]WW')),
+        labels: stats.map(stat => moment(stat.week * 1000).format('GGGG[-W]WW')),
         datasets: [
           {
             label: 'Nuxt.js Commit Activity',
-            backgroundColor: '#41b883',
+            backgroundColor: '#41B38A',
-            data: res.data.map(stat => stat.total)
+            data: stats.map(stat => stat.total)
           }
         ]
       }
@@ -33,10 +36,9 @@ export default {
 
 <style scoped>
 .bar-chart {
-  position: fixed;
-  left: 10%;
-  top: 10%;
   width: 80%;
   height: 80%;
+  margin: auto;
+  margin-top: 30px;
 }
 </style>