Feat: fake number in datas.csv and reset default in store

jsconfig.json

@@ -0,0 +1,5 @@
+"eslint.validate": [
+  "javascript",
+  "javascriptreact",
+  "vue"
+]

src/components/CreateMonth.vue

@@ -95,7 +95,8 @@ export default {
     .month-presentation {
         display: inline-flex;
         flex-direction: row;
-        background-color: palegreen;
+        box-shadow: 5px 5px 10px gray;
+        border-left: 1rem solid green;
         align-items: center;
         justify-content: space-between;
         border-radius: 10px;

src/components/MonthPresentation.vue

@@ -1,7 +1,17 @@
 <template>
-<div class="month-presentation">
+<div class="boxed month-presentation">
   <div class="date">
-    {{ TheDate }}
+    <div class="month">
+       {{ theMonth }} 
+    </div> 
+    <div class="year">
+       {{ theYear }} 
+    </div> 
+      <div>
+        <button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
+        <button class="validate" @click="save" v-show="editing"> Valider </button>
+        <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
+      </div>
   </div>
   <div id="display">
     <ul>
@@ -37,16 +47,12 @@
         </li>
     </ul>
   </div>
-  <div class="actions">
-    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
-    <button class="validate" @click="save" v-show="editing"> Valider </button>
-    <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
-  </div>
 </div>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
+import {  parseISO, format } from 'date-fns'
 export default {
   name: 'MonthPresentation',
   props: {
@@ -65,6 +71,15 @@ export default {
         this.monthCopy =  {...this.TheMonth}
       },
   computed: {
+      rawDate: function () {
+            return parseISO(this.TheDate, "yyyy-MM", new Date())
+      },
+      theMonth: function () {
+          return format(this.rawDate, "MMM", )
+      },
+      theYear: function () {
+          return format(this.rawDate, "YYY", )
+      },
   },
   methods: {
     ...mapActions('travail', {
@@ -92,21 +107,26 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .month-presentation {
+        /*
         display: inline-flex;
         flex-direction: row;
-        background-color: mintcream;
-        align-items: center;
-        justify-content: space-between;
+        */
+        display: grid;
+        grid-template-columns: 140px 6fr;
+
         width: 100%;
-        border-radius: 10px;
         }
     .month-presentation > * {
         margin: 20px;
     }
 
     .date {
-        font-size: 1.5em;
+        font-size: 1em;
         font-weight: bold;
+        border-right: 1px solid black;
+    }
+    .month{
+        font-size: 2em;
     }
 
     ul {
@@ -129,4 +149,11 @@ export default {
     .novisible {
         display: None;
     }
+    button {
+        margin-top: 5px;
+        padding: 4px;
+        font-size: 0.8em;
+        width: auto;
+
+    }
 </style>

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>

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>

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>

src/components/hightlights.vue

@@ -1,68 +1,72 @@
 <template>
-<div id="hightlights"> 
-    <div class="hightlight">
+<div class="hightlights"> 
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ ca }}</li>
+            <li>{{ ca }} €</li>
             <li>CA</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ caMean }}</li>
+            <li>{{ caMean }} €</li>
             <li>CA moyen</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <!--
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caTheo }}</li>
             <li>CA des séances effectuées</li>
         </ul>
     </div>
-    <div class="hightlight">
+    -->
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ caTheo - ca }}</li>
+            <li>{{ caUnFactured }} €</li>
             <li>Non facturé</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ remuneration }}</li>
+            <li>{{ remuneration }} €</li>
             <li>Rémunération</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ remunerationMean }}</li>
+            <li>{{ remunerationMean }} €</li>
             <li>Rémunération moyenne</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <!--
+    <div class="hightlight boxed">
         <ul>
             <li>{{ retrocession }}</li>
             <li>Rétrocession</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ retrocessionMean }}</li>
             <li>Rétrocession moyenne</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caPro }}</li>
             <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caPerso }}</li>
             <li> CA pour la partie perso</li>
         </ul>
     </div>
-    <div class="hightlight">
+    -->
+    <div class="hightlight boxed">
         <ul>
-            <li>{{ caPersoUntouch }}</li>
+            <li>{{ caPersoUntouch }} €</li>
             <li> CA perso non utilisé pour se rémunérer</li>
         </ul>
     </div>
@@ -97,16 +101,17 @@ export default {
         ...mapGetters('travail', {
             months: "months",
         }),
-        ca: function () {return caTotal(this.months)},
-        caMean: function () {return caMean(this.months)},
-        caTheo: function () {return caTheo(this.months)},
-        remuneration: function () {return remuneration(this.months)},
-        remunerationMean: function () {return remunerationMean(this.months)},
-        retrocession: function () {return retrocession(this.months)},
-        retrocessionMean: function () {return retrocessionMean(this.months)},
-        caPro: function () {return caPro(this.months, this.caProPercentage)},
-        caPerso: function () {return caPerso(this.months, this.caProPercentage)},
-        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage)},
+        ca: function () {return caTotal(this.months).toLocaleString()},
+        caMean: function () {return caMean(this.months).toLocaleString()},
+        caTheo: function () {return caTheo(this.months).toLocaleString()},
+        caUnFactured: function () {return (caTheo(this.months) - caTotal(this.months)).toLocaleString()},
+        remuneration: function () {return remuneration(this.months).toLocaleString()},
+        remunerationMean: function () {return remunerationMean(this.months).toLocaleString()},
+        retrocession: function () {return retrocession(this.months).toLocaleString()},
+        retrocessionMean: function () {return retrocessionMean(this.months).toLocaleString()},
+        caPro: function () {return caPro(this.months, this.caProPercentage).toLocaleString()},
+        caPerso: function () {return caPerso(this.months, this.caProPercentage).toLocaleString()},
+        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
 
       },
       mounted () {
@@ -117,4 +122,27 @@ export default {
 </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>

src/components/nav.vue

@@ -1,8 +1,11 @@
 <template>
-  <nav>
-  <router-link to="/"> Home </router-link>
-  <router-link to="/config"> Config </router-link>
-  </nav>
+    <h1>Sous Margot</h1>
+    <!--
+    <nav>
+        <router-link to="/"> Home </router-link>
+        <router-link to="/config"> Config </router-link>
+    </nav>
+    -->
 </template>
 
 <script>
@@ -15,7 +18,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-nav {
-    background-color: green;
-}
 </style>

src/lib/months.js

@@ -22,10 +22,10 @@ export function caTotal (months) {
 }
 
 export function caMean (months) {
-    return caTotal(months) / count(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(

src/store/travail/index.js

@@ -15,54 +15,54 @@ const travail = {
                 remuneration: 0, // rémunération décidée
             },
             months: {
-                "2021-01": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 6747, // ca au moment de la rétrocession
-                    ca_react: null, // ca réactualisé
-                    retro: 893, // montant de la rétrocession
-                    remuneration: 2000, // rémunération décidée
-                },
-                "2021-02": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 5183, // ca au moment de la rétrocession
-                    ca_react: null, // ca réactualisé
-                    retro: 665, // montant de la rétrocession
-                    remuneration: 1500, // rémunération décidée
-                },
-                "2021-03": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 7088, // ca au moment de la rétrocession
-                    ca_react: null, // ca réactualisé
-                    retro: 855, // montant de la rétrocession
-                    remuneration: 2000, // rémunération décidée
-                },
-                "2021-04": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 4194, // ca au moment de la rétrocession
-                    ca_react: 5630, // ca réactualisé
-                    retro: 627, // montant de la rétrocession
-                    remuneration: 2000, // rémunération décidée
-                },
-                "2021-05": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 5564, // ca au moment de la rétrocession
-                    ca_react: 6335, // ca réactualisé
-                    retro: 699, // montant de la rétrocession
-                    remuneration: 2800, // rémunération décidée
-                },
-                "2021-06": {
-                    ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: null, // Nombre de séances effectuées sur le mois
-                    ca_retro: 5442, // ca au moment de la rétrocession
-                    ca_react: 6335, // ca réactualisé
-                    retro: 638, // montant de la rétrocession
-                    remuneration: 2800, // rémunération décidée
-                },
+                // "2021-01": {
+                //     ca_theo: null, // ca théorique basé sur les séances effectuées
+                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
+                //     ca_retro: 6747, // ca au moment de la rétrocession
+                //     ca_react: null, // ca réactualisé
+                //     retro: 893, // montant de la rétrocession
+                //     remuneration: 2000, // rémunération décidée
+                // },
+                // "2021-02": {
+                //     ca_theo: null, // ca théorique basé sur les séances effectuées
+                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
+                //     ca_retro: 5183, // ca au moment de la rétrocession
+                //     ca_react: null, // ca réactualisé
+                //     retro: 665, // montant de la rétrocession
+                //     remuneration: 1500, // rémunération décidée
+                // },
+                // "2021-03": {
+                //     ca_theo: null, // ca théorique basé sur les séances effectuées
+                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
+                //     ca_retro: 7088, // ca au moment de la rétrocession
+                //     ca_react: null, // ca réactualisé
+                //     retro: 855, // montant de la rétrocession
+                //     remuneration: 2000, // rémunération décidée
+                // },
+                // "2021-04": {
+                //     ca_theo: null, // ca théorique basé sur les séances effectuées
+                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
+                //     ca_retro: 4194, // ca au moment de la rétrocession
+                //     ca_react: 5630, // ca réactualisé
+                //     retro: 627, // montant de la rétrocession
+                //     remuneration: 2000, // rémunération décidée
+                // },
+                // "2021-05": {
+                //     ca_theo: null, // ca théorique basé sur les séances effectuées
+                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
+                //     ca_retro: 5564, // ca au moment de la rétrocession
+                //     ca_react: 6335, // ca réactualisé
+                //     retro: 699, // montant de la rétrocession
+                //     remuneration: 2800, // rémunération décidée
+                // },
+                // "2021-06": {
+                //     ca_theo: null, // ca théorique basé sur les séances effectuées
+                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
+                //     ca_retro: 5442, // ca au moment de la rétrocession
+                //     ca_react: 6335, // ca réactualisé
+                //     retro: 638, // montant de la rétrocession
+                //     remuneration: 2800, // rémunération décidée
+                // },
             },
             range: {
                 start: "2021-01",

src/style.css

@@ -1,3 +1,6 @@
+body {
+    background-color: whitesmoke;
+}
 
 .actions {
     display: inline-flex;
@@ -6,22 +9,75 @@
 }
 
 button {
-    border: none;
     color: white;
     padding: 15px 32px;
+    box-shadow: 1px 1px 2px gray;
     text-align: center;
     display: inline-block;
     width: 100%;
     font-size: 16px;
     border-radius: 5px;
-    color: black;
+    background-color: white;
+    transition: all 0.2s ease-out;
     }
+button:hover {
+    transition: all 0.2s ease-out;
+}
+
 .validate {
-  background-color: green;
+    border: 2px solid green;
+    color: green;
+}
+.validate:hover {
+    background-color: green;
+    color: white;
 }
 .cancel {
+    border: 2px solid red;
+    color: red;
+}
+.cancel:hover {
   background-color: red;
+  color: white;
 }
 .edit {
-  background-color: orange;
+    border: 2px solid orange;
+    color: orange;
+}
+.edit:hover {
+  background-color: orange;
+  color: white;
+}
+
+.boxed {
+    box-shadow: 2px 2px 5px gray;
+    border-left: 1rem solid black;
+    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;
 }

src/views/home.vue

@@ -1,18 +1,15 @@
 <template>
-<h1>Home</h1>
-<revenus-chart/>
 <section id="selector">
    <month-selector/> 
 </section>
 <div id="content">
     <section id="months">
-        <h2> Mois </h2>
         <create-month/>
         <months-list/>
     </section>
     <section id="stats">
-        <h2>Résumé</h2>
-        <highlights/>
+        <ca-on-period/>
+        <ca-repartition/>
     </section>
 </div>
 </template>
@@ -22,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 {}
@@ -44,22 +41,25 @@ export default {
         }),
     },
     mounted () {
-        //this.loadMonths()
+        this.loadMonths()
     }, 
 }
 </script>
 
 <style scoped>
+#selector {
+    display: none;
+    background-color: gray;
+    padding: 10px;
+}
 #content {
-    display: inline-flex;
-    flex-direction: row;
-    background-color: red;
+    display: grid;
+    grid-template-columns: 1fr 3fr;
     margin: 0;
 }
 #content > * {
-    margin: 10px;
+    margin: 20px;
 }
-#months {
-    flex-basis: 60%;
+#stats {
 }
 </style>

userDir/datas.csv

@@ -1,7 +1,8 @@
 ca_theo,nbr_seances,ca_retro,ca_react,retro,remuneration,date
-,,6747,,893,2000,2021-01
-,,5183,,665,1500,2021-02
-,,7088,,855,2000,2021-03
-,,4194,5630,627,2000,2021-04
-,,5564,6335,699,2800,2021-05
-,,5442,6335,638,2800,2021-06
+7000,,6747,,893,2000,2021-01
+5200,,5183,,665,1500,2021-02
+7100,,7088,,855,2000,2021-03
+5700,,4194,5630,627,2000,2021-04
+6500,,5564,6335,699,2800,2021-05
+6725,235,5442,6376,638,2800,2021-06
+2176,81,1274,,172,2000,2021-07