Change bar color in statistics page

frontend/components/statistics/CategoryDistribution.vue

@@ -2,6 +2,7 @@
   <label-distribution
     title="Category Distribution"
     :distribution="distribution"
+    :color-mapping="colorMapping"
   />
 </template>
 
@@ -16,12 +17,15 @@ export default Vue.extend({
 
   data() {
     return {
-      distribution: {}
+      distribution: {},
+      colorMapping: {},
     }
   },
 
   async created() {
     this.distribution = await this.$services.statistics.fetchCategoryDistribution(this.$route.params.id)
+    const labels = await this.$services.categoryType.list(this.$route.params.id)
+    this.colorMapping = Object.fromEntries(labels.map((label) => [label.text, label.backgroundColor]))
   }
 })
-</script>
+</script>

frontend/components/statistics/LabelDistribution.vue

@@ -43,6 +43,10 @@ export default Vue.extend({
     distribution: {
       type: Object as PropType<Distribution>,
       required: true
+    },
+    colorMapping: {
+      type: Object,
+      default: () => {},
     }
   },
 
@@ -53,11 +57,12 @@ export default Vue.extend({
         const labels = Object.keys(this.distribution[user])
         labels.sort()
         const counts = labels.map((label) => this.distribution[user][label])
+        const colors = labels.map((label) => label in this.colorMapping ? this.colorMapping[label] : '#00d1b2')
         data[user] = {
           labels,
           datasets: [{
             title: this.title,
-            backgroundColor: '#00d1b2',
+            backgroundColor: colors,
             data: counts
           }]
         }

frontend/components/statistics/SpanDistribution.vue

@@ -2,6 +2,7 @@
   <label-distribution
     title="Span Distribution"
     :distribution="distribution"
+    :color-mapping="colorMapping"
   />
 </template>
 
@@ -16,12 +17,15 @@ export default Vue.extend({
 
   data() {
     return {
-      distribution: {}
+      distribution: {},
+      colorMapping: {},
     }
   },
 
   async created() {
     this.distribution = await this.$services.statistics.fetchSpanDistribution(this.$route.params.id)
+    const labels = await this.$services.spanType.list(this.$route.params.id)
+    this.colorMapping = Object.fromEntries(labels.map((label) => [label.text, label.backgroundColor]))
   }
 })
-</script>
+</script>