Merge pull request #1713 from doccano/enhancement/removeDuplicationOn…

…DistributionComponent [Enhancement] Remove duplication on distribution component
doccano · Mar 3, 2022 · 7310088 · 7310088
2 parents 4176f40 + c47eeba
commit 7310088
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 108 deletions.
diff --git a/frontend/components/metrics/CategoryDistribution.vue b/frontend/components/metrics/CategoryDistribution.vue
diff --git a/frontend/components/metrics/LabelDistribution.vue b/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) {

diff --git a/frontend/components/metrics/RelationDistribution.vue b/frontend/components/metrics/RelationDistribution.vue
diff --git a/frontend/components/metrics/SpanDistribution.vue b/frontend/components/metrics/SpanDistribution.vue
diff --git a/frontend/pages/projects/_id/metrics/index.vue b/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>