diff --git a/packages/app/src/components/time-series-chart/logic/legend.tsx b/packages/app/src/components/time-series-chart/logic/legend.tsx index 1640f19b69..9818082c1e 100644 --- a/packages/app/src/components/time-series-chart/logic/legend.tsx +++ b/packages/app/src/components/time-series-chart/logic/legend.tsx @@ -21,7 +21,8 @@ export function useLegendItems( domain: number[], config: SeriesConfig, dataOptions?: DataOptions, - hasOutofBoudsValues = false + hasOutofBoudsValues = false, + forceLegend = false ) { const { timelineEvents, timespanAnnotations, outOfBoundsConfig } = dataOptions || {}; @@ -124,7 +125,7 @@ export function useLegendItems( * 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, diff --git a/packages/app/src/components/time-series-chart/time-series-chart.tsx b/packages/app/src/components/time-series-chart/time-series-chart.tsx index 7c633cfddc..ee44d8d73a 100644 --- a/packages/app/src/components/time-series-chart/time-series-chart.tsx +++ b/packages/app/src/components/time-series-chart/time-series-chart.tsx @@ -129,6 +129,7 @@ export type TimeSeriesChartProps< */ dataOptions?: DataOptions; disableLegend?: boolean; + forceLegend?: boolean; onSeriesClick?: (seriesConfig: C[number], value: T) => void; /** @@ -172,6 +173,7 @@ export function TimeSeriesChart< paddingLeft, tooltipTitle, disableLegend, + forceLegend = false, onSeriesClick, markNearestPointOnly, displayTooltipValueOnly, @@ -279,7 +281,8 @@ export function TimeSeriesChart< xScale.domain(), seriesConfig, dataOptions, - dataOptions?.outOfBoundsConfig && seriesMax < calculatedSeriesMax + dataOptions?.outOfBoundsConfig && seriesMax < calculatedSeriesMax, + forceLegend ); const timeDomain = useMemo( diff --git a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx index 51303a2e67..cd59f85561 100644 --- a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx +++ b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx @@ -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 { @@ -117,6 +120,25 @@ export const getStaticProps = createGetStaticProps( } ); +const GgdGraphToggle = ({ selectedGgdGraph, onChange }: { selectedGgdGraph: string, onChange: (value: string) => void }) => { + return + + +}; + const PositivelyTestedPeople = (props: StaticProps) => { const { pageText, @@ -134,6 +156,7 @@ const PositivelyTestedPeople = (props: StaticProps) => { const { metadataTexts, textNl, textShared } = pageText; const [selectedMap, setSelectedMap] = useState('gm'); + const [selectedGgdGraph, setSelectedGgdGraph] = useState('GGD_infected_percentage_over_time_chart'); const dataOverallLastValue = data.tested_overall.last_value; const dataGgdLastValue = data.tested_ggd.last_value; @@ -225,6 +248,105 @@ const PositivelyTestedPeople = (props: StaticProps) => { )} + + {selectedGgdGraph === 'GGD_infected_percentage_over_time_chart' + && + {(timeframe) => ( + <> + setSelectedGgdGraph(value)} /> + + + )} + + } + {selectedGgdGraph === 'GGD_tested_over_time_chart' + && + {(timeframe) => ( + <> + setSelectedGgdGraph(value)} /> + + + )} + + } + + ) => { - - - {(timeframe) => ( - - )} - - - ) => { /> {hasHideArchivedCharts && ( - /** Fragment will to be removed when the second graph is no longer archived */ - <> - - - - - - - - - + + + )} diff --git a/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx index cc4ae60d96..3756524c99 100644 --- a/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx +++ b/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx @@ -1,9 +1,12 @@ import { colors, TimeframeOptionsList } from '@corona-dashboard/common'; import { Test } from '@corona-dashboard/icons'; +import { css } from '@styled-system/css' import { GetStaticPropsContext } from 'next'; import { useRouter } from 'next/router'; import { useState } from 'react'; +import { Box } from '~/components/base' import { thresholds } from '~/components/choropleth/logic/thresholds'; +import { RadioGroup } from '~/components/radio-group' import { BoldText, InlineText } from '~/components/typography'; import { ChartTile, @@ -113,6 +116,25 @@ export const getStaticProps = createGetStaticProps( } ); +const GgdGraphToggle = ({ selectedGgdGraph, onChange }: { selectedGgdGraph: string, onChange: (value: string) => void }) => { + return + + +}; + const PositivelyTestedPeople = (props: StaticProps) => { const { pageText, @@ -127,8 +149,8 @@ const PositivelyTestedPeople = (props: StaticProps) => { const reverseRouter = useReverseRouter(); const router = useRouter(); - const [hasHideArchivedCharts, setHideArchivedCharts] = - useState(false); + const [hasHideArchivedCharts, setHideArchivedCharts] = useState(false); + const [selectedGgdGraph, setSelectedGgdGraph] = useState('GGD_infected_percentage_over_time_chart'); const { textVr, textShared } = pageText; @@ -224,6 +246,105 @@ const PositivelyTestedPeople = (props: StaticProps) => { )} + + {selectedGgdGraph === 'GGD_infected_percentage_over_time_chart' + && + {(timeframe) => ( + <> + setSelectedGgdGraph(value)} /> + + + )} + + } + {selectedGgdGraph === 'GGD_tested_over_time_chart' + && + {(timeframe) => ( + <> + setSelectedGgdGraph(value)} /> + + + )} + + } + + ) => { - - - {(timeframe) => ( - - )} - - - ) => { /> {hasHideArchivedCharts && ( - /** Fragment will to be removed when the second graph is no longer archived */ - <> - - - - - - - - - + + + )}