Merge branch 'chartjs'

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(
-        -this.filter_rows()
-          .map(x => parseFloat(x.Montant))
-          .reduce((sum, x) => sum + x, 0)
-      )
+      return total(this.filter_rows())
     },
     count () {
     }

src/components/charjs_donut.vue

@@ -0,0 +1,17 @@
+<script>
+import { Doughnut, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  name: 'pie',
+  extends: Doughnut,
+  mixins: [reactiveProp],  
+  props: ['chartData', 'options'],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+}
+</script>
+
+<style scope>
+</style>

src/components/postes_comparison.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="container">
+    <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',
+  components: {
+    'pie': pie
+  },
+  data () {
+    return {
+      selected_tags: [
+        'virements',
+        'cash',
+        'autoroute',
+        'essence',
+        'courses',
+        'sans tags'
+      ],
+      options: {
+        responsive: true,
+        maintainAspectRatio: false
+      }
+    }
+  },
+  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: {
+  }
+}
+
+</script>
+
+<style scope>
+.container {
+  position: relative;
+  height: 40vh;
+  width: 80vw;
+}
+</style>

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)
+}

src/views/home.vue

@@ -21,6 +21,8 @@
        <box @click.native="set_postes_filter(['virements'])" postename="virements"></box>
      </b-card-group>
 
+     <postes-comparison></postes-comparison>
+
     <b-table striped hover :items="filtered_rows" :fields='fields'>
       <template slot="tags" slot-scope="data">
         <div v-for="tag in data.item.tags">
@@ -30,17 +32,21 @@
         </div>
       </template>
     </b-table>
+
+>>>>>>> chartjs
   </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import box from '../components/box'
+import postesComparison from '../components/postes_comparison'
 
 export default {
   name: 'home',
   components: {
-    box: box
+    box: box,
+    postesComparison: postesComparison
   },
   data () {
     return {