Feat: Use tag color in Doughnut chart

This commit is contained in:
Bertrand Benjamin 2018-12-04 18:57:21 +01:00
parent bf788d2e9e
commit c924ce6ea6
2 changed files with 132 additions and 2 deletions

View File

@ -0,0 +1,117 @@
<template>
<div>
<div v-if="edit_mode" class="tag">
<div class="icon">
<font-awesome-icon :icon="edited_tag.icon" class="fa-2x"/>
<!--
Icône inconnue
-->
</div>
<div class="description">
<b-form-input type="text" v-model="edited_tag.name"></b-form-input>
<b-form-input type="text" v-model="edited_tag.icon"></b-form-input>
<b-form-input type="color" v-model="edited_tag.color"></b-form-input>
</div>
<div class="actions">
<b-button-group vertical v-if="editable">
<b-button @click="save()" >Sauver</b-button>
<b-button @click="toggleEdit()">Annuler</b-button>
</b-button-group>
</div>
</div>
<div v-else class="tag">
<div class="icon">
<font-awesome-icon :style="{ color: tag.color}" :icon="tag.icon" class="fa-2x"/>
</div>
<div class="description">
<h4>{{ tag.name }}</h4>
Mots clés: {{ tag.words.join(" - ") }}
</div>
<div class="actions">
<!--
<b-button-group vertical v-if="editable">
<b-button @click="toggleEdit()">Editer</b-button>
<b-button>Supprimer</b-button>
</b-button-group>
-->
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'tagConfig',
props: [
'tagname'
],
data () {
return {
default_tag: {
name: 'Tout',
variant: 'info',
icon: 'file-invoice-dollar'
},
edit_mode: false,
edited_tag: {}
}
},
computed: {
...mapGetters('config', {
getTag: 'tag'
}),
tag () {
if (this.tagname) {
return this.getTag(this.tagname)
} else {
return this.default_tag
}
},
editable () {
if (this.tagname) {
return true
} else {
return false
}
}
},
methods: {
...mapActions('config', [
'edit_tag'
]),
toggleEdit () {
this.edited_tag = { ...this.tag }
this.edit_mode = !this.edit_mode
},
save () {
this.edit_tag(this.edited_tag)
this.toggleEdit()
}
}
}
</script>
<style scoped>
.tag {
display: flex;
}
.icon {
flex: 10%;
align-self: center;
}
.description {
flex: 80%;
text-align: left;
align-self: center;
}
.actions {
flex: 10%;
text-align: left;
margin-left: 10px;
align-self: center;
}
</style>

View File

@ -26,7 +26,10 @@ export default {
], ],
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false maintainAspectRatio: false,
legend: {
position: 'left'
}
} }
} }
}, },
@ -34,13 +37,23 @@ export default {
...mapGetters('datas', [ ...mapGetters('datas', [
'tag_filter_rows' 'tag_filter_rows'
]), ]),
...mapGetters('config', [
'tag'
]),
chartdata () { chartdata () {
return { return {
labels: this.selected_tags, labels: this.selected_tags,
datasets: [ datasets: [
{ {
label: 'Dépenses', label: 'Dépenses',
data: this.spendings data: this.spendings,
backgroundColor: this.selected_tags.map(t => {
if (this.tag(t)) {
return this.tag(t).color
} else {
return '#A9A9A9'
}
})
} }
] ]
} }