From b9cd3cace77238b926b12212625b936ac8725478 Mon Sep 17 00:00:00 2001
From: #7 <nyagi.hime@gmail.com>
Date: Mon, 1 Jun 2020 10:34:33 +0900
Subject: [PATCH] Revert "Release 2020/06/01"

---
 assets/locales/zh_CN.json                     |   5 +-
 components/AgencyBarChart.vue                 |  52 +++++---
 .../ConfirmedCasesByMunicipalitiesTable.vue   |  43 +++++-
 ...ConfirmedCasesIncreaseRatioByWeekChart.vue |  43 ++++--
 components/DashedRectangleTimeBarChart.vue    |  44 +++++--
 components/DataView.vue                       |  37 +-----
 components/DataViewExpantionPanel.vue         |  64 ---------
 components/DataViewTable.vue                  | 123 ++++++++----------
 components/MetroBarChart.vue                  |  40 ++++--
 components/MonitoringConfirmedCasesChart.vue  |  47 ++++---
 .../MonitoringConsultationDeskReportChart.vue |  44 +++----
 components/PositiveRateMixedChart.vue         |  65 +++++----
 components/SevereCaseBarChart.vue             |  36 +++--
 components/TimeBarChart.vue                   |  85 +++++++-----
 components/TimeStackedBarChart.vue            |  72 +++++-----
 components/UntrackedRateMixedChart.vue        |  54 +++++---
 components/WhatsNew.vue                       |   7 +-
 components/cards/AgencyCard.vue               |  23 +---
 .../cards/ConfirmedCasesAttributesCard.vue    |   6 +-
 .../ConfirmedCasesByMunicipalitiesCard.vue    |   2 +-
 components/cards/MetroCard.vue                |  36 ++---
 nuxt-i18n.config.ts                           |  64 +++++----
 pages/index.vue                               |   5 +-
 utils/formatDate.ts                           |  24 ----
 utils/formatTable.ts                          |  11 +-
 25 files changed, 524 insertions(+), 508 deletions(-)
 delete mode 100644 components/DataViewExpantionPanel.vue

diff --git a/assets/locales/zh_CN.json b/assets/locales/zh_CN.json
index 5598483701..5f4bef9d9b 100644
--- a/assets/locales/zh_CN.json
+++ b/assets/locales/zh_CN.json
@@ -463,8 +463,5 @@
   "テレワーク・時差出勤などスムーズビズの取組は、新型コロナウイルス感染症の対策としても効果的です。感染症対策として、東京2020大会時の交通混雑緩和に向けた取組の前倒しをお願いします。": "远程工作、错峰上班等Smooth Biz措施，对于新冠肺炎疫情也能起到很好的控制效果。为了控制疫情扩散，望企业能提前施行2020东京奥运交通舒缓措施。",
   "（注）検査結果の判明日を基準とする": "（注）以出检查结果的日期为准。",
   "※（1）、（2）、（6）、（7）は、7日間移動平均で算出（たとえば、5月7日の移動平均値は、5月1日から5月7日までの実績値を平均したもの）。また、（1）の数字が10人以下となった場合は、（2）及び（3）は参考値とする": "※（1）、（2）、（6）、（7）是7天移动平均值（例如，5月7日的移动平均值是5月1日至5月7日数值的平均）。若（1）的数字低于10人，（2）和（3）的数值为参考值",
-  "検査実施人数（健康安全研究センターによる実施分）": "检查人数（由“健康安全研究中心”实施）",
-  "※（4）（5）の目安となる数値は、患者数に応じた病床の確保数を参考として記載している。": "※（4）（5）的关注数值是对应的病床数目。",
-  "（5）入院患者数 レベル1：1,000床 → レベル2：3,000床 → レベル3：4,000床": "（5）住院患者数 1级：1,000床 → 2级：3,000床 → 3级：4,000床",
-  "（4）重症患者数 レベル1：100床 → レベル2：300床 → レベル3：700床": "（4）重症患者数 1级：100床 → 2级：300床 → 3级：700床"
+  "検査実施人数（健康安全研究センターによる実施分）": "检查人数（由“健康安全研究中心”实施）"
 }
\ No newline at end of file
diff --git a/components/AgencyBarChart.vue b/components/AgencyBarChart.vue
index ad37c197d6..22c6dfa41f 100644
--- a/components/AgencyBarChart.vue
+++ b/components/AgencyBarChart.vue
@@ -15,7 +15,29 @@
       :height="240"
     />
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item[0] }}</td>
+              <td class="text-end">{{ item[1] }}</td>
+              <td class="text-end">{{ item[2] }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
   </data-view>
 </template>
@@ -25,12 +47,8 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import { ChartOptions } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import AgencyData from '@/data/agency.json'
+import agencyData from '@/data/agency.json'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import { getGraphSeriesStyle } from '@/utils/colors'
 import { DisplayData, DataSets } from '@/plugins/vue-chart'
 
@@ -46,21 +64,26 @@ interface HTMLElementEvent<T extends HTMLElement> extends MouseEvent {
 }
 type Data = {
   canvas: boolean
+  chartData: typeof agencyData
+  date: string
   agencies: VueI18n.TranslateResult[]
 }
 type Methods = {}
 type Computed = {
   displayData: AgencyDisplayData
   displayOption: ChartOptions
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: VueI18n.TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 type Props = {
   title: string
   titleId: string
   chartId: string
-  chartData: typeof AgencyData
-  date: string
   unit: string
 }
 
@@ -74,7 +97,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: { DataView, DataViewTable },
+  components: { DataView },
   props: {
     title: {
       type: String,
@@ -91,11 +114,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       required: false,
       default: 'agency-bar-chart'
     },
-    chartData: Object,
-    date: {
-      type: String,
-      default: ''
-    },
     unit: {
       type: String,
       required: false,
@@ -111,6 +129,8 @@ const options: ThisTypedComponentOptionsWithRecordProps<
 
     return {
       canvas: true,
+      chartData: agencyData,
+      date: agencyData.date,
       agencies
     }
   },
diff --git a/components/ConfirmedCasesByMunicipalitiesTable.vue b/components/ConfirmedCasesByMunicipalitiesTable.vue
index 0c43a3ef7e..e998cfe9c7 100644
--- a/components/ConfirmedCasesByMunicipalitiesTable.vue
+++ b/components/ConfirmedCasesByMunicipalitiesTable.vue
@@ -13,7 +13,7 @@
       :fixed-header="true"
       :mobile-breakpoint="0"
       :disable-sort="true"
-      class="cardTable"
+      class="cardTableMunicipalities"
     />
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -25,6 +25,47 @@
   </data-view>
 </template>
 
+<style lang="scss">
+.cardTableMunicipalities {
+  &.v-data-table {
+    box-shadow: 0 -20px 12px -12px #0003 inset;
+    th {
+      padding: 8px 10px;
+      height: auto;
+      border-bottom: 1px solid $gray-4;
+      color: $gray-2;
+      @include font-size(12);
+    }
+
+    tbody {
+      tr {
+        color: $gray-1;
+
+        th {
+          font-weight: normal;
+        }
+
+        td {
+          padding: 8px 10px;
+          height: auto;
+          @include font-size(12);
+        }
+
+        &:nth-child(odd) {
+          th,
+          td {
+            background: rgba($gray-4, 0.3);
+          }
+        }
+      }
+    }
+    &:focus {
+      outline: dotted $gray-3 1px;
+    }
+  }
+}
+</style>
+
 <script lang="ts">
 import Vue from 'vue'
 import DataView from '@/components/DataView.vue'
diff --git a/components/ConfirmedCasesIncreaseRatioByWeekChart.vue b/components/ConfirmedCasesIncreaseRatioByWeekChart.vue
index b49dcbf338..71f5a66344 100644
--- a/components/ConfirmedCasesIncreaseRatioByWeekChart.vue
+++ b/components/ConfirmedCasesIncreaseRatioByWeekChart.vue
@@ -75,7 +75,27 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item.transition }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -98,10 +118,6 @@ import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
@@ -133,8 +149,14 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    text: string
+    transition: string
+  }[]
 }
 type Props = {
   title: string
@@ -161,12 +183,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,
diff --git a/components/DashedRectangleTimeBarChart.vue b/components/DashedRectangleTimeBarChart.vue
index b73c5b5d37..c6566aac99 100644
--- a/components/DashedRectangleTimeBarChart.vue
+++ b/components/DashedRectangleTimeBarChart.vue
@@ -35,7 +35,27 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item.transition }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -58,10 +78,7 @@ import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
+import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import {
@@ -102,8 +119,14 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    text: string
+    transition: string
+  }[]
 }
 
 type Props = {
@@ -131,12 +154,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,
diff --git a/components/DataView.vue b/components/DataView.vue
index 456194861d..58b45a8589 100644
--- a/components/DataView.vue
+++ b/components/DataView.vue
@@ -27,12 +27,9 @@
         <slot name="additionalDescription" />
       </div>
 
-      <data-view-expantion-panel
-        v-if="this.$slots.dataTable"
-        class="DataView-ExpantionPanel"
-      >
+      <data-view-table v-if="this.$slots.dataTable" class="DataView-Table">
         <slot name="dataTable" />
-      </data-view-expantion-panel>
+      </data-view-table>
 
       <div class="DataView-Space" />
 
@@ -42,7 +39,7 @@
           <div>
             <a class="Permalink" :href="permalink">
               <time :datetime="formattedDate">
-                {{ $t('{date} 更新', { date: formattedDateForDisplay }) }}
+                {{ $t('{date} 更新', { date }) }}
               </time>
             </a>
           </div>
@@ -63,11 +60,11 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
-import DataViewExpantionPanel from '@/components/DataViewExpantionPanel.vue'
+import DataViewTable from '@/components/DataViewTable.vue'
 import DataViewShare from '@/components/DataViewShare.vue'
 
 export default Vue.extend({
-  components: { DataViewExpantionPanel, DataViewShare },
+  components: { DataViewTable, DataViewShare },
   props: {
     title: {
       type: String,
@@ -86,9 +83,6 @@ export default Vue.extend({
     formattedDate(): string {
       return convertDatetimeToISO8601Format(this.date)
     },
-    formattedDateForDisplay(): string {
-      return this.$d(new Date(this.date), 'dateTime')
-    },
     permalink(): string {
       const permalink = '/cards/' + this.titleId
       return this.localePath(permalink)
@@ -179,28 +173,9 @@ export default Vue.extend({
     &--Additional {
       margin-bottom: 10px;
     }
-
-    ul,
-    ol {
-      list-style-type: none;
-      padding: 0;
-    }
-  }
-
-  &-Details {
-    margin: 10px 0;
-
-    .v-data-table {
-      .text-end {
-        text-align: right;
-      }
-      .text-nowrap {
-        white-space: nowrap;
-      }
-    }
   }
 
-  &-ExpantionPanel {
+  &-Table {
     margin-bottom: 10px;
   }
 
diff --git a/components/DataViewExpantionPanel.vue b/components/DataViewExpantionPanel.vue
deleted file mode 100644
index e948524730..0000000000
--- a/components/DataViewExpantionPanel.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <v-expansion-panels v-if="showDetails" flat>
-      <v-expansion-panel>
-        <v-expansion-panel-header
-          :hide-actions="true"
-          :style="{ transition: 'none' }"
-          @click="toggleDetails"
-        >
-          <div class="v-expansion-panel-header__icon">
-            <v-icon left>mdi-chevron-right</v-icon>
-          </div>
-          <span class="expansion-panel-text">{{ $t('テーブルを表示') }}</span>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <slot />
-        </v-expansion-panel-content>
-      </v-expansion-panel>
-    </v-expansion-panels>
-    <template v-else>
-      <slot />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import { EventBus, TOGGLE_EVENT } from '@/utils/card-event-bus'
-
-export default Vue.extend({
-  data() {
-    return {
-      showDetails: false
-    }
-  },
-  mounted() {
-    this.showDetails = true
-  },
-  methods: {
-    toggleDetails() {
-      EventBus.$emit(TOGGLE_EVENT, { dataView: this.$parent })
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-.v-expansion-panel-header__icon {
-  margin-left: -5px !important;
-
-  & .v-icon--left {
-    margin-right: 5px;
-  }
-
-  .v-expansion-panel--active & .v-icon {
-    transform: rotate(90deg) !important;
-  }
-}
-
-.expansion-panel-text {
-  color: $gray-1;
-  @include font-size(14);
-}
-</style>
diff --git a/components/DataViewTable.vue b/components/DataViewTable.vue
index 95cd010d86..562e035033 100644
--- a/components/DataViewTable.vue
+++ b/components/DataViewTable.vue
@@ -1,88 +1,69 @@
 <template>
-  <v-data-table
-    :headers="headers"
-    :items="items"
-    :items-per-page="-1"
-    :hide-default-footer="true"
-    :height="240"
-    :fixed-header="true"
-    :disable-sort="true"
-    :mobile-breakpoint="0"
-    class="cardTable"
-    item-key="name"
-  >
-    <template v-slot:body="{ items }">
-      <tbody>
-        <tr v-for="(item, i) in items" :key="i">
-          <th scope="row">{{ item[headerKey] }}</th>
-          <td v-for="(dataKey, j) in dataKeys" :key="j" class="text-end">
-            {{ item[dataKey] }}
-          </td>
-        </tr>
-      </tbody>
+  <div>
+    <v-expansion-panels v-if="showDetails" flat>
+      <v-expansion-panel>
+        <v-expansion-panel-header
+          :hide-actions="true"
+          :style="{ transition: 'none' }"
+          @click="toggleDetails"
+        >
+          <template slot:actions>
+            <div class="v-expansion-panel-header__icon">
+              <v-icon left>mdi-chevron-right</v-icon>
+            </div>
+          </template>
+          <span class="expansion-panel-text">{{ $t('テーブルを表示') }}</span>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <slot />
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <template v-else>
+      <slot />
     </template>
-  </v-data-table>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import { TranslateResult } from 'vue-i18n'
+import { EventBus, TOGGLE_EVENT } from '@/utils/card-event-bus'
 
-export type TableHeader = {
-  text: TranslateResult
-  value: string
-  align?: string
-}
-export type TableItem = {
-  text: string
-  transition?: string
-  cumulative?: string
-  [key: number]: number
-}
-type Data = {}
-type Methods = {}
-type Computed = {
-  dataKeys: string[]
-}
-type Props = {
-  headers: TableHeader[]
-  items: TableItem[]
-  headerKey: string
-}
-
-const options: ThisTypedComponentOptionsWithRecordProps<
-  Vue,
-  Data,
-  Methods,
-  Computed,
-  Props
-> = {
-  props: {
-    headers: {
-      type: Array,
-      default: () => []
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    headerKey: {
-      type: String,
-      default: 'text'
+export default Vue.extend({
+  data() {
+    return {
+      showDetails: false
     }
   },
-  computed: {
-    dataKeys() {
-      return this.headers.map(h => h.value).filter(h => h !== this.headerKey)
+  mounted() {
+    this.showDetails = true
+  },
+  methods: {
+    toggleDetails() {
+      EventBus.$emit(TOGGLE_EVENT, { dataView: this.$parent })
     }
   }
-}
-
-export default Vue.extend(options)
+})
 </script>
 
 <style lang="scss">
+.v-expansion-panel-header__icon {
+  margin-left: -5px !important;
+
+  & .v-icon--left {
+    margin-right: 5px;
+  }
+
+  .v-expansion-panel--active & .v-icon {
+    transform: rotate(90deg) !important;
+  }
+}
+
+.expansion-panel-text {
+  color: $gray-1;
+  @include font-size(14);
+}
+
 .v-data-table .text-end {
   text-align: right;
 }
diff --git a/components/MetroBarChart.vue b/components/MetroBarChart.vue
index aace5322c5..992f691117 100644
--- a/components/MetroBarChart.vue
+++ b/components/MetroBarChart.vue
@@ -15,7 +15,29 @@
       :height="240"
     />
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item[0] }}</td>
+              <td class="text-end">{{ item[1] }}</td>
+              <td class="text-end">{{ item[2] }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:footer>
       <ul>
@@ -42,13 +64,10 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { TranslateResult } from 'vue-i18n'
 import { ChartOptions, ChartData, Chart } from 'chart.js'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import { getGraphSeriesStyle } from '@/utils/colors'
 import ExternalLink from '@/components/ExternalLink.vue'
 import { DisplayData } from '@/plugins/vue-chart'
@@ -63,8 +82,13 @@ type Data = {
 type Methods = {}
 type Computed = {
   displayData: DisplayData
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
   displayOption: Chart.ChartOptions
 }
 type Props = {
@@ -89,7 +113,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: { DataView, DataViewTable, ExternalLink },
+  components: { DataView, ExternalLink },
   props: {
     title: {
       type: String,
diff --git a/components/MonitoringConfirmedCasesChart.vue b/components/MonitoringConfirmedCasesChart.vue
index 5bbf297fa5..f5006e0607 100644
--- a/components/MonitoringConfirmedCasesChart.vue
+++ b/components/MonitoringConfirmedCasesChart.vue
@@ -7,15 +7,7 @@
       <li v-for="(item, i) in dataLabels" :key="i" @click="onClickLegend(i)">
         <button>
           <div
-            v-if="i === 1"
-            :style="{
-              background: colors[i].fillColor,
-              border: 0,
-              height: '3px'
-            }"
-          />
-          <div
-            v-else-if="i === 2"
+            v-if="i === 2"
             :style="{
               background: `repeating-linear-gradient(90deg, ${colors[i].fillColor}, ${colors[i].fillColor} 2px, #fff 2px, #fff 4px)`,
               border: 0,
@@ -78,12 +70,23 @@
         />
       </div>
     </div>
+    <template v-slot:dataTable>
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      />
+    </template>
     <template v-slot:additionalDescription>
       <slot name="additionalDescription" />
     </template>
-    <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
-    </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
         :l-text="displayInfo.lText"
@@ -104,10 +107,6 @@ import { TranslateResult } from 'vue-i18n'
 import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
@@ -138,8 +137,13 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 
 type Props = {
@@ -166,12 +170,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,
diff --git a/components/MonitoringConsultationDeskReportChart.vue b/components/MonitoringConsultationDeskReportChart.vue
index 9b2c76981e..9c4460163f 100644
--- a/components/MonitoringConsultationDeskReportChart.vue
+++ b/components/MonitoringConsultationDeskReportChart.vue
@@ -7,15 +7,6 @@
       <li v-for="(item, i) in dataLabels" :key="i" @click="onClickLegend(i)">
         <button>
           <div
-            v-if="i === 1"
-            :style="{
-              backgroundColor: colors[i].fillColor,
-              border: 0,
-              height: '3px'
-            }"
-          />
-          <div
-            v-else
             :style="{
               backgroundColor: colors[i].fillColor,
               borderColor: colors[i].strokeColor
@@ -63,7 +54,18 @@
       </div>
     </div>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      />
     </template>
     <template v-slot:additionalDescription>
       <slot name="additionalDescription" />
@@ -88,12 +90,8 @@ import { TranslateResult } from 'vue-i18n'
 import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
-import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
 import { getGraphSeriesColor, SurfaceStyle } from '@/utils/colors'
 
@@ -122,8 +120,13 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 
 type Props = {
@@ -148,12 +151,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,
diff --git a/components/PositiveRateMixedChart.vue b/components/PositiveRateMixedChart.vue
index 7706ce0d71..3427656908 100644
--- a/components/PositiveRateMixedChart.vue
+++ b/components/PositiveRateMixedChart.vue
@@ -14,11 +14,10 @@
       >
         <button>
           <div
-            v-if="i === 2"
+            v-if="i >= 2"
             :style="{
               backgroundColor: '#CC7004',
-              border: 0,
-              height: '3px'
+              borderColor: '#CC7004'
             }"
           />
           <div
@@ -73,7 +72,30 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item['0'] }}</td>
+              <td class="text-end">{{ item['1'] }}</td>
+              <td class="text-end">{{ item['2'] }}</td>
+              <td class="text-end">{{ item['3'] }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -92,10 +114,7 @@ import { TranslateResult } from 'vue-i18n'
 import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
+import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import {
   DisplayData,
@@ -135,8 +154,13 @@ type Computed = {
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
   scaledTicksYAxisMaxRight: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 
 type Props = {
@@ -164,11 +188,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel },
   props: {
     title: {
       type: String,
@@ -236,14 +256,10 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       return this.formatDayBeforeRatio(lastDay - lastDayBefore)
     },
     displayInfo() {
-      const date = this.$d(
-        new Date(this.labels[this.labels.length - 1]),
-        'dateWithoutYear'
-      )
       return {
         lText: this.pickLastNumber(this.chartData)[2].toLocaleString(),
         sText: `${this.$t('{date}の数値', {
-          date
+          date: dayjs(this.labels[this.labels.length - 1]).format('M/D')
         })}（${this.$t('前日比')}: ${this.displayTransitionRatio} ${
           this.unit
         }）`,
@@ -303,7 +319,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       return this.labels
         .map((label, i) => {
           return Object.assign(
-            { text: this.$d(new Date(label), 'dateWithoutYear') },
+            { text: dayjs(label).format('M/D') },
             ...this.tableHeaders.map((_, j) => {
               if (j <= 1) {
                 const data = this.chartData[j]
@@ -331,7 +347,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         .reverse()
     },
     displayOption() {
-      const self = this
       const unit = this.unit
       const data = this.chartData
       const options: Chart.ChartOptions = {
@@ -353,8 +368,10 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               return label
             },
             title(tooltipItem, data) {
-              const label = data.labels![tooltipItem[0].index!].toString()
-              return self.$d(new Date(label), 'dateWithoutYear')
+              const date = dayjs(
+                data.labels![tooltipItem[0].index!].toString()
+              ).format('M/D')
+              return String(date)
             }
           }
         },
diff --git a/components/SevereCaseBarChart.vue b/components/SevereCaseBarChart.vue
index 389ab235bc..d3bf0779a2 100644
--- a/components/SevereCaseBarChart.vue
+++ b/components/SevereCaseBarChart.vue
@@ -32,7 +32,18 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      />
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -46,15 +57,13 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { TranslateResult } from 'vue-i18n'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
+import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
@@ -80,8 +89,14 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    text: string
+    transition: string
+  }[]
 }
 type Props = {
   title: string
@@ -105,12 +120,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel,
-    OpenDataLink
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,
diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
index a45216f337..749ccbb8d5 100644
--- a/components/TimeBarChart.vue
+++ b/components/TimeBarChart.vue
@@ -42,7 +42,28 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item.transition }}</td>
+              <td class="text-end">{{ item.cumulative }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -59,6 +80,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import { TranslateResult } from 'vue-i18n'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
@@ -66,15 +88,10 @@ import { GraphDataType } from '@/utils/formatGraph'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import OpenDataLink from '@/components/OpenDataLink.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
 
 import { getGraphSeriesStyle } from '@/utils/colors'
-import { getComplementedDate } from '@/utils/formatDate'
 
 type Data = {
   dataKind: 'transition' | 'cumulative'
@@ -98,8 +115,15 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    text: string
+    transition: string
+    cumulative: string
+  }[]
 }
 type Props = {
   title: string
@@ -128,13 +152,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         ? 'cumulative'
         : 'transition'
   },
-  components: {
-    DataView,
-    DataSelector,
-    DataViewBasicInfoPanel,
-    DataViewTable,
-    OpenDataLink
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel, OpenDataLink },
   props: {
     title: {
       type: String,
@@ -194,21 +212,24 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       return this.formatDayBeforeRatio(lastDay - lastDayBefore)
     },
     displayInfo() {
-      const date = this.chartData.slice(-1)[0].label
       if (this.dataKind === 'transition' && this.byDate) {
         return {
           lText: `${this.chartData.slice(-1)[0].transition.toLocaleString()}`,
-          sText: `${date} ${this.$t('日別値')}（${this.$t('前日比')}: ${
-            this.displayTransitionRatio
-          } ${this.unit}）`,
+          sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
+            '日別値'
+          )}（${this.$t('前日比')}: ${this.displayTransitionRatio} ${
+            this.unit
+          }）`,
           unit: this.unit
         }
       } else if (this.dataKind === 'transition') {
         return {
           lText: `${this.chartData.slice(-1)[0].transition.toLocaleString()}`,
-          sText: `${date} ${this.$t('実績値')}（${this.$t('前日比')}: ${
-            this.displayTransitionRatio
-          } ${this.unit}）`,
+          sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
+            '実績値'
+          )}（${this.$t('前日比')}: ${this.displayTransitionRatio} ${
+            this.unit
+          }）`,
           unit: this.unit
         }
       }
@@ -216,9 +237,11 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         lText: this.chartData[
           this.chartData.length - 1
         ].cumulative.toLocaleString(),
-        sText: `${date} ${this.$t('累計値')}（${this.$t('前日比')}: ${
-          this.displayCumulativeRatio
-        } ${this.unit}）`,
+        sText: `${this.chartData.slice(-1)[0].label} ${this.$t(
+          '累計値'
+        )}（${this.$t('前日比')}: ${this.displayCumulativeRatio} ${
+          this.unit
+        }）`,
         unit: this.unit
       }
     },
@@ -291,7 +314,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       }
     },
     displayOption() {
-      const self = this
       const unit = this.unit
       const scaledTicksYAxisMax = this.scaledTicksYAxisMax
       const options: Chart.ChartOptions = {
@@ -305,11 +327,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               return labelText
             },
             title(tooltipItem, data) {
-              const label = data.labels![tooltipItem[0].index!] as string
-              return self.$d(
-                new Date(getComplementedDate(label)),
-                'dateWithoutYear'
-              )
+              return data.labels![tooltipItem[0].index!] as string[]
             }
           }
         },
@@ -520,10 +538,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       return this.chartData
         .map((d, _) => {
           return {
-            text: this.$d(
-              new Date(getComplementedDate(d.label)),
-              'dateWithoutYear'
-            ),
+            text: d.label,
             transition: d.transition.toLocaleString(),
             cumulative: d.cumulative.toLocaleString()
           }
diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue
index ccd4dee54d..770417b583 100644
--- a/components/TimeStackedBarChart.vue
+++ b/components/TimeStackedBarChart.vue
@@ -62,7 +62,30 @@
       />
     </div>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item['0'] }}</td>
+              <td class="text-end">{{ item['1'] }}</td>
+              <td class="text-end">{{ item['2'] }}</td>
+              <td class="text-end">{{ item['3'] }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:additionalDescription>
       <slot name="additionalDescription" />
@@ -85,14 +108,9 @@ import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import DataView from '@/components/DataView.vue'
 import DataSelector from '@/components/DataSelector.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import { DisplayData, yAxesBgPlugin, scrollPlugin } from '@/plugins/vue-chart'
 import { getGraphSeriesStyle, SurfaceStyle } from '@/utils/colors'
-import { getComplementedDate } from '@/utils/formatDate'
 
 interface HTMLElementEvent<T extends HTMLElement> extends MouseEvent {
   currentTarget: T
@@ -124,8 +142,13 @@ type Computed = {
   displayDataHeader: DisplayData
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 
 type Props = {
@@ -157,12 +180,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         ? 'cumulative'
         : 'transition'
   },
-  components: {
-    DataView,
-    DataSelector,
-    DataViewTable,
-    DataViewBasicInfoPanel
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel },
   props: {
     title: {
       type: String,
@@ -225,20 +243,20 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   }),
   computed: {
     displayInfo() {
-      const date = this.$d(
-        new Date(this.labels[this.labels.length - 1]),
-        'dateWithoutYear'
-      )
       if (this.dataKind === 'transition') {
         return {
           lText: this.sum(this.pickLastNumber(this.chartData)).toLocaleString(),
-          sText: `${this.$t('{date}の合計', { date })}`,
+          sText: `${this.$t('{date}の合計', {
+            date: this.labels[this.labels.length - 1]
+          })}`,
           unit: this.unit
         }
       }
       return {
         lText: this.sum(this.cumulativeSum(this.chartData)).toLocaleString(),
-        sText: `${this.$t('{date}の全体累計', { date })}`,
+        sText: `${this.$t('{date}の全体累計', {
+          date: this.labels[this.labels.length - 1]
+        })}`,
         unit: this.unit
       }
     },
@@ -292,12 +310,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       return this.labels
         .map((label, i) => {
           return Object.assign(
-            {
-              text: this.$d(
-                new Date(getComplementedDate(label)),
-                'dateWithoutYear'
-              )
-            },
+            { text: label },
             ...this.tableHeaders.map((_, j) => {
               const index = j < 2 ? 0 : 1
               const transition = this.chartData[index]
@@ -315,7 +328,6 @@ const options: ThisTypedComponentOptionsWithRecordProps<
         .reverse()
     },
     displayOption() {
-      const self = this
       const unit = this.unit
       const sumArray = this.eachArraySum(this.chartData)
       const data = this.chartData
@@ -352,11 +364,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
               return label
             },
             title(tooltipItem, data) {
-              const label = data.labels![tooltipItem[0].index!] as string
-              return self.$d(
-                new Date(getComplementedDate(label)),
-                'dateWithoutYear'
-              )
+              return String(data.labels![tooltipItem[0].index!])
             }
           }
         },
diff --git a/components/UntrackedRateMixedChart.vue b/components/UntrackedRateMixedChart.vue
index 0c3c3af005..5943d81392 100644
--- a/components/UntrackedRateMixedChart.vue
+++ b/components/UntrackedRateMixedChart.vue
@@ -14,15 +14,7 @@
       >
         <button>
           <div
-            v-if="i === 2"
-            :style="{
-              backgroundColor: colors[i].fillColor,
-              border: 0,
-              height: '3px'
-            }"
-          />
-          <div
-            v-else-if="i === 3"
+            v-if="i === 3"
             :style="{
               background: `repeating-linear-gradient(90deg, ${colors[i].fillColor}, ${colors[i].fillColor} 2px, #fff 2px, #fff 4px)`,
               border: 0,
@@ -81,7 +73,29 @@
       <slot name="additionalDescription" />
     </template>
     <template v-slot:dataTable>
-      <data-view-table :headers="tableHeaders" :items="tableData" />
+      <v-data-table
+        :headers="tableHeaders"
+        :items="tableData"
+        :items-per-page="-1"
+        :hide-default-footer="true"
+        :height="240"
+        :fixed-header="true"
+        :disable-sort="true"
+        :mobile-breakpoint="0"
+        class="cardTable"
+        item-key="name"
+      >
+        <template v-slot:body="{ items }">
+          <tbody>
+            <tr v-for="item in items" :key="item.text">
+              <th scope="row">{{ item.text }}</th>
+              <td class="text-end">{{ item['0'] }}</td>
+              <td class="text-end">{{ item['1'] }}</td>
+              <td class="text-end">{{ item['2'] }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-data-table>
     </template>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
@@ -100,10 +114,7 @@ import { TranslateResult } from 'vue-i18n'
 import { Chart } from 'chart.js'
 import dayjs from 'dayjs'
 import DataView from '@/components/DataView.vue'
-import DataViewTable, {
-  TableHeader,
-  TableItem
-} from '@/components/DataViewTable.vue'
+import DataSelector from '@/components/DataSelector.vue'
 import DataViewBasicInfoPanel from '@/components/DataViewBasicInfoPanel.vue'
 import {
   DisplayData,
@@ -145,8 +156,13 @@ type Computed = {
   displayOptionHeader: Chart.ChartOptions
   scaledTicksYAxisMax: number
   scaledTicksYAxisMaxRight: number
-  tableHeaders: TableHeader[]
-  tableData: TableItem[]
+  tableHeaders: {
+    text: TranslateResult
+    value: string
+  }[]
+  tableData: {
+    [key: number]: number
+  }[]
 }
 
 type Props = {
@@ -175,11 +191,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   created() {
     this.canvas = process.browser
   },
-  components: {
-    DataView,
-    DataViewTable,
-    DataViewBasicInfoPanel
-  },
+  components: { DataView, DataSelector, DataViewBasicInfoPanel },
   props: {
     title: {
       type: String,
diff --git a/components/WhatsNew.vue b/components/WhatsNew.vue
index 73fea0dfd2..893c9600d6 100644
--- a/components/WhatsNew.vue
+++ b/components/WhatsNew.vue
@@ -45,7 +45,10 @@ import Vue from 'vue'
 import LinkToInformationAboutEmergencyMeasure from '@/components/LinkToInformationAboutEmergencyMeasure.vue'
 import LinkToInformationAboutRoadmap from '@/components/LinkToInformationAboutRoadmap.vue'
 
-import { convertDateToISO8601Format } from '@/utils/formatDate'
+import {
+  convertDateByCountryPreferTimeFormat,
+  convertDateToISO8601Format
+} from '@/utils/formatDate'
 
 export default Vue.extend({
   components: {
@@ -71,7 +74,7 @@ export default Vue.extend({
       return convertDateToISO8601Format(dateString)
     },
     formattedDateForDisplay(dateString: string) {
-      return this.$d(new Date(dateString), 'date')
+      return convertDateByCountryPreferTimeFormat(dateString, this.$i18n.locale)
     }
   }
 })
diff --git a/components/cards/AgencyCard.vue b/components/cards/AgencyCard.vue
index faab441ddf..2517bd068d 100644
--- a/components/cards/AgencyCard.vue
+++ b/components/cards/AgencyCard.vue
@@ -16,35 +16,14 @@
 </template>
 
 <script>
-import AgencyData from '@/data/agency.json'
+import agencyData from '@/data/agency.json'
 import AgencyBarChart from '@/components/AgencyBarChart.vue'
-import { getComplementedDate } from '@/utils/formatDate'
 
 export default {
   components: {
     AgencyBarChart
   },
   data() {
-    const labels = AgencyData.labels.map(l => {
-      const dates = l.split('~')
-      if (dates.length === 2) {
-        const from = this.$d(
-          new Date(getComplementedDate(dates[0])),
-          'dateWithoutYear'
-        )
-        const to = this.$d(
-          new Date(getComplementedDate(dates[1])),
-          'dateWithoutYear'
-        )
-        return `${from}~${to}`
-      } else {
-        return ''
-      }
-    })
-    const agencyData = {
-      ...AgencyData,
-      labels
-    }
     return {
       agencyData
     }
diff --git a/components/cards/ConfirmedCasesAttributesCard.vue b/components/cards/ConfirmedCasesAttributesCard.vue
index 3af039576f..68921b34dd 100644
--- a/components/cards/ConfirmedCasesAttributesCard.vue
+++ b/components/cards/ConfirmedCasesAttributesCard.vue
@@ -29,14 +29,14 @@ export default {
     const patientsGraph = formatGraph(Data.patients_summary.data)
     // 感染者数
     const patientsTable = formatTable(Data.patients.data)
-    // 日付
-    const date = patientsGraph[patientsGraph.length - 1].label
 
     const sumInfoOfPatients = {
       lText: patientsGraph[
         patientsGraph.length - 1
       ].cumulative.toLocaleString(),
-      sText: this.$t('{date}の累計', { date }),
+      sText: this.$t('{date}の累計', {
+        date: patientsGraph[patientsGraph.length - 1].label
+      }),
       unit: this.$t('人')
     }
 
diff --git a/components/cards/ConfirmedCasesByMunicipalitiesCard.vue b/components/cards/ConfirmedCasesByMunicipalitiesCard.vue
index fa9aa6ae41..94fe45a877 100644
--- a/components/cards/ConfirmedCasesByMunicipalitiesCard.vue
+++ b/components/cards/ConfirmedCasesByMunicipalitiesCard.vue
@@ -77,7 +77,7 @@ export default {
 
     const info = {
       sText: this.$t('{date}の累計', {
-        date: this.$d(new Date(Data.datasets.date), 'dateWithoutYear')
+        date: dayjs(Data.datasets.date).format('M/DD')
       })
     }
 
diff --git a/components/cards/MetroCard.vue b/components/cards/MetroCard.vue
index c438e47fb1..84c70f13eb 100644
--- a/components/cards/MetroCard.vue
+++ b/components/cards/MetroCard.vue
@@ -33,7 +33,6 @@
 import Data from '@/data/data.json'
 import MetroData from '@/data/metro.json'
 import MetroBarChart from '@/components/MetroBarChart.vue'
-import { getComplementedDate } from '@/utils/formatDate'
 
 export default {
   components: {
@@ -41,20 +40,19 @@ export default {
   },
   data() {
     // 都営地下鉄の利用者数の推移
-    const datasets = MetroData.datasets.map(d => ({
-      ...d,
-      label: this.getWeekLabel(d.label)
-    }))
-    const metroGraph = {
-      ...MetroData,
-      datasets
+    const metroGraph = MetroData
+    for (const dataset of metroGraph.datasets) {
+      dataset.label = this.getWeekLabel(dataset.label)
     }
 
     // metroGraph ツールチップ title文字列
     // this.$t を使うため metroGraphOption の外側へ
     const metroGraphTooltipTitle = (tooltipItems, _) => {
-      const duration = this.getWeekLabel(tooltipItems[0].label)
-      return this.$t('期間: {duration}', { duration })
+      const label = this.getWeekLabel(tooltipItems[0].label)
+      return this.$t('期間: {duration}', {
+        // duration = label = '2\/10~14' etc.
+        duration: this.$t(label)
+      })
     }
     // metroGraph ツールチップ label文字列
     // this.$t を使うため metroGraphOption の外側へ
@@ -102,20 +100,10 @@ export default {
         label = label.replace('~', `~${month}/`)
       }
 
-      const dates = label.split('~')
-      if (slashCount === 1 && dates.length === 2) {
-        const from = this.$d(
-          new Date(getComplementedDate(dates[0])),
-          'dateWithoutYear'
-        )
-        const to = this.$d(
-          new Date(getComplementedDate(dates[1])),
-          'dateWithoutYear'
-        )
-        return `${from}~${to}`
-      } else {
-        return `${dates[0]}~${dates[1]}`
-      }
+      // 日は、0埋めしない
+      label = label.replace('/0', '/')
+
+      return label
     }
   }
 }
diff --git a/nuxt-i18n.config.ts b/nuxt-i18n.config.ts
index 4de30d56f7..4d60c9b4b7 100644
--- a/nuxt-i18n.config.ts
+++ b/nuxt-i18n.config.ts
@@ -1,25 +1,5 @@
 import { NuxtVueI18n } from 'nuxt-i18n'
 
-const dateTimeFormatsCommon = {
-  dateTime: {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    hour12: false
-  },
-  date: {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  },
-  dateWithoutYear: {
-    month: 'short',
-    day: 'numeric'
-  }
-}
-
 const options: NuxtVueI18n.Options.AllOptionsInterface = {
   strategy: 'prefix_except_default',
   detectBrowserLanguage: {
@@ -30,12 +10,44 @@ const options: NuxtVueI18n.Options.AllOptionsInterface = {
   vueI18n: {
     fallbackLocale: 'ja',
     dateTimeFormats: {
-      ja: dateTimeFormatsCommon,
-      en: dateTimeFormatsCommon,
-      'zh-cn': dateTimeFormatsCommon,
-      'zh-tw': dateTimeFormatsCommon,
-      ko: dateTimeFormatsCommon,
-      'ja-basic': dateTimeFormatsCommon
+      ja: {
+        dateTime: {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+          hour12: false
+        },
+        date: {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric'
+        },
+        dateWithoutYear: {
+          month: 'short',
+          day: 'numeric'
+        }
+      },
+      en: {
+        dateTime: {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: 'numeric',
+          minute: 'numeric',
+          hour12: false
+        },
+        date: {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric'
+        },
+        dateWithoutYear: {
+          month: 'short',
+          day: 'numeric'
+        }
+      }
     },
     formatFallbackMessages: true
   },
diff --git a/pages/index.vue b/pages/index.vue
index d027c46916..4f705ccb69 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,7 +4,7 @@
       <page-header :icon="headerItem.icon">{{ headerItem.title }}</page-header>
       <div class="UpdatedAt">
         <span>{{ $t('最終更新') }}</span>
-        <time :datetime="updatedAt">{{ formattedDateForDisplay }}</time>
+        <time :datetime="updatedAt">{{ Data.lastUpdate }}</time>
       </div>
       <div
         v-show="!['ja', 'ja-basic'].includes($i18n.locale)"
@@ -137,9 +137,6 @@ export default Vue.extend({
   computed: {
     updatedAt() {
       return convertDatetimeToISO8601Format(this.$data.Data.lastUpdate)
-    },
-    formattedDateForDisplay() {
-      return this.$d(new Date(Data.lastUpdate), 'dateTime')
     }
   },
   head(): MetaInfo {
diff --git a/utils/formatDate.ts b/utils/formatDate.ts
index 3f1fd38b1b..46e62c262f 100644
--- a/utils/formatDate.ts
+++ b/utils/formatDate.ts
@@ -44,27 +44,3 @@ export const convertDateByCountryPreferTimeFormat = (
 export const convertDateToSimpleFormat = (dateString: string): string => {
   return dayjs(dateString).format('YYYY/MM/DD')
 }
-
-/**
- * Get date string complemented year
- *
- * @param dateString- Parsable string by dayjs
- */
-export const getComplementedDate = (dateString: string): string => {
-  const dates = dateString.split('/')
-  if (dates.length !== 2) {
-    return dateString
-  }
-  const month = Number(dates[0])
-  const date = Number(dates[1])
-  const today = new Date()
-  const currentMonth = today.getMonth() + 1
-  const currentDate = today.getDate()
-  let targetYear = today.getFullYear()
-
-  if (currentMonth <= month && currentDate <= date) {
-    targetYear = -1
-  }
-
-  return `${targetYear}/${month}/${date}`
-}
diff --git a/utils/formatTable.ts b/utils/formatTable.ts
index fe28bb4b9f..9e7fce2c76 100644
--- a/utils/formatTable.ts
+++ b/utils/formatTable.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import dayjs from 'dayjs'
 
 const headers = [
@@ -42,15 +41,9 @@ export default (data: DataType[]) => {
     datasets: []
   }
   data.forEach(d => {
-    const releaseDate = dayjs(d['リリース日']).isValid()
-      ? Vue.prototype.$nuxt.$options.i18n.d(
-          new Date(d['リリース日']),
-          'dateWithoutYear'
-        )
-      : '不明'
-
+    const releaseDate = dayjs(d['リリース日'])
     const TableRow: TableDataType = {
-      公表日: releaseDate,
+      公表日: releaseDate.isValid() ? releaseDate.format('M/D') : '不明',
       居住地: d['居住地'] ?? '調査中',
       年代: d['年代'] ?? '不明',
       性別: d['性別'] ?? '不明',