Bugfix/cor 1627 restore bug from cor 1521 (#4764)

* fix: solve inconsistent usage of KpiTile * fix: other pages with percentages * fix: remove develop check * fix: styling * fix: PR feedback * fix: component name (cherry picked from commit 41e9093)
minvws · May 10, 2023 · f98b79e · f98b79e
1 parent 694e5fb
commit f98b79e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 25 deletions.
diff --git a/packages/app/src/components/kpi/bordered-kpi-section.tsx b/packages/app/src/components/kpi/bordered-kpi-section.tsx
@@ -21,7 +21,7 @@ export const BorderedKpiSection = ({ title, description, source, dateUnix, tiles
       <TwoKpiSection spacing={5}>
         <KpiContentContainer>
           {tilesData.map((tile, index) => (
-            <KpiContent key={index} tile={tile} />
+            <KpiContent key={index} {...tile} />
           ))}
         </KpiContentContainer>
       </TwoKpiSection>

diff --git a/packages/app/src/components/kpi/components/kpi-content.tsx b/packages/app/src/components/kpi/components/kpi-content.tsx
@@ -7,40 +7,33 @@ import { parseBirthyearRange } from '~/domain/vaccine/logic/parse-birthyear-rang
 import { useIntl } from '~/intl';
 import { space } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
-import { KpiContentProps } from '../types';
+import { TileData as KpiContentProps } from '../types';
 
-export const KpiContent = ({ tile }: KpiContentProps) => {
-  const { commonTexts, formatPercentage } = useIntl();
-  const parsedAgePercentage = tile.value ? `${formatPercentage(tile.value)}%` : '-';
-  const parsedBirthyearRange = tile.birthyear ? parseBirthyearRange(tile.birthyear) : null;
+export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false }: KpiContentProps) => {
+  const { commonTexts } = useIntl();
+  const parsedBirthyearRange = birthyear ? parseBirthyearRange(birthyear) : null;
 
   return (
     <Box>
-      <BoldText>{tile.title}</BoldText>
+      <BoldText>{title}</BoldText>
 
-      <Box paddingTop={space[3]} paddingBottom={tile.differenceValue ? space[1] : space[3]}>
-        <KpiValue
-          absolute={tile.differenceValue ? tile.value : null}
-          difference={tile.differenceValue || undefined}
-          isAmount={!!tile.differenceValue}
-          text={!tile.differenceValue ? parsedAgePercentage : undefined}
-          color={tile?.bar?.color}
-        />
+      <Box paddingTop={space[3]} paddingBottom={differenceValue ? space[1] : space[3]}>
+        <KpiValue absolute={!isPercentage ? value : null} percentage={isPercentage ? value : null} difference={differenceValue} isAmount={!!differenceValue} color={bar?.color} />
       </Box>
 
-      {tile.bar && (
+      {bar && (
         <Box paddingTop={space[2]} paddingBottom={space[3]}>
-          <Bar value={tile.bar.value} color={tile.bar.color} height={12} />
+          <Bar value={bar.value} color={bar.color} height={12} />
         </Box>
       )}
 
       <Markdown
         content={
           parsedBirthyearRange
-            ? replaceVariablesInText(tile.description, {
+            ? replaceVariablesInText(description, {
                 birthyear: replaceVariablesInText(commonTexts.common.birthyear_ranges[parsedBirthyearRange.type], parsedBirthyearRange),
               })
-            : tile.description
+            : description
         }
       />
     </Box>

diff --git a/packages/app/src/components/kpi/types.ts b/packages/app/src/components/kpi/types.ts
@@ -1,10 +1,11 @@
 import { DifferenceInteger } from '@corona-dashboard/common';
 
-type TileData = {
+export type TileData = {
   description: string;
   title: string;
   value: number | null;
   bar?: BarType;
+  isPercentage?: boolean;
   birthyear?: string | null;
   differenceValue?: DifferenceInteger;
 };
@@ -20,11 +21,7 @@ export interface BorderedKpiSectionProps {
   title: string;
 }
 
-export interface KpiContentProps {
-  tile: TileData;
-}
-
-export type BarType = {
+type BarType = {
   value: number;
   color: string;
 };
diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx
@@ -142,6 +142,7 @@ export const VaccinationsGmPage = (props: StaticProps<typeof getStaticProps>) =>
               tilesData={[
                 {
                   value: filteredVaccination.autumn2022.vaccinated_percentage_60_plus,
+                  isPercentage: true,
                   birthyear: filteredVaccination.autumn2022.birthyear_range_60_plus,
                   title: textShared.vaccination_grade_tile.age_group_labels.age_60_plus,
                   description: textShared.vaccination_grade_tile.autumn_labels.description_60_plus,
@@ -152,6 +153,7 @@ export const VaccinationsGmPage = (props: StaticProps<typeof getStaticProps>) =>
                 },
                 {
                   value: filteredVaccination.autumn2022.vaccinated_percentage_12_plus,
+                  isPercentage: true,
                   birthyear: filteredVaccination.autumn2022.birthyear_range_12_plus,
                   title: textShared.vaccination_grade_tile.age_group_labels.age_12_plus,
                   description: textShared.vaccination_grade_tile.autumn_labels.description_12_plus,
@@ -171,6 +173,7 @@ export const VaccinationsGmPage = (props: StaticProps<typeof getStaticProps>) =>
             tilesData={[
               {
                 value: filteredVaccination.primarySeries.vaccinated_percentage_18_plus,
+                isPercentage: true,
                 birthyear: filteredVaccination.primarySeries.birthyear_range_18_plus,
                 title: textShared.vaccination_grade_tile.age_group_labels.age_18_plus,
                 description: textShared.vaccination_grade_tile.fully_vaccinated_labels.description_18_plus,
@@ -181,6 +184,7 @@ export const VaccinationsGmPage = (props: StaticProps<typeof getStaticProps>) =>
               },
               {
                 value: filteredVaccination.primarySeries.vaccinated_percentage_12_plus,
+                isPercentage: true,
                 birthyear: filteredVaccination.primarySeries.birthyear_range_12_plus,
                 title: textShared.vaccination_grade_tile.age_group_labels.age_12_plus,
                 description: textShared.vaccination_grade_tile.fully_vaccinated_labels.description_12_plus,

diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx
@@ -184,6 +184,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
             tilesData={[
               {
                 value: vaccineCoverageEstimatedAutumn2022.age_60_plus_vaccinated,
+                isPercentage: true,
                 birthyear: vaccineCoverageEstimatedAutumn2022.age_60_plus_birthyear,
                 title: textShared.vaccination_grade_tile.age_group_labels.age_60_plus,
                 description: textShared.vaccination_grade_tile.autumn_labels.description_60_plus,
@@ -194,6 +195,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
               },
               {
                 value: vaccineCoverageEstimatedAutumn2022.age_12_plus_vaccinated,
+                isPercentage: true,
                 birthyear: vaccineCoverageEstimatedAutumn2022.age_12_plus_birthyear,
                 title: textShared.vaccination_grade_tile.age_group_labels.age_12_plus,
                 description: textShared.vaccination_grade_tile.autumn_labels.description_12_plus,
@@ -212,6 +214,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
             tilesData={[
               {
                 value: vaccineCoverageEstimatedFullyVaccinated.age_18_plus_vaccinated,
+                isPercentage: true,
                 birthyear: vaccineCoverageEstimatedFullyVaccinated.age_18_plus_birthyear,
                 title: textShared.vaccination_grade_tile.age_group_labels.age_18_plus,
                 description: textShared.vaccination_grade_tile.fully_vaccinated_labels.description_18_plus,
@@ -222,6 +225,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
               },
               {
                 value: vaccineCoverageEstimatedFullyVaccinated.age_12_plus_vaccinated,
+                isPercentage: true,
                 birthyear: vaccineCoverageEstimatedFullyVaccinated.age_12_plus_birthyear,
                 title: textShared.vaccination_grade_tile.age_group_labels.age_12_plus,
                 description: textShared.vaccination_grade_tile.fully_vaccinated_labels.description_12_plus,