Feat: CA chart!!
This commit is contained in:
parent
a3cd3864ce
commit
cb39fbe5dd
@ -13,6 +13,7 @@
|
||||
},
|
||||
"main": "background.js",
|
||||
"dependencies": {
|
||||
"chart.js": "2.9.4",
|
||||
"core-js": "^3.6.5",
|
||||
"date-fns": "^2.23.0",
|
||||
"papaparse": "^5.3.1",
|
||||
|
||||
68
src/components/graphs/RevenusChart.vue
Normal file
68
src/components/graphs/RevenusChart.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<canvas id="revenus-chart"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { monthCA } from '../../lib/months'
|
||||
|
||||
export default {
|
||||
name: 'RevenusChart',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
months: function () {
|
||||
const ctx = document.getElementById('revenus-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('travail', {
|
||||
months: "months",
|
||||
}),
|
||||
graphDatas: function () {
|
||||
var datas = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: Object.keys(this.months),
|
||||
datasets: [
|
||||
{
|
||||
label: "CA",
|
||||
data: Object.values(this.months).map(a => monthCA(a)),
|
||||
backgroundColor: "rgba(54,73,93,.5)",
|
||||
borderColor: "#36495d",
|
||||
borderWidth: 3
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
lineTension: 1,
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
padding: 25
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
return datas
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
const ctx = document.getElementById('revenus-chart');
|
||||
new Chart(ctx, this.graphDatas);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
function monthCA(month) {
|
||||
export function monthCA(month) {
|
||||
// Extract the CA of the month
|
||||
if (month.ca_react) {
|
||||
return month.ca_react
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<h1>Home</h1>
|
||||
<revenus-chart/>
|
||||
<section id="selector">
|
||||
<month-selector/>
|
||||
</section>
|
||||
@ -22,6 +23,7 @@ import MonthsList from '../components/MonthsUl.vue'
|
||||
import CreateMonth from '../components/CreateMonth.vue'
|
||||
import MonthSelector from '../components/monthSelector.vue'
|
||||
import Highlights from '../components/hightlights.vue'
|
||||
import RevenusChart from '../components/graphs/RevenusChart.vue'
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
@ -29,6 +31,7 @@ export default {
|
||||
CreateMonth: CreateMonth,
|
||||
MonthSelector: MonthSelector,
|
||||
highlights: Highlights,
|
||||
RevenusChart: RevenusChart,
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
@ -41,7 +44,7 @@ export default {
|
||||
}),
|
||||
},
|
||||
mounted () {
|
||||
this.loadMonths()
|
||||
//this.loadMonths()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -2774,6 +2774,29 @@ chardet@^0.7.0:
|
||||
resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
|
||||
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
|
||||
|
||||
chart.js@2.9.4:
|
||||
version "2.9.4"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
|
||||
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
|
||||
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^1.9.3"
|
||||
|
||||
check-types@^8.0.3:
|
||||
version "8.0.3"
|
||||
resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
|
||||
@ -2987,7 +3010,7 @@ collection-visit@^1.0.0:
|
||||
map-visit "^1.0.0"
|
||||
object-visit "^1.0.0"
|
||||
|
||||
color-convert@^1.9.0, color-convert@^1.9.1:
|
||||
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
@ -6723,6 +6746,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
|
||||
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
|
||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
||||
|
||||
moment@^2.10.2:
|
||||
version "2.29.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user