70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<canvas id="repartition-chart"></canvas>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from 'chart.js'
|
|
import { mapGetters } from 'vuex'
|
|
import {
|
|
notInvoiced,
|
|
caPro,
|
|
remuneration,
|
|
retrocession,
|
|
caPersoUntouch,
|
|
} from '../../lib/months'
|
|
|
|
export default {
|
|
name: 'RepartitionChart',
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
watch: {
|
|
months: function () {
|
|
const ctx = document.getElementById('repartition-chart');
|
|
new Chart(ctx, this.graphDatas);
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters('config', {
|
|
caProPercentage: 'caProPercentage',
|
|
}),
|
|
...mapGetters('travail', {
|
|
months: "months",
|
|
}),
|
|
graphDatas: function () {
|
|
var datas = {
|
|
type: "pie",
|
|
data: {
|
|
labels: ['Partie pro', 'Non facturé', 'Retrocession', 'Salaire', '13e mois'],
|
|
datasets: [
|
|
{
|
|
label: "Difference CA perso et remuneration",
|
|
data: [
|
|
caPro(this.months, this.caProPercentage),
|
|
notInvoiced(this.months),
|
|
retrocession(this.months),
|
|
remuneration(this.months),
|
|
caPersoUntouch(this.months, this.caProPercentage),
|
|
],
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
legend: {position: 'right'},
|
|
}
|
|
}
|
|
return datas
|
|
},
|
|
},
|
|
methods: {
|
|
},
|
|
mounted() {
|
|
const ctx = document.getElementById('repartition-chart');
|
|
new Chart(ctx, this.graphDatas);
|
|
}
|
|
}
|
|
</script>
|