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

<script>
import Chart from 'chart.js'
import { mapGetters } from 'vuex'
import { 
    notInvoiced,
    caPro, 
    caPersoUntouch,
    sum,
    } 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: [
                                sum(Object.values(this.months).map(a => caPro(a))),
                                sum(Object.values(this.months).map(a => notInvoiced(a))),
                                sum(Object.values(this.months).map(a => a.retro)),
                                sum(Object.values(this.months).map(a => a.remuneration)),
                                sum(Object.values(this.months).map(a => caPersoUntouch(a))),
                            ],
                        },
                    ],
                },
                options: {
                    legend: {position: 'right'},
                }
            }
            return datas
        },
    },
    methods: {
    },
    mounted() {
        const ctx = document.getElementById('repartition-chart');
        new Chart(ctx, this.graphDatas);
    }
}
</script>
