From 2212ff4afe550a10b521258451fc5fe32d52d2f9 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Thu, 12 Aug 2021 06:15:36 +0200
Subject: [PATCH] Feat: split stats in 2 components caOnPeriod and
 caRepartition

---
 src/components/caOnPeriod.vue              | 86 ++++++++++++++++++++++
 src/components/caRepartition.vue           | 66 +++++++++++++++++
 src/components/graphs/RepartitionChart.vue | 69 +++++++++++++++++
 src/lib/months.js                          |  7 +-
 src/style.css                              | 26 +++++++
 src/views/home.vue                         | 14 ++--
 6 files changed, 259 insertions(+), 9 deletions(-)
 create mode 100644 src/components/caOnPeriod.vue
 create mode 100644 src/components/caRepartition.vue
 create mode 100644 src/components/graphs/RepartitionChart.vue

diff --git a/src/components/caOnPeriod.vue b/src/components/caOnPeriod.vue
new file mode 100644
index 0000000..4e54c99
--- /dev/null
+++ b/src/components/caOnPeriod.vue
@@ -0,0 +1,86 @@
+<template>
+<div class="hightlights"> 
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ ca }} €</li>
+            <li>CA</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ remuneration }} €</li>
+            <li>Rémunération</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caPersoUntouch }} €</li>
+            <li>13e mois</li>
+        </ul>
+    </div>
+</div>
+<revenus-chart/>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { caTotal,
+    caMean,
+    remuneration,
+    caPersoUntouch 
+} from '../lib/months'
+import RevenusChart from '../components/graphs/RevenusChart.vue'
+
+export default {
+    name: 'caOnPeriod',
+    components: {
+        RevenusChart: RevenusChart,
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+        ca: function () {return caTotal(this.months).toLocaleString()},
+        caMean: function () {return caMean(this.months).toLocaleString()},
+        remuneration: function () {return remuneration(this.months).toLocaleString()},
+        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
+
+      },
+      mounted () {
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+.hightlights {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+.hightlight > ul{
+    list-style-type: none;
+    display: flex;
+    flex-flow: column wrap;
+    padding-inline-start: 0;
+}
+.hightlight > ul > li {
+    margin: 5px;
+    flex-direction: column-reverse;
+}
+.hightlight > ul  :first-child{
+    font-size: 3rem;
+    font-weight: bold;
+    text-align: center;
+}
+.hightlight > ul  :last-child{
+    text-align: end;
+}
+</style>
diff --git a/src/components/caRepartition.vue b/src/components/caRepartition.vue
new file mode 100644
index 0000000..4d059c9
--- /dev/null
+++ b/src/components/caRepartition.vue
@@ -0,0 +1,66 @@
+<template>
+<div class="hightlights"> 
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ caTheo }} €</li>
+            <li>CA "séances effectuées"</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ notInvoiced }} €</li>
+            <li>Non facturé</li>
+        </ul>
+    </div>
+    <div class="hightlight boxed">
+        <ul>
+            <li>{{ retrocession }} €</li>
+            <li>Rétrocession</li>
+        </ul>
+    </div>
+</div>
+<repartition-chart/>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { 
+    caTheo,
+    notInvoiced,
+    retrocession,
+} from '../lib/months'
+import RepartitionChart from './graphs/RepartitionChart.vue'
+
+export default {
+    name: 'caRepartition',
+    components: {
+        RepartitionChart: RepartitionChart,
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
+        ...mapGetters('travail', {
+            months: "months",
+        }),
+        caTheo: function () {return caTheo(this.months).toLocaleString()},
+        notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
+        retrocession: function () {return retrocession(this.months).toLocaleString()},
+
+      },
+      mounted () {
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+.hightlights{
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+</style>
diff --git a/src/components/graphs/RepartitionChart.vue b/src/components/graphs/RepartitionChart.vue
new file mode 100644
index 0000000..a56722c
--- /dev/null
+++ b/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>
diff --git a/src/lib/months.js b/src/lib/months.js
index 44e7e88..5f13a37 100644
--- a/src/lib/months.js
+++ b/src/lib/months.js
@@ -22,10 +22,10 @@ export function caTotal (months) {
 }
 
 export function caMean (months) {
+    // Mean of CA
     return Math.floor(caTotal(months) / count(months))
 }
 
-
 export function caTheo (months) {
     // Total theorical CA
     return Object.values(months).map(a => a.ca_theo).reduce(
@@ -34,6 +34,11 @@ export function caTheo (months) {
     )
 }
 
+export function notInvoiced (months) {
+    // Total of not invoiced sessions 
+    return caTheo(months) - caTotal(months)
+}
+
 export function remuneration (months) {
     // Total remuneration
     return Object.values(months).map(a => a.remuneration).reduce(
diff --git a/src/style.css b/src/style.css
index 061518e..d622c90 100644
--- a/src/style.css
+++ b/src/style.css
@@ -55,3 +55,29 @@ button:hover {
     border-radius: 10px;
     background-color: white;
 }
+
+.hightlights {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+.hightlight > ul{
+    list-style-type: none;
+    display: flex;
+    flex-flow: column wrap;
+    padding-inline-start: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+.hightlight > ul > li {
+    margin: 5px;
+    flex-direction: column-reverse;
+}
+.hightlight > ul  :first-child{
+    font-size: 3rem;
+    font-weight: bold;
+    text-align: center;
+}
+.hightlight > ul  :last-child{
+    text-align: end;
+}
diff --git a/src/views/home.vue b/src/views/home.vue
index ee56145..ec2931f 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -8,8 +8,8 @@
         <months-list/>
     </section>
     <section id="stats">
-        <highlights/>
-        <revenus-chart/>
+        <ca-on-period/>
+        <ca-repartition/>
     </section>
 </div>
 </template>
@@ -19,16 +19,16 @@ import { mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
 import MonthSelector from '../components/monthSelector.vue'
-import Highlights from '../components/hightlights.vue'
-import RevenusChart from '../components/graphs/RevenusChart.vue'
+import caOnPeriod from '../components/caOnPeriod.vue'
+import caRepartition from '../components/caRepartition.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
-        highlights: Highlights,
-        RevenusChart: RevenusChart,
+        caOnPeriod: caOnPeriod,
+        caRepartition: caRepartition,
     },
     data () {
         return {}
@@ -60,8 +60,6 @@ export default {
 #content > * {
     margin: 20px;
 }
-#months {
-}
 #stats {
 }
 </style>