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;