From 1b8eb284ec6bab510f3e93a3c91beb1d9327971e Mon Sep 17 00:00:00 2001
From: HO <93981322+VWSCoronaDashboard19@users.noreply.github.com>
Date: Wed, 6 Apr 2022 15:16:09 +0200
Subject: [PATCH] feat: aligned timeframe options on all charts (#4155)

* feat: aligned timeframe options on all charts

* feat: moved option list to a maintainable location
---
 .../src/components/chart-time-controls.tsx    | 15 +++------
 .../domain/sewer/sewer-chart/sewer-chart.tsx  | 12 ++-----
 .../domain/tested/reproduction-chart-tile.tsx | 11 ++-----
 .../[code]/positief-geteste-mensen.tsx        | 12 ++-----
 .../app/src/pages/gemeente/[code]/sterfte.tsx | 12 ++-----
 .../gemeente/[code]/ziekenhuis-opnames.tsx    | 12 ++-----
 .../app/src/pages/landelijk/coronamelder.tsx  | 12 ++-----
 .../src/pages/landelijk/gehandicaptenzorg.tsx | 32 +++----------------
 .../landelijk/intensive-care-opnames.tsx      | 31 +++---------------
 .../landelijk/positief-geteste-mensen.tsx     | 28 +++-------------
 packages/app/src/pages/landelijk/sterfte.tsx  | 12 ++-----
 .../pages/landelijk/thuiswonende-ouderen.tsx  | 22 ++-----------
 .../src/pages/landelijk/verpleeghuiszorg.tsx  | 32 +++----------------
 .../pages/landelijk/ziekenhuis-opnames.tsx    | 31 +++---------------
 .../[code]/gehandicaptenzorg.tsx              | 27 +++-------------
 .../[code]/positief-geteste-mensen.tsx        | 17 ++--------
 .../pages/veiligheidsregio/[code]/sterfte.tsx | 12 ++-----
 .../[code]/thuiswonende-ouderen.tsx           | 22 ++-----------
 .../[code]/verpleeghuiszorg.tsx               | 32 +++----------------
 .../[code]/ziekenhuis-opnames.tsx             | 12 ++-----
 packages/common/src/utils/timeframe/index.ts  | 12 +++++--
 21 files changed, 69 insertions(+), 339 deletions(-)

diff --git a/packages/app/src/components/chart-time-controls.tsx b/packages/app/src/components/chart-time-controls.tsx
index c9f730f519..75d666480c 100644
--- a/packages/app/src/components/chart-time-controls.tsx
+++ b/packages/app/src/components/chart-time-controls.tsx
@@ -1,5 +1,8 @@
 import { useMemo } from 'react';
-import { TimeframeOption } from '@corona-dashboard/common';
+import {
+  TimeframeOption,
+  TimeframeOptionsList,
+} from '@corona-dashboard/common';
 import { Box } from '~/components/base';
 import { Text } from '~/components/typography';
 import { RichContentSelect } from '~/components/rich-content-select';
@@ -15,15 +18,7 @@ export function ChartTimeControls(props: ChartTimeControlsProps) {
   const {
     onChange,
     timeframe,
-    timeframeOptions = [
-      TimeframeOption.ALL,
-      TimeframeOption.ONE_WEEK,
-      TimeframeOption.TWO_WEEKS,
-      TimeframeOption.THIRTY_DAYS,
-      TimeframeOption.THREE_MONTHS,
-      TimeframeOption.SIX_MONTHS,
-      TimeframeOption.LAST_YEAR,
-    ],
+    timeframeOptions = TimeframeOptionsList,
   } = props;
   const { commonTexts } = useIntl();
 
diff --git a/packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx b/packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx
index dcaf6373eb..a5af14d009 100644
--- a/packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx
+++ b/packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx
@@ -1,7 +1,7 @@
 import {
   NlSewer,
   SewerPerInstallationData,
-  TimeframeOption,
+  TimeframeOptionsList,
   VrSewer,
 } from '@corona-dashboard/common';
 import { useMemo } from 'react';
@@ -100,15 +100,7 @@ export function SewerChart({
 
   return (
     <ChartTile
-      timeframeOptions={[
-        TimeframeOption.ALL,
-        TimeframeOption.ONE_WEEK,
-        TimeframeOption.TWO_WEEKS,
-        TimeframeOption.THIRTY_DAYS,
-        TimeframeOption.THREE_MONTHS,
-        TimeframeOption.SIX_MONTHS,
-        TimeframeOption.LAST_YEAR,
-      ]}
+      timeframeOptions={TimeframeOptionsList}
       title={text.title}
       metadata={{
         source: text.source,
diff --git a/packages/app/src/domain/tested/reproduction-chart-tile.tsx b/packages/app/src/domain/tested/reproduction-chart-tile.tsx
index 68e78f378a..6175bfcb32 100644
--- a/packages/app/src/domain/tested/reproduction-chart-tile.tsx
+++ b/packages/app/src/domain/tested/reproduction-chart-tile.tsx
@@ -3,6 +3,7 @@ import {
   NlReproduction,
   NlReproductionValue,
   TimeframeOption,
+  TimeframeOptionsList,
 } from '@corona-dashboard/common';
 import { last } from 'lodash';
 import { isPresent } from 'ts-is-present';
@@ -22,15 +23,7 @@ interface ReproductionChartTileProps {
 
 export function ReproductionChartTile({
   data,
-  timeframeOptions = [
-    TimeframeOption.ALL,
-    TimeframeOption.ONE_WEEK,
-    TimeframeOption.TWO_WEEKS,
-    TimeframeOption.THIRTY_DAYS,
-    TimeframeOption.THREE_MONTHS,
-    TimeframeOption.SIX_MONTHS,
-    TimeframeOption.LAST_YEAR,
-  ],
+  timeframeOptions = TimeframeOptionsList,
   timeframeInitialValue = TimeframeOption.ALL,
   timelineEvents,
   text,
diff --git a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
index 92880a066c..c86b82eeff 100644
--- a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
+++ b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { Test } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { Box } from '~/components/base';
@@ -243,15 +243,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textGm.bronnen.rivm,
             }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
diff --git a/packages/app/src/pages/gemeente/[code]/sterfte.tsx b/packages/app/src/pages/gemeente/[code]/sterfte.tsx
index 7f91b41454..97e65a0b93 100644
--- a/packages/app/src/pages/gemeente/[code]/sterfte.tsx
+++ b/packages/app/src/pages/gemeente/[code]/sterfte.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { Coronavirus } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import {
@@ -159,15 +159,7 @@ const DeceasedMunicipalPage = (props: StaticProps<typeof getStaticProps>) => {
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textGm.section_deceased_rivm.line_chart_covid_daily_title}
             description={
               textGm.section_deceased_rivm.line_chart_covid_daily_description
diff --git a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
index 5fd10cb4be..ce716b2956 100644
--- a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
@@ -1,7 +1,7 @@
 import {
   colors,
   DAY_IN_SECONDS,
-  TimeframeOption,
+  TimeframeOptionsList,
   WEEK_IN_SECONDS,
 } from '@corona-dashboard/common';
 import { Ziekenhuis } from '@corona-dashboard/icons';
@@ -183,15 +183,7 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
             title={textGm.linechart_titel}
             description={textGm.linechart_description}
             metadata={{ source: textGm.bronnen.rivm }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
diff --git a/packages/app/src/pages/landelijk/coronamelder.tsx b/packages/app/src/pages/landelijk/coronamelder.tsx
index 26d2d00426..84d714fd48 100644
--- a/packages/app/src/pages/landelijk/coronamelder.tsx
+++ b/packages/app/src/pages/landelijk/coronamelder.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { External, Phone } from '@corona-dashboard/icons';
 import { css } from '@styled-system/css';
 import styled from 'styled-components';
@@ -140,15 +140,7 @@ const CoronamelderPage = (props: StaticProps<typeof getStaticProps>) => {
             description={
               corona_melder_app.waarschuwingen_over_tijd_grafiek.description
             }
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
diff --git a/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx b/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
index 8a049d56d8..ddc0139acf 100644
--- a/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
+++ b/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import {
   Coronavirus,
   GehandicaptenZorg,
@@ -157,15 +157,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textNl.positief_geteste_personen.bronnen.rivm }}
             title={textNl.positief_geteste_personen.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textNl.positief_geteste_personen.linechart_description}
           >
             {(timeframe) => (
@@ -307,15 +299,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textNl.besmette_locaties.bronnen.rivm,
             }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textNl.besmette_locaties.linechart_description}
           >
             {(timeframe) => (
@@ -372,15 +356,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textNl.oversterfte.bronnen.rivm }}
             title={textNl.oversterfte.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textNl.oversterfte.linechart_description}
           >
             {(timeframe) => (
diff --git a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx
index 52ca5fd1aa..0cdfc492b7 100644
--- a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx
+++ b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx
@@ -5,6 +5,7 @@ import {
   NlHospitalVaccineIncidencePerAgeGroupValue,
   NlIntensiveCareVaccinationStatusValue,
   TimeframeOption,
+  TimeframeOptionsList,
   WEEK_IN_SECONDS,
 } from '@corona-dashboard/common';
 import { Arts } from '@corona-dashboard/icons';
@@ -330,15 +331,7 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
             title={textNl.linechart_titel}
             description={textNl.linechart_description}
             metadata={{ source: textNl.bronnen.nice }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
           >
             {(timeframe) => (
@@ -388,15 +381,7 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
             title={textNl.chart_bedbezetting.title}
             description={textNl.chart_bedbezetting.description}
             metadata={{ source: textNl.bronnen.lnaz }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
           >
             {(timeframe) => (
@@ -431,15 +416,7 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             title={textShared.admissions_per_age_group.chart_title}
             description={textShared.admissions_per_age_group.chart_description}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
             metadata={{ source: textNl.bronnen.nice }}
           >
diff --git a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
index a27b4d81c8..023674ef4c 100644
--- a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
+++ b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
@@ -1,7 +1,7 @@
 import {
   colors,
   NlTestedOverallValue,
-  TimeframeOption,
+  TimeframeOptionsList,
 } from '@corona-dashboard/common';
 import { GgdTesten, Test } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
@@ -242,15 +242,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textNl.bronnen.rivm,
             }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
@@ -383,13 +375,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             <ChartTile
               title={textShared.infected_per_age_group.title}
               description={textShared.infected_per_age_group.description}
-              timeframeOptions={[
-                TimeframeOption.ALL,
-                TimeframeOption.TWO_WEEKS,
-                TimeframeOption.THIRTY_DAYS,
-                TimeframeOption.THREE_MONTHS,
-                TimeframeOption.LAST_YEAR,
-              ]}
+              timeframeOptions={TimeframeOptionsList}
               metadata={{
                 source: textNl.bronnen.rivm,
               }}
@@ -505,13 +491,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
 
           <InView rootMargin="400px">
             <ChartTile
-              timeframeOptions={[
-                TimeframeOption.ALL,
-                TimeframeOption.TWO_WEEKS,
-                TimeframeOption.THIRTY_DAYS,
-                TimeframeOption.THREE_MONTHS,
-                TimeframeOption.LAST_YEAR,
-              ]}
+              timeframeOptions={TimeframeOptionsList}
               title={textNl.ggd.linechart_totaltests_titel}
               description={textNl.ggd.linechart_totaltests_toelichting}
               metadata={{
diff --git a/packages/app/src/pages/landelijk/sterfte.tsx b/packages/app/src/pages/landelijk/sterfte.tsx
index 85447c6953..e9b7798b2f 100644
--- a/packages/app/src/pages/landelijk/sterfte.tsx
+++ b/packages/app/src/pages/landelijk/sterfte.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { Coronavirus } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import {
@@ -156,15 +156,7 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textNl.section_deceased_rivm.line_chart_covid_daily_title}
             description={
               textNl.section_deceased_rivm.line_chart_covid_daily_description
diff --git a/packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx b/packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx
index 4e12c81867..cc1605bb08 100644
--- a/packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx
+++ b/packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { Elderly } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { ChartTile } from '~/components/chart-tile';
@@ -179,15 +179,7 @@ const ElderlyAtHomeNationalPage = (
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textNl.section_positive_tested.line_chart_daily_title}
             metadata={{ source: textNl.section_positive_tested.bronnen.rivm }}
             description={
@@ -312,15 +304,7 @@ const ElderlyAtHomeNationalPage = (
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textNl.section_deceased.line_chart_daily_title}
             metadata={{ source: textNl.section_positive_tested.bronnen.rivm }}
             description={textNl.section_deceased.line_chart_daily_description}
diff --git a/packages/app/src/pages/landelijk/verpleeghuiszorg.tsx b/packages/app/src/pages/landelijk/verpleeghuiszorg.tsx
index 77d4109bee..05f939c235 100644
--- a/packages/app/src/pages/landelijk/verpleeghuiszorg.tsx
+++ b/packages/app/src/pages/landelijk/verpleeghuiszorg.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import {
   Coronavirus,
   Locatie,
@@ -163,15 +163,7 @@ const NursingHomeCare = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{ source: positiveTestedPeopleText.bronnen.rivm }}
             title={positiveTestedPeopleText.linechart_titel}
             description={positiveTestedPeopleText.linechart_description}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
@@ -315,15 +307,7 @@ const NursingHomeCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: infectedLocationsText.bronnen.rivm }}
             title={infectedLocationsText.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={infectedLocationsText.linechart_description}
           >
             {(timeframe) => (
@@ -383,15 +367,7 @@ const NursingHomeCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textNl.bronnen.rivm }}
             title={textNl.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textNl.linechart_description}
           >
             {(timeframe) => (
diff --git a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
index 6a5b79f97e..d0f68cea8a 100644
--- a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
@@ -5,6 +5,7 @@ import {
   NlHospitalVaccinationStatusValue,
   NlHospitalVaccineIncidencePerAgeGroupValue,
   TimeframeOption,
+  TimeframeOptionsList,
   WEEK_IN_SECONDS,
 } from '@corona-dashboard/common';
 import { Ziekenhuis } from '@corona-dashboard/icons';
@@ -322,15 +323,7 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textNl.bronnen.nice,
             }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
           >
             {(timeframe) => (
@@ -381,15 +374,7 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textNl.bronnen.lnaz,
             }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
           >
             {(timeframe) => (
@@ -484,15 +469,7 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
             description={
               commonTexts.hospital_admissions_per_age_group.chart_description
             }
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
             metadata={{ source: textNl.bronnen.nice }}
           >
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/gehandicaptenzorg.tsx b/packages/app/src/pages/veiligheidsregio/[code]/gehandicaptenzorg.tsx
index 13ed8d5bea..9419394e98 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/gehandicaptenzorg.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/gehandicaptenzorg.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import {
   Coronavirus,
   GehandicaptenZorg,
@@ -167,15 +167,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textVr.positief_geteste_personen.bronnen.rivm }}
             title={textVr.positief_geteste_personen.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textVr.positief_geteste_personen.linechart_description}
           >
             {(timeframe) => (
@@ -286,10 +278,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
               metadata={{
                 source: textVr.besmette_locaties.bronnen.rivm,
               }}
-              timeframeOptions={[
-                TimeframeOption.ALL,
-                TimeframeOption.FIVE_WEEKS,
-              ]}
+              timeframeOptions={TimeframeOptionsList}
               description={textVr.besmette_locaties.linechart_description}
             >
               {(timeframe) => (
@@ -347,15 +336,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textVr.oversterfte.bronnen.rivm }}
             title={textVr.oversterfte.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textVr.oversterfte.linechart_description}
           >
             {(timeframe) => (
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 5b3ac6d18c..213842786a 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { GgdTesten, Test } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { useRouter } from 'next/router';
@@ -254,15 +254,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textVr.bronnen.rivm,
             }}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
@@ -446,10 +438,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
 
           <InView rootMargin="400px">
             <ChartTile
-              timeframeOptions={[
-                TimeframeOption.ALL,
-                TimeframeOption.FIVE_WEEKS,
-              ]}
+              timeframeOptions={TimeframeOptionsList}
               title={textVr.ggd.linechart_totaltests_titel}
               description={textVr.ggd.linechart_totaltests_toelichting}
               metadata={{
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/sterfte.tsx b/packages/app/src/pages/veiligheidsregio/[code]/sterfte.tsx
index 412c10247b..8e5df4fff3 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/sterfte.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/sterfte.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { Coronavirus } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import {
@@ -172,15 +172,7 @@ const DeceasedRegionalPage = (props: StaticProps<typeof getStaticProps>) => {
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textVr.section_deceased_rivm.line_chart_covid_daily_title}
             description={
               textVr.section_deceased_rivm.line_chart_covid_daily_description
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/thuiswonende-ouderen.tsx b/packages/app/src/pages/veiligheidsregio/[code]/thuiswonende-ouderen.tsx
index e849f6bf92..e0c80ddd61 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/thuiswonende-ouderen.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/thuiswonende-ouderen.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import { Elderly } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { ChartTile } from '~/components/chart-tile';
@@ -186,15 +186,7 @@ const ElderlyAtHomeRegionalPage = (
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textVr.section_positive_tested.line_chart_daily_title}
             metadata={{ source: textVr.section_positive_tested.bronnen.rivm }}
             description={
@@ -293,15 +285,7 @@ const ElderlyAtHomeRegionalPage = (
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             title={textVr.section_deceased.line_chart_daily_title}
             metadata={{ source: textVr.section_positive_tested.bronnen.rivm }}
             description={textVr.section_deceased.line_chart_daily_description}
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/verpleeghuiszorg.tsx b/packages/app/src/pages/veiligheidsregio/[code]/verpleeghuiszorg.tsx
index 3908c5eb04..5dc996082c 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/verpleeghuiszorg.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/verpleeghuiszorg.tsx
@@ -1,4 +1,4 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
+import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
 import {
   Coronavirus,
   Locatie,
@@ -172,15 +172,7 @@ const NursingHomeCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textVr.positief_geteste_personen.bronnen.rivm }}
             title={textVr.positief_geteste_personen.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textVr.positief_geteste_personen.linechart_description}
           >
             {(timeframe) => (
@@ -295,15 +287,7 @@ const NursingHomeCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textVr.besmette_locaties.bronnen.rivm }}
             title={textVr.besmette_locaties.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textVr.besmette_locaties.linechart_description}
           >
             {(timeframe) => (
@@ -366,15 +350,7 @@ const NursingHomeCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textVr.bronnen.rivm }}
             title={textVr.linechart_titel}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
             description={textVr.linechart_description}
           >
             {(timeframe) => (
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx
index 729502a9fc..f09e018c8c 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx
@@ -1,7 +1,7 @@
 import {
   colors,
   DAY_IN_SECONDS,
-  TimeframeOption,
+  TimeframeOptionsList,
   WEEK_IN_SECONDS,
 } from '@corona-dashboard/common';
 import { Ziekenhuis } from '@corona-dashboard/icons';
@@ -186,15 +186,7 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{ source: textVr.bronnen.rivm }}
             title={textVr.linechart_titel}
             description={textVr.linechart_description}
-            timeframeOptions={[
-              TimeframeOption.ALL,
-              TimeframeOption.ONE_WEEK,
-              TimeframeOption.TWO_WEEKS,
-              TimeframeOption.THIRTY_DAYS,
-              TimeframeOption.THREE_MONTHS,
-              TimeframeOption.SIX_MONTHS,
-              TimeframeOption.LAST_YEAR,
-            ]}
+            timeframeOptions={TimeframeOptionsList}
           >
             {(timeframe) => (
               <TimeSeriesChart
diff --git a/packages/common/src/utils/timeframe/index.ts b/packages/common/src/utils/timeframe/index.ts
index 5e08aff6a2..67b7f0e530 100644
--- a/packages/common/src/utils/timeframe/index.ts
+++ b/packages/common/src/utils/timeframe/index.ts
@@ -9,7 +9,6 @@ import { DAY_IN_SECONDS } from '../../time';
 
 export enum TimeframeOption {
   ONE_WEEK = '1week',
-  TWO_WEEKS = '2weeks',
   FIVE_WEEKS = '5weeks',
   THIRTY_DAYS = '30days',
   THREE_MONTHS = '3months',
@@ -18,12 +17,19 @@ export enum TimeframeOption {
   ALL = 'all',
 }
 
+export const TimeframeOptionsList = [
+  TimeframeOption.ALL,
+  TimeframeOption.ONE_WEEK,
+  TimeframeOption.THIRTY_DAYS,
+  TimeframeOption.THREE_MONTHS,
+  TimeframeOption.SIX_MONTHS,
+  TimeframeOption.LAST_YEAR,
+];
+
 export function getDaysForTimeframe(timeframe: TimeframeOption): number {
   switch (timeframe) {
     case TimeframeOption.ONE_WEEK:
       return 7;
-    case TimeframeOption.TWO_WEEKS:
-      return 2 * 7;
     case TimeframeOption.FIVE_WEEKS:
       return 5 * 7;
     case TimeframeOption.THIRTY_DAYS: