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

task/COR-1321-restructure-and-add-graphs #4589

Merged
merged 3 commits into from
Jan 4, 2023
Merged

task/COR-1321-restructure-and-add-graphs #4589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3479a1b
task(lcps/nice): updated HospitalsAndCarePage component to add new pa…
VWSCoronaDashboard26 Jan 2, 2023
d4994c0
task(lcps/nice): applied PR feedback;
VWSCoronaDashboard26 Jan 3, 2023
bf65704
task(lcps/nice): applied changes to HospitalsTile component for styli…
VWSCoronaDashboard26 Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions packages/app/src/domain/hospital/hospitals-tile/hospitals-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,19 @@ export const HospitalsTile = ({ title, description, source, dateUnix, tilesData

return (
<Box marginBottom={space[5]}>
<KpiTile title={title} hasNoPaddingBottom>
<KpiTile title={title}>
<Text>{description}</Text>
<TwoKpiSection spacing={5}>
<KpiContent>
{tilesData.map((tile, index) => {
return (
<Box key={index} width="100%">
<BoldText>{tile.title}</BoldText>
<Box paddingTop={space[3]} paddingBottom={tile.differenceValue ? space[1] : space[3]}>
<KpiValue absolute={tile.absoluteValue} difference={tile.differenceValue} isAmount />
</Box>
<Markdown content={tile.description} />
{tilesData.map((tile, index) => (
<Box key={index} width="100%">
<BoldText>{tile.title}</BoldText>
<Box paddingTop={space[3]} paddingBottom={tile.differenceValue ? space[1] : space[3]}>
<KpiValue absolute={tile.absoluteValue} difference={tile.differenceValue} isAmount />
</Box>
);
})}
<Markdown content={tile.description} />
</Box>
))}
</KpiContent>
</TwoKpiSection>
<Metadata {...metadata} isTileFooter />
Expand Down
131 changes: 127 additions & 4 deletions packages/app/src/pages/landelijk/ziekenhuizen-en-zorg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { TimeSeriesChart, TileList, SEOHead, ChartTile, PageInformationBlock } f
import { Layout, NlLayout } from '~/domain/layout';
import { useIntl } from '~/intl';
import { Languages, SiteText } from '~/locale';
import { ElementsQueryResult, getElementsQuery } from '~/queries/get-elements-query';
import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
import { getArticleParts, getLinkParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectNlData } from '~/static-props/get-data';
Expand All @@ -15,6 +15,7 @@ import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-p
import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
import { ChartTileToggleItem } from '~/components/chart-tile-toggle';
import { HospitalsTile } from '~/domain/hospital';
import { getBoundaryDateStartUnix, countTrailingNullValues } from '~/utils';

const pageMetrics = [
'difference.hospital_lcps__beds_occupied_covid',
Expand Down Expand Up @@ -67,9 +68,9 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
const { metadataTexts, textNl } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
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);
const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
const [selectedBedsOccupiedOverTimeChart, setSelectedBedsOccupiedOverTimeChart] = useState<string>('beds_occupied_covid_hospital');
const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);

const bedsOccupiedOverTimeToggleItems: ChartTileToggleItem[] = [
{
Expand All @@ -82,6 +83,28 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
},
];

const [selectedPatientInfluxOverTimeChart, setSelectedPatientInfluxOverTimeChart] = useState<string>('patients_influx_hospital');
const [hospitalPatientInfluxOverTimeTimeframe, setHospitalPatientInfluxOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [intensiveCarePatientInfluxOverTimeTimeframe, setIntensiveCarePatientInfluxOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);

const patientInfluxOverTimeToggleItems: ChartTileToggleItem[] = [
{
label: textNl.hospitals.chart_patient_influx.toggle_label,
value: 'patients_influx_hospital',
},
{
label: textNl.icu.chart_patient_influx.toggle_label,
value: 'patients_influx_icu',
},
];

const hospitalPatientInfluxUnderReportedRange = getBoundaryDateStartUnix(data.hospital_lcps.values, countTrailingNullValues(data.hospital_lcps.values, 'influx_covid_patients'));

const intensiveCarePatientInfluxUnderReportedRange = getBoundaryDateStartUnix(
data.intensive_care_lcps.values,
countTrailingNullValues(data.intensive_care_lcps.values, 'influx_covid_patients')
);

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

Expand Down Expand Up @@ -251,6 +274,106 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
},
]}
/>

{selectedPatientInfluxOverTimeChart === 'patients_influx_hospital' && (
<ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.hospitals.chart_patient_influx.title}
description={textNl.hospitals.chart_patient_influx.description}
metadata={{ source: textNl.sources.lnaz }}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
onSelectTimeframe={setHospitalPatientInfluxOverTimeTimeframe}
toggle={{
initialValue: selectedPatientInfluxOverTimeChart,
items: patientInfluxOverTimeToggleItems,
onChange: (value) => setSelectedPatientInfluxOverTimeChart(value),
}}
>
<TimeSeriesChart
accessibility={{
key: 'hospital_patient_influx_over_time_chart',
}}
values={data.hospital_lcps.values}
timeframe={hospitalPatientInfluxOverTimeTimeframe}
seriesConfig={[
{
type: 'line',
metricProperty: 'influx_covid_patients_moving_average',
label: textNl.hospitals.chart_patient_influx.legend_title_moving_average,
color: colors.primary,
},
{
type: 'bar',
metricProperty: 'influx_covid_patients',
label: textNl.hospitals.chart_patient_influx.legend_title_trend_label,
color: colors.primary,
},
]}
dataOptions={{
timespanAnnotations: [
{
start: hospitalPatientInfluxUnderReportedRange,
end: Infinity,
label: textNl.hospitals.chart_patient_influx.legend_inaccurate_label,
shortLabel: commonTexts.common.incomplete,
cutValuesForMetricProperties: ['influx_covid_patients_moving_average'],
},
],
timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_lcps'),
}}
/>
</ChartTile>
)}

{selectedPatientInfluxOverTimeChart === 'patients_influx_icu' && (
<ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.icu.chart_patient_influx.title}
description={textNl.icu.chart_patient_influx.description}
metadata={{ source: textNl.sources.lnaz }}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
onSelectTimeframe={setIntensiveCarePatientInfluxOverTimeTimeframe}
toggle={{
initialValue: selectedPatientInfluxOverTimeChart,
items: patientInfluxOverTimeToggleItems,
onChange: (value) => setSelectedPatientInfluxOverTimeChart(value),
}}
>
<TimeSeriesChart
accessibility={{
key: 'intensive_care_patient_influx_over_time_chart',
}}
values={data.intensive_care_lcps.values}
timeframe={intensiveCarePatientInfluxOverTimeTimeframe}
seriesConfig={[
{
type: 'line',
metricProperty: 'influx_covid_patients_moving_average',
label: textNl.icu.chart_patient_influx.legend_title_moving_average,
color: colors.primary,
},
{
type: 'bar',
metricProperty: 'influx_covid_patients',
label: textNl.icu.chart_patient_influx.legend_title_trend_label,
color: colors.primary,
},
]}
dataOptions={{
timespanAnnotations: [
{
start: intensiveCarePatientInfluxUnderReportedRange,
end: Infinity,
label: textNl.icu.chart_patient_influx.legend_inaccurate_label,
shortLabel: commonTexts.common.incomplete,
cutValuesForMetricProperties: ['influx_covid_patients_moving_average'],
},
],
timelineEvents: getTimelineEvents(content.elements.timeSeries, 'intensive_care_lcps'),
}}
/>
</ChartTile>
)}
</TileList>
</NlLayout>
</Layout>
Expand Down
16 changes: 16 additions & 0 deletions packages/cms/src/lokalize/key-mutations.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,3 +235,19 @@ timestamp,action,key,document_id,move_to
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,__
2023-01-02T15:20:59.910Z,add,common.accessibility.charts.hospital_patient_influx_over_time_chart.description,PKXdxxxKAnTg0F1ZCyB3HX,__
VWSCoronaDashboard26 marked this conversation as resolved.
Show resolved Hide resolved
2023-01-02T15:21:01.110Z,add,common.accessibility.charts.hospital_patient_influx_over_time_chart.label,KoLyCpXIGU95m7jfET6WDj,__
2023-01-02T15:21:02.099Z,add,common.accessibility.charts.intensive_care_patient_influx_over_time_chart.description,KoLyCpXIGU95m7jfET6WFW,__
2023-01-02T15:21:03.112Z,add,common.accessibility.charts.intensive_care_patient_influx_over_time_chart.label,KoLyCpXIGU95m7jfET6WHu,__
2023-01-02T15:21:04.168Z,add,pages.hospitals_and_care_page.nl.hospitals.chart_patient_influx.description,0iJeil5hiqRr6jTKtf6HtX,__
2023-01-02T15:21:05.148Z,add,pages.hospitals_and_care_page.nl.hospitals.chart_patient_influx.legend_title_moving_average,KoLyCpXIGU95m7jfET6WNH,__
2023-01-02T15:21:06.646Z,add,pages.hospitals_and_care_page.nl.hospitals.chart_patient_influx.legend_title_trend_label,0iJeil5hiqRr6jTKtf6Hxp,__
2023-01-02T15:21:07.956Z,add,pages.hospitals_and_care_page.nl.hospitals.chart_patient_influx.legend_inaccurate_label,PKXdxxxKAnTg0F1ZCyB3Vz,__
2023-01-02T15:21:09.211Z,add,pages.hospitals_and_care_page.nl.hospitals.chart_patient_influx.title,0iJeil5hiqRr6jTKtf6I4Z,__
2023-01-02T15:21:10.214Z,add,pages.hospitals_and_care_page.nl.hospitals.chart_patient_influx.toggle_label,PKXdxxxKAnTg0F1ZCyB3aV,__
2023-01-02T15:21:11.307Z,add,pages.hospitals_and_care_page.nl.icu.chart_patient_influx.description,PKXdxxxKAnTg0F1ZCyB3f1,__
2023-01-02T15:21:12.326Z,add,pages.hospitals_and_care_page.nl.icu.chart_patient_influx.legend_title_moving_average,KoLyCpXIGU95m7jfET6WWE,__
2023-01-02T15:21:13.711Z,add,pages.hospitals_and_care_page.nl.icu.chart_patient_influx.legend_title_trend_label,KoLyCpXIGU95m7jfET6WYc,__
2023-01-02T15:21:14.727Z,add,pages.hospitals_and_care_page.nl.icu.chart_patient_influx.legend_inaccurate_label,PKXdxxxKAnTg0F1ZCyB3ox,__
2023-01-02T15:21:15.742Z,add,pages.hospitals_and_care_page.nl.icu.chart_patient_influx.title,0iJeil5hiqRr6jTKtf6IML,__
2023-01-02T15:21:16.776Z,add,pages.hospitals_and_care_page.nl.icu.chart_patient_influx.toggle_label,0iJeil5hiqRr6jTKtf6IQ1,__