mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-17 06:01:34 +00:00
chore(example): Update vue-chartjs (#7211)
* chore(example): Update vue-chartjs * add: live demo and CSB link * fix: lint
This commit is contained in:
Sébastien Chopin
GitHub
parent
c02ded2d86
commit
73541a576d
@ -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
|
||||
[](https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/vue-chartjs?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
@ -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%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
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 {
|
||||
text-decoration: underline;
|
||||
a:hover {
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
.nuxt-link-exact-active {
|
||||
background-color: #00c58e;
|
||||
color: #fff;
|
||||
}
|
||||
.nuxt-link-exact-active:hover {
|
||||
background-color: #00e0a1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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'
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "example-vue-chartjs",
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"chart.js": "^2.7.1",
|
||||
"moment": "^2.18.1",
|
||||
"@nuxt/http": "^0.4.0",
|
||||
"chart.js": "^2.9.3",
|
||||
"moment": "^2.24.0",
|
||||
"nuxt": "latest",
|
||||
"vue-chartjs": "^3.1.0"
|
||||
"vue-chartjs": "^3.5.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
|
||||
@ -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 }) {
|
||||
const res = await axios.get(`https://api.github.com/repos/nuxt/nuxt.js/stats/contributors?access_token=${env.githubToken}`)
|
||||
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))
|
||||
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),
|
||||
data: res.data.map(() => 1)
|
||||
backgroundColor: contributors.map(getRandomColor),
|
||||
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>
|
||||
|
||||
@ -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 }) {
|
||||
const res = await axios.get(`https://api.github.com/repos/nuxt/nuxt.js/stats/commit_activity?access_token=${env.githubToken}`)
|
||||
async asyncData ({ env, $http, $dayjs }) {
|
||||
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',
|
||||
data: res.data.map(stat => stat.total)
|
||||
backgroundColor: '#41B38A',
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user