Feat: CA chart!!

package.json

@@ -13,6 +13,7 @@
   },
   "main": "background.js",
   "dependencies": {
+    "chart.js": "2.9.4",
     "core-js": "^3.6.5",
     "date-fns": "^2.23.0",
     "papaparse": "^5.3.1",

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>

yarn.lock

@@ -2774,6 +2774,29 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
@@ -2987,7 +3010,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -6723,6 +6746,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.10.2:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"