doccano/frontend/components/metrics/LabelDistribution.vue

<template>
  <v-card>
    <v-card-title v-text="title" />
    <v-divider />
    <v-tabs show-arrows>
      <v-tab v-for="(value, user) in chartJSFormat" :key="user" class="text-capitalize">
        {{ user }}
      </v-tab>
      <v-tab-item v-for="(value, user) in chartJSFormat" :key="user">
        <v-card-text>
          <bar-chart :chart-data="value" />
        </v-card-text>
      </v-tab-item>
    </v-tabs>
  </v-card>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import BarChart from '@/components/metrics/ChartBar.vue'
import { Distribution } from '~/domain/models/metrics/metrics'
import { LabelDTO } from '~/services/application/label/labelData'

export default Vue.extend({
  components: {
    BarChart
  },

  props: {
    title: {
      type: String,
      required: true,
      default: 'Distribution'
    },
    distribution: {
      type: Object as PropType<Distribution>,
      required: true
    },
    labelTypes: {
      type: Array as PropType<LabelDTO[]>,
      default: () => [],
      required: true
    }
  },

  computed: {
    colorMapping(): { [text: string]: string } {
      return Object.fromEntries(
        this.labelTypes.map((labelType) => [labelType.text, labelType.backgroundColor])
      )
    },

    chartJSFormat(): any {
      const data: { [user: string]: { labels: string[]; datasets: any[] } } = {}
      for (const user in this.distribution) {
        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: colors,
              data: counts
            }
          ]
        }
      }
      return data
    }
  }
})
</script>