Expanded timeframe options for most charts (#4142)

minvws · Mar 31, 2022 · 4b1a7bb · 4b1a7bb
1 parent a73541c
commit 4b1a7bb
Show file tree

Hide file tree

Showing 20 changed files with 351 additions and 111 deletions.
diff --git a/packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx b/packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx
@@ -121,7 +121,15 @@ export function SewerChart({
 
   return (
     <ChartTile
-      timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+      timeframeOptions={[
+        TimeframeOption.ALL,
+        TimeframeOption.ONE_WEEK,
+        TimeframeOption.TWO_WEEKS,
+        TimeframeOption.THIRTY_DAYS,
+        TimeframeOption.THREE_MONTHS,
+        TimeframeOption.SIX_MONTHS,
+        TimeframeOption.LAST_YEAR,
+      ]}
       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
@@ -22,7 +22,15 @@ interface ReproductionChartTileProps {
 
 export function ReproductionChartTile({
   data,
-  timeframeOptions = [TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS],
+  timeframeOptions = [
+    TimeframeOption.ALL,
+    TimeframeOption.ONE_WEEK,
+    TimeframeOption.TWO_WEEKS,
+    TimeframeOption.THIRTY_DAYS,
+    TimeframeOption.THREE_MONTHS,
+    TimeframeOption.SIX_MONTHS,
+    TimeframeOption.LAST_YEAR,
+  ],
   timeframeInitialValue = TimeframeOption.ALL,
   timelineEvents,
   text,

diff --git a/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx b/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx
@@ -117,64 +117,59 @@ function VariantStackedAreaTileWithData({
       title={text.titel}
       description={text.toelichting}
       metadata={metadata}
-      timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
     >
-      {(timeframe) => (
-        <>
-          {children}
-          {children && <Spacer mb={3} />}
-          <InteractiveLegend
-            helpText={text.legend_help_tekst}
-            selectOptions={selectOptions}
-            selection={list}
-            onToggleItem={toggle}
-            onReset={clear}
-          />
-          <Spacer mb={2} />
-          <TimeSeriesChart
-            accessibility={{
-              key: 'variants_stacked_area_over_time_chart',
-            }}
-            values={values}
-            timeframe={timeframe}
-            seriesConfig={filteredConfig}
-            disableLegend
-            dataOptions={{
-              isPercentage: true,
-              forcedMaximumValue: 100,
-              timespanAnnotations,
-              renderNullAsZero: true,
-            }}
-            formatTooltip={(context) => {
-              /**
-               * In the chart the 'other_percentage' stack is rendered on top,
-               * but in the tooltip it needs to be displayed as the last item.
-               * (These are both design decisions)
-               */
-              const reorderContext = {
-                ...context,
-                config: [
-                  ...context.config.filter(
-                    (x) =>
-                      !hasMetricProperty(x) ||
-                      x.metricProperty !== 'other_graph_percentage'
-                  ),
-                  context.config.find(
-                    (x) =>
-                      hasMetricProperty(x) &&
-                      x.metricProperty === 'other_graph_percentage'
-                  ),
-                ].filter(isDefined),
-              };
+      {children}
+      {children && <Spacer mb={3} />}
+      <InteractiveLegend
+        helpText={text.legend_help_tekst}
+        selectOptions={selectOptions}
+        selection={list}
+        onToggleItem={toggle}
+        onReset={clear}
+      />
+      <Spacer mb={2} />
+      <TimeSeriesChart
+        accessibility={{
+          key: 'variants_stacked_area_over_time_chart',
+        }}
+        values={values}
+        timeframe={TimeframeOption.ALL}
+        seriesConfig={filteredConfig}
+        disableLegend
+        dataOptions={{
+          isPercentage: true,
+          forcedMaximumValue: 100,
+          timespanAnnotations,
+          renderNullAsZero: true,
+        }}
+        formatTooltip={(context) => {
+          /**
+           * In the chart the 'other_percentage' stack is rendered on top,
+           * but in the tooltip it needs to be displayed as the last item.
+           * (These are both design decisions)
+           */
+          const reorderContext = {
+            ...context,
+            config: [
+              ...context.config.filter(
+                (x) =>
+                  !hasMetricProperty(x) ||
+                  x.metricProperty !== 'other_graph_percentage'
+              ),
+              context.config.find(
+                (x) =>
+                  hasMetricProperty(x) &&
+                  x.metricProperty === 'other_graph_percentage'
+              ),
+            ].filter(isDefined),
+          };
 
-              return <TooltipSeriesList data={reorderContext} />;
-            }}
-            numGridLines={0}
-            tickValues={[0, 25, 50, 75, 100]}
-          />
-          <Legend items={staticLegendItems} />
-        </>
-      )}
+          return <TooltipSeriesList data={reorderContext} />;
+        }}
+        numGridLines={0}
+        tickValues={[0, 25, 50, 75, 100]}
+      />
+      <Legend items={staticLegendItems} />
     </ChartTile>
   );
 }

diff --git a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
@@ -243,7 +243,15 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textGm.bronnen.rivm,
             }}
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
           >
             {(timeframe) => (
               <TimeSeriesChart

diff --git a/packages/app/src/pages/gemeente/[code]/sterfte.tsx b/packages/app/src/pages/gemeente/[code]/sterfte.tsx
@@ -159,7 +159,15 @@ const DeceasedMunicipalPage = (props: StaticProps<typeof getStaticProps>) => {
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             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
@@ -183,7 +183,15 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
             title={textGm.linechart_titel}
             description={textGm.linechart_description}
             metadata={{ source: textGm.bronnen.rivm }}
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
           >
             {(timeframe) => (
               <TimeSeriesChart

diff --git a/packages/app/src/pages/landelijk/coronamelder.tsx b/packages/app/src/pages/landelijk/coronamelder.tsx
@@ -140,7 +140,15 @@ const CoronamelderPage = (props: StaticProps<typeof getStaticProps>) => {
             description={
               corona_melder_app.waarschuwingen_over_tijd_grafiek.description
             }
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
           >
             {(timeframe) => (
               <TimeSeriesChart

diff --git a/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx b/packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
@@ -157,7 +157,15 @@ 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.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             description={textNl.positief_geteste_personen.linechart_description}
           >
             {(timeframe) => (
@@ -299,7 +307,15 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
             metadata={{
               source: textNl.besmette_locaties.bronnen.rivm,
             }}
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             description={textNl.besmette_locaties.linechart_description}
           >
             {(timeframe) => (
@@ -356,7 +372,15 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
           <ChartTile
             metadata={{ source: textNl.oversterfte.bronnen.rivm }}
             title={textNl.oversterfte.linechart_titel}
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             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
@@ -330,8 +330,16 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
             title={textNl.linechart_titel}
             description={textNl.linechart_description}
             metadata={{ source: textNl.bronnen.nice }}
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
-            timeframeInitialValue={TimeframeOption.FIVE_WEEKS}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
+            timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
           >
             {(timeframe) => (
               <TimeSeriesChart
@@ -380,8 +388,16 @@ 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.FIVE_WEEKS]}
-            timeframeInitialValue={TimeframeOption.FIVE_WEEKS}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
+            timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
           >
             {(timeframe) => (
               <TimeSeriesChart
@@ -415,8 +431,16 @@ 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.FIVE_WEEKS]}
-            timeframeInitialValue={TimeframeOption.FIVE_WEEKS}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
+            timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
             metadata={{ source: textNl.bronnen.nice }}
           >
             {(timeframe) => (

diff --git a/packages/app/src/pages/landelijk/sterfte.tsx b/packages/app/src/pages/landelijk/sterfte.tsx
@@ -156,7 +156,15 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             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
@@ -179,7 +179,15 @@ const ElderlyAtHomeNationalPage = (
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             title={textNl.section_positive_tested.line_chart_daily_title}
             metadata={{ source: textNl.section_positive_tested.bronnen.rivm }}
             description={
@@ -304,7 +312,15 @@ const ElderlyAtHomeNationalPage = (
           </TwoKpiSection>
 
           <ChartTile
-            timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
+            timeframeOptions={[
+              TimeframeOption.ALL,
+              TimeframeOption.ONE_WEEK,
+              TimeframeOption.TWO_WEEKS,
+              TimeframeOption.THIRTY_DAYS,
+              TimeframeOption.THREE_MONTHS,
+              TimeframeOption.SIX_MONTHS,
+              TimeframeOption.LAST_YEAR,
+            ]}
             title={textNl.section_deceased.line_chart_daily_title}
             metadata={{ source: textNl.section_positive_tested.bronnen.rivm }}
             description={textNl.section_deceased.line_chart_daily_description}