diff --git a/assets/monitoringItemsTableCommon.scss b/assets/monitoringItemsTableCommon.scss new file mode 100644 index 0000000000000..7e5c624e70943 --- /dev/null +++ b/assets/monitoringItemsTableCommon.scss @@ -0,0 +1,138 @@ +$default-bdw: 1px; +$default-pad: 0.5rem 0.2rem; + +.table { + width: 100%; + color: $green-1; + border-collapse: collapse; + + @include font-size(16); + + @include lessThan($small) { + display: block; + overflow-x: auto; + white-space: nowrap; + } + + th, + td { + padding: $default-pad; + border: $default-bdw solid $green-1; + height: 100%; + } + + tbody th { + font-weight: normal; + text-align: center; + } + + td { + text-align: center; + } + + thead { + white-space: nowrap; + } + + .itemName { + justify-content: flex-start; + text-align: left; + font-weight: bold; + padding: { + left: 1rem; + right: 1rem; + } + } + + .aboveEmptyCell { + border: none; + } + + .emptyCell { + border-top: none; + } + + .wrapAllowed { + white-space: normal; + min-width: 10ch; + } + + .cellWidth { + $widthItemName: 80%; + $widthItemValue: 20%; + $widthCatSuper: 0.2; + $widthCatSub: 0.22; + + &-itemNameFullWidth { + width: $widthItemName; + } + + &-itemNameCategorizedSuper { + width: $widthItemName * (1.0 - $widthCatSuper); + } + + &-itemNameCategorizedSuperSub { + width: $widthItemName * (1.0 - $widthCatSuper - $widthCatSub); + } + + &-itemCategorySuperordinate { + width: $widthItemName * $widthCatSuper; + } + + &-itemCategorySubordinate { + width: $widthItemName * $widthCatSub; + } + + &-itemValue { + width: $widthItemValue; + } + } +} + +@mixin override($vw, $bdw, $fz, $pad) { + .table { + border-width: $bdw; + @include font-size($fz); + + th, + td { + padding: $pad; + border-width: $bdw; + } + } +} + +/* +// variables.scss Breakpoints: huge (1440) +@include lessThan(1440) { + @include override(1440, 3, 15, 150); +} + +// Vuetify Breakpoints: Large (1264) +@include lessThan(1263) { + @include override(1263, 2, 13, 107); +} + +// variables.scss Breakpoints: large (1170) +@include lessThan(1170) { + @include override(1170, 2, 13, 107); +} + +// Vuetify Breakpoints: Small (960) +@include lessThan(959) { + @include override(960, 4, 14, 180); +} + +@include lessThan(767) { + @include override(960, 3, 14, 180); +} + +// Vuetify Breakpoints: Extra Small (600) +@include lessThan(600) { + @include override(600, 3, 14, 150); +} + +@include lessThan(420) { + @include override(600, 2, 12, 150); +} +*/ diff --git a/components/CardsMonitoring.vue b/components/CardsMonitoring.vue index 9b884d7c2d0d8..5ba5fc5558e1b 100644 --- a/components/CardsMonitoring.vue +++ b/components/CardsMonitoring.vue @@ -5,8 +5,8 @@ - - + + @@ -37,7 +37,7 @@ import PositiveRateCard from '@/components/cards/PositiveRateCard.vue' import SevereCaseCard from '@/components/cards/SevereCaseCard.vue' import UntrackedRateCard from '@/components/cards/UntrackedRateCard.vue' import HospitalizedNumberCard from '@/components/cards/HospitalizedNumberCard.vue' -import MonitoringStatusOverviewCard from '@/components/cards/MonitoringStatusOverviewCard.vue' +import MonitoringItemsOverviewCard from '@/components/cards/MonitoringItemsOverviewCard.vue' import MonitoringConsultationDeskReportsNumberCard from '@/components/cards/MonitoringConsultationDeskReportsNumberCard.vue' import ConsultationAboutFeverNumberCard from '@/components/cards/ConsultationAboutFeverNumberCard.vue' import TokyoRulesApplicationNumberCard from '@/components/cards/TokyoRulesApplicationNumberCard.vue' @@ -52,9 +52,10 @@ export default Vue.extend({ ConfirmedCasesDetailsCard, ConfirmedCasesNumberCard, HospitalizedNumberCard, - MonitoringStatusOverviewCard, + MonitoringConsultationDeskReportsNumberCard, ConsultationAboutFeverNumberCard, - TokyoRulesApplicationNumberCard + TokyoRulesApplicationNumberCard, + MonitoringItemsOverviewCard } }) diff --git a/components/MonitoringItemsOverviewTableInfectionStatus.vue b/components/MonitoringItemsOverviewTableInfectionStatus.vue new file mode 100644 index 0000000000000..ad474057a1dd4 --- /dev/null +++ b/components/MonitoringItemsOverviewTableInfectionStatus.vue @@ -0,0 +1,132 @@ + + + + + diff --git a/components/MonitoringItemsOverviewTableMedicalSystem.vue b/components/MonitoringItemsOverviewTableMedicalSystem.vue new file mode 100644 index 0000000000000..f3b3f973a62e8 --- /dev/null +++ b/components/MonitoringItemsOverviewTableMedicalSystem.vue @@ -0,0 +1,179 @@ + + + + + diff --git a/components/MonitoringItemsOverviewTableValueWithTranslatableUnit.vue b/components/MonitoringItemsOverviewTableValueWithTranslatableUnit.vue new file mode 100644 index 0000000000000..1e962bb90a32d --- /dev/null +++ b/components/MonitoringItemsOverviewTableValueWithTranslatableUnit.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/components/MonitoringStatusOverviewTable.vue b/components/MonitoringStatusOverviewTable.vue deleted file mode 100644 index d37ab830cd16f..0000000000000 --- a/components/MonitoringStatusOverviewTable.vue +++ /dev/null @@ -1,156 +0,0 @@ - - - - - diff --git a/components/cards/MonitoringItemsOverviewCard.vue b/components/cards/MonitoringItemsOverviewCard.vue new file mode 100644 index 0000000000000..6d884c19c995f --- /dev/null +++ b/components/cards/MonitoringItemsOverviewCard.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/components/cards/MonitoringStatusOverviewCard.vue b/components/cards/MonitoringStatusOverviewCard.vue deleted file mode 100644 index f450925acc3b6..0000000000000 --- a/components/cards/MonitoringStatusOverviewCard.vue +++ /dev/null @@ -1,62 +0,0 @@ - - - diff --git a/nuxt.config.ts b/nuxt.config.ts index 35d0aebb19afb..e24120d344a0b 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -178,7 +178,8 @@ const config: NuxtConfig = { '/cards/monitoring-number-of-reports-to-covid19-consultation-desk', '/cards/monitoring-status-overview', '/cards/number-of-reports-to-consultations-about-fever-in-7119', - '/cards/number-of-tokyo-rules-applied' + '/cards/number-of-tokyo-rules-applied', + '/cards/monitoring-items-overview' ] const routes: string[] = [] diff --git a/pages/cards/_card.vue b/pages/cards/_card.vue index 0e9f7f57a7556..f678bb1a9a601 100644 --- a/pages/cards/_card.vue +++ b/pages/cards/_card.vue @@ -19,9 +19,9 @@ import UntrackedRateCard from '@/components/cards/UntrackedRateCard.vue' import ConfirmedCasesIncreaseRatioByWeekCard from '@/components/cards/ConfirmedCasesIncreaseRatioByWeekCard.vue' import SevereCaseCard from '@/components/cards/SevereCaseCard.vue' import HospitalizedNumberCard from '@/components/cards/HospitalizedNumberCard.vue' -import MonitoringStatusOverviewCard from '@/components/cards/MonitoringStatusOverviewCard.vue' import ConsultationAboutFeverNumberCard from '@/components/cards/ConsultationAboutFeverNumberCard.vue' import TokyoRulesApplicationNumberCard from '@/components/cards/TokyoRulesApplicationNumberCard.vue' +import MonitoringItemsOverviewCard from '@/components/cards/MonitoringItemsOverviewCard.vue' export default { components: { @@ -41,9 +41,9 @@ export default { PositiveNumberByDiagnosedDateCard, ConfirmedCasesIncreaseRatioByWeekCard, HospitalizedNumberCard, - MonitoringStatusOverviewCard, ConsultationAboutFeverNumberCard, - TokyoRulesApplicationNumberCard + TokyoRulesApplicationNumberCard, + MonitoringItemsOverviewCard }, data() { let title, updatedAt, cardComponent @@ -96,8 +96,8 @@ export default { case 'monitoring-number-of-reports-to-covid19-consultation-desk': cardComponent = 'monitoring-consultation-desk-reports-number-card' break - case 'monitoring-status-overview': - cardComponent = 'monitoring-status-overview-card' + case 'monitoring-items-overview': + cardComponent = 'monitoring-items-overview-card' break case 'number-of-reports-to-consultations-about-fever-in-7119': cardComponent = 'consultation-about-fever-number-card' diff --git a/ui-test/ogp_screenshot.py b/ui-test/ogp_screenshot.py index b3ebb79820ce0..fe4708bf4c890 100644 --- a/ui-test/ogp_screenshot.py +++ b/ui-test/ogp_screenshot.py @@ -26,6 +26,7 @@ "/cards/monitoring-status-overview": (959, 570), "/cards/number-of-reports-to-consultations-about-fever-in-7119": (959, 500), "/cards/number-of-tokyo-rules-applied": (959, 500), + "/cards/monitoring-items-overview": (959, 570), } options = webdriver.ChromeOptions() diff --git a/utils/formatMonitoringItems.ts b/utils/formatMonitoringItems.ts new file mode 100644 index 0000000000000..67d8e8842b84a --- /dev/null +++ b/utils/formatMonitoringItems.ts @@ -0,0 +1,119 @@ +// monitoring_items.json の型チェック用 + +import { getCommaSeparatedNumberToFixedFunction } from '@/utils/monitoringStatusValueFormatters' + +type DataKey = + | '(1)新規陽性者数' + | '(2)#7119(東京消防庁救急相談センター)における発熱等相談件数 ' + | '(3)新規陽性者における接触歴等不明者(人数)' + | '(3)新規陽性者における接触歴等不明者(増加比)' + | '(4)PCR・抗原検査(陽性率)' + | '(4)PCR・抗原検査(検査人数)' + | '(5)救急医療の東京ルールの適用件数' + | '(6)入院患者数' + | '(6)入院患者確保病床数' + | '(7)重症患者数' + | '(7)重症患者確保病床数' + +type RawData = { + '(1)新規陽性者数': number + '(2)#7119(東京消防庁救急相談センター)における発熱等相談件数 ': number + '(3)新規陽性者における接触歴等不明者(人数)': number + '(3)新規陽性者における接触歴等不明者(増加比)': number + '(4)PCR・抗原検査(陽性率)': number + '(4)PCR・抗原検査(検査人数)': number + '(5)救急医療の東京ルールの適用件数': number + '(6)入院患者数': number + '(6)入院患者確保病床数': string + '(7)重症患者数': number + '(7)重症患者確保病床数': string +} + +// ----------------------------------------- +// フォーマット済み モニタリング指標データ用 + +export type MonitoringItems = Record + +interface MonitoringItemValue { + value: string + unit: Unit | null // 元データに無いので独自に追加, 単位がない場合は null +} + +export type Unit = { + text: string // *********** もとの日本語のテキスト + translatable: boolean // ** 翻訳が必要かどうか +} + +/** + * monitoring_items_json のデータを整形 + * + * @param data - Raw data + */ +export default (rawDataObj: RawData): MonitoringItems => { + const unitPerson: Unit = { text: '人', translatable: true } + const unitReports: Unit = { + text: '件.reports', + translatable: true + } + const unitPercentage: Unit = { text: '%', translatable: false } + + const toInteger = getCommaSeparatedNumberToFixedFunction(0) + const toNumberIn10thPlace = getCommaSeparatedNumberToFixedFunction(1) + + return { + '(1)新規陽性者数': { + value: toNumberIn10thPlace(rawDataObj['(1)新規陽性者数']), + unit: unitPerson + }, + '(2)#7119(東京消防庁救急相談センター)における発熱等相談件数 ': { + value: toNumberIn10thPlace( + rawDataObj[ + '(2)#7119(東京消防庁救急相談センター)における発熱等相談件数 ' + ] + ), + unit: unitReports + }, + '(3)新規陽性者における接触歴等不明者(人数)': { + value: toNumberIn10thPlace( + rawDataObj['(3)新規陽性者における接触歴等不明者(人数)'] + ), + unit: unitPerson + }, + '(3)新規陽性者における接触歴等不明者(増加比)': { + value: toNumberIn10thPlace( + rawDataObj['(3)新規陽性者における接触歴等不明者(増加比)'] + ), + unit: unitPercentage + }, + '(4)PCR・抗原検査(検査人数)': { + value: toNumberIn10thPlace(rawDataObj['(4)PCR・抗原検査(検査人数)']), + unit: unitPerson + }, + '(4)PCR・抗原検査(陽性率)': { + value: toNumberIn10thPlace(rawDataObj['(4)PCR・抗原検査(陽性率)']), + unit: unitPercentage + }, + '(5)救急医療の東京ルールの適用件数': { + value: toNumberIn10thPlace( + rawDataObj['(5)救急医療の東京ルールの適用件数'] + ), + unit: unitReports + }, + '(6)入院患者数': { + value: toInteger(rawDataObj['(6)入院患者数']), + unit: unitPerson + }, + '(6)入院患者確保病床数': { + value: rawDataObj['(6)入院患者確保病床数'], + unit: null + }, + '(7)重症患者数': { + value: toInteger(rawDataObj['(7)重症患者数']), + unit: unitPerson + }, + '(7)重症患者確保病床数': { + value: rawDataObj['(7)重症患者確保病床数'], + unit: null + } + } +} diff --git a/utils/monitoringStatusValueFormatters.ts b/utils/monitoringStatusValueFormatters.ts index 35ba0eec6743f..fa76d07ac4035 100644 --- a/utils/monitoringStatusValueFormatters.ts +++ b/utils/monitoringStatusValueFormatters.ts @@ -20,3 +20,18 @@ export function getNumberToFixedFunction(digit = 0) { export function getNumberToLocaleStringFunction() { return (d: number): string | undefined => d?.toLocaleString() } + +/** + * 引数で受け取った桁数で小数部を桁揃えし、整数部を3桁ごとにカンマ区切りにする関数を返します。 + * 小数部桁揃えには getNumberToFixedFunction を使用しているため、 + * 詳しい仕様は getNumberToFixedFunction の JSDoc を参照してください + * @param digit - 桁揃えする桁数 + * @see getNumberToFixedFunction + * @see {@link https://stackoverflow.com/a/38462832} + */ +export function getCommaSeparatedNumberToFixedFunction(digit = 0) { + return (d: number): string => + Number(getNumberToFixedFunction(digit)(d)).toLocaleString('en', { + minimumFractionDigits: digit + }) +}