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

…atic-type-v1

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

components/index/CardsReference/Agency/Card.vue

@@ -5,10 +5,11 @@
         :title="$t('都庁来庁者数の推移')"
         :title-id="'agency'"
         :chart-id="'agency'"
-        :chart-data="agencyData"
-        :date="agencyData.date"
+        :chart-data="agency"
+        :date="date"
+        :labels="labels"
+        :periods="periods"
         :items="agencyItems"
-        :periods="agencyData.periods"
         :unit="$t('人')"
       >
         <template #additionalDescription>
@@ -19,37 +20,58 @@
   </v-col>
 </template>
 
-<script>
-import dayjs from 'dayjs'
+<script lang="ts">
+import Vue from 'vue'
 
 import Chart from '@/components/index/CardsReference/Agency/Chart.vue'
-import AgencyData from '@/data/agency.json'
+import { Agency as IAgency } from '@/libraries/auto_generated/data_converter/convertAgency'
+import { convertDateToISO8601Format } from '@/utils/formatDate'
 
-export default {
+type Data = {
+  agencyItems: string[]
+}
+type Methods = {}
+type Computed = {
+  agency: IAgency
+  date: string
+  labels: string[]
+  periods: string[]
+}
+type Props = {}
+
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: {
     Chart,
   },
   data() {
-    const labels = AgencyData.periods.map((p) => p.begin)
-    const periods = AgencyData.periods.map((p) => {
-      const from = this.$d(dayjs(p.begin).toDate(), 'dateWithoutYear')
-      const to = this.$d(dayjs(p.end).toDate(), 'dateWithoutYear')
-      return `${from}~${to}`
-    })
-    const agencyData = {
-      ...AgencyData,
-      labels,
-      periods,
-    }
     const agencyItems = [
-      this.$t('第一庁舎計'),
-      this.$t('第二庁舎計'),
-      this.$t('議事堂計'),
+      this.$t('第一庁舎計') as string,
+      this.$t('第二庁舎計') as string,
+      this.$t('議事堂計') as string,
     ]
     return {
-      agencyData,
       agencyItems,
     }
   },
-}
+  computed: {
+    agency() {
+      return this.$store.state.agency
+    },
+    date() {
+      return this.agency.date
+    },
+    labels() {
+      return this.agency.periods.map((p) => {
+        return convertDateToISO8601Format(p.begin)
+      })
+    },
+    periods() {
+      return this.agency.periods.map((p) => {
+        const from = this.$d(p.begin, 'dateWithoutYear')
+        const to = this.$d(p.end, 'dateWithoutYear')
+        return `${from}~${to}`
+      })
+    },
+  },
+})
 </script>

components/index/CardsReference/Agency/Chart.vue

@@ -66,27 +66,25 @@
 </template>
 
 <script lang="ts">
-import { ChartOptions } from 'chart.js'
-import Vue from 'vue'
-import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
+import { ChartData, ChartOptions, ChartTooltipItem } from 'chart.js'
+import Vue, { PropType } from 'vue'
 
 import DataView from '@/components/index/_shared/DataView.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
 } from '@/components/index/_shared/DataViewTable.vue'
 import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
+import { Agency as IAgency } from '@/libraries/auto_generated/data_converter/convertAgency'
 import { DataSets, DisplayData, yAxesBgPlugin } from '@/plugins/vue-chart'
 import { getGraphSeriesStyle, SurfaceStyle } from '@/utils/colors'
 
 interface AgencyDataSets extends DataSets {
   label: string
 }
 interface AgencyDisplayData extends DisplayData {
-  datasets: AgencyDataSets[]
-}
-interface AgencyData extends AgencyDisplayData {
   labels: string[]
+  datasets: AgencyDataSets[]
 }
 
 type Data = {
@@ -105,28 +103,19 @@ type Computed = {
   tableHeaders: TableHeader[]
   tableData: TableItem[]
 }
-
 type Props = {
   title: string
   titleId: string
   chartId: string
-  chartData: AgencyData
+  chartData: IAgency
   date: string
-  items: string[]
+  labels: string[]
   periods: string[]
+  items: string[]
   unit: string
 }
 
-const options: ThisTypedComponentOptionsWithRecordProps<
-  Vue,
-  Data,
-  Methods,
-  Computed,
-  Props
-> = {
-  created() {
-    this.canvas = process.browser
-  },
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: { DataView, DataViewTable, ScrollableChart },
   props: {
     title: {
@@ -144,17 +133,28 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       required: false,
       default: 'agency-bar-chart',
     },
-    chartData: Object,
+    chartData: {
+      type: Object as PropType<IAgency>,
+      default: () => ({
+        date: '',
+        periods: [],
+        datasets: [],
+      }),
+    },
     date: {
       type: String,
       default: '',
     },
-    items: {
-      type: Array,
+    labels: {
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     periods: {
-      type: Array,
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    items: {
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     unit: {
@@ -170,33 +170,37 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     displayLegends: [true, true, true],
   }),
   computed: {
-    displayData() {
+    displayData(): AgencyDisplayData {
       return {
-        labels: this.chartData.labels,
-        datasets: this.chartData.datasets.map((item, index) => {
+        labels: this.labels,
+        datasets: this.chartData.datasets.map((dataset, index) => {
+          const label = this.items[index]
+          const { data } = dataset
+          const color = this.colors[index]
+
           return {
-            label: this.items[index] as string,
-            data: item.data,
-            backgroundColor: this.colors[index].fillColor,
-            borderColor: this.colors[index].strokeColor,
+            label,
+            data,
+            backgroundColor: color.fillColor,
+            borderColor: color.strokeColor,
             borderWidth: 1,
           }
         }),
       }
     },
-    displayOption() {
+    displayOption(): ChartOptions {
       const options: ChartOptions = {
         maintainAspectRatio: false,
         tooltips: {
           displayColors: false,
           callbacks: {
-            title: (tooltipItem) => {
-              const dateString = this.periods[tooltipItem[0].index!]
+            title: (tooltipItems: ChartTooltipItem[]) => {
+              const dateString = this.periods[tooltipItems[0].index!]
               return this.$t('期間: {duration}', {
                 duration: dateString!,
               }) as string
             },
-            label: (tooltipItem, data) => {
+            label: (tooltipItem: ChartTooltipItem, data: ChartData) => {
               const index = tooltipItem.datasetIndex!
               const title = this.$t(data.datasets![index].label!)
               const num = parseInt(tooltipItem.value!).toLocaleString()
@@ -266,14 +270,16 @@ const options: ThisTypedComponentOptionsWithRecordProps<
           ],
         },
       }
+
       if (this.$route.query.ogp === 'true') {
         Object.assign(options, { animation: { duration: 0 } })
       }
+
       return options
     },
-    displayDataHeader() {
+    displayDataHeader(): AgencyDisplayData {
       return {
-        labels: this.chartData.labels,
+        labels: this.labels,
         datasets: this.chartData.datasets.map((item, index) => {
           return {
             label: this.items[index] as string,
@@ -284,8 +290,8 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         }),
       }
     },
-    displayOptionHeader() {
-      const options: ChartOptions = {
+    displayOptionHeader(): ChartOptions {
+      return {
         maintainAspectRatio: false,
         legend: {
           display: false,
@@ -301,7 +307,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               },
               ticks: {
                 fontSize: 9,
-                fontColor: 'transparent',
+                fontColor: 'transparent', // displayOption では '#808080'
                 callback: (_, i) => {
                   return this.periods[i]
                 },
@@ -318,7 +324,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               },
               ticks: {
                 fontSize: 11,
-                fontColor: 'transparent', // displayOption では #808080
+                fontColor: 'transparent', // displayOption では '#808080'
                 padding: 13, // 3 + 10(tickMarkLength)，displayOption では 3
                 fontStyle: 'bold',
               },
@@ -333,13 +339,13 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               stacked: true,
               gridLines: {
                 display: true,
-                drawOnChartArea: false,
-                color: '#E5E5E5',
+                drawOnChartArea: false, // displayOption では定義なし
+                color: '#E5E5E5', // displayOption では定義なし
               },
               ticks: {
-                suggestedMin: 0,
-                maxTicksLimit: 10,
+                suggestedMin: 0, // displayOption では定義なし
                 fontColor: '#808080',
+                maxTicksLimit: 10,
                 callback: (label) => {
                   return `${label}${this.unit}`
                 },
@@ -349,17 +355,16 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         },
         animation: { duration: 0 },
       }
-      return options
     },
-    tableHeaders() {
+    tableHeaders(): TableHeader[] {
       return [
         { text: this.$t('日付'), value: 'text' },
         ...this.displayData.datasets.map((text, value) => {
           return { text: text.label, value: String(value), align: 'end' }
         }),
       ]
     },
-    tableData() {
+    tableData(): TableItem[] {
       return this.displayData.datasets[0].data
         .map((_, i) => {
           return Object.assign(
@@ -374,11 +379,8 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         .reverse()
     },
   },
-  methods: {
-    onClickLegend(i) {
-      this.displayLegends[i] = !this.displayLegends[i]
-      this.displayLegends = this.displayLegends.slice()
-    },
+  created() {
+    this.canvas = process.browser
   },
   mounted() {
     const barChart = this.$refs.barChart as Vue
@@ -391,9 +393,13 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       canvas.setAttribute('aria-labelledby', labelledbyId)
     }
   },
-}
-
-export default Vue.extend(options)
+  methods: {
+    onClickLegend(i) {
+      this.displayLegends[i] = !this.displayLegends[i]
+      this.displayLegends = this.displayLegends.slice()
+    },
+  },
+})
 </script>
 
 <style module lang="scss">

store/index.ts

@@ -1,3 +1,4 @@
+import { AgencyRepository } from '@/libraries/repositories/AgencyRepository'
 import { DataRepository } from '@/libraries/repositories/DataRepository'
 // InfectionMedicalcareprovisionStatus ではなく InfectionMedicalCareProvisionStatus とする
 import { InfectionMedicalcareprovisionStatusRepository as InfectionMedicalCareProvisionStatusRepository } from '@/libraries/repositories/InfectionMedicalCareProvisionStatusRepository'
@@ -8,12 +9,13 @@ import { VaccinationRepository } from '@/libraries/repositories/VaccinationRepos
 import { VariantRepository } from '@/libraries/repositories/VariantRepository'
 
 export const state = () => ({
+  agency: new AgencyRepository().data,
   data: new DataRepository().data,
   infectionMedicalCareProvisionStatus:
     new InfectionMedicalCareProvisionStatusRepository().data,
   monitoringCommentImage: new MonitoringCommentImageRepository().data,
   news: new NewsRepository().data,
   stayingPopulation: new StayingPopulationRepository().data,
-  variant: new VariantRepository().data,
   vaccination: new VaccinationRepository().data,
+  variant: new VariantRepository().data,
 })

utils/formatDate.ts

@@ -12,10 +12,10 @@ export const convertDatetimeToISO8601Format = (dateString: string): string => {
 /**
  * Get date string formatted ISO8601(YYYY-MM-DD)
  *
- * @param dateString- Parsable string by dayjs
+ * @param date- Parsable string or date by dayjs
  */
-export const convertDateToISO8601Format = (dateString: string): string => {
-  return dayjs(dateString).format('YYYY-MM-DD')
+export const convertDateToISO8601Format = (date: string | Date): string => {
+  return dayjs(date).format('YYYY-MM-DD')
 }
 
 /**