95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<canvas id="revenus-chart"></canvas>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Chart from 'chart.js'
|
|
import { mapGetters } from 'vuex'
|
|
import { ca, caPersoUntouch, sum } 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('config', {
|
|
caProPercentage: 'caProPercentage',
|
|
}),
|
|
...mapGetters('travail', {
|
|
months: "months",
|
|
}),
|
|
graphDatas: function () {
|
|
var datas = {
|
|
type: "bar",
|
|
data: {
|
|
labels: Object.keys(this.months),
|
|
datasets: [
|
|
{
|
|
type: "bar",
|
|
label: "Difference CA perso et remuneration",
|
|
data: Object.values(this.months).map(a => caPersoUntouch(a)),
|
|
backgroundColor: "red",
|
|
borderColor: "light-red",
|
|
borderWidth: 3
|
|
},
|
|
{
|
|
type: "bar",
|
|
label: "CA",
|
|
data: Object.values(this.months).map(a => ca(a)),
|
|
backgroundColor: "rgba(54,73,93,.5)",
|
|
borderColor: "#36495d",
|
|
borderWidth: 3
|
|
},
|
|
{
|
|
type: "line",
|
|
label: "Banque",
|
|
data: this.untouchEvo,
|
|
backgroundColor: "rgba(71, 183,132,.5)",
|
|
borderColor: "#47b784",
|
|
borderWidth: 3
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
lineTension: 1,
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
padding: 25
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
return datas
|
|
},
|
|
untouchEvo: function () {
|
|
const cumulativeArray = (arr => value => {arr.push(value); return [...arr];})([]);
|
|
return Object.values(this.months)
|
|
.map(cumulativeArray)
|
|
.map(a => sum(a.map(m => caPersoUntouch(m))))
|
|
},
|
|
},
|
|
methods: {
|
|
},
|
|
mounted() {
|
|
const ctx = document.getElementById('revenus-chart');
|
|
new Chart(ctx, this.graphDatas);
|
|
}
|
|
}
|
|
</script>
|