add dynamic label for hide fields

frontend/src/components/Doughnut.vue

@@ -24,7 +24,7 @@
             :items="this.labels"
             attach
             chips
-            label="Hide fields"
+            :label="hideLabelsLabel"
             multiple
           ></v-select>
         </v-flex>
@@ -43,6 +43,17 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      myChart: {},
+      options: {},
+      colors: [],
+      chartId: "myChart",
+      displayLegend: true,
+      labels: [],
+      hideLabels: [],
+    }
+  },
   watch: {
     doughnutData(val) {
       this.updateChart();
@@ -54,16 +65,14 @@ export default {
       this.updateChartData();
     }
   },
-  data() {
-    return {
-      myChart: {},
-      options: {},
-      colors: [],
-      chartId: "myChart",
-      displayLegend: true,
-      labels: [],
-      hideLabels: [],
-    }
+  computed: {
+    hideLabelsLabel() {
+      if (Object.entries(this.doughnutData).length == 0) {
+        return "Hide fields";
+      } else {
+        return "Hide " + this.doughnutData.level;
+      }
+    },
   },
   mounted() {
     this.createChart(this.chartId);
@@ -84,13 +93,13 @@ export default {
       this.updateChartOptions();
       this.updateChartData();
     },
-    generateColorList() {
+    generateColorList() {  // # TODO get out of this and refactor -> return list of colors
       this.color = [];
       for (var i = 0; i<Object.keys(this.doughnutData.data).length; i++) {
         this.colors.push(this.generateColor())
       }
     },
-    generateColor() {
+    generateColor() {  // Same as above
       var letters = '0123456789ABCDEF';
       var color = '#';
       for (var i = 0; i < 6; i++) {