diff --git a/packages/app/schema/nl/__difference.json b/packages/app/schema/nl/__difference.json index ab925bb016..c3014663f1 100644 --- a/packages/app/schema/nl/__difference.json +++ b/packages/app/schema/nl/__difference.json @@ -24,12 +24,18 @@ "hospital_lcps__beds_occupied_covid": { "$ref": "#/definitions/diff_integer" }, + "hospital_lcps__influx_covid_patients": { + "$ref": "#/definitions/diff_integer" + }, "intensive_care_nice__admissions_on_date_of_reporting_moving_average": { "$ref": "#/definitions/diff_decimal" }, "intensive_care_lcps__beds_occupied_covid": { "$ref": "#/definitions/diff_integer" }, + "intensive_care_lcps__influx_covid_patients": { + "$ref": "#/definitions/diff_integer" + }, "doctor__covid_symptoms_per_100k": { "$ref": "#/definitions/diff_decimal" }, @@ -72,12 +78,14 @@ "tested_overall__infected_moving_average", "hospital_nice__admissions_on_date_of_reporting_moving_average", "hospital_lcps__beds_occupied_covid", + "hospital_lcps__influx_covid_patients", "tested_ggd__tested_total_moving_average", "tested_ggd__infected_percentage_moving_average", "reproduction__index_average", "infectious_people__estimate", "intensive_care_nice__admissions_on_date_of_reporting_moving_average", "intensive_care_lcps__beds_occupied_covid", + "intensive_care_lcps__influx_covid_patients", "doctor__covid_symptoms_per_100k", "doctor__covid_symptoms", "sewer__average", diff --git a/packages/app/src/domain/hospital/hospitals-tile/hospitals-tile.tsx b/packages/app/src/domain/hospital/hospitals-tile/hospitals-tile.tsx new file mode 100644 index 0000000000..cf758284d6 --- /dev/null +++ b/packages/app/src/domain/hospital/hospitals-tile/hospitals-tile.tsx @@ -0,0 +1,74 @@ +import { Box } from '~/components/base'; +import { KpiTile } from '~/components/kpi-tile'; +import { Metadata, MetadataProps } from '~/components/metadata'; +import { TwoKpiSection } from '~/components/two-kpi-section'; +import { BoldText, Text } from '~/components/typography'; +import styled from 'styled-components'; +import { colors, DifferenceInteger } from '@corona-dashboard/common'; +import theme, { space } from '~/style/theme'; +import { KpiValue } from '~/components/kpi-value'; +import { Markdown } from '~/components/markdown'; + +interface HospitalsTileProps { + title: string; + description: string; + source: { + text: string; + href: string; + }; + dateUnix: number; + tilesData: [TileData, TileData]; +} + +export type TileData = { + title: string; + description: string; + absoluteValue: number | null; + differenceValue: DifferenceInteger; + dataProperty?: string; +}; + +export const HospitalsTile = ({ title, description, source, dateUnix, tilesData }: HospitalsTileProps) => { + const metadata: MetadataProps = { + date: dateUnix, + source: source, + }; + + return ( + + {description} + + + {tilesData.map((tile, index) => { + return ( + + {tile.title} + + + + + + ); + })} + + + + + ); +}; + +export const KpiContent = styled(Box)` + border: 1px solid ${colors.gray3}; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + color: ${colors.black}; + padding: 24px ${space[3]}; + gap: ${space[5]}; + + @media ${theme.mediaQueries.sm} { + flex-direction: row; + padding: 24px; + } +`; diff --git a/packages/app/src/domain/hospital/index.ts b/packages/app/src/domain/hospital/index.ts index 66e082113e..0df6423563 100644 --- a/packages/app/src/domain/hospital/index.ts +++ b/packages/app/src/domain/hospital/index.ts @@ -1 +1,2 @@ export { AdmissionsPerAgeGroup } from './admissions-per-age-group/admissions-per-age-group'; +export { HospitalsTile } from './hospitals-tile/hospitals-tile'; diff --git a/packages/app/src/pages/landelijk/ziekenhuizen-en-zorg.tsx b/packages/app/src/pages/landelijk/ziekenhuizen-en-zorg.tsx index f1c3347ae9..de32ad23e4 100644 --- a/packages/app/src/pages/landelijk/ziekenhuizen-en-zorg.tsx +++ b/packages/app/src/pages/landelijk/ziekenhuizen-en-zorg.tsx @@ -1,8 +1,8 @@ -import { colors, DAY_IN_SECONDS, getLastFilledValue, TimeframeOption, TimeframeOptionsList, WEEK_IN_SECONDS } from '@corona-dashboard/common'; +import { colors, getLastFilledValue, TimeframeOption, TimeframeOptionsList } from '@corona-dashboard/common'; import { Ziekenhuis } from '@corona-dashboard/icons'; import { GetStaticPropsContext } from 'next'; import { useState } from 'react'; -import { TwoKpiSection, TimeSeriesChart, TileList, SEOHead, ChartTile, KpiTile, KpiValue, PageInformationBlock, PageKpi } from '~/components'; +import { TimeSeriesChart, TileList, SEOHead, ChartTile, PageInformationBlock } from '~/components'; import { Layout, NlLayout } from '~/domain/layout'; import { useIntl } from '~/intl'; import { Languages, SiteText } from '~/locale'; @@ -11,12 +11,19 @@ import { getArticleParts, getLinkParts, getPagePartsQuery } from '~/queries/get- import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectNlData } from '~/static-props/get-data'; import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms'; -import { countTrailingNullValues, getBoundaryDateStartUnix, replaceVariablesInText } from '~/utils'; import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts'; import { ChartTileToggleItem } from '~/components/chart-tile-toggle'; +import { HospitalsTile } from '~/domain/hospital'; -const pageMetrics = ['difference.hospital_lcps__beds_occupied_covid.new_date_unix', 'hospital_lcps', 'intensive_care_lcps']; +const pageMetrics = [ + 'difference.hospital_lcps__beds_occupied_covid', + 'difference.hospital_lcps__influx_covid_patients', + 'difference.intensive_care_lcps__beds_occupied_covid', + 'difference.intensive_care_lcps__influx_covid_patients', + 'hospital_lcps', + 'intensive_care_lcps', +]; const selectLokalizeTexts = (siteText: SiteText) => ({ metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata, @@ -29,7 +36,14 @@ type LokalizeTexts = ReturnType; export const getStaticProps = createGetStaticProps( ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, - selectNlData('difference.hospital_lcps__beds_occupied_covid', 'hospital_lcps', 'intensive_care_lcps'), + selectNlData( + 'difference.hospital_lcps__beds_occupied_covid', + 'difference.hospital_lcps__influx_covid_patients', + 'difference.intensive_care_lcps__beds_occupied_covid', + 'difference.intensive_care_lcps__influx_covid_patients', + 'hospital_lcps', + 'intensive_care_lcps' + ), createGetChoroplethData({ vr: ({ hospital_nice_choropleth }) => ({ hospital_nice_choropleth }), gm: ({ hospital_nice_choropleth }) => ({ hospital_nice_choropleth }), @@ -58,15 +72,7 @@ export const getStaticProps = createGetStaticProps( const HospitalsAndCarePage = (props: StaticProps) => { const { pageText, selectedNlData: data, content, lastGenerated } = props; const { metadataTexts, textNl } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts); - const { commonTexts, formatDateFromSeconds } = useIntl(); - - const dataHospitalLcps = data.hospital_lcps; - /** - * Can be replaced with corrent property once data / schema changes are available - * Temporary workaround by adding `beds_occupied_covid` to the following line instead of `influx_on_date` - * */ - const underReportedRange = getBoundaryDateStartUnix(data.hospital_lcps.values, countTrailingNullValues(data.hospital_lcps.values, 'beds_occupied_covid')); - const sevenDayAverageDates: [number, number] = [underReportedRange - WEEK_IN_SECONDS, underReportedRange - DAY_IN_SECONDS]; + const { commonTexts } = useIntl(); const [selectedBedsOccupiedOverTimeChart, setSelectedBedsOccupiedOverTimeChart] = useState('beds_occupied_covid_hospital'); // other option is 'beds_occupied_covid_icu' const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState(TimeframeOption.ALL); @@ -83,7 +89,9 @@ const HospitalsAndCarePage = (props: StaticProps) => { }, ]; - const bedsLastValue = getLastFilledValue(dataHospitalLcps); + const hospitalLastValue = getLastFilledValue(data.hospital_lcps); + const icuLastValue = getLastFilledValue(data.intensive_care_lcps); + const lastInsertionDateOfPage = getLastInsertionDateOfPage(data, pageMetrics); return ( @@ -99,7 +107,7 @@ const HospitalsAndCarePage = (props: StaticProps) => { description={textNl.pagina_toelichting} metadata={{ datumsText: textNl.datums, - dateOrRange: dataHospitalLcps.last_value.date_unix, + dateOrRange: hospitalLastValue.date_unix, dateOfInsertionUnix: lastInsertionDateOfPage, dataSources: [textNl.sources.nice, textNl.sources.lnaz], }} @@ -107,34 +115,29 @@ const HospitalsAndCarePage = (props: StaticProps) => { pageLinks={content.links} articles={content.articles} /> - - - - - - - {bedsLastValue.beds_occupied_covid !== null && ( - - )} - - + + + {selectedBedsOccupiedOverTimeChart === 'beds_occupied_covid_hospital' && ( ) => { accessibility={{ key: 'hospital_beds_occupied_over_time_chart', }} - values={dataHospitalLcps.values} + values={data.hospital_lcps.values} timeframe={hospitalBedsOccupiedOverTimeTimeframe} forceLegend seriesConfig={[ @@ -175,7 +178,7 @@ const HospitalsAndCarePage = (props: StaticProps) => { dataOptions={{ timespanAnnotations: [ { - start: dataHospitalLcps.values[0].date_unix, + start: data.hospital_lcps.values[0].date_unix, end: new Date('1 June 2020').getTime() / 1000, label: textNl.hospitals.chart_beds_occupied.legend_inaccurate_label, shortLabel: commonTexts.common.incomplete, @@ -236,6 +239,28 @@ const HospitalsAndCarePage = (props: StaticProps) => { /> )} + + diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv index ce00faf38a..33e12c1094 100644 --- a/packages/cms/src/lokalize/key-mutations.csv +++ b/packages/cms/src/lokalize/key-mutations.csv @@ -241,3 +241,17 @@ timestamp,action,key,document_id,move_to 2022-12-28T14:13:14.615Z,delete,pages.intensive_care_page.shared.admissions_incidence_age_demographic_chart.title,Pei0Nqv2MstfonnkJAkhjS,__ 2022-12-28T14:13:14.618Z,delete,pages.intensive_care_page.shared.admissions_per_age_group.chart_description,jF33EuwumlGuwav2FD4JXg,__ 2022-12-28T14:13:14.620Z,delete,pages.intensive_care_page.shared.admissions_per_age_group.chart_title,jF33EuwumlGuwav2FD4JW0,__ +2023-01-02T17:07:16.823Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.occupancies.title,KoLyCpXIGU95m7jfETAwTc,__ +2023-01-02T17:07:17.752Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.occupancies.description,KoLyCpXIGU95m7jfETAwXC,__ +2023-01-02T17:07:18.749Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.occupancies.hospital.title,0iJeil5hiqRr6jTKtfAdIz,__ +2023-01-02T17:07:19.835Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.occupancies.hospital.description,0iJeil5hiqRr6jTKtfAdQx,__ +2023-01-02T17:07:20.798Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.occupancies.icu.title,KoLyCpXIGU95m7jfETAwnJ,__ +2023-01-02T17:07:21.823Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.occupancies.icu.description,PKXdxxxKAnTg0F1ZCyHPKt,__ +2023-01-02T17:07:22.811Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.influxes.title,0iJeil5hiqRr6jTKtfAdn1,__ +2023-01-02T17:07:23.868Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.influxes.description,KoLyCpXIGU95m7jfETAx8C,__ +2023-01-02T17:07:24.863Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.influxes.hospital.title,PKXdxxxKAnTg0F1ZCyHPlz,__ +2023-01-02T17:07:25.961Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.influxes.hospital.description,0iJeil5hiqRr6jTKtfAe5P,__ +2023-01-02T17:07:26.889Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.influxes.icu.title,KoLyCpXIGU95m7jfETAxT5,__ +2023-01-02T17:07:28.007Z,add,pages.hospitals_and_care_page.nl.kpi_tiles.influxes.icu.description,KoLyCpXIGU95m7jfETAxaq,__ +2023-01-02T17:07:28.008Z,delete,pages.hospitals_and_care_page.nl.kpi_bedbezetting.description,KoLyCpXIGU95m7jfENTcMK,__ +2023-01-02T17:07:28.015Z,delete,pages.hospitals_and_care_page.nl.kpi_bedbezetting.title,PKXdxxxKAnTg0F1ZCpciGR,__ diff --git a/packages/common/src/types/data.ts b/packages/common/src/types/data.ts index 2419c2e08b..fea2a34203 100644 --- a/packages/common/src/types/data.ts +++ b/packages/common/src/types/data.ts @@ -290,8 +290,10 @@ export interface NlDifference { infectious_people__estimate: DifferenceInteger; hospital_nice__admissions_on_date_of_reporting_moving_average: DifferenceDecimal; hospital_lcps__beds_occupied_covid: DifferenceInteger; + hospital_lcps__influx_covid_patients: DifferenceInteger; intensive_care_nice__admissions_on_date_of_reporting_moving_average: DifferenceDecimal; intensive_care_lcps__beds_occupied_covid: DifferenceInteger; + intensive_care_lcps__influx_covid_patients: DifferenceInteger; doctor__covid_symptoms_per_100k: DifferenceDecimal; doctor__covid_symptoms: DifferenceInteger; sewer__average: DifferenceInteger;