make TimeStackedBarChart possible to handle more than 2 data

origamium · Mar 18, 2020 · 344a38e · 344a38e
1 parent 421d6b8
commit 344a38e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 12 deletions.
diff --git 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
@@ -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
   }