Merge pull request Tokyo-Metro-Gov#1770 from mmfiber/feature/issue-17…

…18-enable-to-change-time-bar-stack-chart-data-labels

enable to change data label for TimeStackedBarChart

(cherry picked from commit b460da1)

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: ''
@@ -201,9 +207,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
           displayColors: false,
           callbacks: {
             label: (tooltipItem: any) => {
-              const labelTokyo = this.$t('都内')
-              const labelOthers = this.$t('その他')
-              const labelArray = [labelTokyo, labelOthers]
               let casesTotal, cases
               if (this.dataKind === 'transition') {
                 casesTotal = sumArray[tooltipItem.index].toLocaleString()
@@ -220,7 +223,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               }
 
               return `${
-                labelArray[tooltipItem.datasetIndex]
+                this.dataLabels[tooltipItem.datasetIndex]
               }: ${cases} ${unit} (${this.$t('合計')}: ${casesTotal} ${unit})`
             },
             title(tooltipItem, data) {

components/cards/TestedNumberCard.vue

@@ -9,6 +9,7 @@
       :items="inspectionsItems"
       :labels="inspectionsLabels"
       :unit="$t('件.tested')"
+      :data-labels="inspectionsDataLabels"
     />
     <!-- 件.tested = 検査数 -->
   </v-col>
@@ -33,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
   }