Feat: split stats in 2 components caOnPeriod and caRepartition

src/components/graphs/RepartitionChart.vue

@@ -0,0 +1,69 @@
+<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>