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

Commit

Permalink
feature/COR-1676-consistent-hospital-pages (#4939)
Browse files Browse the repository at this point in the history 
* feat(COR-1676): Initial solution

* feat(COR-1676): Add bandpadding as parameter for hospital graphs

* feat(COR-1676): Extract magic number to constant
  • Loading branch information
@ben-van-eekelen
ben-van-eekelen authored Dec 6, 2023
1 parent f2ad00e commit 17475a2
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 97 deletions.
1 change: 1 addition & 0 deletions packages/app/src/components/time-series-chart/components/series.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ function SeriesUnmemoized<T extends TimestampedValue>({ seriesConfig, seriesList
fillOpacity={config.fillOpacity}
getX={getX}
getY={getY}
bandPadding={config.bandPadding}
bounds={bounds}
yScale={yScale}
id={id}
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/components/time-series-chart/logic/series.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export interface BarSeriesDefinition<T extends TimestampedValue> extends SeriesC
shortLabel?: string;
color: string;
fillOpacity?: number;
bandPadding?: number;
}

export interface BarOutOfBoundsSeriesDefinition<T extends TimestampedValue> extends SeriesCommonDefinition {
Expand Down
199 changes: 102 additions & 97 deletions packages/app/src/pages/landelijk/ziekenhuizen-in-beeld.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
const [hospitalBedsOccupiedOverTimeTimeframe, setHospitalBedsOccupiedOverTimeTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);
const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = useState<TimeframeOption>(TimeframeOption.THIRTY_DAYS);

const gappedBarBandPaddingOverride = 0.4;

const bedsOccupiedOverTimeToggleItems: ChartTileToggleItem[] = [
{
label: textNl.hospitals.chart_beds_occupied.toggle_label,
Expand Down Expand Up @@ -156,110 +158,111 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
]}
/>

{selectedBedsOccupiedOverTimeChart === 'beds_occupied_covid_hospital' && (
<ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.hospitals.chart_beds_occupied.title}
description={textNl.hospitals.chart_beds_occupied.description}
metadata={{ source: textNl.sources.lnaz }}
timeframeInitialValue={hospitalBedsOccupiedOverTimeTimeframe}
onSelectTimeframe={setHospitalBedsOccupiedOverTimeTimeframe}
toggle={{
initialValue: selectedBedsOccupiedOverTimeChart,
items: bedsOccupiedOverTimeToggleItems,
onChange: (value) => setSelectedBedsOccupiedOverTimeChart(value),
}}
>
<TimeSeriesChart
accessibility={{
key: 'hospital_beds_occupied_over_time_chart',
<InView rootMargin="400px">
{selectedBedsOccupiedOverTimeChart === 'beds_occupied_covid_hospital' && (
<ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.hospitals.chart_beds_occupied.title}
description={textNl.hospitals.chart_beds_occupied.description}
metadata={{ source: textNl.sources.lnaz }}
timeframeInitialValue={hospitalBedsOccupiedOverTimeTimeframe}
onSelectTimeframe={setHospitalBedsOccupiedOverTimeTimeframe}
toggle={{
initialValue: selectedBedsOccupiedOverTimeChart,
items: bedsOccupiedOverTimeToggleItems,
onChange: (value) => setSelectedBedsOccupiedOverTimeChart(value),
}}
values={lcpsHospitalWithoutRange}
timeframe={hospitalBedsOccupiedOverTimeTimeframe}
forceLegend
seriesConfig={[
{
type: 'line',
metricProperty: 'beds_occupied_covid',
nonInteractive: true,
hideInLegend: true,
label: textNl.hospitals.chart_beds_occupied.legend_trend_label,
color: colors.primary,
},
{
type: 'scatter-plot',
metricProperty: 'beds_occupied_covid',
label: textNl.hospitals.chart_beds_occupied.legend_dot_label,
color: colors.primary,
},
]}
dataOptions={{
timespanAnnotations: [
>
<TimeSeriesChart
accessibility={{
key: 'hospital_beds_occupied_over_time_chart',
}}
values={lcpsHospitalWithoutRange}
timeframe={hospitalBedsOccupiedOverTimeTimeframe}
forceLegend
seriesConfig={[
{
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,
type: 'line',
metricProperty: 'beds_occupied_covid_moving_average',
label: textNl.hospitals.chart_beds_occupied.legend_dot_label,
color: colors.primary,
},
],
timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_lcps', 'beds_occupied_covid'),
}}
/>
</ChartTile>
)}
{
type: 'bar',
metricProperty: 'beds_occupied_covid',
label: textNl.hospitals.chart_beds_occupied.legend_trend_label,
color: colors.primary,
bandPadding: gappedBarBandPaddingOverride,
},
]}
dataOptions={{
timespanAnnotations: [
{
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,
},
],
timelineEvents: getTimelineEvents(content.elements.timeSeries, 'hospital_lcps', 'beds_occupied_covid'),
useDatesAsRange: false,
}}
/>
</ChartTile>
)}

{selectedBedsOccupiedOverTimeChart === 'beds_occupied_covid_icu' && (
<ChartTile
title={textNl.icu.chart_beds_occupied.title}
description={textNl.icu.chart_beds_occupied.description}
metadata={{ source: textNl.sources.lnaz }}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={intensiveCareBedsTimeframe}
onSelectTimeframe={setIntensiveCareBedsTimeframe}
toggle={{
initialValue: selectedBedsOccupiedOverTimeChart,
items: bedsOccupiedOverTimeToggleItems,
onChange: (value) => setSelectedBedsOccupiedOverTimeChart(value),
}}
>
<TimeSeriesChart
accessibility={{
key: 'intensive_care_beds_occupied_over_time_chart',
{selectedBedsOccupiedOverTimeChart === 'beds_occupied_covid_icu' && (
<ChartTile
title={textNl.icu.chart_beds_occupied.title}
description={textNl.icu.chart_beds_occupied.description}
metadata={{ source: textNl.sources.lnaz }}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={intensiveCareBedsTimeframe}
onSelectTimeframe={setIntensiveCareBedsTimeframe}
toggle={{
initialValue: selectedBedsOccupiedOverTimeChart,
items: bedsOccupiedOverTimeToggleItems,
onChange: (value) => setSelectedBedsOccupiedOverTimeChart(value),
}}
values={lcpsICWithoutRange}
timeframe={intensiveCareBedsTimeframe}
forceLegend
seriesConfig={[
{
type: 'line',
metricProperty: 'beds_occupied_covid',
nonInteractive: true,
hideInLegend: true,
label: textNl.icu.chart_beds_occupied.legend_trend_label,
color: colors.primary,
},
{
type: 'scatter-plot',
metricProperty: 'beds_occupied_covid',
label: textNl.icu.chart_beds_occupied.legend_dot_label,
color: colors.primary,
},
]}
dataOptions={{
timespanAnnotations: [
>
<TimeSeriesChart
accessibility={{
key: 'intensive_care_beds_occupied_over_time_chart',
}}
values={lcpsICWithoutRange}
timeframe={intensiveCareBedsTimeframe}
forceLegend
seriesConfig={[
{
start: data.intensive_care_lcps.values[0].date_unix,
end: new Date('1 June 2020').getTime() / 1000,
label: textNl.icu.chart_beds_occupied.legend_inaccurate_label,
shortLabel: commonTexts.common.incomplete,
type: 'line',
metricProperty: 'beds_occupied_covid_moving_average',
label: textNl.icu.chart_beds_occupied.legend_dot_label,
color: colors.primary,
},
],
timelineEvents: getTimelineEvents(content.elements.timeSeries, 'intensive_care_lcps', 'beds_occupied_covid'),
useDatesAsRange: false,
}}
/>
</ChartTile>
)}
{
type: 'bar',
metricProperty: 'beds_occupied_covid',
label: textNl.icu.chart_beds_occupied.legend_trend_label,
color: colors.primary,
bandPadding: gappedBarBandPaddingOverride,
},
]}
dataOptions={{
timespanAnnotations: [
{
start: data.intensive_care_lcps.values[0].date_unix,
end: new Date('1 June 2020').getTime() / 1000,
label: textNl.icu.chart_beds_occupied.legend_inaccurate_label,
shortLabel: commonTexts.common.incomplete,
},
],
timelineEvents: getTimelineEvents(content.elements.timeSeries, 'intensive_care_lcps', 'beds_occupied_covid'),
useDatesAsRange: false,
}}
/>
</ChartTile>
)}
</InView>

<BorderedKpiSection
title={textNl.kpi_tiles.influxes.title}
Expand Down Expand Up @@ -312,6 +315,7 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
metricProperty: 'influx_covid_patients',
label: textNl.hospitals.chart_patient_influx.legend_title_trend_label,
color: colors.primary,
bandPadding: gappedBarBandPaddingOverride,
},
]}
dataOptions={{
Expand Down Expand Up @@ -353,6 +357,7 @@ const HospitalsAndCarePage = (props: StaticProps<typeof getStaticProps>) => {
metricProperty: 'influx_covid_patients',
label: textNl.icu.chart_patient_influx.legend_title_trend_label,
color: colors.primary,
bandPadding: gappedBarBandPaddingOverride,
},
]}
dataOptions={{
Expand Down

0 comments on commit 17475a2

Please sign in to comment.