Merge pull request #6449 from nard-tech/feature/#6388-add-vuex-and-st…

…atic-type-v2

ConsultationAboutFeverRepository, TokyoRuleRepository を導入し，関連 component の静的型付けを行う

components/index/CardsMonitoring/ConsultationAboutFeverNumber/Card.vue

@@ -31,27 +31,43 @@
   </v-col>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
+
 import MixedBarAndLineChart from '@/components/index/_shared/MixedBarAndLineChart.vue'
-import ConsultationAboutFever from '@/data/consultation_about_fever.json'
+import {
+  ConsultationAboutFever as IConsultationAboutFever,
+  Datum as IConsultationAboutFeverDatum,
+} from '@/libraries/auto_generated/data_converter/convertConsultationAboutFever'
 import {
   getNumberToFixedFunction,
   getNumberToLocaleStringFunction,
 } from '@/utils/monitoringStatusValueFormatters'
 
-export default {
+type Data = {
+  dataLabels: string[]
+  getFormatter: (columnIndex: number) => (d: number) => string | undefined
+}
+type Methods = {}
+type Computed = {
+  chartData: [number[], (number | null)[]]
+  date: string
+  labels: string[]
+  consultationAboutFeverData: IConsultationAboutFeverDatum[]
+  consultationAboutFever: IConsultationAboutFever
+}
+type Props = {}
+
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: {
     MixedBarAndLineChart,
   },
   data() {
-    const data = ConsultationAboutFever.data
-    const consulationReportsCount = data.map((d) => d.count)
-    const sevendayMoveAverages = data.map((d) => d.weekly_average_count)
-    const labels = data.map((d) => d.date)
-    const chartData = [consulationReportsCount, sevendayMoveAverages]
-    const dataLabels = [this.$t('相談件数'), this.$t('７日間移動平均')]
-    const date = ConsultationAboutFever.date
-    const getFormatter = (columnIndex) => {
+    const dataLabels = [
+      this.$t('相談件数') as string,
+      this.$t('７日間移動平均') as string,
+    ]
+    const getFormatter = (columnIndex: number) => {
       // ７日間移動平均は小数点第1位まで表示する。
       if (columnIndex === 1) {
         return getNumberToFixedFunction(1)
@@ -60,12 +76,35 @@ export default {
     }
 
     return {
-      chartData,
-      date,
-      labels,
       dataLabels,
       getFormatter,
     }
   },
-}
+  computed: {
+    chartData() {
+      const consulationReportsCount = this.consultationAboutFeverData.map(
+        (d) => d.count
+      )
+      const sevendayMoveAverages = this.consultationAboutFeverData.map(
+        (d) => d.weeklyAverageCount
+      )
+
+      return [consulationReportsCount, sevendayMoveAverages]
+    },
+    date() {
+      return this.consultationAboutFever.date
+    },
+    labels() {
+      return this.consultationAboutFeverData.map(
+        (data) => this.$d(data.date) as string
+      )
+    },
+    consultationAboutFeverData() {
+      return this.consultationAboutFever.data
+    },
+    consultationAboutFever() {
+      return this.$store.state.consultationAboutFever
+    },
+  },
+})
 </script>

components/index/CardsMonitoring/TokyoRulesApplicationNumber/Card.vue

@@ -38,27 +38,43 @@
   </v-col>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
+
 import MixedBarAndLineChart from '@/components/index/_shared/MixedBarAndLineChart.vue'
-import TokyoRule from '@/data/tokyo_rule.json'
+import {
+  Datum as ITokyoRuleDatum,
+  TokyoRule as ITokyoRule,
+} from '@/libraries/auto_generated/data_converter/convertTokyoRule'
 import {
   getNumberToFixedFunction,
   getNumberToLocaleStringFunction,
 } from '@/utils/monitoringStatusValueFormatters'
 
-export default {
+type Data = {
+  dataLabels: string[]
+  getFormatter: (columnIndex: number) => (d: number) => string | undefined
+}
+type Methods = {}
+type Computed = {
+  chartData: [number[], (number | null)[]]
+  date: string
+  labels: string[]
+  tokyoRuleData: ITokyoRuleDatum[]
+  tokyoRule: ITokyoRule
+}
+type Props = {}
+
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: {
     MixedBarAndLineChart,
   },
   data() {
-    const data = TokyoRule.data
-    const applicationReportsCount = data.map((d) => d.count)
-    const sevendayMoveAverages = data.map((d) => d.weekly_average_count)
-    const labels = data.map((d) => d.date)
-    const chartData = [applicationReportsCount, sevendayMoveAverages]
-    const dataLabels = [this.$t('適用件数'), this.$t('７日間移動平均')]
-    const date = TokyoRule.date
-    const getFormatter = (columnIndex) => {
+    const dataLabels = [
+      this.$t('適用件数') as string,
+      this.$t('７日間移動平均') as string,
+    ]
+    const getFormatter = (columnIndex: number) => {
       // ７日間移動平均は小数点第1位まで表示する。
       if (columnIndex === 1) {
         return getNumberToFixedFunction(1)
@@ -67,12 +83,31 @@ export default {
     }
 
     return {
-      chartData,
-      date,
-      labels,
       dataLabels,
       getFormatter,
     }
   },
-}
+  computed: {
+    chartData() {
+      const applicationReportsCount = this.tokyoRuleData.map((d) => d.count)
+      const sevendayMoveAverages = this.tokyoRuleData.map(
+        (d) => d.weeklyAverageCount
+      )
+
+      return [applicationReportsCount, sevendayMoveAverages]
+    },
+    date() {
+      return this.tokyoRule.date
+    },
+    labels() {
+      return this.tokyoRuleData.map((data) => this.$d(data.date) as string)
+    },
+    tokyoRuleData() {
+      return this.tokyoRule.data
+    },
+    tokyoRule() {
+      return this.$store.state.tokyoRule
+    },
+  },
+})
 </script>

store/index.ts

@@ -1,21 +1,25 @@
 import { AgencyRepository } from '@/libraries/repositories/AgencyRepository'
+import { ConsultationAboutFeverRepository } from '@/libraries/repositories/ConsultationAboutFeverRepository'
 import { DataRepository } from '@/libraries/repositories/DataRepository'
 // InfectionMedicalcareprovisionStatus ではなく InfectionMedicalCareProvisionStatus とする
 import { InfectionMedicalcareprovisionStatusRepository as InfectionMedicalCareProvisionStatusRepository } from '@/libraries/repositories/InfectionMedicalCareProvisionStatusRepository'
 import { MonitoringCommentImageRepository } from '@/libraries/repositories/MonitoringCommentImageRepository'
 import { NewsRepository } from '@/libraries/repositories/NewsRepository'
 import { StayingPopulationRepository } from '@/libraries/repositories/StayingPopulationRepository'
+import { TokyoRuleRepository } from '@/libraries/repositories/TokyoRuleRepository'
 import { VaccinationRepository } from '@/libraries/repositories/VaccinationRepository'
 import { VariantRepository } from '@/libraries/repositories/VariantRepository'
 
 export const state = () => ({
   agency: new AgencyRepository().data,
+  consultationAboutFever: new ConsultationAboutFeverRepository().data,
   data: new DataRepository().data,
   infectionMedicalCareProvisionStatus:
     new InfectionMedicalCareProvisionStatusRepository().data,
   monitoringCommentImage: new MonitoringCommentImageRepository().data,
   news: new NewsRepository().data,
   stayingPopulation: new StayingPopulationRepository().data,
+  tokyoRule: new TokyoRuleRepository().data,
   vaccination: new VaccinationRepository().data,
   variant: new VariantRepository().data,
 })