Merge branch 'chartjs'

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
-

package.json

@@ -15,10 +15,12 @@
     "@fortawesome/free-solid-svg-icons": "^5.5.0",
     "@fortawesome/vue-fontawesome": "^0.1.2",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "chart.js": "^2.7.3",
     "jquery": "^3.3.1",
     "js-yaml": "^3.12.0",
     "papaparse": "^4.6.2",
     "vue": "^2.5.17",
+    "vue-chartjs": "^3.4.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

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 {

yarn.lock

@@ -2185,6 +2185,29 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^2.7.3:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.3.tgz#cdb61618830bf216dc887e2f7b1b3c228b73c57e"
+  integrity sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  integrity sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  integrity sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
+
 check-types@^7.3.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
@@ -2394,6 +2417,11 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
+color-convert@^0.5.3, color-convert@~0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2401,11 +2429,6 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.3"
 
-color-convert@~0.5.0:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
-  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -6503,6 +6526,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+moment@^2.10.2:
+  version "2.22.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
+  integrity sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -10242,6 +10270,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-chartjs@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.4.0.tgz#669e4453be0676605fc9290b3b581867ccd15c88"
+  integrity sha512-uikAXl66g49rawH7Uto3gKh/7vxflcd5xyYbnQVGKSYEh9VI9JGMZ1KNPAEr+8ViRd2FX1hPDVevKBONK6v1fw==
+
 vue-cli-plugin-electron-builder@^1.0.0-rc.9:
   version "1.0.0-rc.9"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-electron-builder/-/vue-cli-plugin-electron-builder-1.0.0-rc.9.tgz#84143b36e05f8b550c44e5827f6d33bf2d9773fe"