<template>
  <div>
    <canvas id="revenus-chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'
import { mapGetters } from 'vuex'
import { monthCA, caPersoUntouch, caPerso, remuneration } 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 => caPerso({bar: a}, this.caProPercentage) - remuneration({bar:a})),
                            backgroundColor: "red",
                            borderColor: "light-red",
                            borderWidth: 3
                        },
                        {
                            type: "bar",
                            label: "CA",
                            data: Object.values(this.months).map(a => monthCA(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 => caPersoUntouch(a, this.caProPercentage))
        },
    },
    methods: {
    },
    mounted() {
        const ctx = document.getElementById('revenus-chart');
        new Chart(ctx, this.graphDatas);
    }
}
</script>
