Feat: Use tag color in Doughnut chart

src/components/tag_config.vue

@@ -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>

src/components/tags_comparison.vue

@@ -26,7 +26,10 @@ export default {
       ],
       options: {
         responsive: true,
-        maintainAspectRatio: false
+        maintainAspectRatio: false,
+        legend: {
+          position: 'left'
+        }
       }
     }
   },
@@ -34,13 +37,23 @@ export default {
     ...mapGetters('datas', [
       'tag_filter_rows'
     ]),
+    ...mapGetters('config', [
+      'tag'
+    ]),
     chartdata () {
       return {
         labels: this.selected_tags,
         datasets: [
           {
             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'
+              }
+            })
           }
         ]
       }