Nuxt/examples/vue-chartjs/pages/contributors.vue

58 lines
1.3 KiB
Vue
Raw Normal View History

2017-08-24 10:16:12 +00:00
<template>
<div class="doughnut-chart">
<DoughnutChart :data="doughnutChartData" :options="{ legend: { display: false }, maintainAspectRatio: false }" />
2017-08-24 10:16:12 +00:00
</div>
</template>
<script>
2019-06-25 10:01:58 +00:00
import DoughnutChart from '~/components/doughnut-chart'
2017-08-24 10:16:12 +00:00
function isBot (username) {
return username.includes('[bot]') || username.includes('-bot')
}
function getRandomColor () {
const letters = '0123456789ABCDEF'
let color = '#'
for (let i = 0; i < 6; i++) {
2017-10-31 13:43:55 +00:00
color += letters[Math.floor(Math.random() * 16)]
2017-08-24 10:16:12 +00:00
}
2017-10-31 13:43:55 +00:00
return color
2017-08-24 10:16:12 +00:00
}
export default {
2019-02-26 09:41:30 +00:00
components: {
DoughnutChart
},
async asyncData ({ $http, env }) {
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))
2017-08-24 10:16:12 +00:00
return {
doughnutChartData: {
labels: contributors.map(c => c.login),
2017-08-24 10:16:12 +00:00
datasets: [
{
label: 'Nuxt.js Contributors',
backgroundColor: contributors.map(getRandomColor),
data: contributors.map(c => c.contributions)
2017-08-24 10:16:12 +00:00
}
]
}
}
}
}
</script>
<style scoped>
.doughnut-chart {
width: 80%;
height: 80%;
margin: auto;
margin-top: 30px;
2017-08-24 10:16:12 +00:00
}
</style>