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

Commit

Permalink
feature: combine 'aantal testen' & 'percentage positieve testen' grap…
Browse files Browse the repository at this point in the history 
…hs (#4282)

Also adds an option to force a legend even if there is only one data range

closes: COR-756

Co-authored-by: VWSCoronaDashboard25 <[email protected]>
  • Loading branch information
@VWSCoronaDashboard25
VWSCoronaDashboard25 and VWSCoronaDashboard25 authored Jun 7, 2022
1 parent a1e87f9 commit 30c7ff3
Show file tree
Hide file tree
Showing 4 changed files with 258 additions and 265 deletions.
5 changes: 3 additions & 2 deletions packages/app/src/components/time-series-chart/logic/legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export function useLegendItems<T extends TimestampedValue>(
domain: number[],
config: SeriesConfig<T>,
dataOptions?: DataOptions,
hasOutofBoudsValues = false
hasOutofBoudsValues = false,
forceLegend = false
) {
const { timelineEvents, timespanAnnotations, outOfBoundsConfig } =
dataOptions || {};
Expand Down Expand Up @@ -124,7 +125,7 @@ export function useLegendItems<T extends TimestampedValue>(
* one) to determine if a legend is required. We only have to render a
* legend when there's at least two items.
*/
const isLegendRequired = legendItems.length + splitLegendGroups.length > 1;
const isLegendRequired = forceLegend || legendItems.length + splitLegendGroups.length > 1;

return {
legendItems: isLegendRequired ? legendItems : undefined,
Expand Down
5 changes: 4 additions & 1 deletion packages/app/src/components/time-series-chart/time-series-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export type TimeSeriesChartProps<
*/
dataOptions?: DataOptions;
disableLegend?: boolean;
forceLegend?: boolean;
onSeriesClick?: (seriesConfig: C[number], value: T) => void;

/**
Expand Down Expand Up @@ -172,6 +173,7 @@ export function TimeSeriesChart<
paddingLeft,
tooltipTitle,
disableLegend,
forceLegend = false,
onSeriesClick,
markNearestPointOnly,
displayTooltipValueOnly,
Expand Down Expand Up @@ -279,7 +281,8 @@ export function TimeSeriesChart<
xScale.domain(),
seriesConfig,
dataOptions,
dataOptions?.outOfBoundsConfig && seriesMax < calculatedSeriesMax
dataOptions?.outOfBoundsConfig && seriesMax < calculatedSeriesMax,
forceLegend
);

const timeDomain = useMemo(
Expand Down
255 changes: 125 additions & 130 deletions packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@ import {
TimeframeOptionsList,
} from '@corona-dashboard/common';
import { Test } from '@corona-dashboard/icons';
import { css } from '@styled-system/css';
import { GetStaticPropsContext } from 'next';
import { useState } from 'react';
import { Box } from '~/components/base';
import { RadioGroup } from '~/components/radio-group';
import { InlineText, BoldText } from '~/components/typography';
import { RegionControlOption } from '~/components/chart-region-controls';
import {
Expand Down Expand Up @@ -117,6 +120,25 @@ export const getStaticProps = createGetStaticProps(
}
);

const GgdGraphToggle = ({ selectedGgdGraph, onChange }: { selectedGgdGraph: string, onChange: (value: string) => void }) => {
return <Box css={css({ '& div': { justifyContent: 'flex-start' } })} mb={3}>
<RadioGroup
value={selectedGgdGraph}
onChange={onChange}
items={[
{
label: 'Percentage positieve GGD-testen',
value: 'GGD_infected_percentage_over_time_chart',
},
{
label: 'Aantal GGD-testen',
value: 'GGD_tested_over_time_chart',
},
]}
/>
</Box>
};

const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
const {
pageText,
Expand All @@ -134,6 +156,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
const { metadataTexts, textNl, textShared } = pageText;

const [selectedMap, setSelectedMap] = useState<RegionControlOption>('gm');
const [selectedGgdGraph, setSelectedGgdGraph] = useState<string>('GGD_infected_percentage_over_time_chart');

const dataOverallLastValue = data.tested_overall.last_value;
const dataGgdLastValue = data.tested_ggd.last_value;
Expand Down Expand Up @@ -225,6 +248,105 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
)}
</ChartTile>

<InView rootMargin="400px">
{selectedGgdGraph === 'GGD_infected_percentage_over_time_chart'
&& <ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.ggd.linechart_percentage_titel}
description={replaceVariablesInText(
textNl.ggd.linechart_percentage_toelichting,
{
date: formatDateFromSeconds(
dataGgdLastValue.date_unix,
'weekday-medium'
),
tested_total: formatNumber(dataGgdLastValue.tested_total),
infected_total: formatNumber(dataGgdLastValue.infected),
}
)}
metadata={{
date: getLastInsertionDateOfPage(data, ['tested_ggd']),
source: textNl.ggd.bronnen.rivm,
}}
>
{(timeframe) => (
<>
<GgdGraphToggle selectedGgdGraph={selectedGgdGraph} onChange={(value) => setSelectedGgdGraph(value)} />
<TimeSeriesChart
accessibility={{
key: 'confirmed_cases_infected_percentage_over_time_chart',
}}
timeframe={timeframe}
values={data.tested_ggd.values}
forceLegend
seriesConfig={[
{
type: 'line',
metricProperty: 'infected_percentage_moving_average',
color: colors.data.primary,
label: textShared.tooltip_labels.ggd_infected_percentage_moving_average,
},
]}
dataOptions={{
isPercentage: true,
}}
/>
</>
)}
</ChartTile>
}
{selectedGgdGraph === 'GGD_tested_over_time_chart'
&& <ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.ggd.linechart_totaltests_titel}
description={replaceVariablesInText(
textNl.ggd.linechart_totaltests_toelichting,
{
date: formatDateFromSeconds(
dataGgdLastValue.date_unix,
'weekday-medium'
),
tested_total: formatNumber(dataGgdLastValue.tested_total),
infected_total: formatNumber(dataGgdLastValue.infected),
}
)}
metadata={{
source: textNl.ggd.bronnen.rivm,
date: getLastInsertionDateOfPage(data, ['tested_ggd']),
}}
>
{(timeframe) => (
<>
<GgdGraphToggle selectedGgdGraph={selectedGgdGraph} onChange={(value) => setSelectedGgdGraph(value)} />
<TimeSeriesChart
accessibility={{
key: 'confirmed_cases_tested_over_time_chart',
}}
timeframe={timeframe}
values={data.tested_ggd.values}
seriesConfig={[
{
type: 'line',
metricProperty: 'tested_total_moving_average',
color: colors.data.secondary,
label: textNl.ggd.linechart_totaltests_legend_label_moving_average,
shortLabel: textShared.tooltip_labels.ggd_tested_total_moving_average,
},
{
type: 'line',
metricProperty: 'infected_moving_average',
color: colors.data.primary,
label: textNl.ggd.linechart_positivetests_legend_label_moving_average,
shortLabel: textShared.tooltip_labels.infected_moving_average,
},
]}
/>
</>
)}
</ChartTile>
}
</InView>

<InView rootMargin="400px">
<ChoroplethTile
data-cy="choropleths"
Expand Down Expand Up @@ -338,80 +460,6 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
</ChartTile>
</InView>

<InView rootMargin="400px">
<ChartTile
timeframeOptions={TimeframeOptionsList}
title={textNl.ggd.linechart_totaltests_titel}
description={replaceVariablesInText(
textNl.ggd.linechart_totaltests_toelichting,
{
date: formatDateFromSeconds(
dataGgdLastValue.date_unix,
'weekday-medium'
),
tested_total: formatNumber(dataGgdLastValue.tested_total),
infected_total: formatNumber(dataGgdLastValue.infected),
}
)}
metadata={{
source: textNl.ggd.bronnen.rivm,
}}
>
{(timeframe) => (
<TimeSeriesChart
accessibility={{
key: 'confirmed_cases_tested_over_time_chart',
}}
timeframe={timeframe}
values={data.tested_ggd.values}
seriesConfig={[
{
type: 'line',
metricProperty: 'tested_total_moving_average',
color: colors.data.secondary,
label:
textNl.ggd
.linechart_totaltests_legend_label_moving_average,
shortLabel:
textShared.tooltip_labels
.ggd_tested_total_moving_average,
},
{
type: 'bar',
metricProperty: 'tested_total',
color: colors.data.secondary,
label: textNl.ggd.linechart_totaltests_legend_label,
shortLabel: textShared.tooltip_labels.ggd_tested_total,
},
{
type: 'line',
metricProperty: 'infected_moving_average',
color: colors.data.primary,
label:
textNl.ggd
.linechart_positivetests_legend_label_moving_average,
shortLabel:
textShared.tooltip_labels.infected_moving_average,
},
{
type: 'bar',
metricProperty: 'infected',
color: colors.data.primary,
label: textNl.ggd.linechart_positivetests_legend_label,
shortLabel: textShared.tooltip_labels.infected,
},
{
type: 'invisible',
metricProperty: 'infected_percentage',
label: textShared.tooltip_labels.ggd_infected_percentage,
isPercentage: true,
},
]}
/>
)}
</ChartTile>
</InView>

<Divider />

<PageInformationBlock
Expand All @@ -424,62 +472,9 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
/>

{hasHideArchivedCharts && (
/** Fragment will to be removed when the second graph is no longer archived */
<>
<InView rootMargin="400px">
<GNumberBarChartTile data={data.g_number} />
</InView>
<InView rootMargin="400px">
<ChartTile
title={textNl.ggd.linechart_percentage_titel}
description={replaceVariablesInText(
textNl.ggd.linechart_percentage_toelichting,
{
date: formatDateFromSeconds(
dataGgdLastValue.date_unix,
'weekday-medium'
),
tested_total: formatNumber(dataGgdLastValue.tested_total),
infected_total: formatNumber(dataGgdLastValue.infected),
}
)}
metadata={{
source: textNl.ggd.bronnen.rivm,
}}
>
<TimeSeriesChart
accessibility={{
key: 'confirmed_cases_infected_percentage_over_time_chart',
}}
values={data.tested_ggd_archived.values}
seriesConfig={[
{
type: 'line',
metricProperty: 'infected_percentage_moving_average',
color: colors.data.primary,
label:
textShared.tooltip_labels
.ggd_infected_percentage_moving_average,
},
{
type: 'bar',
metricProperty: 'infected_percentage',
color: colors.data.primary,
label:
textShared.tooltip_labels.ggd_infected_percentage,
},
]}
dataOptions={{
isPercentage: true,
timelineEvents: getTimelineEvents(
content.elements.timeSeries,
'tested_ggd'
),
}}
/>
</ChartTile>
</InView>
</>
<InView rootMargin="400px">
<GNumberBarChartTile data={data.g_number} />
</InView>
)}
</TileList>
</NlLayout>
Expand Down
Loading

0 comments on commit 30c7ff3

Please sign in to comment.