Fix/cor 1784 correct vaccine adminstered graphs (#4891)

* fix(COR-1784): Update autumn 2022 vaccine table to show correct data * fix(COR-1784): Re-add vaccine campaign tile * fix(COR-1784): Fix filteredCampaigns * feat(COR-1784): Add border to basic series kpi header --------- Co-authored-by: VWSCoronaDashboard29 <B>
minvws · Oct 4, 2023 · 3af5e3f · 3af5e3f
1 parent 116286a
commit 3af5e3f
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 14 deletions.
diff --git a/packages/app/src/domain/vaccine/index.ts b/packages/app/src/domain/vaccine/index.ts
@@ -13,3 +13,4 @@ export { VaccineStockPerSupplierChart } from './vaccine-stock-per-supplier-chart
 export { ChoroplethTooltip } from './vaccine-coverage-choropleth';
 export { CampaignBanner } from './campaign-banner/campaign-banner';
 export { PrimarySeriesShotCoveragePerAgeGroup } from './primary-series-coverage-per-age-group/primary-series-coverage-per-age-group';
+export { PrimarySeriesKpiHeader } from './primary-series-kpi-header';
diff --git a/packages/app/src/domain/vaccine/primary-series-kpi-header.tsx b/packages/app/src/domain/vaccine/primary-series-kpi-header.tsx
@@ -0,0 +1,28 @@
+import { PageInformationBlock } from '~/components';
+import { Vaccinaties as VaccinatieIcon } from '@corona-dashboard/icons';
+import { Box } from '~/components/base';
+import { MetadataProps } from '~/components/page-information-block/components/metadata';
+
+interface PrimarySeriesKpiHeaderProps {
+  title: string;
+  description: string;
+  metadata: MetadataProps;
+}
+
+export function PrimarySeriesKpiHeader({ title, description, metadata }: PrimarySeriesKpiHeaderProps) {
+  return (
+    <Box paddingTop="40px" borderTopWidth="2px" borderColor="gray3" borderStyle="solid">
+      <PageInformationBlock
+        title={title}
+        description={description}
+        icon={<VaccinatieIcon aria-hidden="true" />}
+        metadata={{
+          datumsText: metadata.datumsText,
+          dateOrRange: metadata.dateOrRange,
+          dateOfInsertionUnix: metadata.dateOfInsertionUnix,
+          dataSources: metadata.dataSources,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/vaccine-campaigns-tile.tsx b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/vaccine-campaigns-tile.tsx
@@ -22,19 +22,19 @@ export const VaccineCampaignsTile = ({ title, headers, campaigns, campaignDescri
   const breakpoints = useBreakpoints();
 
   // Display only the campaigns that are not hidden in the campaignOptions prop
-  const sortedCampaigns = campaigns
-    .filter((vaccineCampaign) => campaignOptions && !campaignOptions.hide_campaigns.includes(vaccineCampaign.vaccine_campaign_order))
-    .sort((campaignA, campaignB) => campaignA.vaccine_campaign_order - campaignB.vaccine_campaign_order);
+  const filteredCampaigns = campaignOptions ? campaigns.filter((vaccineCampaign) => !campaignOptions.hide_campaigns.includes(vaccineCampaign.vaccine_campaign_order)) : campaigns;
 
-  const totalsAvailable = sortedCampaigns.some((camp) => camp.vaccine_administered_total);
+  const sortedAndFilteredCampaigns = filteredCampaigns.sort((campaignA, campaignB) => campaignA.vaccine_campaign_order - campaignB.vaccine_campaign_order);
+
+  const totalsAvailable = sortedAndFilteredCampaigns.some((camp) => camp.vaccine_administered_total);
 
   return (
     <>
       <ChartTile title={title} description={description} metadata={metadata}>
         {breakpoints.sm ? (
-          <WideVaccineCampaignTable campaigns={sortedCampaigns} campaignDescriptions={campaignDescriptions} headers={headers} showTotals={totalsAvailable} />
+          <WideVaccineCampaignTable campaigns={sortedAndFilteredCampaigns} campaignDescriptions={campaignDescriptions} headers={headers} showTotals={totalsAvailable} />
         ) : (
-          <NarrowVaccineCampaignTable campaigns={sortedCampaigns} campaignDescriptions={campaignDescriptions} headers={headers} showTotals={totalsAvailable} />
+          <NarrowVaccineCampaignTable campaigns={sortedAndFilteredCampaigns} campaignDescriptions={campaignDescriptions} headers={headers} showTotals={totalsAvailable} />
         )}
         <Box marginTop={space[3]}>
           <Text variant="label1" color="gray7">

diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx
@@ -28,6 +28,7 @@ import {
   selectAdministrationData,
   BoosterShotCoveragePerAgeGroup,
   PrimarySeriesShotCoveragePerAgeGroup,
+  PrimarySeriesKpiHeader,
 } from '~/domain/vaccine';
 import { VaccinationsPerSupplierOverLastTimeframeTile } from '~/domain/vaccine/vaccinations-per-supplier-over-last-timeframe-tile';
 import { VaccineCampaignsTile } from '~/domain/vaccine/vaccine-campaigns-tile/vaccine-campaigns-tile';
@@ -87,6 +88,7 @@ export const getStaticProps = createGetStaticProps(
     'vaccine_coverage_per_age_group_estimated_autumn_2022_archived_20231004',
     'vaccine_coverage_per_age_group_estimated_fully_vaccinated_archived_20231004',
     'vaccine_campaigns_archived_20220908',
+    'vaccine_campaigns_archived_20231004',
     'vaccine_planned_archived_20220908',
     'booster_coverage_archived_20220904',
     'vaccine_coverage_per_age_group_estimated_archived_20220908',
@@ -139,7 +141,7 @@ type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
 
 function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
   const { content, archivedChoropleth, selectedNlData: currentData, selectedArchivedNlData: archivedData, lastGenerated, administrationData } = props;
-  const { commonTexts, formatNumber } = useIntl();
+  const { commonTexts } = useIntl();
   const reverseRouter = useReverseRouter();
 
   const { metadataTexts, textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(props.pageText, selectLokalizeTexts);
@@ -232,10 +234,9 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
             altText={textNl.vaccine_campaigns.autumn_2023.campaign_banner.alt}
           />
 
-          <PageInformationBlock
+          <PrimarySeriesKpiHeader
             title={textNl.section_basisserie.title}
             description={textNl.section_basisserie.description}
-            icon={<VaccinatieIcon aria-hidden="true" />}
             metadata={{
               datumsText: textNl.dates_archived,
               dateOrRange: archivedData.vaccine_administered_total_archived_20220324.last_value.date_unix,
@@ -351,13 +352,11 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
               />
 
               <VaccineCampaignsTile
-                title={textNl.vaccine_campaigns.title}
-                description={replaceVariablesInText(textNl.vaccine_campaigns.description_archived, {
-                  vaccinePlanned: formatNumber(archivedData.vaccine_planned_archived_20220908.doses),
-                })}
+                title={textNl.vaccine_campaigns.autumn_2022.title}
+                description={textNl.vaccine_campaigns.autumn_2022.description}
                 descriptionFooter={textNl.vaccine_campaigns.description_footer}
                 headers={textNl.vaccine_campaigns.headers}
-                campaigns={archivedData.vaccine_campaigns_archived_20220908.vaccine_campaigns}
+                campaigns={archivedData.vaccine_campaigns_archived_20231004.vaccine_campaigns}
                 campaignDescriptions={textNl.vaccine_campaigns.campaigns}
                 campaignOptions={{
                   hide_campaigns: [3],
@@ -430,6 +429,20 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
                 age18PlusToggleText={textNl.vaccination_grade_toggle_tile.age_18_plus}
               />
 
+              <VaccineCampaignsTile
+                title={textNl.vaccine_campaigns.title}
+                description={textNl.vaccine_campaigns.description_archived}
+                descriptionFooter={textNl.vaccine_campaigns.description_footer}
+                headers={textNl.vaccine_campaigns.headers}
+                campaigns={archivedData.vaccine_campaigns_archived_20220908.vaccine_campaigns}
+                campaignDescriptions={textNl.vaccine_campaigns.campaigns}
+                metadata={{
+                  datumsText: textNl.dates,
+                  date: archivedData.vaccine_campaigns_archived_20220908.date_unix,
+                  source: textNl.vaccine_campaigns.bronnen.rivm,
+                }}
+              />
+
               <VaccinationsKpiHeader
                 text={textNl.repeating_shot_information_block}
                 dateUnix={boosterShotAdministeredArchivedLastValue.date_unix}

diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv
@@ -39,3 +39,9 @@ timestamp,action,key,document_id,move_to
 2023-09-29T14:03:48.346Z,delete,__root.test_123,0hrRKce5hYl5O3WpoZ6oAl,__
 2023-09-29T14:03:48.347Z,delete,__root.test_key_345,0hrRKce5hYl5O3WpoZ6nXX,__
 2023-10-02T12:06:06.749Z,add,pages.vaccinations_page.nl.vaccine_campaigns.autumn_2023.campaign_banner.alt,fQMSbwQpEgDbjt4uWKBe2g,__
+2023-10-04T06:45:00.447Z,add,pages.vaccinations_page.nl.vaccine_campaigns.atuumn_2022.title,uM9i5K7TlE0aLwmg4eRLuC,__
+2023-10-04T06:45:01.740Z,add,pages.vaccinations_page.nl.vaccine_campaigns.atuumn_2022.description,fQMSbwQpEgDbjt4uWKxuMY,__
+2023-10-04T06:46:57.761Z,add,pages.vaccinations_page.nl.vaccine_campaigns.autumn_2022.description,C32lwRDGVQp5utRyR51ePz,__
+2023-10-04T06:46:58.690Z,add,pages.vaccinations_page.nl.vaccine_campaigns.autumn_2022.title,22Xg3hRGtxwin2PlGEkt4Q,__
+2023-10-04T06:46:58.690Z,delete,pages.vaccinations_page.nl.vaccine_campaigns.atuumn_2022.description,fQMSbwQpEgDbjt4uWKxuMY,__
+2023-10-04T06:46:58.691Z,delete,pages.vaccinations_page.nl.vaccine_campaigns.atuumn_2022.title,uM9i5K7TlE0aLwmg4eRLuC,__