Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Commit

Permalink
feat: created new kpi tiles for hospital and care
Browse files Browse the repository at this point in the history
  • Loading branch information
hasan-ozaynaci committed Jan 2, 2023
1 parent 1800d59 commit 06e1123
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 46 deletions.
8 changes: 8 additions & 0 deletions packages/app/schema/nl/__difference.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -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",
Expand Down
74 changes: 74 additions & 0 deletions packages/app/src/domain/hospital/hospitals-tile/hospitals-tile.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<KpiTile title={title} hasNoPaddingBottom>
<Text>{description}</Text>
<TwoKpiSection spacing={5}>
<KpiContent>
{tilesData.map((tile, index) => {
return (
<Box key={index}>
<BoldText>{tile.title}</BoldText>
<Box paddingTop={space[3]} paddingBottom={space[1]}>
<KpiValue data-cy={tile.dataProperty} absolute={tile.absoluteValue} difference={tile.differenceValue} isAmount />
</Box>
<Markdown content={tile.description} />
</Box>
);
})}
</KpiContent>
</TwoKpiSection>
<Metadata {...metadata} isTileFooter />
</KpiTile>
);
};

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;
}
`;
1 change: 1 addition & 0 deletions packages/app/src/domain/hospital/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { AdmissionsPerAgeGroup } from './admissions-per-age-group/admissions-per-age-group';
export { HospitalsTile } from './hospitals-tile/hospitals-tile';
117 changes: 71 additions & 46 deletions packages/app/src/pages/landelijk/ziekenhuizen-en-zorg.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand All @@ -29,7 +36,14 @@ type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
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 }),
Expand Down Expand Up @@ -58,15 +72,7 @@ export const getStaticProps = createGetStaticProps(
const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
const { pageText, selectedNlData: data, content, lastGenerated } = props;
const { metadataTexts, textNl } = useDynamicLokalizeTexts<LokalizeTexts>(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<string>('beds_occupied_covid_hospital'); // other option is 'beds_occupied_covid_icu'
const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
Expand All @@ -83,7 +89,9 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
},
];

const bedsLastValue = getLastFilledValue(dataHospitalLcps);
const hospitalLastValue = getLastFilledValue(data.hospital_lcps);
const icuLastValue = getLastFilledValue(data.intensive_care_lcps);

const lastInsertionDateOfPage = getLastInsertionDateOfPage(data, pageMetrics);

return (
Expand All @@ -99,42 +107,37 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
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],
}}
referenceLink={textNl.reference.href}
pageLinks={content.links}
articles={content.articles}
/>
<TwoKpiSection>
<KpiTile
title={textNl.barscale_titel}
description={replaceVariablesInText(textNl.extra_uitleg, {
dateStart: formatDateFromSeconds(sevenDayAverageDates[0]),
dateEnd: formatDateFromSeconds(sevenDayAverageDates[1]),
})}
metadata={{
date: sevenDayAverageDates,
source: textNl.sources.nice,
}}
>
<PageKpi data={data} metricName="hospital_lcps" metricProperty="beds_occupied_covid" isMovingAverageDifference isAmount />
</KpiTile>

<KpiTile
title={textNl.kpi_bedbezetting.title}
description={textNl.kpi_bedbezetting.description}
metadata={{
date: dataHospitalLcps.last_value.date_unix,
source: textNl.sources.lnaz,
}}
>
{bedsLastValue.beds_occupied_covid !== null && (
<KpiValue data-cy="beds_occupied_covid" absolute={bedsLastValue.beds_occupied_covid} difference={data.difference.hospital_lcps__beds_occupied_covid} isAmount />
)}
</KpiTile>
</TwoKpiSection>

<HospitalsTile
title={textNl.kpi_tiles.occupancies.title}
description={textNl.kpi_tiles.occupancies.description}
source={textNl.sources.lnaz}
dateUnix={hospitalLastValue.date_unix}
tilesData={[
{
dataProperty: 'beds_occupied_covid',
absoluteValue: hospitalLastValue.beds_occupied_covid,
differenceValue: data.difference.hospital_lcps__beds_occupied_covid,
title: textNl.kpi_tiles.occupancies.hospital.title,
description: textNl.kpi_tiles.occupancies.hospital.description,
},
{
absoluteValue: icuLastValue.beds_occupied_covid,
differenceValue: data.difference.intensive_care_lcps__beds_occupied_covid,
title: textNl.kpi_tiles.occupancies.icu.title,
description: textNl.kpi_tiles.occupancies.icu.description,
},
]}
/>

{selectedBedsOccupiedOverTimeChart === 'beds_occupied_covid_hospital' && (
<ChartTile
timeframeOptions={TimeframeOptionsList}
Expand All @@ -153,7 +156,7 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
accessibility={{
key: 'hospital_beds_occupied_over_time_chart',
}}
values={dataHospitalLcps.values}
values={data.hospital_lcps.values}
timeframe={hospitalBedsOccupiedOverTimeTimeframe}
forceLegend
seriesConfig={[
Expand All @@ -175,7 +178,7 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
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,
Expand Down Expand Up @@ -236,6 +239,28 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
/>
</ChartTile>
)}

<HospitalsTile
title={textNl.kpi_tiles.influxes.title}
description={textNl.kpi_tiles.influxes.description}
source={textNl.sources.lnaz}
dateUnix={hospitalLastValue.date_unix}
tilesData={[
{
dataProperty: 'beds_occupied_covid',
absoluteValue: hospitalLastValue.influx_covid_patients,
differenceValue: data.difference.hospital_lcps__influx_covid_patients,
title: textNl.kpi_tiles.influxes.hospital.title,
description: textNl.kpi_tiles.influxes.hospital.description,
},
{
absoluteValue: icuLastValue.influx_covid_patients,
differenceValue: data.difference.intensive_care_lcps__influx_covid_patients,
title: textNl.kpi_tiles.influxes.icu.title,
description: textNl.kpi_tiles.influxes.icu.description,
},
]}
/>
</TileList>
</NlLayout>
</Layout>
Expand Down
14 changes: 14 additions & 0 deletions packages/cms/src/lokalize/key-mutations.csv
Original file line number Diff line number Diff line change
Expand Up @@ -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,__
2 changes: 2 additions & 0 deletions packages/common/src/types/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 06e1123

Please sign in to comment.