diff --git a/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue b/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue
index 8edf33b81f23a..d6b1fd5fe9bf6 100644
--- a/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue
+++ b/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue
@@ -7,11 +7,11 @@
         :info-titles="[$t('新規陽性者数')]"
         chart-id="monitoring-confirmed-cases-number-chart"
         :chart-data="chartData"
-        :get-formatter="getFormatter"
         :date="date"
         :labels="labels"
         :data-labels="dataLabels"
         :table-labels="tableLabels"
+        :get-formatter="getFormatter"
         :unit="$t('人')"
         url="https://catalog.data.metro.tokyo.lg.jp/dataset/t000010d0000000068"
       >
@@ -41,34 +41,49 @@
   </v-col>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
+
 import Chart from '@/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue'
-import Data from '@/data/daily_positive_detail.json'
+import {
+  DailyPositiveDetail as IDailyPositiveDetail,
+  Datum as IDailyPositiveDetailDatum,
+} from '@/libraries/auto_generated/data_converter/convertDailyPositiveDetail'
 import {
   getNumberToFixedFunction,
   getNumberToLocaleStringFunction,
 } from '@/utils/monitoringStatusValueFormatters'
 
-export default {
+type Data = {
+  dataLabels: string[]
+  tableLabels: string[]
+  getFormatter: (columnIndex: number) => (d: number) => string | undefined
+}
+type Methods = {}
+type Computed = {
+  chartData: [number[], (number | null)[]]
+  date: string
+  labels: string[]
+  dailyPositiveDetailData: IDailyPositiveDetailDatum[]
+  dailyPositiveDetail: IDailyPositiveDetail
+}
+type Props = {}
+
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: {
     Chart,
   },
   data() {
-    const [patientsCount, sevenDayMoveAverages, labels] = Data.data.reduce(
-      (res, data) => {
-        res[0].push(data.count)
-        res[1].push(data.weekly_average_count)
-        res[2].push(data.diagnosed_date)
-        return res
-      },
-      [[], [], []]
-    )
-    const chartData = [patientsCount, sevenDayMoveAverages]
-    const dataLabels = [this.$t('陽性者数'), this.$t('７日間移動平均')]
-    const tableLabels = [this.$t('陽性者数'), this.$t('７日間移動平均')]
-    const date = Data.date
+    const dataLabels = [
+      this.$t('陽性者数') as string,
+      this.$t('７日間移動平均') as string,
+    ]
+    const tableLabels = [
+      this.$t('陽性者数') as string,
+      this.$t('７日間移動平均') as string,
+    ]
 
-    const getFormatter = (columnIndex) => {
+    const getFormatter = (columnIndex: number) => {
       // モニタリング指標(1)新規陽性者数の7日間移動平均は小数点第1位まで表示する。
       if (columnIndex === 1) {
         return getNumberToFixedFunction(1)
@@ -77,13 +92,34 @@ export default {
     }
 
     return {
-      chartData,
-      date,
-      labels,
       dataLabels,
       tableLabels,
       getFormatter,
     }
   },
-}
+  computed: {
+    chartData() {
+      const patientsCounts: number[] = this.dailyPositiveDetailData.map(
+        (d) => d.count
+      )
+
+      const weeklyAverageCounts: (number | null)[] =
+        this.dailyPositiveDetailData.map((d) => d.weeklyAverageCount)
+
+      return [patientsCounts, weeklyAverageCounts]
+    },
+    date() {
+      return this.dailyPositiveDetail.date
+    },
+    labels() {
+      return this.dailyPositiveDetailData.map((d) => `${d.diagnosedDate}`)
+    },
+    dailyPositiveDetailData() {
+      return this.dailyPositiveDetail.data
+    },
+    dailyPositiveDetail() {
+      return this.$store.state.dailyPositiveDetail
+    },
+  },
+})
 </script>
diff --git a/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue b/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue
index fff53a5f0bbc0..dfc3c32825b28 100644
--- a/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue
+++ b/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue
@@ -73,10 +73,10 @@
     <template #dataSetPanel>
       <data-view-data-set-panel
         :title="infoTitles[0]"
-        :l-text="displayInfo[0].lText"
-        :s-text="displayInfo[0].sText"
-        :s-text-under="displayInfo[0].sTextUnder"
-        :unit="displayInfo[0].unit"
+        :l-text="displayInfos[0].lText"
+        :s-text="displayInfos[0].sText"
+        :s-text-under="displayInfos[0].sTextUnder"
+        :unit="displayInfos[0].unit"
       />
     </template>
     <template #footer>
@@ -86,11 +86,9 @@
 </template>
 
 <script lang="ts">
-import { ChartOptions } from 'chart.js'
+import { ChartOptions, PluginServiceRegistrationOptions } from 'chart.js'
 import dayjs from 'dayjs'
-import Vue from 'vue'
-import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import { TranslateResult } from 'vue-i18n'
+import Vue, { PropType } from 'vue'
 
 import DataView from '@/components/index/_shared/DataView.vue'
 import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
@@ -105,32 +103,38 @@ import calcDayBeforeRatio from '@/utils/calcDayBeforeRatio'
 import { getGraphSeriesColor, SurfaceStyle } from '@/utils/colors'
 import { getNumberToLocaleStringFunction } from '@/utils/monitoringStatusValueFormatters'
 
+type PatientsCount = number
+type WeeklyAverageCount = number | null
+type ChartData = [PatientsCount[], WeeklyAverageCount[]]
+
+interface DisplayInfo {
+  lText: string
+  sText: string
+  sTextUnder: string
+  unit: string
+}
+
 type Data = {
   canvas: boolean
   displayLegends: boolean[]
   colors: SurfaceStyle[]
+  yAxesBgPlugin: PluginServiceRegistrationOptions[]
 }
+
 type Methods = {
   makeLineData: (value: number) => number[]
   onClickLegend: (i: number) => void
 }
 
 type Computed = {
-  displayInfo: [
-    {
-      lText: string
-      sText: string
-      sTextUnder: string
-      unit: string
-    }
-  ]
-  displayData: DisplayData
+  displayInfos: DisplayInfo[]
+  displayData: DisplayData<PatientsCount | WeeklyAverageCount>
   displayOption: ChartOptions
   displayDataHeader: DisplayData
   displayOptionHeader: ChartOptions
-  scaledTicksYAxisMax: number
   tableHeaders: TableHeader[]
   tableData: TableItem[]
+  scaledTicksYAxisMax: number
 }
 
 type Props = {
@@ -138,26 +142,17 @@ type Props = {
   titleId: string
   infoTitles: string[]
   chartId: string
-  chartData: number[][]
-  getFormatter: Function
+  chartData: ChartData
   date: string
   labels: string[]
-  dataLabels: string[] | TranslateResult[]
-  tableLabels: string[] | TranslateResult[]
+  dataLabels: string[]
+  tableLabels: string[]
+  getFormatter: (columnIndex: number) => (d: number) => string | undefined
   unit: string
   url: 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,
@@ -176,7 +171,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       default: 'monitoring-number-of-confirmed-cases',
     },
     infoTitles: {
-      type: Array,
+      type: Array as PropType<string[]>,
       required: false,
       default: () => [],
     },
@@ -185,57 +180,63 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       default: 'monitoring-confirmed-cases-number-chart',
     },
     chartData: {
-      type: Array,
+      type: Object as PropType<ChartData>,
       required: false,
-      default: () => [],
-    },
-    getFormatter: {
-      type: Function,
-      required: false,
-      default: (_: number) => getNumberToLocaleStringFunction(),
+      default: () => [[], []] as ChartData,
     },
     date: {
       type: String,
       required: true,
       default: '',
     },
-    url: {
-      type: String,
-      default: '',
-    },
     labels: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     dataLabels: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     tableLabels: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
+    getFormatter: {
+      type: Function as PropType<
+        (columnIndex: number) => (d: number) => string | undefined
+      >,
+      required: false,
+      default: (_: number) => getNumberToLocaleStringFunction(),
+    },
     unit: {
       type: String,
       default: '',
     },
+    url: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     const colors: SurfaceStyle[] = [
       getGraphSeriesColor('C'),
       getGraphSeriesColor('E'),
     ]
+
     return {
+      canvas: true,
       displayLegends: [true, true],
       colors,
-      canvas: true,
       yAxesBgPlugin,
     }
   },
   computed: {
-    displayInfo() {
+    displayInfos() {
       const { lastDay, lastDayData, dayBeforeRatio } = calcDayBeforeRatio({
-        displayData: this.displayData,
+        // 本来は DisplayData<WeeklyAverageCount> だが，
+        // 直近のデータを扱うため，値が null のケースは考慮せず，
+        // DisplayData<number> とする．
+        displayData: this.displayData as DisplayData<number>,
         dataIndex: 1,
         digit: 1,
       })
@@ -253,56 +254,34 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       ]
     },
     displayData() {
+      const barDataSets = {
+        type: 'bar',
+        label: this.dataLabels[0],
+        data: this.chartData[0],
+        backgroundColor: this.colors[0].fillColor,
+        borderColor: this.colors[0].strokeColor,
+        borderWidth: 1,
+        order: 3,
+      }
+
+      const lineDataSets = {
+        type: 'line',
+        label: this.dataLabels[1],
+        data: this.chartData[1],
+        pointBackgroundColor: 'rgba(0,0,0,0)',
+        pointBorderColor: 'rgba(0,0,0,0)',
+        borderColor: this.colors[1].fillColor,
+        borderWidth: 3,
+        fill: false,
+        order: 2,
+        lineTension: 0,
+      }
+
       return {
         labels: this.labels,
-        datasets: [
-          {
-            type: 'bar',
-            label: this.dataLabels[0],
-            data: this.chartData[0],
-            backgroundColor: this.colors[0].fillColor,
-            borderColor: this.colors[0].strokeColor,
-            borderWidth: 1,
-            order: 3,
-          },
-          {
-            type: 'line',
-            label: this.dataLabels[1],
-            data: this.chartData[1],
-            pointBackgroundColor: 'rgba(0,0,0,0)',
-            pointBorderColor: 'rgba(0,0,0,0)',
-            borderColor: this.colors[1].fillColor,
-            borderWidth: 3,
-            fill: false,
-            order: 2,
-            lineTension: 0,
-          },
-        ],
+        datasets: [barDataSets, lineDataSets],
       }
     },
-    tableHeaders() {
-      return [
-        { text: this.$t('日付'), value: 'text' },
-        ...(this.tableLabels as string[]).map((text, i) => {
-          return { text, value: `${i}`, align: 'end' }
-        }),
-      ]
-    },
-    tableData() {
-      return this.labels
-        .map((label, i) => {
-          return Object.assign(
-            { text: label },
-            ...(this.tableLabels as string[]).map((_, j) => {
-              return {
-                [j]: this.getFormatter(j)(this.chartData[j][i]),
-              }
-            })
-          )
-        })
-        .sort((a, b) => dayjs(a.text).unix() - dayjs(b.text).unix())
-        .reverse()
-    },
     displayOption() {
       const unit = this.unit
       const scaledTicksYAxisMax = this.scaledTicksYAxisMax
@@ -319,9 +298,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
                 this.dataLabels[tooltipItem.datasetIndex!]
               } : ${cases} ${unit}`
             },
-            title: (tooltipItem, data) => {
-              if (tooltipItem[0].datasetIndex! < 2) {
-                const label = data.labels![tooltipItem[0].index!] as string
+            title: (tooltipItems, data) => {
+              if (tooltipItems[0].datasetIndex! < 2) {
+                const label = data.labels![tooltipItems[0].index!] as string
                 return this.$d(new Date(label), 'date')
               }
               return ''
@@ -414,7 +393,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     displayOptionHeader() {
       const scaledTicksYAxisMax = this.scaledTicksYAxisMax
 
-      const options: ChartOptions = {
+      return {
         tooltips: { enabled: false },
         maintainAspectRatio: false,
         legend: {
@@ -481,22 +460,40 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         },
         animation: { duration: 0 },
       }
-
-      return options
     },
-    scaledTicksYAxisMax() {
-      return this.chartData.reduce((max, data) => Math.max(max, ...data), 0)
+    tableHeaders() {
+      return [
+        { text: this.$t('日付'), value: 'text' },
+        ...(this.tableLabels as string[]).map((text, i) => {
+          return { text, value: `${i}`, align: 'end' }
+        }),
+      ]
     },
-  },
-  methods: {
-    onClickLegend(i) {
-      this.displayLegends[i] = !this.displayLegends[i]
-      this.displayLegends = this.displayLegends.slice()
+    tableData() {
+      return this.labels
+        .map((label, i) => {
+          return Object.assign(
+            { text: label },
+            ...(this.tableLabels as string[]).map((_, j) => {
+              return {
+                [j]: this.getFormatter(j)(this.chartData[j][i]!),
+              }
+            })
+          )
+        })
+        .sort((a, b) => dayjs(a.text).unix() - dayjs(b.text).unix())
+        .reverse()
     },
-    makeLineData(value: number): number[] {
-      return this.chartData[0].map((_) => value)
+    scaledTicksYAxisMax() {
+      return this.chartData.reduce(
+        (max, data) => Math.max(max, ...(data as number[])),
+        0
+      )
     },
   },
+  created() {
+    this.canvas = process.browser
+  },
   mounted() {
     const barChart = this.$refs.barChart as Vue
     const barElement = barChart.$el
@@ -508,9 +505,16 @@ 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()
+    },
+    makeLineData(value: number): number[] {
+      return this.chartData[0].map((_) => value)
+    },
+  },
+})
 </script>
 
 <style module lang="scss">
diff --git a/components/index/CardsMonitoring/UntrackedRate/Card.vue b/components/index/CardsMonitoring/UntrackedRate/Card.vue
index 7be8b79257236..25e9e1f9f2248 100644
--- a/components/index/CardsMonitoring/UntrackedRate/Card.vue
+++ b/components/index/CardsMonitoring/UntrackedRate/Card.vue
@@ -6,13 +6,13 @@
         :title-id="'untracked-rate'"
         :info-titles="[$t('新規陽性者における接触歴等不明者数'), $t('増加比')]"
         :chart-id="'untracked-rate-chart'"
-        :chart-data="graphData"
-        :get-formatter="getFormatter"
-        :date="updated"
-        :labels="dateList"
-        :unit="[$t('人'), '%']"
+        :chart-data="chartData"
+        :date="date"
+        :labels="labels"
+        :units="units"
         :data-labels="dataLabels"
         :table-labels="tableLabels"
+        :get-formatter="getFormatter"
       >
         <template #additionalDescription>
           <span>{{ $t('（注）') }}</span>
@@ -50,51 +50,57 @@
   </v-col>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
+
 import Chart from '@/components/index/CardsMonitoring/UntrackedRate/Chart.vue'
-import Data from '@/data/daily_positive_detail.json'
+import {
+  DailyPositiveDetail as IDailyPositiveDetail,
+  Datum as IDailyPositiveDetailDatum,
+} from '@/libraries/auto_generated/data_converter/convertDailyPositiveDetail'
 import {
   getNumberToFixedFunction,
   getNumberToLocaleStringFunction,
 } from '@/utils/monitoringStatusValueFormatters'
 
-export default {
+type Data = {
+  dataLabels: string[]
+  tableLabels: string[]
+  getFormatter: (columnIndex: number) => (d: number) => string | undefined
+  units: string[]
+}
+type Methods = {}
+type Computed = {
+  chartData: (number | null)[][]
+  date: string
+  labels: string[]
+  filteredDailyPositiveDetailData: IDailyPositiveDetailDatum[]
+  dailyPositiveDetail: IDailyPositiveDetail
+}
+type Props = {}
+
+const firstDiagnosedDate = new Date('2020-03-27')
+
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: {
     Chart,
   },
   data() {
-    const data = Data.data.filter(
-      (d) => new Date(d.diagnosed_date) >= new Date('2020-03-27')
-    )
-    const reportedCount = data.map((d) => d.reported_count)
-    const missingCount = data.map((d) => d.missing_count)
-    const untrackedRate = data.map((d) => d.weekly_average_untracked_count)
-    const untrackedIncreseRate = data.map(
-      (d) => d.weekly_average_untracked_increse_percent
-    )
-    const dateList = data.map((d) => d.diagnosed_date)
-    const updated = Data.date
-    const graphData = [
-      reportedCount,
-      missingCount,
-      untrackedRate,
-      untrackedIncreseRate,
-    ]
-
     const dataLabels = [
-      this.$t('接触歴等判明者数'),
-      this.$t('接触歴等不明者数'),
-      this.$t('接触歴等不明者数（７日間移動平均）'),
-      this.$t('増加比'),
+      this.$t('接触歴等判明者数') as string,
+      this.$t('接触歴等不明者数') as string,
+      this.$t('接触歴等不明者数（７日間移動平均）') as string,
+      this.$t('増加比') as string,
     ]
+
     const tableLabels = [
-      this.$t('接触歴等判明者数'),
-      this.$t('接触歴等不明者数'),
-      this.$t('接触歴等不明者数（７日間移動平均）'),
-      this.$t('増加比'),
+      this.$t('接触歴等判明者数') as string,
+      this.$t('接触歴等不明者数') as string,
+      this.$t('接触歴等不明者数（７日間移動平均）') as string,
+      this.$t('増加比') as string,
     ]
 
-    const getFormatter = (columnIndex) => {
+    const getFormatter = (columnIndex: number) => {
       // 7日間移動平均と増加比は小数点第1位まで表示する。
       if (columnIndex >= 2) {
         return getNumberToFixedFunction(1)
@@ -102,14 +108,51 @@ export default {
       return getNumberToLocaleStringFunction()
     }
 
+    const units = [this.$t('人') as string, '%']
+
     return {
-      updated,
-      graphData,
-      dateList,
       dataLabels,
       tableLabels,
       getFormatter,
+      units,
     }
   },
-}
+  computed: {
+    chartData() {
+      const reportedCount: (number | null)[] =
+        this.filteredDailyPositiveDetailData.map((d) => d.reportedCount)
+
+      const missingCount: (number | null)[] =
+        this.filteredDailyPositiveDetailData.map((d) => d.missingCount)
+
+      const untrackedRate: (number | null)[] =
+        this.filteredDailyPositiveDetailData.map(
+          (d) => d.weeklyAverageUntrackedCount
+        )
+
+      const untrackedIncreseRate: (number | null)[] =
+        this.filteredDailyPositiveDetailData.map(
+          (d) => d.weeklyAverageUntrackedIncresePercent
+        )
+
+      return [reportedCount, missingCount, untrackedRate, untrackedIncreseRate]
+    },
+    date() {
+      return this.dailyPositiveDetail.date
+    },
+    labels() {
+      return this.filteredDailyPositiveDetailData.map(
+        (d) => `${d.diagnosedDate}`
+      )
+    },
+    filteredDailyPositiveDetailData() {
+      return this.dailyPositiveDetail.data.filter(
+        (d) => new Date(d.diagnosedDate) >= firstDiagnosedDate
+      )
+    },
+    dailyPositiveDetail() {
+      return this.$store.state.dailyPositiveDetail
+    },
+  },
+})
 </script>
diff --git a/components/index/CardsMonitoring/UntrackedRate/Chart.vue b/components/index/CardsMonitoring/UntrackedRate/Chart.vue
index dd24c90143093..0ce2262abe468 100644
--- a/components/index/CardsMonitoring/UntrackedRate/Chart.vue
+++ b/components/index/CardsMonitoring/UntrackedRate/Chart.vue
@@ -102,8 +102,7 @@
 <script lang="ts">
 import { ChartOptions, PluginServiceRegistrationOptions } from 'chart.js'
 import dayjs from 'dayjs'
-import Vue from 'vue'
-import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
+import Vue, { PropType } from 'vue'
 import { TranslateResult } from 'vue-i18n'
 
 import DataView from '@/components/index/_shared/DataView.vue'
@@ -124,8 +123,8 @@ import { getNumberToLocaleStringFunction } from '@/utils/monitoringStatusValueFo
 
 type Data = {
   canvas: boolean
-  displayLegends: boolean[]
   colors: SurfaceStyle[]
+  displayLegends: boolean[]
 }
 type Methods = {
   makeLineData: (value: number) => number[]
@@ -156,26 +155,17 @@ type Props = {
   infoTitles: string[]
   chartId: string
   chartData: number[][]
-  getFormatter: Function
+  getFormatter: (_: number) => (d: number) => string | undefined
   date: string
   labels: string[]
   dataLabels: string[] | TranslateResult[]
   tableLabels: string[] | TranslateResult[]
-  unit: string[]
+  units: string[]
   yAxesBgPlugin: PluginServiceRegistrationOptions[]
   yAxesBgRightPlugin: PluginServiceRegistrationOptions[]
 }
 
-const options: ThisTypedComponentOptionsWithRecordProps<
-  Vue,
-  Data,
-  Methods,
-  Computed,
-  Props
-> = {
-  created() {
-    this.canvas = process.browser
-  },
+export default Vue.extend<Data, Methods, Computed, Props>({
   components: {
     DataView,
     DataViewTable,
@@ -193,7 +183,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       default: '',
     },
     infoTitles: {
-      type: Array,
+      type: Array as PropType<string[]>,
       required: false,
       default: () => [],
     },
@@ -202,14 +192,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       default: 'untracked-rate-chart',
     },
     chartData: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    getFormatter: {
-      type: Function,
+      type: Array as PropType<number[][]>,
       required: false,
-      default: (_: number) => getNumberToLocaleStringFunction(),
+      default: () => [[], [], [], []],
     },
     date: {
       type: String,
@@ -217,7 +202,11 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       default: '',
     },
     labels: {
-      type: Array,
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    units: {
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     dataLabels: {
@@ -228,9 +217,10 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       type: Array,
       default: () => [],
     },
-    unit: {
-      type: Array,
-      default: () => [],
+    getFormatter: {
+      type: Function,
+      required: false,
+      default: (_: number) => getNumberToLocaleStringFunction(),
     },
     yAxesBgPlugin: {
       type: Array,
@@ -242,14 +232,14 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
   },
   data: () => ({
-    displayLegends: [true, true, true, true],
+    canvas: true,
     colors: [
       getGraphSeriesColor('A'),
       getGraphSeriesColor('C'),
       getGraphSeriesColor('E'),
       getGraphSeriesColor('E'),
     ],
-    canvas: true,
+    displayLegends: [true, true, true, true],
   }),
   computed: {
     displayInfo() {
@@ -274,9 +264,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             date: this.$d(lastDay, 'date'),
           })}（${this.$t('７日間移動平均')}）`,
           sTextUnder: `（${this.$t('前日比')}: ${dayBeforeRatio} ${
-            this.unit[0]
+            this.units[0]
           }）`,
-          unit: this.unit[0],
+          unit: this.units[0],
         },
         {
           lText: lastDayData3,
@@ -284,9 +274,9 @@ const options: ThisTypedComponentOptionsWithRecordProps<
             date: this.$d(lastDay3, 'date'),
           })}（${this.$t('７日間移動平均値をもとに算出')}）`,
           sTextUnder: `（${this.$t('前日比')}: ${dayBeforeRatio3} ${
-            this.unit[1]
+            this.units[1]
           }）`,
-          unit: this.unit[1],
+          unit: this.units[1],
         },
       ]
     },
@@ -380,7 +370,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         .reverse()
     },
     displayOption() {
-      const unit = this.unit[1]
+      const unit = this.units[1]
 
       const scaledTicksYAxisMax = this.scaledTicksYAxisMax
       const scaledTicksYAxisMaxRight = this.scaledTicksYAxisMaxRight
@@ -646,14 +636,8 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       return this.chartData[3].reduce((a, b) => Math.max(a, b), 0)
     },
   },
-  methods: {
-    onClickLegend(i) {
-      this.displayLegends[i] = !this.displayLegends[i]
-      this.displayLegends = this.displayLegends.slice()
-    },
-    makeLineData(value: number): number[] {
-      return this.chartData[0].map((_) => value)
-    },
+  created() {
+    this.canvas = process.browser
   },
   mounted() {
     const barChart = this.$refs.barChart as Vue
@@ -666,9 +650,16 @@ 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()
+    },
+    makeLineData(value: number): number[] {
+      return this.chartData[0].map((_) => value)
+    },
+  },
+})
 </script>
 
 <style module lang="scss">
diff --git a/store/index.ts b/store/index.ts
index 9ac4eb7833a0a..bc2dd659ad506 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -1,5 +1,6 @@
 import { AgencyRepository } from '@/libraries/repositories/AgencyRepository'
 import { ConsultationAboutFeverRepository } from '@/libraries/repositories/ConsultationAboutFeverRepository'
+import { DailyPositiveDetailRepository } from '@/libraries/repositories/DailyPositiveDetailRepository'
 import { DataRepository } from '@/libraries/repositories/DataRepository'
 // InfectionMedicalcareprovisionStatus ではなく InfectionMedicalCareProvisionStatus とする
 import { InfectionMedicalcareprovisionStatusRepository as InfectionMedicalCareProvisionStatusRepository } from '@/libraries/repositories/InfectionMedicalCareProvisionStatusRepository'
@@ -13,6 +14,7 @@ import { VariantRepository } from '@/libraries/repositories/VariantRepository'
 export const state = () => ({
   agency: new AgencyRepository().data,
   consultationAboutFever: new ConsultationAboutFeverRepository().data,
+  dailyPositiveDetail: new DailyPositiveDetailRepository().data,
   data: new DataRepository().data,
   infectionMedicalCareProvisionStatus:
     new InfectionMedicalCareProvisionStatusRepository().data,