comptes/src/components/tags_comparison.vue

<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',
        'train',
        'essence',
        'courses',
        'sans tags'
      ],
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          position: 'left'
        }
      }
    }
  },
  computed: {
    ...mapGetters('datas', [
      'tag_filter_rows'
    ]),
    ...mapGetters('config', [
      'tag'
    ]),
    chartdata () {
      return {
        labels: this.selected_tags,
        datasets: [
          {
            label: 'Dépenses',
            data: this.spendings,
            backgroundColor: this.selected_tags.map(t => {
              if (this.tag(t)) {
                return this.tag(t).color
              } else {
                return '#A9A9A9'
              }
            })
          }
        ]
      }
    },
    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)
      return tagsSpendings
    }
  },
  methods: {
  }
}

</script>

<style scope>
.container {
  position: relative;
  height: 420px;
}
</style>