Merge pull request #1713 from doccano/enhancement/removeDuplicationOnDistributionComponent

[Enhancement] Remove duplication on distribution component

frontend/components/metrics/CategoryDistribution.vue

@@ -1,31 +0,0 @@
-<template>
-  <label-distribution
-    title="Category Distribution"
-    :distribution="distribution"
-    :color-mapping="colorMapping"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LabelDistribution from './LabelDistribution.vue'
-
-export default Vue.extend({
-  components: {
-    LabelDistribution
-  },
-
-  data() {
-    return {
-      distribution: {},
-      colorMapping: {},
-    }
-  },
-
-  async created() {
-    this.distribution = await this.$services.metrics.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>

frontend/components/metrics/LabelDistribution.vue

@@ -28,6 +28,7 @@
 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: {
@@ -44,13 +45,18 @@ export default Vue.extend({
       type: Object as PropType<Distribution>,
       required: true
     },
-    colorMapping: {
-      type: Object,
-      default: () => {},
-    }
+    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) {

frontend/components/metrics/RelationDistribution.vue

@@ -1,31 +0,0 @@
-<template>
-  <label-distribution
-    title="Relation Distribution"
-    :distribution="distribution"
-    :color-mapping="colorMapping"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LabelDistribution from './LabelDistribution.vue'
-
-export default Vue.extend({
-  components: {
-    LabelDistribution
-  },
-
-  data() {
-    return {
-      distribution: {},
-      colorMapping: {},
-    }
-  },
-
-  async created() {
-    this.distribution = await this.$services.metrics.fetchRelationDistribution(this.$route.params.id)
-    const labels = await this.$services.relationType.list(this.$route.params.id)
-    this.colorMapping = Object.fromEntries(labels.map((label) => [label.text, label.backgroundColor]))
-  }
-})
-</script>

frontend/components/metrics/SpanDistribution.vue

@@ -1,31 +0,0 @@
-<template>
-  <label-distribution
-    title="Span Distribution"
-    :distribution="distribution"
-    :color-mapping="colorMapping"
-  />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import LabelDistribution from './LabelDistribution.vue'
-
-export default Vue.extend({
-  components: {
-    LabelDistribution
-  },
-
-  data() {
-    return {
-      distribution: {},
-      colorMapping: {},
-    }
-  },
-
-  async created() {
-    this.distribution = await this.$services.metrics.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>

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

@@ -4,29 +4,37 @@
       <member-progress />
     </v-col>
     <v-col v-if="!!project.hasCategory" cols="12">
-      <category-distribution />
+      <label-distribution
+        title="Category Distribution"
+        :distribution="categoryDistribution"
+        :label-types="categoryTypes"
+      />
     </v-col>
     <v-col v-if="!!project.hasSpan" cols="12">
-      <span-distribution />
+      <label-distribution
+        title="Span Distribution"
+        :distribution="spanDistribution"
+        :label-types="spanTypes"
+      />
     </v-col>
     <v-col v-if="!!project.useRelation" cols="12">
-      <relation-distribution />
+      <label-distribution
+        title="Relation Distribution"
+        :distribution="relationDistribution"
+        :label-types="relationTypes"
+      />
     </v-col>
   </v-row>
 </template>
 
 <script>
-import CategoryDistribution from '~/components/metrics/CategoryDistribution'
-import RelationDistribution from '~/components/metrics/RelationDistribution'
-import SpanDistribution from '~/components/metrics/SpanDistribution'
+import LabelDistribution from '~/components/metrics/LabelDistribution'
 import MemberProgress from '~/components/metrics/MemberProgress'
 
 export default {
   components: {
-    CategoryDistribution,
-    RelationDistribution,
-    SpanDistribution,
-    MemberProgress
+    LabelDistribution,
+    MemberProgress,
   },
   
   layout: 'project',
@@ -38,11 +46,35 @@ export default {
   data() {
     return {
       project: {},
+      categoryTypes: [],
+      categoryDistribution: {},
+      relationTypes: [],
+      relationDistribution: {},
+      spanTypes: [],
+      spanDistribution: {},
+    }
+  },
+
+  computed: {
+    projectId() {
+      return this.$route.params.id
     }
   },
 
   async created() {
-    this.project = await this.$services.project.findById(this.$route.params.id)
+    this.project = await this.$services.project.findById(this.projectId)
+    if (this.project.hasCategory) {
+      this.categoryTypes = await this.$services.categoryType.list(this.projectId)
+      this.categoryDistribution = await this.$services.metrics.fetchCategoryDistribution(this.projectId)
+    }
+    if (this.project.hasSpan) {
+      this.spanTypes = await this.$services.spanType.list(this.projectId)
+      this.spanDistribution = await this.$services.metrics.fetchSpanDistribution(this.projectId)
+    }
+    if (this.project.useRelation) {
+      this.relationTypes = await this.$services.relationType.list(this.projectId)
+      this.relationDistribution = await this.$services.metrics.fetchRelationDistribution(this.projectId)
+    }
   }
 }
 </script>