Change the prop name from labels to labelTypes

frontend/components/metrics/CategoryDistribution.vue

@@ -1,31 +0,0 @@
-<template>
-  <label-distribution
-    title="Category Distribution"
-    :distribution="distribution"
-    :labels="labels"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LabelDistribution from './LabelDistribution.vue'
-import { LabelDTO } from '~/services/application/label/labelData'
-
-export default Vue.extend({
-  components: {
-    LabelDistribution
-  },
-
-  data() {
-    return {
-      distribution: {},
-      labels: [] as LabelDTO[],
-    }
-  },
-
-  async created() {
-    this.distribution = await this.$services.metrics.fetchCategoryDistribution(this.$route.params.id)
-    this.labels = await this.$services.categoryType.list(this.$route.params.id)
-  }
-})
-</script>

frontend/components/metrics/LabelDistribution.vue

@@ -45,7 +45,7 @@ export default Vue.extend({
       type: Object as PropType<Distribution>,
       required: true
     },
-    labels: {
+    labelTypes: {
       type: Array as PropType<LabelDTO[]>,
       default: () => [],
       required: true,
@@ -54,7 +54,7 @@ export default Vue.extend({
 
   computed: {
     colorMapping(): {[text: string]: string} {
-      return Object.fromEntries(this.labels.map((label) => [label.text, label.backgroundColor]))
+      return Object.fromEntries(this.labelTypes.map((labelType) => [labelType.text, labelType.backgroundColor]))
     },
 
     chartJSFormat(): any {

frontend/components/metrics/RelationDistribution.vue

@@ -1,31 +0,0 @@
-<template>
-  <label-distribution
-    title="Relation Distribution"
-    :distribution="distribution"
-    :labels="labels"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LabelDistribution from './LabelDistribution.vue'
-import { LabelDTO } from '~/services/application/label/labelData'
-
-export default Vue.extend({
-  components: {
-    LabelDistribution
-  },
-
-  data() {
-    return {
-      distribution: {},
-      labels: [] as LabelDTO[],
-    }
-  },
-
-  async created() {
-    this.distribution = await this.$services.metrics.fetchRelationDistribution(this.$route.params.id)
-    this.labels = await this.$services.relationType.list(this.$route.params.id)
-  }
-})
-</script>

frontend/components/metrics/SpanDistribution.vue

@@ -1,31 +0,0 @@
-<template>
-  <label-distribution
-    title="Span Distribution"
-    :distribution="distribution"
-    :labels="labels"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LabelDistribution from './LabelDistribution.vue'
-import { LabelDTO } from '~/services/application/label/labelData'
-
-export default Vue.extend({
-  components: {
-    LabelDistribution
-  },
-
-  data() {
-    return {
-      distribution: {},
-      labels: [] as LabelDTO[],
-    }
-  },
-
-  async created() {
-    this.distribution = await this.$services.metrics.fetchSpanDistribution(this.$route.params.id)
-    this.labels = await this.$services.spanType.list(this.$route.params.id)
-  }
-})
-</script>

frontend/pages/projects/_id/metrics/index.vue

@@ -7,21 +7,21 @@
       <label-distribution
         title="Category Distribution"
         :distribution="categoryDistribution"
-        :labels="categoryTypes"
+        :label-types="categoryTypes"
       />
     </v-col>
     <v-col v-if="!!project.hasSpan" cols="12">
       <label-distribution
         title="Span Distribution"
         :distribution="spanDistribution"
-        :labels="spanTypes"
+        :label-types="spanTypes"
       />
     </v-col>
     <v-col v-if="!!project.useRelation" cols="12">
       <label-distribution
         title="Relation Distribution"
         :distribution="relationDistribution"
-        :labels="relationTypes"
+        :label-types="relationTypes"
       />
     </v-col>
   </v-row>