Feat: Doughnut chart react on datas

config/config.yml

@@ -54,13 +54,3 @@ postes:
       - SALAISON CHALAM
       - INTERMARCHE
       - LA FERME DU COIN
-
-  bio: 
-    name: Bio
-    variant: success
-    icon: shopping-basket
-    words:
-      - BIOCOOP
-      - LA VIE CLAIRE
-      - MAISON VITALE
-

src/components/box.vue

@@ -17,6 +17,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import { total } from '../libs/data_processing'
 export default {
   name: 'box',
   props: [
@@ -56,11 +57,7 @@ export default {
       }
     },
     total () {
-      return Math.round(
+      return total(this.filter_rows())
-        -this.filter_rows()
-          .map(x => parseFloat(x.Montant))
-          .reduce((sum, x) => sum + x, 0)
-      )
     },
     count () {
     }

src/components/charjs_donut.vue

@@ -1,19 +1,17 @@
 <script>
-import { Doughnut } from 'vue-chartjs'
+import { Doughnut, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
 
 export default {
   name: 'pie',
   extends: Doughnut,
-  props: ['chartdata', 'options'],
+  mixins: [reactiveProp],  
+  props: ['chartData', 'options'],
   mounted () {
-    this.renderChart(this.chartdata, this.options)
+    this.renderChart(this.chartData, this.options)
   }
 }
 </script>
 
 <style scope>
-#doughnut-chart {
-  width: 100px;
-  height: 100px;
-}
 </style>

src/components/postes_comparison.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="container">
-    <pie :chartdata="data" :options="options"></pie>
+    <pie :chart-data="chartdata" :options="options" v-if="spendings[0] !== 0"></pie>
   </div>
 </template>
 
+
 <script>
 import pie from './charjs_donut'
+import { mapGetters } from 'vuex'
+import { total } from '../libs/data_processing'
 
 export default {
   name: 'postesComparison',
@@ -14,27 +17,47 @@ export default {
   },
   data () {
     return {
-      data: {
+      selected_tags: [
-        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+        'virements',
-        datasets: [
+        'cash',
-          {
+        'autoroute',
-            label: "Population (millions)",
+        'essence',
-            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+        'courses',
-            data: [2478,5267,734,784,433]
+        'sans tags'
-          }
+      ],
-        ]
-      },
       options: {
         responsive: true,
-        maintainAspectRatio: false,
+        maintainAspectRatio: false
-        title: {
-          display: true,
-          text: 'Predicted world population (millions) in 2050'
-        }
       }
     }
   },
   computed: {
+    ...mapGetters('datas', [
+      'tag_filter_rows'
+    ]),
+    chartdata () {
+      return {
+        labels: this.selected_tags,
+        datasets: [
+          {
+            label: "Dépenses",
+            data: this.spendings
+          }
+        ]
+      }
+    },
+    spendings () {
+      var tagsSpendings = this.selected_tags.map(tag => {
+        if (tag) {
+          return total(this.tag_filter_rows([tag]))
+        } else {
+          return 0
+        }
+      })
+      tagsSpendings[tagsSpendings.length - 1] = total(this.tag_filter_rows([])) - tagsSpendings.reduce((sum, a) => sum + a, 0)
+      console.log(tagsSpendings)
+      return tagsSpendings
+    }
   },
   methods: {
   }

src/libs/data_processing.js

@@ -25,3 +25,8 @@ function strContains (string, words, invert) {
   }
 }
 
+export function total (row, field='Montant') {
+  var sum = row.map(x => parseFloat(x[field]))
+    .reduce((sum, x) => sum + x, 0)
+  return Math.round(sum)
+}