feat: update typing for vaccine coverage

packages/app/src/domain/vaccine/common.ts

@@ -1,4 +1,4 @@
-import { colors } from '@corona-dashboard/common';
+import { colors, GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common';
 
 export const COLOR_FULLY_VACCINATED = colors.scale.blueDetailed[3];
 export const COLOR_FULLY_BOOSTERED = colors.scale.blue[5];
@@ -17,7 +17,23 @@ type MatchingVaccineCoverageAgeGroupsType = {
   fully_basisserie: FullyBasisserieVaccinatedAges[];
 };
 
+export type VaccineCoverageData = GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup;
+
 export const matchingAgeGroups: MatchingVaccineCoverageAgeGroupsType = {
   autumn_2022: ['60', '12'],
   fully_basisserie: ['18', '12'],
 };
+
+export type PercentageKeysOfAgeGroups = Pick<VaccineCoverageData, 'vaccinated_percentage_12_plus' | 'vaccinated_percentage_18_plus' | 'vaccinated_percentage_60_plus'>;
+
+export type PercentageLabelKeysOfAgeGroups = Pick<
+  VaccineCoverageData,
+  'vaccinated_percentage_12_plus_label' | 'vaccinated_percentage_18_plus_label' | 'vaccinated_percentage_60_plus_label'
+>;
+export type BirthyearRangeKeysOfAgeGroups = Pick<VaccineCoverageData, 'birthyear_range_12_plus' | 'birthyear_range_18_plus' | 'birthyear_range_60_plus'>;
+
+export type DataPerAgeGroup = {
+  birthyear_range_plus: BirthyearRangeKeysOfAgeGroups;
+  vaccinated_percentage_plus: PercentageKeysOfAgeGroups;
+  vaccinated_percentage_plus_label: PercentageLabelKeysOfAgeGroups;
+};

packages/app/src/domain/vaccine/data-selection/select-vaccine-coverage-data.ts

@@ -1,42 +1,29 @@
-import {
-  GmCollectionVaccineCoveragePerAgeGroup,
-  VrCollectionVaccineCoveragePerAgeGroup,
-  VrVaccineCoveragePerAgeGroupValue,
-} from '@corona-dashboard/common';
+import { GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup, VrVaccineCoveragePerAgeGroupValue } from '@corona-dashboard/common';
 import { isPresent } from 'ts-is-present';
 import { parseVaccinatedPercentageLabel } from '../logic/parse-vaccinated-percentage-label';
 
-export function selectVaccineCoverageData<
-  T extends
-    | GmCollectionVaccineCoveragePerAgeGroup
-    | VrCollectionVaccineCoveragePerAgeGroup
-    | VrVaccineCoveragePerAgeGroupValue
->(data: T[]) {
+export function selectVaccineCoverageData<T extends GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup | VrVaccineCoveragePerAgeGroupValue>(
+  data: T[]
+) {
   return data.map((vaccineCoveragePerAgeGroup) => {
     const parsedLabels: {
       fully_vaccinated_percentage?: number;
       autumn_2022_vaccinated_percentage?: number;
     } = {};
 
     if (isPresent(vaccineCoveragePerAgeGroup.fully_vaccinated_percentage_label)) {
-      const result = parseVaccinatedPercentageLabel(
-        vaccineCoveragePerAgeGroup.fully_vaccinated_percentage_label
-      );
+      const result = parseVaccinatedPercentageLabel(vaccineCoveragePerAgeGroup.fully_vaccinated_percentage_label);
 
       if (isPresent(result)) {
-        parsedLabels.fully_vaccinated_percentage =
-          result.sign === '>' ? 100 : 0;
+        parsedLabels.fully_vaccinated_percentage = result.sign === '>' ? 100 : 0;
       }
     }
 
     if (isPresent(vaccineCoveragePerAgeGroup.autumn_2022_vaccinated_percentage_label)) {
-      const result = parseVaccinatedPercentageLabel(
-        vaccineCoveragePerAgeGroup.autumn_2022_vaccinated_percentage_label
-      );
+      const result = parseVaccinatedPercentageLabel(vaccineCoveragePerAgeGroup.autumn_2022_vaccinated_percentage_label);
 
       if (isPresent(result)) {
-        parsedLabels.autumn_2022_vaccinated_percentage =
-          result.sign === '>' ? 100 : 0;
+        parsedLabels.autumn_2022_vaccinated_percentage = result.sign === '>' ? 100 : 0;
       }
     }
 

packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx

@@ -1,6 +1,6 @@
 import { colors, GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common';
 import { SiteText } from '~/locale';
-import { matchingAgeGroups } from './common';
+import { matchingAgeGroups, VaccineCoverageData, DataPerAgeGroup, BirthyearRangeKeysOfAgeGroups, PercentageKeysOfAgeGroups, PercentageLabelKeysOfAgeGroups } from './common';
 import css from '@styled-system/css';
 import { useState } from 'react';
 import { Box } from '~/components/base';
@@ -26,12 +26,6 @@ interface VaccineCoverageChoroplethProps {
   };
 }
 
-type dataPerAgeGroup = {
-  birthyear_range_plus: keyof VaccineCoverageData;
-  vaccinated_percentage_plus: keyof VaccineCoverageData;
-  vaccinated_percentage_plus_label: keyof VaccineCoverageData;
-};
-
 export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethProps) => {
   const { commonTexts } = useIntl();
   const [selectedMap, setSelectedMap] = useState<RegionControlOption>('gm');
@@ -134,8 +128,6 @@ export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethPro
   );
 };
 
-type VaccineCoverageData = GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup;
-
 type ChoroplethTooltipProps<T extends VaccineCoverageData> = {
   data: TooltipData<T>;
   selectedCoverageKind: CoverageKindProperty;
@@ -148,26 +140,26 @@ export function ChoroplethTooltip<T extends VaccineCoverageData>({ data, selecte
   const ageGroupsText: SiteText['common']['common']['age_groups'] = commonTexts.common.age_groups;
 
   const secondaryContent = ageGroups.map((ageGroup) => {
-    const ageGroupKeys: dataPerAgeGroup = {
-      birthyear_range_plus: `birthyear_range_${ageGroup}_plus`,
-      vaccinated_percentage_plus: `vaccinated_percentage_${ageGroup}_plus`,
-      vaccinated_percentage_plus_label: `vaccinated_percentage_${ageGroup}_plus_label`,
+    const ageGroupKeys: DataPerAgeGroup = {
+      birthyear_range_plus: `birthyear_range_${ageGroup}_plus` as unknown as BirthyearRangeKeysOfAgeGroups,
+      vaccinated_percentage_plus: `vaccinated_percentage_${ageGroup}_plus` as unknown as PercentageKeysOfAgeGroups,
+      vaccinated_percentage_plus_label: `vaccinated_percentage_${ageGroup}_plus_label` as unknown as PercentageLabelKeysOfAgeGroups,
     };
 
     return (
       <TooltipSubject
         thresholdValues={data.thresholdValues}
-        filterBelow={data.dataItem[ageGroupKeys.vaccinated_percentage_plus] as number}
+        filterBelow={data.dataItem[ageGroupKeys.vaccinated_percentage_plus as unknown as keyof VaccineCoverageData] as number}
         noDataFillColor={colors.white}
         key={ageGroup}
       >
         <Box spacingHorizontal={2} display="flex" alignItems="center" justifyContent="space-between" flexGrow={1} mr={13} pr={2}>
           <Box display="inline" minWidth={ageGroupKeys.vaccinated_percentage_plus_label !== null ? '150px' : 'false'}>
             <Markdown content={ageGroupsText[ageGroup]} />
           </Box>
-          {typeof data.dataItem[ageGroupKeys.vaccinated_percentage_plus] === 'number' && (
+          {typeof data.dataItem[ageGroupKeys.vaccinated_percentage_plus as unknown as keyof VaccineCoverageData] === 'number' && (
             <Box display="inline" minWidth={ageGroupKeys.vaccinated_percentage_plus_label !== null ? '100px' : 'false'}>
-              {formatPercentageAsNumber(data.dataItem[ageGroupKeys.vaccinated_percentage_plus] as string)}
+              {formatPercentageAsNumber(data.dataItem[ageGroupKeys.vaccinated_percentage_plus as unknown as keyof VaccineCoverageData] as string)}
             </Box>
           )}
         </Box>