From 924eaf18bfcf2b88f366a8388470531bf4968d21 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 3 Mar 2022 09:11:45 +0900
Subject: [PATCH 1/3] Change the props of LabelDistribution.vue from
 colorMapping to labels

---
 .../components/metrics/CategoryDistribution.vue    |  8 ++++----
 frontend/components/metrics/LabelDistribution.vue  | 14 ++++++++++----
 .../components/metrics/RelationDistribution.vue    |  8 ++++----
 frontend/components/metrics/SpanDistribution.vue   |  8 ++++----
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/components/metrics/CategoryDistribution.vue b/frontend/components/metrics/CategoryDistribution.vue
index 36135399..81462285 100644
--- a/frontend/components/metrics/CategoryDistribution.vue
+++ b/frontend/components/metrics/CategoryDistribution.vue
@@ -2,13 +2,14 @@
   <label-distribution
     title="Category Distribution"
     :distribution="distribution"
-    :color-mapping="colorMapping"
+    :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: {
@@ -18,14 +19,13 @@ export default Vue.extend({
   data() {
     return {
       distribution: {},
-      colorMapping: {},
+      labels: [] as LabelDTO[],
     }
   },
 
   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]))
+    this.labels = await this.$services.categoryType.list(this.$route.params.id)
   }
 })
 </script>
diff --git a/frontend/components/metrics/LabelDistribution.vue b/frontend/components/metrics/LabelDistribution.vue
index 855c5cf8..e484b69f 100644
--- 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: () => {},
-    }
+    labels: {
+      type: Array as PropType<LabelDTO[]>,
+      default: () => [],
+      required: true,
+    },
   },
 
   computed: {
+    colorMapping(): {[text: string]: string} {
+      return Object.fromEntries(this.labels.map((label) => [label.text, label.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
index c334b40e..a124bace 100644
--- a/frontend/components/metrics/RelationDistribution.vue
+++ b/frontend/components/metrics/RelationDistribution.vue
@@ -2,13 +2,14 @@
   <label-distribution
     title="Relation Distribution"
     :distribution="distribution"
-    :color-mapping="colorMapping"
+    :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: {
@@ -18,14 +19,13 @@ export default Vue.extend({
   data() {
     return {
       distribution: {},
-      colorMapping: {},
+      labels: [] as LabelDTO[],
     }
   },
 
   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]))
+    this.labels = await this.$services.relationType.list(this.$route.params.id)
   }
 })
 </script>
diff --git a/frontend/components/metrics/SpanDistribution.vue b/frontend/components/metrics/SpanDistribution.vue
index ef34a328..e2fa4876 100644
--- a/frontend/components/metrics/SpanDistribution.vue
+++ b/frontend/components/metrics/SpanDistribution.vue
@@ -2,13 +2,14 @@
   <label-distribution
     title="Span Distribution"
     :distribution="distribution"
-    :color-mapping="colorMapping"
+    :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: {
@@ -18,14 +19,13 @@ export default Vue.extend({
   data() {
     return {
       distribution: {},
-      colorMapping: {},
+      labels: [] as LabelDTO[],
     }
   },
 
   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]))
+    this.labels = await this.$services.spanType.list(this.$route.params.id)
   }
 })
 </script>

From 025283ffdac39ff2fe452f28b39bbab03e6df234 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 3 Mar 2022 09:30:16 +0900
Subject: [PATCH 2/3] Replace each distribution component with
 LabelDistribution.vue

---
 frontend/pages/projects/_id/metrics/index.vue | 54 +++++++++++++++----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/frontend/pages/projects/_id/metrics/index.vue b/frontend/pages/projects/_id/metrics/index.vue
index 901d7a2c..e6f71fe2 100644
--- 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"
+        :labels="categoryTypes"
+      />
     </v-col>
     <v-col v-if="!!project.hasSpan" cols="12">
-      <span-distribution />
+      <label-distribution
+        title="Span Distribution"
+        :distribution="spanDistribution"
+        :labels="spanTypes"
+      />
     </v-col>
     <v-col v-if="!!project.useRelation" cols="12">
-      <relation-distribution />
+      <label-distribution
+        title="Relation Distribution"
+        :distribution="relationDistribution"
+        :labels="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>

From c47eeba67e0bfe4a652155f2235bafa0affcbabb Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 3 Mar 2022 09:33:59 +0900
Subject: [PATCH 3/3] Change the prop name from labels to labelTypes

---
 .../metrics/CategoryDistribution.vue          | 31 -------------------
 .../components/metrics/LabelDistribution.vue  |  4 +--
 .../metrics/RelationDistribution.vue          | 31 -------------------
 .../components/metrics/SpanDistribution.vue   | 31 -------------------
 frontend/pages/projects/_id/metrics/index.vue |  6 ++--
 5 files changed, 5 insertions(+), 98 deletions(-)
 delete mode 100644 frontend/components/metrics/CategoryDistribution.vue
 delete mode 100644 frontend/components/metrics/RelationDistribution.vue
 delete mode 100644 frontend/components/metrics/SpanDistribution.vue

diff --git a/frontend/components/metrics/CategoryDistribution.vue b/frontend/components/metrics/CategoryDistribution.vue
deleted file mode 100644
index 81462285..00000000
--- a/frontend/components/metrics/CategoryDistribution.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/components/metrics/LabelDistribution.vue b/frontend/components/metrics/LabelDistribution.vue
index e484b69f..965a7217 100644
--- a/frontend/components/metrics/LabelDistribution.vue
+++ b/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 {
diff --git a/frontend/components/metrics/RelationDistribution.vue b/frontend/components/metrics/RelationDistribution.vue
deleted file mode 100644
index a124bace..00000000
--- a/frontend/components/metrics/RelationDistribution.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/components/metrics/SpanDistribution.vue b/frontend/components/metrics/SpanDistribution.vue
deleted file mode 100644
index e2fa4876..00000000
--- a/frontend/components/metrics/SpanDistribution.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/pages/projects/_id/metrics/index.vue b/frontend/pages/projects/_id/metrics/index.vue
index e6f71fe2..3e5aaeff 100644
--- a/frontend/pages/projects/_id/metrics/index.vue
+++ b/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>