Add contributors page

examples/vue-chartjs/components/doughnut-chart.js

@@ -0,0 +1,8 @@
+import { Doughnut } from 'vue-chartjs'
+
+export default Doughnut.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})

examples/vue-chartjs/layouts/default.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <ul>
+      <li><nuxt-link to="/">Activity</nuxt-link></li>
+      <li><nuxt-link to="/contributors">Contributors</nuxt-link></li>
+    </ul>
+    <nuxt/>
+  </div>
+</template>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+ul li {
+  display: inline-block;
+  float: left;
+  border: 1px #ddd solid;
+}
+ul li a {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  color: #222;
+  text-decoration: none;
+}
+ul li a.nuxt-link-exact-active {
+  text-decoration: underline;
+}
+</style>

examples/vue-chartjs/nuxt.config.js

@@ -1,5 +1,15 @@
 module.exports = {
+  head: {
+    title: 'Nuxt.js + Vue-ChartJS',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    ]
+  },
   build: {
     vendor: ['axios', 'moment', 'chart.js', 'vue-chartjs']
+  },
+  env: {
+    githubToken: '42cdf9fd55abf41d24f34c0f8a4d9ada5f9e9b93'
   }
 }

examples/vue-chartjs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hello-nuxt",
+  "name": "vue-chartjs-nuxt",
   "dependencies": {
     "axios": "^0.16.2",
     "chart.js": "^2.6.0",

examples/vue-chartjs/pages/contributors.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="doughnut-chart">
+    <doughnut-chart :data="doughnutChartData" :options="{ legend: { display: false }, maintainAspectRatio: false }"/>
+  </div>
+</template>
+
+<script>
+import DoughnutChart from '~/components/doughnut-chart'
+import axios from 'axios'
+import moment from 'moment'
+
+function getRandomColor() {
+  var letters = '0123456789ABCDEF';
+  var color = '#';
+  for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+export default {
+  async asyncData({ env }) {
+    const res = await axios.get(`https://api.github.com/repos/nuxt/nuxt.js/stats/contributors?access_token=${env.githubToken}`)
+    return {
+      doughnutChartData: {
+        labels: res.data.map((stat) => stat.author.login),
+        datasets: [
+          {
+            label: 'Nuxt.js Contributors',
+            backgroundColor: res.data.map(() => getRandomColor()),
+            data: res.data.map((stat) => 1)
+          }
+        ]
+      }
+    }
+  },
+  components: {
+    DoughnutChart
+  }
+}
+</script>
+
+<style scoped>
+.doughnut-chart {
+  position: fixed;
+  left: 10%;
+  top: 10%;
+  width: 80%;
+  height: 80%;
+}
+</style>

examples/vue-chartjs/pages/index.vue

@@ -10,8 +10,8 @@ import axios from 'axios'
 import moment from 'moment'
 
 export default {
-  async asyncData() {
-    const res = await axios.get('https://api.github.com/repos/nuxt/nuxt.js/stats/commit_activity')
+  async asyncData({ env }) {
+    const res = await axios.get(`https://api.github.com/repos/nuxt/nuxt.js/stats/commit_activity?access_token=${env.githubToken}`)
     return {
       barChartData: {
         labels: res.data.map((stat) => moment(stat.week * 1000).format('GGGG[-W]WW')),
@@ -31,7 +31,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .bar-chart {
   position: fixed;
   left: 10%;