Feature/cor 1498 vaccinations toggle button removal cherrypick (#4728)

* fix: merged conflicts * fix: removed left vr * feat: merged two files together * Revert "fix: merged conflicts" This reverts commit 8a14ed0, reversing changes made to 5a152ff. * fix: merged conflicts * fix: removed left vr * feat: merged two files together * fix: conflict --------- Co-authored-by: VWSCoronaDashboard27 <[email protected]>
minvws · Apr 11, 2023 · 4eba3a9 · 4eba3a9
1 parent 5a152ff
commit 4eba3a9
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 227 deletions.
diff --git a/packages/app/src/components/choropleth/logic/thresholds.ts b/packages/app/src/components/choropleth/logic/thresholds.ts
@@ -335,7 +335,6 @@ export const thresholds: Thresholds = {
     travel: situationsThreshold,
     hospitality: situationsThreshold,
     fully_vaccinated_percentage: vaccineCoveragePercentageThresholds,
-    primary_series_percentage: vaccineCoveragePercentageThresholds,
     autumn_2022_vaccinated_percentage: vaccineCoveragePercentageThresholds,
     vaccinated_percentage_12_plus: vaccineCoveragePercentageThresholds,
     vaccinated_percentage_18_plus: vaccineCoveragePercentageThresholds,

diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx
@@ -1,12 +1,11 @@
-import { colors, GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common';
+import { colors, GmCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common';
 import { SiteText } from '~/locale';
 import { matchingAgeGroups, VaccineCoverageData, DataPerAgeGroup, BirthyearRangeKeysOfAgeGroups, PercentageKeysOfAgeGroups, PercentageLabelKeysOfAgeGroups } from './common';
 import css from '@styled-system/css';
 import { useState } from 'react';
 import { space } from '~/style/theme';
 import { Box } from '~/components/base';
-import { RegionControlOption } from '~/components/chart-region-controls';
-import { DynamicChoropleth } from '~/components/choropleth';
+import { DataOptions, DynamicChoropleth } from '~/components/choropleth';
 import { ChoroplethTile } from '~/components/choropleth-tile';
 import { thresholds } from '~/components/choropleth/logic';
 import { TooltipContent, TooltipSubject } from '~/components/choropleth/tooltips';
@@ -15,25 +14,23 @@ import { Markdown } from '~/components/markdown';
 import { BoldText } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
-import { useReverseRouter } from '~/utils/use-reverse-router';
 import { AgeGroup, AgeGroupSelect } from './components/age-group-select';
 import { CoverageKindProperty, VaccinationCoverageKindSelect } from './components/vaccination-coverage-kind-select';
 import { parseVaccinatedPercentageLabel } from './logic/parse-vaccinated-percentage-label';
 
 interface VaccineCoverageChoroplethProps {
-  data: {
-    gm: GmCollectionVaccineCoveragePerAgeGroup[];
-    vr: VrCollectionVaccineCoveragePerAgeGroup[];
+  data: GmCollectionVaccineCoveragePerAgeGroup[];
+  dataOptions: DataOptions;
+  text: {
+    title: string;
+    description: string;
   };
 }
 
-export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethProps) => {
+export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCoverageChoroplethProps) => {
   const { commonTexts } = useIntl();
-  const [selectedMap, setSelectedMap] = useState<RegionControlOption>('gm');
   const [selectedAgeGroup, setSelectedAgeGroup] = useState<AgeGroup>('18');
   const [selectedCoverageKind, setSelectedCoverageKind] = useState<CoverageKindProperty>('primary_series');
-  const reverseRouter = useReverseRouter();
-
   /**
    * When changing between coverage kinds where the selected age group isn't available,
    * the other coverage kind set the non-matching age group to a default one.
@@ -46,19 +43,14 @@ export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethPro
     setSelectedCoverageKind(coverageKind);
   };
 
-  const variables = {
-    regio: commonTexts.choropleth.choropleth_vaccination_coverage.shared[selectedMap],
-  };
-
-  const choroplethDataVr: VrCollectionVaccineCoveragePerAgeGroup[] = data.vr.filter((choroplethDataSingleVR) => choroplethDataSingleVR.vaccination_type === selectedCoverageKind);
-  const choroplethDataGm: GmCollectionVaccineCoveragePerAgeGroup[] = data.gm.filter((choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind);
+  const choroplethDataGm: GmCollectionVaccineCoveragePerAgeGroup[] = data.filter((choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind);
 
   return (
     <ChoroplethTile
-      title={replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.title, variables)}
+      title={text.title}
       description={
         <>
-          <Markdown content={replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.description, variables)} />
+          <Markdown content={text.description} />
           <Box display="flex" flexDirection="row" justifyContent="flex-start" spacingHorizontal={2} as={'fieldset'}>
             <BoldText
               as="legend"
@@ -82,51 +74,26 @@ export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethPro
         </>
       }
       legend={{
-        thresholds: selectedMap === 'gm' ? thresholds.gm.primary_series_percentage : thresholds.vr.primary_series_percentage,
+        thresholds: thresholds.gm.primary_series_percentage,
         title: commonTexts.choropleth.choropleth_vaccination_coverage.shared.legend_title,
       }}
       metadata={{
         source: commonTexts.choropleth.vaccination_coverage.shared.bronnen.rivm,
-        date:
-          selectedMap === 'gm'
-            ? data.gm.find((item: GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix
-            : data.vr.find((item: GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix,
+        date: data.find((item: GmCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix,
       }}
-      chartRegion={selectedMap}
-      onChartRegionChange={setSelectedMap}
+      hasPadding
     >
-      {selectedMap === 'gm' && (
-        <DynamicChoropleth
-          map={'gm'}
-          accessibility={{ key: 'vaccine_coverage_nl_choropleth' }}
-          data={choroplethDataGm}
-          dataConfig={{
-            metricName: 'vaccine_coverage_per_age_group',
-            metricProperty: `vaccinated_percentage_${selectedAgeGroup}_plus`,
-          }}
-          dataOptions={{
-            isPercentage: true,
-            getLink: (gmcode) => reverseRouter.gm.vaccinaties(gmcode),
-          }}
-          formatTooltip={(context) => <ChoroplethTooltip data={context} ageGroups={matchingAgeGroups[selectedCoverageKind]} selectedCoverageKind={selectedCoverageKind} />}
-        />
-      )}
-
-      {selectedMap === 'vr' && (
-        <DynamicChoropleth
-          map={'vr'}
-          accessibility={{ key: 'vaccine_coverage_nl_choropleth' }}
-          data={choroplethDataVr}
-          dataConfig={{
-            metricName: 'vaccine_coverage_per_age_group',
-            metricProperty: `vaccinated_percentage_${selectedAgeGroup}_plus`,
-          }}
-          dataOptions={{
-            isPercentage: true,
-          }}
-          formatTooltip={(context) => <ChoroplethTooltip data={context} ageGroups={matchingAgeGroups[selectedCoverageKind]} selectedCoverageKind={selectedCoverageKind} />}
-        />
-      )}
+      <DynamicChoropleth
+        map={'gm'}
+        accessibility={{ key: 'vaccine_coverage_nl_choropleth' }}
+        data={choroplethDataGm}
+        dataConfig={{
+          metricName: 'vaccine_coverage_per_age_group',
+          metricProperty: `vaccinated_percentage_${selectedAgeGroup}_plus`,
+        }}
+        dataOptions={dataOptions}
+        formatTooltip={(context) => <ChoroplethTooltip data={context} ageGroups={matchingAgeGroups[selectedCoverageKind]} selectedCoverageKind={selectedCoverageKind} />}
+      />
     </ChoroplethTile>
   );
 };

diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm.tsx
diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx
@@ -17,7 +17,7 @@ import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms';
 import { assert, replaceVariablesInText, useReverseRouter, useFormatLokalizePercentage } from '~/utils';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
-import { VaccineCoverageChoroplethVrAndGm } from '~/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm';
+import { VaccineCoverageChoropleth } from '~/domain/vaccine/vaccine-coverage-choropleth';
 import { emptyCoverageData } from '~/data/gm/vaccinations/empty-coverage-data';
 
 const pageMetrics = ['vaccine_coverage_per_age_group', 'vaccine_coverage_per_age_group_archived', 'booster_coverage_archived_20220904'];
@@ -202,14 +202,12 @@ export const VaccinationsGmPage = (props: StaticProps<typeof getStaticProps>) =>
             coverageData={parsedVaccineCoverageData.primarySeries}
             dateUnix={filteredVaccination.primarySeries.date_unix}
           />
-          <VaccineCoverageChoroplethVrAndGm
+          <VaccineCoverageChoropleth
             data={choropleth.gm.vaccine_coverage_per_age_group}
-            vrOrGmOptions={{
-              dataOptions: { getLink: reverseRouter.gm.vaccinaties, selectedCode: data.code, isPercentage: true },
-              text: {
-                title: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.gm.title, { municipalityName: municipalityName }),
-                description: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.gm.description, { municipalityName: municipalityName }),
-              },
+            dataOptions={{ getLink: reverseRouter.gm.vaccinaties, selectedCode: data.code, isPercentage: true }}
+            text={{
+              title: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.gm.title, { municipalityName: municipalityName }),
+              description: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.gm.description, { municipalityName: municipalityName }),
             }}
           />
           <Divider />

diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx
@@ -5,6 +5,7 @@ import { GetStaticPropsContext } from 'next';
 import { useState } from 'react';
 import { ChartTile, PageInformationBlock, TileList, TimeSeriesChart, WarningTile, Divider } from '~/components';
 import { Layout, NlLayout } from '~/domain/layout';
+import { useReverseRouter } from '~/utils/use-reverse-router';
 import {
   selectAdministrationData,
   VaccinationsOverTimeTile,
@@ -121,6 +122,7 @@ export const getStaticProps = createGetStaticProps(
 function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
   const { content, choropleth, selectedNlData: data, lastGenerated, administrationData } = props;
   const { commonTexts, formatNumber } = useIntl();
+  const reverseRouter = useReverseRouter();
 
   const { metadataTexts, textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(props.pageText, selectLokalizeTexts);
   const { formatPercentageAsNumber } = useFormatLokalizePercentage();
@@ -151,6 +153,10 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
 
   const lastInsertionDateOfPage = getLastInsertionDateOfPage(data, pageMetrics);
 
+  const variables = {
+    regio: commonTexts.choropleth.choropleth_vaccination_coverage.shared.gm,
+  };
+
   return (
     <Layout {...metadata} lastGenerated={lastGenerated}>
       <NlLayout>
@@ -253,7 +259,14 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
             }}
           />
 
-          <VaccineCoverageChoropleth data={choropleth} />
+          <VaccineCoverageChoropleth
+            data={choropleth.gm}
+            dataOptions={{ getLink: (gmcode) => reverseRouter.gm.vaccinaties(gmcode), isPercentage: true }}
+            text={{
+              title: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.title, variables),
+              description: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.description, variables),
+            }}
+          />
           <Autumn2022ShotCoveragePerAgeGroup
             text={textNl.vaccination_coverage}
             title={textNl.vaccination_coverage.title}

diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv
@@ -473,3 +473,4 @@ timestamp,action,key,document_id,move_to
 2023-03-28T13:00:33.766Z,delete,common.accessibility.charts.sewer_region_choropleth.label,Z3v1SKYekK4CLDpzUPc5x5,__
 2023-04-03T15:45:47.784Z,delete,pages.behavior_page.nl.tooltip_labels.compliance,uFGMarfssEPhdNlk3s6Avk,__
 2023-04-03T15:45:47.785Z,delete,pages.behavior_page.nl.tooltip_labels.support,EaUS1FZKh46VBcUuh47mI4,__
+2023-03-29T10:43:54.266Z,delete,common.choropleth.choropleth_vaccination_coverage.shared.vr,G6M7GhzH8XbtdKiRrez14Y,__