component のディレクトリ構成を変更する

auto-i18n/i18n_generator.py

@@ -20,8 +20,8 @@
 JSON_FILES = ["data.json", "patient.json"]
 
 # チェックするTypeScriptファイルのリスト
-# 現状はformatTable.tsしかないが、のちに表追加や、データ追加により必要になった場合は追加しなければならない。
-TS_FILES = ["formatTable.ts"]
+# 現状は formatConfirmedCasesAttributesTable.ts しかないが、のちに表追加や、データ追加により必要になった場合は追加しなければならない。
+TS_FILES = ["formatConfirmedCasesAttributesTable.ts"]
 
 # タグの正規表現パターン
 tag_pattern_t = re.compile("\$t\([ ]*?['|`][^']*?['|`]")
@@ -147,7 +147,7 @@
             # Noneが混じっているので、取り除く
             all_tags.pop(all_tags.index(None))
             # 全角のハイフン、半角のハイフン、全角のダッシュ、全角ハイフンマイナスが混じっているので、取り除く
-            # 理由は components/cards/ConfirmedCasesAttributesCard.vue の75行目辺りを参照。
+            # 理由は components/index/CardsReference/ConfirmedCasesAttributes/Card.vue の translateWord メソッドを参照。
             for x in ["-", "‐", "―", "－"]:
                 try:
                     all_tags.pop(all_tags.index(x))

components/DevelopmentModeMark.vue → components/_shared/DevelopmentModeMark.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 
 export default {
   name: 'DevelopmentModeMark',

components/SideNavigation.vue → components/_shared/SideNavigation.vue

@@ -156,9 +156,9 @@ import {
 import Vue from 'vue'
 import { TranslateResult } from 'vue-i18n'
 
-import AppLink from '@/components/AppLink.vue'
-import LanguageSelector from '@/components/LanguageSelector.vue'
-import MenuList from '@/components/MenuList.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import LanguageSelector from '@/components/_shared/SideNavigation/LanguageSelector.vue'
+import MenuList from '@/components/_shared/SideNavigation/MenuList.vue'
 
 type Item = {
   iconPath?: string

components/MenuList.vue → components/_shared/SideNavigation/MenuList.vue

@@ -27,7 +27,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 import CovidIcon from '@/static/covid.svg'
 import MaskTrashIcon from '@/static/masktrash.svg'
 import ParentIcon from '@/static/parent.svg'

components/CardsMonitoring.vue → components/index/CardsMonitoring.vue

@@ -6,37 +6,50 @@
 /* eslint-disable simple-import-sort/imports -- ブラウザでの表示順に合わせて各 card の component を import する */
 import Vue from 'vue'
 
+import CardsLazyRow from '@/components/index/_shared/CardsLazyRow.vue'
+
 // 検査陽性者の状況
 const ConfirmedCasesDetailsCard = () =>
-  import('@/components/cards/ConfirmedCasesDetailsCard.vue')
+  import('@/components/index/CardsMonitoring/ConfirmedCasesDetails/Card.vue')
 // 報告日別による陽性者数の推移
 const ConfirmedCasesNumberCard = () =>
-  import('@/components/cards/ConfirmedCasesNumberCard.vue')
+  import('@/components/index/CardsMonitoring/ConfirmedCasesNumber/Card.vue')
 // モニタリング項目
 const MonitoringItemsOverviewCard = () =>
-  import('@/components/cards/MonitoringItemsOverviewCard.vue')
+  import('@/components/index/CardsMonitoring/MonitoringItemsOverview/Card.vue')
 // モニタリング項目(1)新規陽性者数
 const MonitoringConfirmedCasesNumberCard = () =>
-  import('@/components/cards/MonitoringConfirmedCasesNumberCard.vue')
+  import(
+    '@/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue'
+  )
 // モニタリング項目(2)#7119における発熱等相談件数
 const ConsultationAboutFeverNumberCard = () =>
-  import('@/components/cards/ConsultationAboutFeverNumberCard.vue')
+  import(
+    '@/components/index/CardsMonitoring/ConsultationAboutFeverNumber/Card.vue'
+  )
 // モニタリング項目(3)新規陽性者における接触歴等不明者数
 const UntrackedRateCard = () =>
-  import('@/components/cards/UntrackedRateCard.vue')
+  import('@/components/index/CardsMonitoring/UntrackedRate/Card.vue')
 // モニタリング項目(4)検査の陽性率
-const PositiveRateCard = () => import('@/components/cards/PositiveRateCard.vue')
+const PositiveRateCard = () =>
+  import('@/components/index/CardsMonitoring/PositiveRate/Card.vue')
 // モニタリング項目(5)救急医療の東京ルールの適用件数
 const TokyoRulesApplicationNumberCard = () =>
-  import('@/components/cards/TokyoRulesApplicationNumberCard.vue')
+  import(
+    '@/components/index/CardsMonitoring/TokyoRulesApplicationNumber/Card.vue'
+  )
 // モニタリング項目(6)入院患者数
 const HospitalizedNumberCard = () =>
-  import('@/components/cards/HospitalizedNumberCard.vue')
+  import('@/components/index/CardsMonitoring/HospitalizedNumber/Card.vue')
 // モニタリング項目(7)重症患者数
-const SevereCaseCard = () => import('@/components/cards/SevereCaseCard.vue')
+const SevereCaseCard = () =>
+  import('@/components/index/CardsMonitoring/SevereCase/Card.vue')
 /* eslint-enable simple-import-sort/imports */
 
 export default Vue.extend({
+  components: {
+    CardsLazyRow,
+  },
   data() {
     return {
       rows: [

components/cards/ConfirmedCasesDetailsCard.vue → components/index/CardsMonitoring/ConfirmedCasesDetails/Card.vue

@@ -60,10 +60,11 @@
 <script>
 import dayjs from 'dayjs'
 
-import AppLink from '@/components/AppLink.vue'
-import ConfirmedCasesDetailsTable from '@/components/ConfirmedCasesDetailsTable.vue'
-import DataView from '@/components/DataView.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+// table タグとの衝突を避けるため ConfirmedCasesDetailsTable とする
+import ConfirmedCasesDetailsTable from '@/components/index/CardsMonitoring/ConfirmedCasesDetails/Table.vue'
 import Data from '@/data/data.json'
 import formatConfirmedCases from '@/utils/formatConfirmedCases'
 

components/cards/ConfirmedCasesNumberCard.vue → components/index/CardsMonitoring/ConfirmedCasesNumber/Card.vue

@@ -48,8 +48,8 @@
 </template>
 
 <script>
-import AppLink from '@/components/AppLink.vue'
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import TimeBarChart from '@/components/index/_shared/TimeBarChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 

components/cards/ConsultationAboutFeverNumberCard.vue → components/index/CardsMonitoring/ConsultationAboutFeverNumber/Card.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import MixedBarAndLineChart from '@/components/MixedBarAndLineChart.vue'
+import MixedBarAndLineChart from '@/components/index/_shared/MixedBarAndLineChart.vue'
 import ConsultationAboutFever from '@/data/consultation_about_fever.json'
 import {
   getNumberToFixedFunction,

components/cards/HospitalizedNumberCard.vue → components/index/CardsMonitoring/HospitalizedNumber/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <v-col cols="12" md="6" class="DataCard HospitalizedNumberCard">
     <client-only>
-      <dashed-rectangle-time-bar-chart
+      <chart
         :title="$t('モニタリング項目(6)')"
         :title-id="'number-of-hospitalized'"
         :info-titles="[$t('入院患者数')]"
@@ -33,19 +33,19 @@
             </li>
           </ul>
         </template>
-      </dashed-rectangle-time-bar-chart>
+      </chart>
     </client-only>
   </v-col>
 </template>
 
 <script>
-import DashedRectangleTimeBarChart from '@/components/DashedRectangleTimeBarChart.vue'
+import Chart from '@/components/index/CardsMonitoring/HospitalizedNumber/Chart.vue'
 import positiveStatus from '@/data/positive_status.json'
 import formatGraph from '@/utils/formatGraph'
 
 export default {
   components: {
-    DashedRectangleTimeBarChart,
+    Chart,
   },
   data() {
     const formatData = positiveStatus.data

components/DashedRectangleTimeBarChart.vue → components/index/CardsMonitoring/HospitalizedNumber/Chart.vue

@@ -62,14 +62,14 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import {
   DataSets,
   DataSetsPoint,

components/cards/MonitoringConfirmedCasesNumberCard.vue → components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue

@@ -1,11 +1,11 @@
 <template>
   <v-col cols="12" md="6" class="DataCard MonitoringConfirmedCasesNumberCard">
     <client-only>
-      <monitoring-confirmed-cases-chart
+      <monitoring-confirmed-cases-number-chart
         :title="$t('モニタリング項目(1)')"
         title-id="monitoring-number-of-confirmed-cases"
         :info-titles="[$t('新規陽性者数')]"
-        chart-id="monitoring-confirmed-cases-chart"
+        chart-id="monitoring-confirmed-cases-number-chart"
         :chart-data="chartData"
         :get-formatter="getFormatter"
         :date="date"
@@ -36,13 +36,13 @@
             </li>
           </ul>
         </template>
-      </monitoring-confirmed-cases-chart>
+      </monitoring-confirmed-cases-number-chart>
     </client-only>
   </v-col>
 </template>
 
 <script>
-import MonitoringConfirmedCasesChart from '@/components/MonitoringConfirmedCasesChart.vue'
+import MonitoringConfirmedCasesNumberChart from '@/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue'
 import Data from '@/data/daily_positive_detail.json'
 import {
   getNumberToFixedFunction,
@@ -51,7 +51,7 @@ import {
 
 export default {
   components: {
-    MonitoringConfirmedCasesChart,
+    MonitoringConfirmedCasesNumberChart,
   },
   data() {
     const [patientsCount, sevenDayMoveAverages, labels] = Data.data.reduce(

components/MonitoringConfirmedCasesChart.vue → components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Chart.vue

@@ -92,14 +92,14 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import { DisplayData, yAxesBgPlugin } from '@/plugins/vue-chart'
 import calcDayBeforeRatio from '@/utils/calcDayBeforeRatio'
 import { getGraphSeriesColor, SurfaceStyle } from '@/utils/colors'
@@ -182,7 +182,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
     },
     chartId: {
       type: String,
-      default: 'monitoring-confirmed-cases-chart',
+      default: 'monitoring-confirmed-cases-number-chart',
     },
     chartData: {
       type: Array,

components/cards/MonitoringItemsOverviewCard.vue → components/index/CardsMonitoring/MonitoringItemsOverview/Card.vue

@@ -49,14 +49,14 @@
         </template>
         <section>
           <h4>{{ $t('感染状況') }}</h4>
-          <monitoring-items-overview-table-infection-status
+          <infection-status
             :aria-label="$t('感染状況')"
             :items="monitoringItems"
           />
         </section>
         <section>
           <h4>{{ $t('医療提供体制') }}</h4>
-          <monitoring-items-overview-table-medical-system
+          <medical-system
             :aria-label="$t('医療提供体制')"
             :items="monitoringItems"
           />
@@ -75,18 +75,18 @@
 </template>
 
 <script>
-import AppLink from '@/components/AppLink.vue'
-import DataView from '@/components/DataView.vue'
-import MonitoringItemsOverviewTableInfectionStatus from '@/components/MonitoringItemsOverviewTableInfectionStatus.vue'
-import MonitoringItemsOverviewTableMedicalSystem from '@/components/MonitoringItemsOverviewTableMedicalSystem.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import InfectionStatus from '@/components/index/CardsMonitoring/MonitoringItemsOverview/Table/InfectionStatus.vue'
+import MedicalSystem from '@/components/index/CardsMonitoring/MonitoringItemsOverview/Table/MedicalSystem.vue'
 import monitoringItemsData from '@/data/monitoring_items.json'
 import { formatMonitoringItems } from '@/utils/formatMonitoringItems'
 
 export default {
   components: {
     DataView,
-    MonitoringItemsOverviewTableInfectionStatus,
-    MonitoringItemsOverviewTableMedicalSystem,
+    InfectionStatus,
+    MedicalSystem,
     AppLink,
   },
   data() {

components/MonitoringItemsOverviewTableInfectionStatus.vue → components/index/CardsMonitoring/MonitoringItemsOverview/Table/InfectionStatus.vue

@@ -3,7 +3,7 @@
     <li :class="[$style.box]">
       <div :class="$style.content">
         <span>{{ $t('(1)新規陽性者数') }}</span>
-        <monitoring-items-overview-table-value-with-translatable-unit
+        <value-with-translatable-unit
           :value="items['(1)新規陽性者数'].value"
           :unit="items['(1)新規陽性者数'].unit"
           :bold="items['(1)新規陽性者数'].bold"
@@ -24,7 +24,7 @@
                 )
               }}
             </span>
-            <monitoring-items-overview-table-value-with-translatable-unit
+            <value-with-translatable-unit
               :value="
                 items[
                   '(2)#7119（東京消防庁救急相談センター）における発熱等相談件数 '
@@ -51,7 +51,7 @@
             <li :class="[$style.box]">
               <div :class="$style.content">
                 <span>{{ $t('人数') }}</span>
-                <monitoring-items-overview-table-value-with-translatable-unit
+                <value-with-translatable-unit
                   :value="
                     items['(3)新規陽性者における接触歴等不明者（人数）'].value
                   "
@@ -67,7 +67,7 @@
             <li :class="[$style.box]">
               <div :class="$style.content">
                 <span>{{ $t('増加比') }}</span>
-                <monitoring-items-overview-table-value-with-translatable-unit
+                <value-with-translatable-unit
                   :value="
                     items['(3)新規陽性者における接触歴等不明者（増加比）'].value
                   "
@@ -90,12 +90,12 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 
-import MonitoringItemsOverviewTableValueWithTranslatableUnit from '@/components/MonitoringItemsOverviewTableValueWithTranslatableUnit.vue'
+import ValueWithTranslatableUnit from '@/components/index/CardsMonitoring/MonitoringItemsOverview/Table/ValueWithTranslatableUnit.vue'
 import { MonitoringItems } from '@/utils/formatMonitoringItems'
 
 export default Vue.extend({
   components: {
-    MonitoringItemsOverviewTableValueWithTranslatableUnit,
+    ValueWithTranslatableUnit,
   },
   props: {
     items: {