Feat(Tags): transform graph_tags_comparison legend

src/components/graph_tags_comparison.vue

@@ -1,6 +1,16 @@
 <template>
-  <div class="container">
+  <div>
-    <pie :chart-data="chartdata" :options="options" v-if="spendings[0] !== 0"></pie>
+    <div class="container">
+      <pie :chart-data="chartdata" :options="options" v-if="spendings[0] !== 0"></pie>
+    </div>
+    <div class="text-center">
+      <b-button-group size="sm">
+        <b-button v-for="tag in selected_tags"
+                  :style="{'background-color': backgroundColor(tag)}">
+          {{ tag }}
+        </b-button>
+      </b-button-group>
+    </div>
   </div>
 </template>
 
@@ -20,6 +30,7 @@ export default {
         responsive: true,
         maintainAspectRatio: false,
         legend: {
+          display: false,
           position: 'left'
         }
       }
@@ -46,11 +57,7 @@ export default {
             label: 'Dépenses',
             data: this.spendings,
             backgroundColor: this.selected_tags.map(t => {
-              if (this.tag(t)) {
+              return this.backgroundColor(t)
-                return this.tag(t).color
-              } else {
-                return '#A9A9A9'
-              }
             })
           }
         ]
@@ -69,6 +76,13 @@ export default {
     }
   },
   methods: {
+    backgroundColor (t) {
+      if (this.tag(t)) {
+        return this.tag(t).color
+      } else {
+        return '#A9A9A9'
+      }
+    }
   }
 }
 

src/views/home.vue

@@ -20,8 +20,10 @@
             </b-row>
         </b-container>
 
-        <b-card-group deck class="mb-3" v-for="categorie in categories">
+        <b-card-group deck class="mb-3">
+            <div v-for="categorie in categories">
             <card-categorie @click.native="set_categories_filter([categorie.name])" :categoriename="categorie.name"></card-categorie>
+            </div>
         </b-card-group>
 
         <tags-comparison></tags-comparison>