Feat: CA chart!!

src/components/graphs/RevenusChart.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <canvas id="revenus-chart"></canvas>
+  </div>
+</template>
+
+<script>
+import Chart from 'chart.js'
+import { mapGetters } from 'vuex'
+import { monthCA } 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('travail', {
+            months: "months",
+        }),
+        graphDatas: function () {
+            var datas = {
+                type: "bar",
+                data: {
+                    labels: Object.keys(this.months),
+                    datasets: [ 
+                        {
+                            label: "CA",
+                            data: Object.values(this.months).map(a => monthCA(a)),
+                            backgroundColor: "rgba(54,73,93,.5)",
+                            borderColor: "#36495d",
+                            borderWidth: 3
+                        },
+                    ],
+                },
+                options: {
+                    responsive: true,
+                    lineTension: 1,
+                    scales: {
+                      yAxes: [
+                        {
+                          ticks: {
+                            beginAtZero: true,
+                            padding: 25
+                          }
+                        }
+                      ]
+                    }
+                }
+            }
+            return datas
+        },
+    },
+    methods: {
+    },
+    mounted() {
+        const ctx = document.getElementById('revenus-chart');
+        new Chart(ctx, this.graphDatas);
+    }
+}
+</script>

src/lib/months.js

@@ -1,5 +1,5 @@
 
-function monthCA(month) {
+export function monthCA(month) {
     // Extract the CA of the month
     if (month.ca_react) {
         return month.ca_react

src/views/home.vue

@@ -1,5 +1,6 @@
 <template>
 <h1>Home</h1>
+<revenus-chart/>
 <section id="selector">
    <month-selector/> 
 </section>
@@ -22,6 +23,7 @@ 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: {
@@ -29,6 +31,7 @@ export default {
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
         highlights: Highlights,
+        RevenusChart: RevenusChart,
     },
     data () {
         return {}
@@ -41,7 +44,7 @@ export default {
         }),
     },
     mounted () {
-        this.loadMonths()
+        //this.loadMonths()
     }, 
 }
 </script>