86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
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>
|