From 421d6b85153ccfceb2286b37e8d206597e03cdd6 Mon Sep 17 00:00:00 2001
From: mmfiber <masa.03191996@gmail.com>
Date: Wed, 18 Mar 2020 21:09:24 +0900
Subject: [PATCH 1/2] enable to change data label for TimeStackedBarChart

---
 components/TimeStackedBarChart.vue    | 15 ++++++++++++---
 components/cards/TestedNumberCard.vue |  4 ++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue
index ac7fa970..6cce76db 100644
--- a/components/TimeStackedBarChart.vue
+++ b/components/TimeStackedBarChart.vue
@@ -31,6 +31,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
+import { TranslateResult } from 'vue-i18n'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
@@ -91,6 +92,7 @@ type Props = {
   date: string
   items: string[]
   labels: string[]
+  dataLabels: string[] | TranslateResult[]
   unit: string
 }
 
@@ -134,6 +136,10 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       type: Array,
       default: () => []
     },
+    dataLabels: {
+      type: Array,
+      default: () => []
+    },
     unit: {
       type: String,
       default: ''
@@ -196,14 +202,17 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         return this.cumulative(item)
       })
       const cumulativeSumArray = this.eachArraySum(cumulativeData)
+      const dLabelLen = this.dataLabels.length
       return {
         tooltips: {
           displayColors: false,
           callbacks: {
             label: (tooltipItem: any) => {
-              const labelTokyo = this.$t('都内')
-              const labelOthers = this.$t('その他')
-              const labelArray = [labelTokyo, labelOthers]
+              const labelMain =
+                dLabelLen >= 1 ? this.dataLabels[0] : this.$t('都内')
+              const labelOthers =
+                dLabelLen >= 2 ? this.dataLabels[1] : this.$t('その他')
+              const labelArray = [labelMain, labelOthers]
               let casesTotal, cases
               if (this.dataKind === 'transition') {
                 casesTotal = sumArray[tooltipItem.index].toLocaleString()
diff --git a/components/cards/TestedNumberCard.vue b/components/cards/TestedNumberCard.vue
index a0ffceea..b5ea70ba 100644
--- a/components/cards/TestedNumberCard.vue
+++ b/components/cards/TestedNumberCard.vue
@@ -1,5 +1,9 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
+    <!-- 
+      You can add dataLabels attribute to time-stacked-bar-chart.
+      this.$t('都内') and this.$t('その他') are set as default value in TimeStackedBarChart.vue
+      -->
     <time-stacked-bar-chart
       :title="$t('検査実施数')"
       :title-id="'number-of-tested'"

From 344a38ed8c3bddc67843ad21fcbeeb86e5ddacb7 Mon Sep 17 00:00:00 2001
From: mmfiber <masa.03191996@gmail.com>
Date: Wed, 18 Mar 2020 22:03:41 +0900
Subject: [PATCH 2/2] make TimeStackedBarChart possible to handle more than 2
 data

---
 components/TimeStackedBarChart.vue    | 8 +-------
 components/cards/TestedNumberCard.vue | 9 ++++-----
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue
index 6cce76db..adfc2603 100644
--- a/components/TimeStackedBarChart.vue
+++ b/components/TimeStackedBarChart.vue
@@ -202,17 +202,11 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         return this.cumulative(item)
       })
       const cumulativeSumArray = this.eachArraySum(cumulativeData)
-      const dLabelLen = this.dataLabels.length
       return {
         tooltips: {
           displayColors: false,
           callbacks: {
             label: (tooltipItem: any) => {
-              const labelMain =
-                dLabelLen >= 1 ? this.dataLabels[0] : this.$t('都内')
-              const labelOthers =
-                dLabelLen >= 2 ? this.dataLabels[1] : this.$t('その他')
-              const labelArray = [labelMain, labelOthers]
               let casesTotal, cases
               if (this.dataKind === 'transition') {
                 casesTotal = sumArray[tooltipItem.index].toLocaleString()
@@ -229,7 +223,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               }
 
               return `${
-                labelArray[tooltipItem.datasetIndex]
+                this.dataLabels[tooltipItem.datasetIndex]
               }: ${cases} ${unit} (${this.$t('合計')}: ${casesTotal} ${unit})`
             },
             title(tooltipItem, data) {
diff --git a/components/cards/TestedNumberCard.vue b/components/cards/TestedNumberCard.vue
index b5ea70ba..9e182091 100644
--- a/components/cards/TestedNumberCard.vue
+++ b/components/cards/TestedNumberCard.vue
@@ -1,9 +1,5 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <!-- 
-      You can add dataLabels attribute to time-stacked-bar-chart.
-      this.$t('都内') and this.$t('その他') are set as default value in TimeStackedBarChart.vue
-      -->
     <time-stacked-bar-chart
       :title="$t('検査実施数')"
       :title-id="'number-of-tested'"
@@ -13,6 +9,7 @@
       :items="inspectionsItems"
       :labels="inspectionsLabels"
       :unit="$t('件.tested')"
+      :data-labels="inspectionsDataLabels"
     />
     <!-- 件.tested = 検査数 -->
   </v-col>
@@ -37,12 +34,14 @@ export default {
       this.$t('その他（チャーター便・クルーズ船）')
     ]
     const inspectionsLabels = Data.inspections_summary.labels
+    const inspectionsDataLabels = [this.$t('都内'), this.$t('その他')]
 
     const data = {
       Data,
       inspectionsGraph,
       inspectionsItems,
-      inspectionsLabels
+      inspectionsLabels,
+      inspectionsDataLabels
     }
     return data
   }