Feat: basic datafile

package.json

@@ -13,8 +13,10 @@
   },
   "main": "background.js",
   "dependencies": {
+    "chart.js": "2.9.4",
     "core-js": "^3.6.5",
     "date-fns": "^2.23.0",
+    "papaparse": "^5.3.1",
     "vls": "^0.7.4",
     "vue": "^3.0.0",
     "vue-router": "^4.0.8",

src/components/CreateMonth.vue

@@ -74,10 +74,14 @@ export default {
     ...mapActions('travail', {
         'createMonth': 'createMonth',
     }),
+    ...mapActions('config', {
+        'writeData': 'writeData',
+    }),
     save: function () {
         console.log("save")
         console.log(this.monthCopy)
         this.createMonth({date: this.monthDate, month: this.monthCopy})
+        this.writeData()
     },
     cancel: function () {
       this.monthCopy = this.theEmptyMonth

src/components/MonthPresentation.vue

@@ -69,12 +69,16 @@ export default {
   methods: {
     ...mapActions('travail', {
         'updateMonth': 'updateMonth',
+    }),
+    ...mapActions('config', {
+        'writeData': 'writeData',
     }),
       toggleEdit: function () {
           this.editing = !this.editing
           },
       save: function () {
           this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
+          this.writeData()
           this.toggleEdit()
           },
       cancel: function () {

src/components/graphs/RevenusChart.vue

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

src/components/hightlights.vue

@@ -48,11 +48,41 @@
             <li>Rétrocession moyenne</li>
         </ul>
     </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caPro }}</li>
+            <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caPerso }}</li>
+            <li> CA pour la partie perso</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caPersoUntouch }}</li>
+            <li> CA perso non utilisé pour se rémunérer</li>
+        </ul>
+    </div>
 </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { caTotal,
+    caMean,
+    caTheo,
+    remuneration,
+    remunerationMean,
+    retrocession,
+    retrocessionMean,
+    caPro,
+    caPerso,
+    caPersoUntouch 
+} from '../lib/months'
+
 export default {
     name: 'Hightlights',
     components: {
@@ -61,15 +91,25 @@ export default {
         return {}
         },
     computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
         ...mapGetters('travail', {
-            ca: "ca",
-            caMean: "caMean",
-            caTheo: "caTheo",
-            remuneration: "remuneration",
-            remunerationMean: "remunerationMean",
-            retrocession: "retrocession",
-            retrocessionMean: "retrocessionMean",
-        })
+            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)},
+
+      },
+      mounted () {
       },
       methods: {
       },

src/lib/months.js

@@ -0,0 +1,78 @@
+
+export function monthCA(month) {
+    // Extract the CA of the month
+    if (month.ca_react) {
+        return month.ca_react
+    } else {
+        return month.ca_retro
+    }
+}
+
+export function count (months) {
+    // Count how many months there are
+    return Object.keys(months).length
+}
+
+export function caTotal (months) {
+    // Total CA (ca_react if sets, ca_retro otherwise)
+    return Object.values(months).map(a => monthCA(a)).reduce(
+        (acc, v) => acc + v
+        ,0
+    )
+}
+
+export function caMean (months) {
+    return caTotal(months) / count(months)
+}
+
+
+export function caTheo (months) {
+    // Total theorical CA
+    return Object.values(months).map(a => a.ca_theo).reduce(
+        (acc, v) => acc + v,
+        0
+    )
+}
+
+export function remuneration (months) {
+    // Total remuneration
+    return Object.values(months).map(a => a.remuneration).reduce(
+        (acc, v) => acc + v,
+        0
+    )
+}
+
+export function remunerationMean (months) {
+    // Mean of remuneration
+    return Math.floor(remuneration(months) / count(months))
+}
+
+export function retrocession (months) {
+    // Total retrocession
+    return Object.values(months)
+        .map(a => a.retro)
+        .reduce(
+            (acc, v) => acc + v,
+            0
+        )
+}
+
+export function retrocessionMean (months) {
+    // Mean of retrocession
+    return Math.floor(retrocession(months) / count(months))
+}
+
+export function caPro (months, keepPercent) {
+    // Part of the CA to keep for professional use
+    return caTotal(months) * keepPercent
+}
+
+export function caPerso (months, keepPercent) {
+    // Part of the CA to keep for personal use
+    return caTotal(months) - caPro(months, keepPercent)
+}
+
+export function caPersoUntouch (months, keepPercent) {
+    // Part of the personnal use CA that haven't been use
+    return caPerso(months, keepPercent) - remuneration(months)
+}

src/store/config/index.js

@@ -0,0 +1,43 @@
+import path from 'path'
+import Papa from 'papaparse'
+import { writeFile } from 'fs'
+
+const config = {
+    namespaced: true,
+    state() {
+        return {
+            //userDir: '~/.config/sousmargot/',
+            userDir: './userDir/',
+            dataFile: 'datas.csv',
+            caProPercentage: 0.5,
+        }
+    },
+    getters: {
+        userDir (state) { return state.userDir },
+        dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
+        caProPercentage (state) { return state.caProPercentage },
+    },
+    mutations: {
+    },
+    actions: {
+        loadConfig (context) {
+            // load config file at  ~/.config/sousmargot/config.json
+            return context.state.userDir
+        },
+        writeData (context) {
+            // overwrite the dataFile with months datas
+            const months = context.rootGetters['travail/monthsAll']
+            const unpackMonths = Object.keys(months).map(k => {return { ...months[k], date: k}})
+            const csv = Papa.unparse(unpackMonths)
+            writeFile(context.getters.dataFilePath, csv, (err) => {
+                if (err)  {
+                    console.log(err) 
+                } else {
+                    console.log("Datas sauvegardées")
+                }
+            })
+        },
+    },
+}
+
+export default config

src/store/index.js

@@ -1,10 +1,12 @@
 import { createStore } from 'vuex'
 import travailStore from "./travail"
+import configStore from "./config"
 
 // Create a new store instance.
 const store = createStore({
     modules:{
         travail: travailStore,
+        config: configStore,
     }
 })
 

src/store/travail/index.js

@@ -1,10 +1,6 @@
-function monthCA(month) {
-    if (month.ca_react) {
-        return month.ca_react
-    } else {
-        return month.ca_retro
-    }
-}
+import { readFile } from 'fs'
+import Papa from 'papaparse'
+
 
 const travail = {
     namespaced: true,
@@ -87,12 +83,17 @@ const travail = {
         },
         months: (state, getters) => {
             // Get in range months
-            return Object.keys(state.months)
+            const a = Object.keys(state.months)
                 .filter(a => getters.MonthsDate.includes(a))
                 .reduce((acc, v) => {
                     acc[v] = state.months[v];
                     return acc;
                 }, {})
+            return a
+        },
+        monthsAll: (state) => {
+            // Get in range months
+            return state.months
         },
         getMonth: (state) => (date) => {
             return state.months[date]
@@ -101,63 +102,16 @@ const travail = {
             // Amount of mounts
             return Object.keys(getters.months).length 
         },
-        ca: (state, getters) => {
-            // Total CA (ca_react if sets, ca_retro otherwise)
-            return Object.values(getters.months).map(a => monthCA(a)).reduce(
-                (acc, v) => acc + v,
-                0
-            )
-        },
-        caMean: (state, getters) => {
-            // Mean of CA
-            return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
-                (acc, v) => acc + v,
-                0
-            ) / getters.count)
-        },
-        caTheo: (state, getters) => {
-            // Total theorical CA
-            return Object.values(getters.months).map(a => a.ca_theo).reduce(
-                (acc, v) => acc + v,
-                0
-            )
-        },
-        remuneration: (state, getters) => {
-            // Total remuneration
-            return Object.values(getters.months).map(a => a.remuneration).reduce(
-                (acc, v) => acc + v,
-                0
-            )
-        },
-        remunerationMean: (state, getters) => {
-            // Mean of remuneration
-            return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
-                (acc, v) => acc + v,
-                0
-            ) / getters.count)
-        },
-        retrocession: (state, getters) => {
-            // Total retrocession
-            return Object.values(getters.months)
-                .map(a => a.retro)
-                .reduce(
-                    (acc, v) => acc + v,
-                    0
-                )
-        },
-        retrocessionMean: (state, getters) => {
-            // Mean of retrocession
-            return Math.floor(
-                Object.values(getters.months)
-                .map(a => a.retro)
-                .reduce(
-                    (acc, v) => acc + v,
-                    0
-                ) / getters.count
-            )
-        },
     },
     mutations: {
+        cleanMonths (state) {
+            // erase months
+            state.months = []
+        },
+        importMonths(state, months) {
+            // overwrite months
+            state.months = months
+        },
         updateMonth(state, { date, month }) {
             state.months[date] = month
         },
@@ -169,6 +123,23 @@ const travail = {
         }, 
     },
     actions: {
+        cleanMonths (context) {
+            context.commit("cleanMonths")
+        },
+        loadMonths (context) {
+            // import all months from storage
+            readFile(context.rootGetters["config/dataFilePath"], (err, data) => {
+                if (err) throw err;
+                const months = Papa.parse(data.toString(), {header: true, dynamicTyping:true, skipEmptyLines:true})
+                    .data
+                    .reduce(
+                        (acc, el) => {
+                            acc[el.date] = el;
+                            return acc
+                        }, {})
+                context.commit("importMonths", months)
+            })
+        },
         updateMonth(context, { date, month }) {
             // update month's datas 
             if (date in context.state.months) {
@@ -180,9 +151,7 @@ const travail = {
         createMonth(context, { date, month }) {
             // Create a new month
             if (!(date in context.state.months)) {
-                console.log(date)
                 context.commit('createMonth', { date, month })
-                console.log(context.state.months)
             } else {
                 console.log("This month already exists")
             }
@@ -190,7 +159,6 @@ const travail = {
         setRange(context, range) {
             context.commit("setRange", range)
         },
-
     },
 }
 

src/views/home.vue

@@ -1,28 +1,29 @@
 <template>
 <h1>Home</h1>
+<revenus-chart/>
 <section id="selector">
-   <month-selector> 
-   </month-selector> 
+   <month-selector/> 
 </section>
 <div id="content">
     <section id="months">
         <h2> Mois </h2>
-        <create-month></create-month>
-        <months-list></months-list>
+        <create-month/>
+        <months-list/>
     </section>
     <section id="stats">
         <h2>Résumé</h2>
-        <highlights></highlights> 
+        <highlights/>
     </section>
 </div>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+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'
 export default {
     name: 'home',
     components: {
@@ -30,19 +31,21 @@ export default {
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
         highlights: Highlights,
-        },
+        RevenusChart: RevenusChart,
+    },
     data () {
         return {}
-        },
+    },
     computed: {
-        ...mapGetters({
-            count: "datas/count",
-        })
-      },
-      methods: {
-        ...mapActions({
-        })
-      },
+    },
+    methods: {
+        ...mapActions('travail', {
+            'loadMonths': 'loadMonths',
+        }),
+    },
+    mounted () {
+        //this.loadMonths()
+    }, 
 }
 </script>
 

userDir/datas.csv

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