From 30c7ff37f89e5fa8d95959c9937e9671c2cfa4cf Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard25
 <98813868+VWSCoronaDashboard25@users.noreply.github.com>
Date: Tue, 7 Jun 2022 17:16:36 +0200
Subject: [PATCH] feature: combine 'aantal testen' & 'percentage positieve
 testen' graphs (#4282)

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

closes: COR-756

Co-authored-by: VWSCoronaDashboard25 <VWSCoronaDashboard25@users.noreply.github.com>
---
 .../time-series-chart/logic/legend.tsx        |   5 +-
 .../time-series-chart/time-series-chart.tsx   |   5 +-
 .../landelijk/positief-geteste-mensen.tsx     | 255 +++++++++--------
 .../[code]/positief-geteste-mensen.tsx        | 258 +++++++++---------
 4 files changed, 258 insertions(+), 265 deletions(-)

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<T extends TimestampedValue>(
   domain: number[],
   config: SeriesConfig<T>,
   dataOptions?: DataOptions,
-  hasOutofBoudsValues = false
+  hasOutofBoudsValues = false,
+  forceLegend = false
 ) {
   const { timelineEvents, timespanAnnotations, outOfBoundsConfig } =
     dataOptions || {};
@@ -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,
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 <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,
@@ -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;
@@ -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"
@@ -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
@@ -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>
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 <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,
@@ -127,8 +149,8 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
 
   const reverseRouter = useReverseRouter();
   const router = useRouter();
-  const [hasHideArchivedCharts, setHideArchivedCharts] =
-    useState<boolean>(false);
+  const [hasHideArchivedCharts, setHideArchivedCharts] = useState<boolean>(false);
+  const [selectedGgdGraph, setSelectedGgdGraph] = useState<string>('GGD_infected_percentage_over_time_chart');
 
   const { textVr, textShared } = pageText;
 
@@ -224,6 +246,105 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             )}
           </ChartTile>
 
+          <InView rootMargin="400px">
+            {selectedGgdGraph === 'GGD_infected_percentage_over_time_chart'
+              && <ChartTile
+                  timeframeOptions={TimeframeOptionsList}
+                  title={textVr.ggd.linechart_percentage_titel}
+                  description={replaceVariablesInText(
+                    textVr.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: textVr.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_archived.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={textVr.ggd.linechart_totaltests_titel}
+                description={replaceVariablesInText(
+                  textVr.ggd.linechart_totaltests_toelichting,
+                  {
+                    date: formatDateFromSeconds(
+                      dataGgdLastValue.date_unix,
+                      'weekday-medium'
+                    ),
+                    tested_total: formatNumber(dataGgdLastValue.tested_total),
+                    infected_total: formatNumber(dataGgdLastValue.infected),
+                  }
+                )}
+                metadata={{
+                  source: textVr.ggd.bronnen.rivm,
+                  date: getLastInsertionDateOfPage(data, ['tested_ggd']),
+                }}
+              >
+                {(timeframe) => (
+                  <>
+                    <GgdGraphToggle selectedGgdGraph={selectedGgdGraph} onChange={(value) => setSelectedGgdGraph(value)} />
+                    <TimeSeriesChart
+                      accessibility={{
+                        key: 'confirmed_cases_tested_total_over_time_chart',
+                      }}
+                      timeframe={timeframe}
+                      values={data.tested_ggd.values}
+                      seriesConfig={[
+                        {
+                          type: 'line',
+                          metricProperty: 'tested_total_moving_average',
+                          color: colors.data.secondary,
+                          label: textVr.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: textVr.ggd.linechart_positivetests_legend_label_moving_average,
+                          shortLabel: textShared.tooltip_labels.infected_moving_average,
+                        },
+                      ]}
+                    />
+                  </>
+                )}
+              </ChartTile>
+            }
+          </InView>
+
           <InView rootMargin="400px">
             <ChoroplethTile
               title={replaceVariablesInText(textVr.map_titel, {
@@ -279,80 +400,6 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             </ChoroplethTile>
           </InView>
 
-          <InView rootMargin="400px">
-            <ChartTile
-              timeframeOptions={TimeframeOptionsList}
-              title={textVr.ggd.linechart_totaltests_titel}
-              description={replaceVariablesInText(
-                textVr.ggd.linechart_totaltests_toelichting,
-                {
-                  date: formatDateFromSeconds(
-                    dataGgdLastValue.date_unix,
-                    'weekday-medium'
-                  ),
-                  tested_total: formatNumber(dataGgdLastValue.tested_total),
-                  infected_total: formatNumber(dataGgdLastValue.infected),
-                }
-              )}
-              metadata={{
-                source: textVr.ggd.bronnen.rivm,
-              }}
-            >
-              {(timeframe) => (
-                <TimeSeriesChart
-                  accessibility={{
-                    key: 'confirmed_cases_tested_total_over_time_chart',
-                  }}
-                  timeframe={timeframe}
-                  values={data.tested_ggd.values}
-                  seriesConfig={[
-                    {
-                      type: 'line',
-                      metricProperty: 'tested_total_moving_average',
-                      color: colors.data.secondary,
-                      label:
-                        textVr.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: textVr.ggd.linechart_totaltests_legend_label,
-                      shortLabel: textShared.tooltip_labels.ggd_tested_total,
-                    },
-                    {
-                      type: 'line',
-                      metricProperty: 'infected_moving_average',
-                      color: colors.data.primary,
-                      label:
-                        textVr.ggd
-                          .linechart_positivetests_legend_label_moving_average,
-                      shortLabel:
-                        textShared.tooltip_labels.infected_moving_average,
-                    },
-                    {
-                      type: 'bar',
-                      metricProperty: 'infected',
-                      color: colors.data.primary,
-                      label: textVr.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
@@ -365,62 +412,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={textVr.ggd.linechart_percentage_titel}
-                  description={replaceVariablesInText(
-                    textVr.ggd.linechart_percentage_toelichting,
-                    {
-                      date: formatDateFromSeconds(
-                        dataGgdLastValue.date_unix,
-                        'weekday-medium'
-                      ),
-                      tested_total: formatNumber(dataGgdLastValue.tested_total),
-                      infected_total: formatNumber(dataGgdLastValue.infected),
-                    }
-                  )}
-                  metadata={{
-                    source: textVr.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>
       </VrLayout>