From e960c78f477f8c30e31535f13b0199dbf8e27b3d Mon Sep 17 00:00:00 2001 From: M <120020483+VWSCoronaDashboard30@users.noreply.github.com> Date: Mon, 2 Oct 2023 16:14:45 +0200 Subject: [PATCH] feature/COR-1784_COR-1801_vaccinations-modifications (#4887) * feat(COR-1801): Finalized ticket * fix(zks-graphs): Fixed range dates to date (#4865) * fix(zks-graphs): Fixed range dates to date * fix(1806): Updated documentation * task: Remove add new document button in navbar (#4868) * Feature/cor 1563 refactor text keys in kpi to markdown (#4867) * fix: deleted unused component * fix: Create markdown consistency in KPI tiles * Bugfix/cor 1769 variants table and graph 2 (#4870) * fix(COR-1769): Removed keys from schemas * fix(COR-1769): Removed historical significance key * fix(COR-1769): Update getter functions * fix(COR-1769): Remove unused code from variants chart * fix(COR-1769): Re-add destructuring based on suggestion --------- Co-authored-by: VWSCoronaDashboard29 * feat(COR-1784): Update schemas to match protos * feat(COR-1784): Update schemas to protos and fix * feat(COR-1784): Update branch to match old branch * feat(COR-1784): Update schema titles * feat(COR-1784): Adapt vaccine campaign tiles * feat(COR-1784): Made vaccine coverage generic * feat(COR-1784): Streamline hook * feat(COR-1784): Split autumn vaccine per age group table * feat(COR-1784): Add primary series choropleth and fix keys * feat(COR-1784): Add campaign banner component * task: Apply changes from COR-1788 * feat(COR-1784): Add campaign hero * feat(COR-1784): Update vaccine colours * feat(COR-1784): Remove barrel files * feat(COR-1784): Update schema to match protos * feat(COR-1784): Update conditional display based on feedback * feat(COR-1784): Add newline in schemafile * feat(COR-1784): Removed type indication in coverage-per-age-group * feat(COR-1784): Centralize styling * fix(COR-1784): Update types to new schemanames * feat(COR-1784): Reverted conditional component based on feedback * feat(COR-1784): Update schemas and datatypes to match protos * feat(COR-1801): Replaced the protos actual values * feat(COR-1801): Fixed typecheck issues and adjusted the municipality page * feat(COR-1784): Update vaccines page to new designs spec * feat(COR-1784): Update pageinfo block for primary series * task(COR-1784): Check in sanity key mutations * refactor(COR-1784): Refactor name from feedback * fix(COR-1784): Change date of primary series pageinfo * fix(COR-1784): Add optional to metadata * refactor(COR-1784/COR-1801): Refactored generic types usage * refactor(COR-1784/COR-1801): refactored ternary operator * refactor(COR-1784/COR-1801): Refactored the vaccine-campaign-tile * refactor(COR-1784/COR-1801): Refactored campaign banner * refactor(COR-1784/COR-1801): Refactor schemanames * fix(COR-1784/COR-1801): Fix feature flags * fix(COR-1784/COR-1801): Fix choropleth validation * refactor(COR-1784/COR-1801): Refactored schema names --------- Co-authored-by: J <93984341+VWSCoronaDashboard18@users.noreply.github.com> Co-authored-by: VWSCoronaDashboard29 <137172332+VWSCoronaDashboard29@users.noreply.github.com> Co-authored-by: VWSCoronaDashboard29 Co-authored-by: beek Co-authored-by: VWSCoronaDashboard29 --- .../images/Najaarsronde-coronaprik-hero.svg | 1 + packages/app/schema/archived_gm/__index.json | 4 + ...cine_campaign_coverage_per_age_group.json} | 4 +- .../archived_gm_collection/__index.json | 19 +- .../vaccine_coverage_per_age_group.json | 2 +- ...ine_coverage_per_age_group_choropleth.json | 69 ++++ packages/app/schema/archived_nl/__index.json | 58 ++- .../vaccine_coverage_per_age_group.json | 18 +- .../vaccine_administered.json | 0 .../vaccine_administered_doctors.json | 0 .../vaccine_administered_ggd.json | 0 .../vaccine_administered_ggd_ghor.json | 0 ...tered_hospitals_and_care_institutions.json | 0 .../vaccine_administered_planned.json | 0 .../vaccine_administered_total.json | 0 ...aigns.json => vaccine_campaigns_2022.json} | 4 +- .../archived_nl/vaccine_campaigns_2023.json | 52 +++ .../vaccine_coverage_per_age_group.json | 2 +- ...e_per_age_group_estimated_autumn_2022.json | 0 ..._age_group_estimated_fully_vaccinated.json | 0 packages/app/schema/gm/__index.json | 17 +- .../app/schema/gm_collection/__index.json | 10 +- packages/app/schema/nl/__index.json | 42 +-- packages/app/schema/nl/vaccine_campaigns.json | 6 +- .../src/components/choropleth/logic/types.ts | 9 +- .../components/kpi/components/kpi-content.tsx | 9 +- packages/app/src/components/kpi/types.ts | 9 +- ...use-get-single-coverage-percentage-data.ts | 31 ++ packages/app/src/components/tables/types.ts | 18 +- .../app/src/components/tables/wide-table.tsx | 26 +- ...utumn-2022-shot-coverage-per-age-group.tsx | 18 +- .../index.ts | 1 - .../index.ts | 1 - .../campaign-banner/campaign-banner.tsx | 68 ++++ packages/app/src/domain/vaccine/common.ts | 4 +- packages/app/src/domain/vaccine/index.ts | 2 + .../primary-series-coverage-per-age-group.tsx | 60 +++ .../narrow-vaccine-campaign-table.tsx | 29 +- .../wide-vaccine-campaign-table.tsx | 57 ++- .../vaccine/vaccine-campaigns-tile/types.ts | 7 +- .../vaccine-campaigns-tile.tsx | 16 +- .../vaccine/vaccine-coverage-choropleth.tsx | 37 +- .../src/pages/gemeente/[code]/vaccinaties.tsx | 115 +++--- .../app/src/pages/landelijk/vaccinaties.tsx | 271 +++++++++----- packages/app/src/static-props/get-data.ts | 14 +- packages/cli/src/schema/schema-info.ts | 7 +- .../src/elements/schemas/shared/index.ts | 10 +- packages/cms/src/lokalize/key-mutations.csv | 40 ++ packages/cms/src/studio/constants.ts | 20 +- .../cms/src/studio/data/data-structure.ts | 98 ++--- packages/common/src/feature-flags/features.ts | 8 +- packages/common/src/theme/colors.ts | 19 +- packages/common/src/types/data.ts | 348 +++++++++--------- 53 files changed, 1070 insertions(+), 590 deletions(-) create mode 100644 packages/app/public/images/Najaarsronde-coronaprik-hero.svg rename packages/app/schema/{gm/vaccine_coverage_per_age_group.json => archived_gm/vaccinaties/vaccine_campaign_coverage_per_age_group.json} (94%) rename packages/app/schema/{gm_collection => archived_gm_collection}/vaccine_coverage_per_age_group.json (96%) create mode 100644 packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group_choropleth.json rename packages/app/schema/{nl => archived_nl/vaccinaties}/vaccine_coverage_per_age_group.json (81%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_doctors.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_ggd.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_ggd_ghor.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_hospitals_and_care_institutions.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_planned.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_administered_total.json (100%) rename packages/app/schema/archived_nl/{vaccine_campaigns.json => vaccine_campaigns_2022.json} (92%) create mode 100644 packages/app/schema/archived_nl/vaccine_campaigns_2023.json rename packages/app/schema/{nl => archived_nl}/vaccine_coverage_per_age_group_estimated_autumn_2022.json (100%) rename packages/app/schema/{nl => archived_nl}/vaccine_coverage_per_age_group_estimated_fully_vaccinated.json (100%) create mode 100644 packages/app/src/components/tables/logic/use-get-single-coverage-percentage-data.ts delete mode 100644 packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/index.ts delete mode 100644 packages/app/src/domain/vaccine/booster-shot-coverage-per-age-group/index.ts create mode 100644 packages/app/src/domain/vaccine/campaign-banner/campaign-banner.tsx create mode 100644 packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx diff --git a/packages/app/public/images/Najaarsronde-coronaprik-hero.svg b/packages/app/public/images/Najaarsronde-coronaprik-hero.svg new file mode 100644 index 0000000000..362ce5ed62 --- /dev/null +++ b/packages/app/public/images/Najaarsronde-coronaprik-hero.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/app/schema/archived_gm/__index.json b/packages/app/schema/archived_gm/__index.json index 5416edf2b7..7e3885b0ca 100644 --- a/packages/app/schema/archived_gm/__index.json +++ b/packages/app/schema/archived_gm/__index.json @@ -14,6 +14,7 @@ "name", "vaccine_coverage_per_age_group_archived_20220622", "vaccine_coverage_per_age_group_archived_20220908", + "vaccine_coverage_per_age_group_archived_20231004", "tested_overall_archived_20230331" ], "properties": { @@ -41,6 +42,9 @@ "vaccine_coverage_per_age_group_archived_20220908": { "$ref": "vaccine_coverage_per_age_group_with_booster_shot.json" }, + "vaccine_coverage_per_age_group_archived_20231004": { + "$ref": "vaccinaties/vaccine_campaign_coverage_per_age_group.json" + }, "booster_coverage_archived_20220904": { "$ref": "booster_coverage.json" }, diff --git a/packages/app/schema/gm/vaccine_coverage_per_age_group.json b/packages/app/schema/archived_gm/vaccinaties/vaccine_campaign_coverage_per_age_group.json similarity index 94% rename from packages/app/schema/gm/vaccine_coverage_per_age_group.json rename to packages/app/schema/archived_gm/vaccinaties/vaccine_campaign_coverage_per_age_group.json index d98a04f721..f31ee2d9d8 100644 --- a/packages/app/schema/gm/vaccine_coverage_per_age_group.json +++ b/packages/app/schema/archived_gm/vaccinaties/vaccine_campaign_coverage_per_age_group.json @@ -1,6 +1,6 @@ { "$schema": "http://json-schema.org/draft-07/schema#", - "title": "gm_vaccine_coverage_per_age_group", + "title": "archived_gm_vaccine_campaign_coverage_per_age_group", "type": "object", "required": ["values"], "additionalProperties": false, @@ -14,7 +14,7 @@ }, "definitions": { "value": { - "title": "gm_vaccine_coverage_per_age_group_value", + "title": "archived_gm_vaccine_campaign_coverage_per_age_group_value", "additionalProperties": false, "type": "object", "required": [ diff --git a/packages/app/schema/archived_gm_collection/__index.json b/packages/app/schema/archived_gm_collection/__index.json index 662345ffd9..8b67f9ac7b 100644 --- a/packages/app/schema/archived_gm_collection/__index.json +++ b/packages/app/schema/archived_gm_collection/__index.json @@ -3,7 +3,16 @@ "type": "object", "title": "archived_gm_collection", "additionalProperties": false, - "required": ["last_generated", "proto_name", "name", "code", "hospital_nice_choropleth_archived_20230830", "sewer_archived_20230623", "tested_overall_archived_20230331"], + "required": [ + "last_generated", + "proto_name", + "name", + "code", + "hospital_nice_choropleth_archived_20230830", + "sewer_archived_20230623", + "tested_overall_archived_20230331", + "vaccine_coverage_per_age_group_choropleth_archived_20231004" + ], "properties": { "last_generated": { "type": "string" @@ -40,6 +49,14 @@ "items": { "$ref": "positive_tests/tested_overall.json" } + }, + "vaccine_coverage_per_age_group_choropleth_archived_20231004": { + "type": "array", + "minItems": 684, + "maxItems": 684, + "items": { + "$ref": "vaccine_coverage_per_age_group_choropleth.json" + } } }, "$defs": { diff --git a/packages/app/schema/gm_collection/vaccine_coverage_per_age_group.json b/packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group.json similarity index 96% rename from packages/app/schema/gm_collection/vaccine_coverage_per_age_group.json rename to packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group.json index 464ecf98b6..cc56a71944 100644 --- a/packages/app/schema/gm_collection/vaccine_coverage_per_age_group.json +++ b/packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group.json @@ -1,6 +1,6 @@ { "$schema": "http://json-schema.org/draft-07/schema#", - "title": "gm_collection_vaccine_coverage_per_age_group", + "title": "archived_gm_collection_vaccine_coverage_per_age_group", "type": "object", "additionalProperties": false, "required": [ diff --git a/packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group_choropleth.json b/packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group_choropleth.json new file mode 100644 index 0000000000..07a7bb6f54 --- /dev/null +++ b/packages/app/schema/archived_gm_collection/vaccine_coverage_per_age_group_choropleth.json @@ -0,0 +1,69 @@ +{ + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "archived_gm_collection_vaccine_coverage_per_age_group_choropleth", + "type": "object", + "additionalProperties": false, + "required": [ + "gmcode", + "vaccination_type", + "birthyear_range_12_plus", + "birthyear_range_18_plus", + "birthyear_range_60_plus", + "vaccinated_percentage_12_plus", + "vaccinated_percentage_12_plus_label", + "vaccinated_percentage_18_plus", + "vaccinated_percentage_18_plus_label", + "vaccinated_percentage_60_plus", + "vaccinated_percentage_60_plus_label", + "date_of_insertion_unix", + "date_unix" + ], + "properties": { + "gmcode": { + "type": "string", + "pattern": "^GM[0-9]+$" + }, + "vaccination_type": { + "type": "string" + }, + "birthyear_range_12_plus": { + "type": "string", + "pattern": "^[0-9]{4}-[0-9]{4}$|^-[0-9]{4}$|^[0-9]{4}-$" + }, + "birthyear_range_18_plus": { + "type": "string", + "pattern": "^[0-9]{4}-[0-9]{4}$|^-[0-9]{4}$|^[0-9]{4}-$" + }, + "birthyear_range_60_plus": { + "type": ["string", "null"], + "pattern": "^[0-9]{4}-[0-9]{4}$|^-[0-9]{4}$|^[0-9]{4}-$" + }, + "vaccinated_percentage_12_plus": { + "type": ["number", "null"] + }, + "vaccinated_percentage_12_plus_label": { + "type": ["string", "null"], + "pattern": "^([><][=][0-9]{1,2})$" + }, + "vaccinated_percentage_18_plus": { + "type": ["number", "null"] + }, + "vaccinated_percentage_18_plus_label": { + "type": ["string", "null"], + "pattern": "^([><][=][0-9]{1,2})$" + }, + "vaccinated_percentage_60_plus": { + "type": ["number", "null"] + }, + "vaccinated_percentage_60_plus_label": { + "type": ["string", "null"], + "pattern": "^([><][=][0-9]{1,2})$" + }, + "date_unix": { + "type": "integer" + }, + "date_of_insertion_unix": { + "type": "integer" + } + } +} diff --git a/packages/app/schema/archived_nl/__index.json b/packages/app/schema/archived_nl/__index.json index ed9fef3b42..7322cb6794 100644 --- a/packages/app/schema/archived_nl/__index.json +++ b/packages/app/schema/archived_nl/__index.json @@ -22,20 +22,31 @@ "nursing_home_archived_20230126", "reproduction_archived_20230711", "sewer_archived_20230623", - "vaccine_campaigns_archived_20220908", - "vaccine_planned_archived_20220908", + "vaccine_administered_archived_20220914", + "vaccine_administered_doctors_archived_20220324", + "vaccine_administered_ggd_archived_20220324", + "vaccine_administered_ggd_ghor_archived_20220324", + "vaccine_administered_hospitals_and_care_institutions_archived_20220324", + "vaccine_administered_planned_archived_20220518", + "vaccine_administered_total_archived_20220324", + "vaccine_coverage_archived_20220518", "vaccine_coverage_per_age_group_archived_20220622", "vaccine_coverage_per_age_group_archived_20220908", + "vaccine_coverage_per_age_group_archived_20231004", "vaccine_coverage_per_age_group_estimated_archived_20220908", + "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", + "vaccine_vaccinated_or_support_archived_20230411", + "vaccine_delivery_per_supplier_archived_20211101", + "vaccine_stock_archived_20211024", "tested_ggd_archived_20230321", "tested_overall_archived_20230331", "tested_per_age_group_archived_20230331", "vulnerable_hospital_admissions_archived_20230711", "vulnerable_nursing_home_archived_20230711", - "vaccine_vaccinated_or_support_archived_20230411", - "vaccine_coverage_archived_20220518", - "vaccine_delivery_per_supplier_archived_20211101", - "vaccine_stock_archived_20211024", "repeating_shot_administered_20220713", "corona_melder_app_warning_archived_20220421", "corona_melder_app_download_archived_20220421", @@ -107,7 +118,10 @@ "$ref": "sewer.json" }, "vaccine_campaigns_archived_20220908": { - "$ref": "vaccine_campaigns.json" + "$ref": "vaccine_campaigns_2022.json" + }, + "vaccine_campaigns_archived_20231004": { + "$ref": "vaccine_campaigns_2023.json" }, "vaccine_planned_archived_20220908": { "$ref": "vaccine_planned.json" @@ -133,9 +147,39 @@ "vaccine_vaccinated_or_support_archived_20230411": { "$ref": "vaccine_vaccinated_or_support.json" }, + "vaccine_administered_archived_20220914": { + "$ref": "vaccine_administered.json" + }, + "vaccine_administered_doctors_archived_20220324": { + "$ref": "vaccine_administered_doctors.json" + }, + "vaccine_administered_ggd_ghor_archived_20220324": { + "$ref": "vaccine_administered_ggd_ghor.json" + }, + "vaccine_administered_ggd_archived_20220324": { + "$ref": "vaccine_administered_ggd.json" + }, + "vaccine_administered_hospitals_and_care_institutions_archived_20220324": { + "$ref": "vaccine_administered_hospitals_and_care_institutions.json" + }, + "vaccine_administered_total_archived_20220324": { + "$ref": "vaccine_administered_total.json" + }, + "vaccine_administered_planned_archived_20220518": { + "$ref": "vaccine_administered_planned.json" + }, "vaccine_coverage_archived_20220518": { "$ref": "vaccine_coverage.json" }, + "vaccine_coverage_per_age_group_archived_20231004": { + "$ref": "vaccinaties/vaccine_coverage_per_age_group.json" + }, + "vaccine_coverage_per_age_group_estimated_autumn_2022_archived_20231004": { + "$ref": "vaccine_coverage_per_age_group_estimated_autumn_2022.json" + }, + "vaccine_coverage_per_age_group_estimated_fully_vaccinated_archived_20231004": { + "$ref": "vaccine_coverage_per_age_group_estimated_fully_vaccinated.json" + }, "vaccine_delivery_per_supplier_archived_20211101": { "$ref": "vaccine_delivery_per_supplier.json" }, diff --git a/packages/app/schema/nl/vaccine_coverage_per_age_group.json b/packages/app/schema/archived_nl/vaccinaties/vaccine_coverage_per_age_group.json similarity index 81% rename from packages/app/schema/nl/vaccine_coverage_per_age_group.json rename to packages/app/schema/archived_nl/vaccinaties/vaccine_coverage_per_age_group.json index b9d8acd305..c02db4ff9e 100644 --- a/packages/app/schema/nl/vaccine_coverage_per_age_group.json +++ b/packages/app/schema/archived_nl/vaccinaties/vaccine_coverage_per_age_group.json @@ -1,6 +1,6 @@ { "$schema": "http://json-schema.org/draft-07/schema#", - "title": "nl_vaccine_coverage_per_age_group", + "title": "archived_nl_vaccine_coverage_per_age_group_autumn_2022", "type": "object", "required": ["values"], "additionalProperties": false, @@ -14,7 +14,7 @@ }, "definitions": { "value": { - "title": "nl_vaccine_coverage_per_age_group_value", + "title": "archived_nl_vaccine_coverage_per_age_group_value", "additionalProperties": false, "type": "object", "required": [ @@ -33,17 +33,7 @@ "properties": { "age_group_range": { "type": "string", - "enum": [ - "5-11", - "12-17", - "18-29", - "30-39", - "40-49", - "50-59", - "60-69", - "70-79", - "80+" - ] + "enum": ["5-11", "12-17", "18-29", "30-39", "40-49", "50-59", "60-69", "70-79", "80+"] }, "age_group_percentage": { "type": "number" @@ -52,7 +42,7 @@ "type": "integer" }, "autumn_2022_vaccinated": { - "type":["integer", "null"] + "type": ["integer", "null"] }, "fully_vaccinated": { "type": "integer" diff --git a/packages/app/schema/nl/vaccine_administered.json b/packages/app/schema/archived_nl/vaccine_administered.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered.json rename to packages/app/schema/archived_nl/vaccine_administered.json diff --git a/packages/app/schema/nl/vaccine_administered_doctors.json b/packages/app/schema/archived_nl/vaccine_administered_doctors.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered_doctors.json rename to packages/app/schema/archived_nl/vaccine_administered_doctors.json diff --git a/packages/app/schema/nl/vaccine_administered_ggd.json b/packages/app/schema/archived_nl/vaccine_administered_ggd.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered_ggd.json rename to packages/app/schema/archived_nl/vaccine_administered_ggd.json diff --git a/packages/app/schema/nl/vaccine_administered_ggd_ghor.json b/packages/app/schema/archived_nl/vaccine_administered_ggd_ghor.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered_ggd_ghor.json rename to packages/app/schema/archived_nl/vaccine_administered_ggd_ghor.json diff --git a/packages/app/schema/nl/vaccine_administered_hospitals_and_care_institutions.json b/packages/app/schema/archived_nl/vaccine_administered_hospitals_and_care_institutions.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered_hospitals_and_care_institutions.json rename to packages/app/schema/archived_nl/vaccine_administered_hospitals_and_care_institutions.json diff --git a/packages/app/schema/nl/vaccine_administered_planned.json b/packages/app/schema/archived_nl/vaccine_administered_planned.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered_planned.json rename to packages/app/schema/archived_nl/vaccine_administered_planned.json diff --git a/packages/app/schema/nl/vaccine_administered_total.json b/packages/app/schema/archived_nl/vaccine_administered_total.json similarity index 100% rename from packages/app/schema/nl/vaccine_administered_total.json rename to packages/app/schema/archived_nl/vaccine_administered_total.json diff --git a/packages/app/schema/archived_nl/vaccine_campaigns.json b/packages/app/schema/archived_nl/vaccine_campaigns_2022.json similarity index 92% rename from packages/app/schema/archived_nl/vaccine_campaigns.json rename to packages/app/schema/archived_nl/vaccine_campaigns_2022.json index 78ce0fb80b..96de74e1f4 100644 --- a/packages/app/schema/archived_nl/vaccine_campaigns.json +++ b/packages/app/schema/archived_nl/vaccine_campaigns_2022.json @@ -1,7 +1,7 @@ { "definitions": { "vaccine_campaign": { - "title": "archived_nl_vaccine_campaigns", + "title": "archived_nl_vaccine_campaigns_2022", "type": "object", "required": ["vaccine_campaign_order", "vaccine_campaign_name_nl", "vaccine_campaign_name_en", "vaccine_administered_total", "vaccine_administered_last_week"], "additionalProperties": false, @@ -25,7 +25,7 @@ } }, "$schema": "http://json-schema.org/draft-07/schema#", - "title": "archived_nl_vaccine_campaigns", + "title": "archived_nl_vaccine_campaigns_2022", "type": "object", "required": ["vaccine_campaigns", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"], "additionalProperties": false, diff --git a/packages/app/schema/archived_nl/vaccine_campaigns_2023.json b/packages/app/schema/archived_nl/vaccine_campaigns_2023.json new file mode 100644 index 0000000000..880f0f1c3a --- /dev/null +++ b/packages/app/schema/archived_nl/vaccine_campaigns_2023.json @@ -0,0 +1,52 @@ +{ + "definitions": { + "vaccine_campaign": { + "title": "archived_nl_vaccine_campaign_2023", + "type": "object", + "required": ["vaccine_campaign_order", "vaccine_campaign_name_nl", "vaccine_campaign_name_en", "vaccine_administered_total", "vaccine_administered_last_timeframe"], + "additionalProperties": false, + "properties": { + "vaccine_campaign_order": { + "type": "integer" + }, + "vaccine_campaign_name_nl": { + "type": "string" + }, + "vaccine_campaign_name_en": { + "type": "string" + }, + "vaccine_administered_total": { + "type": "integer" + }, + "vaccine_administered_last_timeframe": { + "type": "integer" + } + } + } + }, + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "archived_nl_vaccine_campaign_2023", + "type": "object", + "required": ["vaccine_campaigns", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"], + "additionalProperties": false, + "properties": { + "vaccine_campaigns": { + "type": "array", + "items": { + "$ref": "#/definitions/vaccine_campaign" + } + }, + "date_unix": { + "type": "integer" + }, + "date_start_unix": { + "type": "integer" + }, + "date_end_unix": { + "type": "integer" + }, + "date_of_insertion_unix": { + "type": "integer" + } + } +} diff --git a/packages/app/schema/archived_nl/vaccine_coverage_per_age_group.json b/packages/app/schema/archived_nl/vaccine_coverage_per_age_group.json index bfe9b687cb..43e4cf36b6 100644 --- a/packages/app/schema/archived_nl/vaccine_coverage_per_age_group.json +++ b/packages/app/schema/archived_nl/vaccine_coverage_per_age_group.json @@ -1,6 +1,6 @@ { "$schema": "http://json-schema.org/draft-07/schema#", - "title": "archived_nl_vaccine_coverage_per_age_group", + "title": "archived_nl_vaccine_coverage_per_age_group_primary_series_and_booster", "type": "object", "required": ["values"], "additionalProperties": false, diff --git a/packages/app/schema/nl/vaccine_coverage_per_age_group_estimated_autumn_2022.json b/packages/app/schema/archived_nl/vaccine_coverage_per_age_group_estimated_autumn_2022.json similarity index 100% rename from packages/app/schema/nl/vaccine_coverage_per_age_group_estimated_autumn_2022.json rename to packages/app/schema/archived_nl/vaccine_coverage_per_age_group_estimated_autumn_2022.json diff --git a/packages/app/schema/nl/vaccine_coverage_per_age_group_estimated_fully_vaccinated.json b/packages/app/schema/archived_nl/vaccine_coverage_per_age_group_estimated_fully_vaccinated.json similarity index 100% rename from packages/app/schema/nl/vaccine_coverage_per_age_group_estimated_fully_vaccinated.json rename to packages/app/schema/archived_nl/vaccine_coverage_per_age_group_estimated_fully_vaccinated.json diff --git a/packages/app/schema/gm/__index.json b/packages/app/schema/gm/__index.json index 58d3424a30..cf5ce47fc1 100644 --- a/packages/app/schema/gm/__index.json +++ b/packages/app/schema/gm/__index.json @@ -3,19 +3,7 @@ "type": "object", "title": "gm", "additionalProperties": false, - "required": [ - "name", - "proto_name", - "code", - "difference", - "static_values", - "hospital_nice", - "sewer_installation_measurement", - "sewer_per_installation", - "sewer", - "vaccine_coverage_per_age_group", - "last_generated" - ], + "required": ["name", "proto_name", "code", "difference", "static_values", "hospital_nice", "sewer_installation_measurement", "sewer_per_installation", "sewer", "last_generated"], "properties": { "last_generated": { "type": "string" @@ -46,9 +34,6 @@ }, "sewer_installation_measurement": { "$ref": "sewer_installation_measurement.json" - }, - "vaccine_coverage_per_age_group": { - "$ref": "vaccine_coverage_per_age_group.json" } }, "$defs": { diff --git a/packages/app/schema/gm_collection/__index.json b/packages/app/schema/gm_collection/__index.json index 293b4dcaa4..75666d865a 100644 --- a/packages/app/schema/gm_collection/__index.json +++ b/packages/app/schema/gm_collection/__index.json @@ -3,7 +3,7 @@ "type": "object", "title": "gm_collection", "additionalProperties": false, - "required": ["last_generated", "proto_name", "name", "code", "hospital_nice_choropleth", "sewer", "vaccine_coverage_per_age_group"], + "required": ["last_generated", "proto_name", "name", "code", "hospital_nice_choropleth", "sewer"], "properties": { "last_generated": { "type": "string" @@ -32,14 +32,6 @@ "items": { "$ref": "sewer.json" } - }, - "vaccine_coverage_per_age_group": { - "type": "array", - "minItems": 684, - "maxItems": 684, - "items": { - "$ref": "vaccine_coverage_per_age_group.json" - } } }, "$defs": { diff --git a/packages/app/schema/nl/__index.json b/packages/app/schema/nl/__index.json index 2b8031df10..a8ed83c1e1 100644 --- a/packages/app/schema/nl/__index.json +++ b/packages/app/schema/nl/__index.json @@ -20,17 +20,7 @@ "infectionradar_symptoms_trend_per_age_group_weekly", "sewer", "vaccine_campaigns", - "vaccine_administered", - "vaccine_administered_doctors", - "vaccine_administered_ggd_ghor", - "vaccine_administered_ggd", - "vaccine_administered_hospitals_and_care_institutions", - "vaccine_administered_total", - "vaccine_administered_planned", - "vaccine_administered_last_timeframe", - "vaccine_coverage_per_age_group", - "vaccine_coverage_per_age_group_estimated_autumn_2022", - "vaccine_coverage_per_age_group_estimated_fully_vaccinated" + "vaccine_administered_last_timeframe" ], "additionalProperties": false, "properties": { @@ -76,42 +66,12 @@ "deceased_cbs": { "$ref": "deceased_cbs.json" }, - "vaccine_administered": { - "$ref": "vaccine_administered.json" - }, - "vaccine_administered_doctors": { - "$ref": "vaccine_administered_doctors.json" - }, - "vaccine_administered_ggd_ghor": { - "$ref": "vaccine_administered_ggd_ghor.json" - }, - "vaccine_administered_ggd": { - "$ref": "vaccine_administered_ggd.json" - }, - "vaccine_administered_hospitals_and_care_institutions": { - "$ref": "vaccine_administered_hospitals_and_care_institutions.json" - }, - "vaccine_administered_total": { - "$ref": "vaccine_administered_total.json" - }, - "vaccine_administered_planned": { - "$ref": "vaccine_administered_planned.json" - }, "vaccine_administered_last_timeframe": { "$ref": "vaccine_administered_last_timeframe.json" }, "vaccine_campaigns": { "$ref": "vaccine_campaigns.json" }, - "vaccine_coverage_per_age_group": { - "$ref": "vaccine_coverage_per_age_group.json" - }, - "vaccine_coverage_per_age_group_estimated_autumn_2022": { - "$ref": "vaccine_coverage_per_age_group_estimated_autumn_2022.json" - }, - "vaccine_coverage_per_age_group_estimated_fully_vaccinated": { - "$ref": "vaccine_coverage_per_age_group_estimated_fully_vaccinated.json" - }, "variants": { "$ref": "variants.json" }, diff --git a/packages/app/schema/nl/vaccine_campaigns.json b/packages/app/schema/nl/vaccine_campaigns.json index a54846b84c..0c752f82a2 100644 --- a/packages/app/schema/nl/vaccine_campaigns.json +++ b/packages/app/schema/nl/vaccine_campaigns.json @@ -1,7 +1,7 @@ { "definitions": { "vaccine_campaign": { - "title": "nl_vaccine_campaign", + "title": "nl_vaccine_campaigns", "type": "object", "required": ["vaccine_campaign_order", "vaccine_campaign_name_nl", "vaccine_campaign_name_en", "vaccine_administered_total", "vaccine_administered_last_timeframe"], "additionalProperties": false, @@ -16,7 +16,7 @@ "type": "string" }, "vaccine_administered_total": { - "type": "integer" + "type": ["integer", "null"] }, "vaccine_administered_last_timeframe": { "type": "integer" @@ -25,7 +25,7 @@ } }, "$schema": "http://json-schema.org/draft-07/schema#", - "title": "nl_vaccine_campaigns", + "title": "nl_vaccine_campaign", "type": "object", "required": ["vaccine_campaigns", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"], "additionalProperties": false, diff --git a/packages/app/src/components/choropleth/logic/types.ts b/packages/app/src/components/choropleth/logic/types.ts index 56b1c29bf8..e53ab26bc5 100644 --- a/packages/app/src/components/choropleth/logic/types.ts +++ b/packages/app/src/components/choropleth/logic/types.ts @@ -4,8 +4,8 @@ import type { GmCollection, GmCollectionHospitalNiceChoropleth, GmCollectionSewer, + ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth, ArchivedGmCollectionTestedOverall, - GmCollectionVaccineCoveragePerAgeGroup, ArchivedVrCollection, VrCollectionVulnerableNursingHome, VrCollectionElderlyAtHome, @@ -57,10 +57,13 @@ export type InferedDataCollection = T extends GmDa ? ArchivedVrCollection : never; -export type GmDataCollection = GmCollectionHospitalNiceChoropleth[] | GmCollectionSewer[] | GmCollectionVaccineCoveragePerAgeGroup[]; +export type GmDataCollection = GmCollectionHospitalNiceChoropleth[] | GmCollectionSewer[]; export type GmDataItem = GmDataCollection[number]; -export type ArchivedGmDataCollection = ArchivedGmCollectionTestedOverall[] | ArchivedGmCollectionHospitalNiceChoropleth[]; +export type ArchivedGmDataCollection = + | ArchivedGmCollectionTestedOverall[] + | ArchivedGmCollectionHospitalNiceChoropleth[] + | ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth[]; export type ArchivedGmDataItem = ArchivedGmDataCollection[number]; export type ArchivedVrDataCollection = VrCollectionVulnerableNursingHome[] | VrCollectionElderlyAtHome[] | VrCollectionDisabilityCare[]; diff --git a/packages/app/src/components/kpi/components/kpi-content.tsx b/packages/app/src/components/kpi/components/kpi-content.tsx index 15f97f0de6..3304d511ee 100644 --- a/packages/app/src/components/kpi/components/kpi-content.tsx +++ b/packages/app/src/components/kpi/components/kpi-content.tsx @@ -8,11 +8,17 @@ import { useIntl } from '~/intl'; import { space } from '~/style/theme'; import { replaceVariablesInText } from '~/utils'; import { TileData as KpiContentProps } from '../types'; +import { Metadata, MetadataProps } from '~/components'; -export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false }: KpiContentProps) => { +export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false, dateOrRange, source }: KpiContentProps) => { const { commonTexts } = useIntl(); const parsedBirthyearRange = birthyear ? parseBirthyearRange(birthyear) : null; + const metadata: MetadataProps = { + date: dateOrRange, + source: source, + }; + return ( {title} @@ -36,6 +42,7 @@ export const KpiContent = ({ title, description, value, bar, birthyear, differen : description } /> + {metadata && } ); }; diff --git a/packages/app/src/components/kpi/types.ts b/packages/app/src/components/kpi/types.ts index 7d92ecaf65..8f68774cb0 100644 --- a/packages/app/src/components/kpi/types.ts +++ b/packages/app/src/components/kpi/types.ts @@ -1,6 +1,11 @@ import { DifferenceInteger } from '@corona-dashboard/common'; export type TileData = { + dateOrRange?: number | DateRange; + source?: { + href: string; + text: string; + }; description: string; title: string; value: number | null; @@ -16,9 +21,9 @@ interface DateRange { } export interface BorderedKpiSectionProps { - dateOrRange: number | DateRange; + dateOrRange?: number | DateRange; description: string; - source: { + source?: { href: string; text: string; }; diff --git a/packages/app/src/components/tables/logic/use-get-single-coverage-percentage-data.ts b/packages/app/src/components/tables/logic/use-get-single-coverage-percentage-data.ts new file mode 100644 index 0000000000..c5e4b0ffc8 --- /dev/null +++ b/packages/app/src/components/tables/logic/use-get-single-coverage-percentage-data.ts @@ -0,0 +1,31 @@ +import { useIntl } from '~/intl'; +import { PercentageDataPoint, SingleCoverageTableData } from '../types'; + +type FormatParam = { shouldFormat: boolean }; + +// Returns an array of objects corresponding to percentage data used by tables on the dashboard +export const useGetSingleCoveragePercentageData = ( + dataset: SingleCoverageTableData[], + title: string, + color: string, + percentageFormattingRules?: FormatParam +): PercentageDataPoint[][] => { + const { commonTexts, formatPercentage } = useIntl(); + + const getFormattedPercentageValue = (percentage: number | null, shouldFormat: boolean) => { + return percentage === null ? commonTexts.common.no_data : shouldFormat ? `${formatPercentage(percentage)}%` : percentage; + }; + + return dataset.map((datasetItem) => { + return [ + { + title: title, + trendDirection: 'firstPercentageTrend' in datasetItem ? datasetItem['firstPercentageTrend'] : null, + percentage: { + color: color, + value: getFormattedPercentageValue(datasetItem.firstPercentage, percentageFormattingRules?.shouldFormat ?? false), + }, + }, + ]; + }); +}; diff --git a/packages/app/src/components/tables/types.ts b/packages/app/src/components/tables/types.ts index da8cd005eb..5a6539b56f 100644 --- a/packages/app/src/components/tables/types.ts +++ b/packages/app/src/components/tables/types.ts @@ -12,18 +12,28 @@ export type PercentageDataPoint = { }; }; -export interface TableData { +export interface BaseTableData { id: string; firstColumnLabel: React.ReactNode; + description?: string; + ageGroupRange?: string; +} + +export interface SingleCoverageTableData extends BaseTableData { + firstPercentage: number | null; + firstPercentageTrend?: BehaviorTrendType; +} + +export interface TableData extends BaseTableData { firstPercentage: number | null; secondPercentage: number | null; firstPercentageTrend?: TrendDirection; secondPercentageTrend?: TrendDirection; - description?: string; - ageGroupRange?: string; } +export type BaseCoverageTable = BaseTableData; + export interface CommonTableProps { - tableData: TableData[]; + tableData: SingleCoverageTableData[] | TableData[]; percentageData: PercentageDataPoint[][]; } diff --git a/packages/app/src/components/tables/wide-table.tsx b/packages/app/src/components/tables/wide-table.tsx index d0d1b2ab31..24a9c09ea6 100644 --- a/packages/app/src/components/tables/wide-table.tsx +++ b/packages/app/src/components/tables/wide-table.tsx @@ -22,16 +22,22 @@ export const WideTable = ({ tableData, headerText, percentageData }: WideTablePr - - {headerText.firstColumn} - - - {headerText.secondColumn} - - - {headerText.thirdColumn} - - {headerText.fourthColumn} + {headerText.firstColumn !== undefined && ( + + {headerText.firstColumn} + + )} + {headerText.secondColumn !== undefined && ( + + {headerText.secondColumn} + + )} + {headerText.thirdColumn !== undefined && ( + + {headerText.thirdColumn} + + )} + {headerText.fourthColumn !== undefined && {headerText.fourthColumn}} diff --git a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx index 2d9c320183..9f7488e152 100644 --- a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx +++ b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx @@ -2,14 +2,14 @@ import { NlVaccineCoveragePerAgeGroupValue } from '@corona-dashboard/common'; import { AgeGroup } from '~/components/age-groups/age-group'; import { ChartTile } from '~/components/chart-tile'; import { MetadataProps } from '~/components/metadata'; -import { useGetPercentageData } from '~/components/tables/logic/use-get-percentage-data'; import { NarrowTable } from '~/components/tables/narrow-table'; -import { TableData } from '~/components/tables/types'; +import { SingleCoverageTableData } from '~/components/tables/types'; import { WideTable } from '~/components/tables/wide-table'; -import { COLOR_AUTUMN_2022_SHOT, COLOR_FULLY_VACCINATED } from '~/domain/vaccine/common'; +import { COLOR_AUTUMN_2022_SHOT } from '~/domain/vaccine/common'; import { SiteText } from '~/locale'; import { useBreakpoints } from '~/utils/use-breakpoints'; import { getSortingOrder } from '../logic/get-sorting-order'; +import { useGetSingleCoveragePercentageData } from '~/components/tables/logic/use-get-single-coverage-percentage-data'; interface Autumn2022ShotCoveragePerAgeGroupProps { title: string; @@ -23,11 +23,10 @@ interface Autumn2022ShotCoveragePerAgeGroupProps { export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata, values, sortingOrder, text }: Autumn2022ShotCoveragePerAgeGroupProps) => { const breakpoints = useBreakpoints(true); const componentName = Autumn2022ShotCoveragePerAgeGroup.name; - const requiredData: TableData[] = values.map((value) => { + const requiredData: SingleCoverageTableData[] = values.map((value) => { return { id: `${componentName}-${value.age_group_range}`, firstPercentage: value.autumn_2022_vaccinated_percentage, - secondPercentage: value.fully_vaccinated_percentage, ageGroupRange: value.age_group_range, firstColumnLabel: ( @@ -36,10 +35,10 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata }); const sortedData = requiredData.sort((a, b) => getSortingOrder(a.ageGroupRange, sortingOrder, componentName) - getSortingOrder(b.ageGroupRange, sortingOrder, componentName)); - const percentageTitles = { first: text.headers.autumn_2022_shot, second: text.headers.fully_vaccinated }; - const percentageColors = { first: COLOR_AUTUMN_2022_SHOT, second: COLOR_FULLY_VACCINATED }; - const percentageFormattingRules = { first: { shouldFormat: true }, second: { shouldFormat: true } }; - const percentageData = useGetPercentageData(sortedData, percentageTitles, percentageColors, percentageFormattingRules); + const percentageTitles = text.headers.autumn_2022_shot; + const percentageColors = COLOR_AUTUMN_2022_SHOT; + const percentageFormattingRules = { shouldFormat: true }; + const percentageData = useGetSingleCoveragePercentageData(sortedData, percentageTitles, percentageColors, percentageFormattingRules); return ( @@ -49,7 +48,6 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata firstColumn: text.headers.agegroup, secondColumn: text.headers.autumn_2022_shot, thirdColumn: text.headers.fully_vaccinated, - fourthColumn: text.headers.difference_autumn_2022_shot_and_fully_vaccinated, }} tableData={sortedData} percentageData={percentageData} diff --git a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/index.ts b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/index.ts deleted file mode 100644 index bb046c501c..0000000000 --- a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './autumn-2022-shot-coverage-per-age-group'; diff --git a/packages/app/src/domain/vaccine/booster-shot-coverage-per-age-group/index.ts b/packages/app/src/domain/vaccine/booster-shot-coverage-per-age-group/index.ts deleted file mode 100644 index be2075e917..0000000000 --- a/packages/app/src/domain/vaccine/booster-shot-coverage-per-age-group/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './booster-shot-coverage-per-age-group'; diff --git a/packages/app/src/domain/vaccine/campaign-banner/campaign-banner.tsx b/packages/app/src/domain/vaccine/campaign-banner/campaign-banner.tsx new file mode 100644 index 0000000000..ccccba08f7 --- /dev/null +++ b/packages/app/src/domain/vaccine/campaign-banner/campaign-banner.tsx @@ -0,0 +1,68 @@ +import { Box } from '~/components/base'; +import { sizes, space } from '~/style/theme'; +import { MaxWidth } from '~/components/max-width'; +import { colors } from '@corona-dashboard/common'; +import { Heading } from '~/components/typography'; +import { Markdown, Tile } from '~/components'; +import { Image } from '~/components/image'; + +interface CampaignBannerProps { + title: string; + description: string; + altText: string; +} + +export const CampaignBanner = ({ title, description, altText }: CampaignBannerProps) => ( + + + + + + {title} + + + + + + + + + + +); + +type CampaignImageProps = { + src: string; + extension: string; + className?: string; + alt?: string; +}; + +const CampaignImage = (props: CampaignImageProps) => { + const { src, extension, ...imageProps } = props; + + return ( + + + + + + + ); +}; diff --git a/packages/app/src/domain/vaccine/common.ts b/packages/app/src/domain/vaccine/common.ts index 36ba48d1ce..f532fb8c33 100644 --- a/packages/app/src/domain/vaccine/common.ts +++ b/packages/app/src/domain/vaccine/common.ts @@ -1,4 +1,4 @@ -import { colors, GmCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common'; +import { colors, ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth } from '@corona-dashboard/common'; export const COLOR_FULLY_VACCINATED = colors.scale.blueDetailed[3]; export const COLOR_FULLY_BOOSTERED = colors.scale.blue[5]; @@ -23,7 +23,7 @@ type MatchingVaccineCoverageAgeGroupsType = { primary_series: PrimarySeriesVaccinatedAges[]; }; -export type VaccineCoverageData = GmCollectionVaccineCoveragePerAgeGroup; +export type VaccineCoverageData = ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth; export const matchingAgeGroups: MatchingVaccineCoverageAgeGroupsType = { autumn_2022: ['60', '12'], diff --git a/packages/app/src/domain/vaccine/index.ts b/packages/app/src/domain/vaccine/index.ts index d6d4fab7e8..754a7fca84 100644 --- a/packages/app/src/domain/vaccine/index.ts +++ b/packages/app/src/domain/vaccine/index.ts @@ -11,3 +11,5 @@ export { VaccineCoverageToggleTile } from './vaccine-coverage-toggle-tile'; export { VaccineDeliveryBarChart } from './vaccine-delivery-bar-chart'; 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'; diff --git a/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx b/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx new file mode 100644 index 0000000000..0c54fcf1a1 --- /dev/null +++ b/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx @@ -0,0 +1,60 @@ +import { NlVaccineCoveragePerAgeGroupValue } from '@corona-dashboard/common'; +import { AgeGroup } from '~/components/age-groups/age-group'; +import { ChartTile } from '~/components/chart-tile'; +import { MetadataProps } from '~/components/metadata'; +import { useGetSingleCoveragePercentageData } from '~/components/tables/logic/use-get-single-coverage-percentage-data'; +import { NarrowTable } from '~/components/tables/narrow-table'; +import { SingleCoverageTableData } from '~/components/tables/types'; +import { WideTable } from '~/components/tables/wide-table'; +import { COLOR_FULLY_VACCINATED } from '~/domain/vaccine/common'; +import { SiteText } from '~/locale'; +import { useBreakpoints } from '~/utils/use-breakpoints'; +import { getSortingOrder } from '../logic/get-sorting-order'; + +interface PrimarySeriesShotCoveragePerAgeGroupProps { + title: string; + description: string; + metadata: MetadataProps; + sortingOrder: string[]; + values: NlVaccineCoveragePerAgeGroupValue[]; + text: SiteText['pages']['vaccinations_page']['nl']['vaccination_coverage']; +} + +export const PrimarySeriesShotCoveragePerAgeGroup = ({ title, description, metadata, values, sortingOrder, text }: PrimarySeriesShotCoveragePerAgeGroupProps) => { + const breakpoints = useBreakpoints(true); + const componentName = PrimarySeriesShotCoveragePerAgeGroup.name; + const requiredData: SingleCoverageTableData[] = values.map((value) => { + return { + id: `${componentName}-${value.age_group_range}`, + firstPercentage: value.fully_vaccinated_percentage, + ageGroupRange: value.age_group_range, + firstColumnLabel: ( + + ), + }; + }); + + const sortedData = requiredData.sort((a, b) => getSortingOrder(a.ageGroupRange, sortingOrder, componentName) - getSortingOrder(b.ageGroupRange, sortingOrder, componentName)); + const percentageTitles = text.headers.fully_vaccinated; + const percentageColors = COLOR_FULLY_VACCINATED; + const percentageFormattingRules = { shouldFormat: true }; + const percentageData = useGetSingleCoveragePercentageData(sortedData, percentageTitles, percentageColors, percentageFormattingRules); + + return ( + + {breakpoints.lg ? ( + + ) : ( + + )} + + ); +}; diff --git a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/narrow-vaccine-campaign-table.tsx b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/narrow-vaccine-campaign-table.tsx index 8887bc3135..e3b6baed33 100644 --- a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/narrow-vaccine-campaign-table.tsx +++ b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/narrow-vaccine-campaign-table.tsx @@ -11,9 +11,10 @@ interface NarrowVaccineCampaignTableProps { campaigns: VaccineCampaign[]; campaignDescriptions: VaccineCampaignDescriptions; headers: VaccineCampaignHeaders; + showTotals: boolean; } -export const NarrowVaccineCampaignTable = ({ campaigns, campaignDescriptions, headers }: NarrowVaccineCampaignTableProps) => { +export const NarrowVaccineCampaignTable = ({ campaigns, campaignDescriptions, headers, showTotals }: NarrowVaccineCampaignTableProps) => { return ( @@ -24,7 +25,14 @@ export const NarrowVaccineCampaignTable = ({ campaigns, campaignDescriptions, he {campaigns.map((campaign, index) => ( - + ))} @@ -36,9 +44,10 @@ interface VaccineCampaignRowProps { campaignDescriptions: VaccineCampaignDescriptions; headers: VaccineCampaignHeaders; isFirst: boolean; + showTotals: boolean; } -const VaccineCampaignRow = ({ campaign, campaignDescriptions, headers, isFirst }: VaccineCampaignRowProps) => { +const VaccineCampaignRow = ({ campaign, campaignDescriptions, headers, isFirst, showTotals }: VaccineCampaignRowProps) => { const { formatNumber } = useIntl(); const collapsible = useCollapsible({ isOpen: isFirst }); const { locale = 'nl' } = useRouter(); @@ -64,7 +73,7 @@ const VaccineCampaignRow = ({ campaign, campaignDescriptions, headers, isFirst } - {headers.last_week}:{' '} + {headers.last_week} :{' '} {isOpen ? ( {formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe)} ) : ( @@ -73,11 +82,13 @@ const VaccineCampaignRow = ({ campaign, campaignDescriptions, headers, isFirst } - - - {headers.total}: {isOpen ? {formatNumber(campaign.vaccine_administered_total)} : formatNumber(campaign.vaccine_administered_total)} - - + {showTotals && ( + + + {headers.total} : {isOpen ? {formatNumber(campaign.vaccine_administered_total)} : formatNumber(campaign.vaccine_administered_total)} + + + )} diff --git a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/wide-vaccine-campaign-table.tsx b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/wide-vaccine-campaign-table.tsx index a6f42d728c..938d41c731 100644 --- a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/wide-vaccine-campaign-table.tsx +++ b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/components/wide-vaccine-campaign-table.tsx @@ -12,22 +12,23 @@ interface WideVaccineCampaignTableProps { campaigns: VaccineCampaign[]; campaignDescriptions: VaccineCampaignDescriptions; headers: VaccineCampaignHeaders; + showTotals: boolean; } -export const WideVaccineCampaignTable = ({ campaigns, campaignDescriptions, headers }: WideVaccineCampaignTableProps) => { +export const WideVaccineCampaignTable = ({ campaigns, campaignDescriptions, headers, showTotals }: WideVaccineCampaignTableProps) => { return ( {headers.vaccine}{headers.last_week} - {headers.total} + {showTotals && {headers.total}} {campaigns.map((campaign, index) => ( - + ))} @@ -38,9 +39,10 @@ interface VaccineCampaignRowProps { campaign: VaccineCampaign; campaignDescriptions: VaccineCampaignDescriptions; isFirst: boolean; + hideTotals: boolean; } -const VaccineCampaignRow = ({ campaign, campaignDescriptions, isFirst }: VaccineCampaignRowProps) => { +const VaccineCampaignRow = ({ campaign, campaignDescriptions, isFirst, hideTotals }: VaccineCampaignRowProps) => { const { formatNumber } = useIntl(); const collapsible = useCollapsible({ isOpen: isFirst }); const { locale = 'nl' } = useRouter(); @@ -59,21 +61,42 @@ const VaccineCampaignRow = ({ campaign, campaignDescriptions, isFirst }: Vaccine {locale === 'nl' ? campaign.vaccine_campaign_name_nl : campaign.vaccine_campaign_name_en} - - {isOpen ? ( - {formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe)} - ) : ( - formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe) - )} - + {hideTotals ? ( + <> + + {isOpen ? ( + {formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe)} + ) : ( + formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe) + )} + - - - {isOpen ? {formatNumber(campaign.vaccine_administered_total)} : formatNumber(campaign.vaccine_administered_total)} + + + {isOpen ? {formatNumber(campaign.vaccine_administered_total)} : formatNumber(campaign.vaccine_administered_total)} - {collapsible.button()} - - + {collapsible.button()} + + + + ) : ( + <> + + {isOpen ? ( + + {formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe)} + + {collapsible.button()} + + ) : ( + + {formatNumber(campaign.vaccine_administered_last_week || campaign.vaccine_administered_last_timeframe)} + {collapsible.button()} + + )} + + + )} diff --git a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/types.ts b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/types.ts index 77be55ff2c..b33422faee 100644 --- a/packages/app/src/domain/vaccine/vaccine-campaigns-tile/types.ts +++ b/packages/app/src/domain/vaccine/vaccine-campaigns-tile/types.ts @@ -2,11 +2,16 @@ export type VaccineCampaign = { vaccine_campaign_order: number; vaccine_campaign_name_nl: string; vaccine_campaign_name_en: string; - vaccine_administered_total: number; + vaccine_administered_total: number | null; } & Partial<{ vaccine_administered_last_week: number; vaccine_administered_last_timeframe: number; }>; +interface VaccineCampaignOptionProps { + hide_campaigns: number[]; +} + export type VaccineCampaignDescriptions = Record; export type VaccineCampaignHeaders = Record; +export type VaccineCampaignOptions = VaccineCampaignOptionProps; 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 index d6165fd46a..1f0bae2e29 100644 --- 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 @@ -3,7 +3,7 @@ import { ChartTile, Markdown, MetadataProps } from '~/components'; import { Text } from '~/components/typography'; import { NarrowVaccineCampaignTable } from './components/narrow-vaccine-campaign-table'; import { WideVaccineCampaignTable } from './components/wide-vaccine-campaign-table'; -import { VaccineCampaign, VaccineCampaignDescriptions, VaccineCampaignHeaders } from './types'; +import { VaccineCampaign, VaccineCampaignDescriptions, VaccineCampaignHeaders, VaccineCampaignOptions } from './types'; import { Box } from '~/components/base'; import { space } from '~/style/theme'; @@ -15,20 +15,26 @@ interface VaccineCampaignsTileProps { headers: VaccineCampaignHeaders; campaigns: VaccineCampaign[]; campaignDescriptions: VaccineCampaignDescriptions; + campaignOptions?: VaccineCampaignOptions; } -export const VaccineCampaignsTile = ({ title, headers, campaigns, campaignDescriptions, description, descriptionFooter, metadata }: VaccineCampaignsTileProps) => { +export const VaccineCampaignsTile = ({ title, headers, campaigns, campaignDescriptions, description, descriptionFooter, metadata, campaignOptions }: VaccineCampaignsTileProps) => { const breakpoints = useBreakpoints(); - const sortedCampaigns = campaigns.sort((campaignA, campaignB) => campaignA.vaccine_campaign_order - campaignB.vaccine_campaign_order); + // 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 totalsAvailable = sortedCampaigns.some((camp) => camp.vaccine_administered_total); return ( <> {breakpoints.sm ? ( - + ) : ( - + )} diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index e02f616009..f1e20083dc 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx @@ -1,4 +1,4 @@ -import { colors, GmCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common'; +import { colors, ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth } from '@corona-dashboard/common'; import { SiteText } from '~/locale'; import { matchingAgeGroups, VaccineCoverageData, DataPerAgeGroup, BirthyearRangeKeysOfAgeGroups, PercentageKeysOfAgeGroups, PercentageLabelKeysOfAgeGroups } from './common'; import css from '@styled-system/css'; @@ -15,11 +15,11 @@ import { BoldText } from '~/components/typography'; import { useIntl } from '~/intl'; import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; import { AgeGroup, AgeGroupSelect } from './components/age-group-select'; -import { CoverageKindProperty, VaccinationCoverageKindSelect } from './components/vaccination-coverage-kind-select'; +import { CoverageKindProperty } from './components/vaccination-coverage-kind-select'; import { parseVaccinatedPercentageLabel } from './logic/parse-vaccinated-percentage-label'; interface VaccineCoverageChoroplethProps { - data: GmCollectionVaccineCoveragePerAgeGroup[]; + data: ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth[]; dataOptions: DataOptions; text: { title: string; @@ -27,25 +27,17 @@ interface VaccineCoverageChoroplethProps { vaccinationKindLabel?: string; ageGroupLabel?: string; }; + isPrimarySeries?: boolean; } -export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCoverageChoroplethProps) => { +export const VaccineCoverageChoropleth = ({ data, dataOptions, text, isPrimarySeries }: VaccineCoverageChoroplethProps) => { const { commonTexts } = useIntl(); - const [selectedAgeGroup, setSelectedAgeGroup] = useState('18'); - const [selectedCoverageKind, setSelectedCoverageKind] = useState('primary_series'); - /** - * 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. - */ - const setSelectedCoverageKindAndAge = (coverageKind: CoverageKindProperty) => { - if (coverageKind === selectedCoverageKind) return; - if (selectedAgeGroup !== '12') { - setSelectedAgeGroup(selectedAgeGroup === '18' ? '60' : '18'); - } - setSelectedCoverageKind(coverageKind); - }; + const [selectedAgeGroup, setSelectedAgeGroup] = useState(isPrimarySeries ? '18' : '60'); + const selectedCoverageKind: CoverageKindProperty = isPrimarySeries ? 'primary_series' : 'autumn_2022'; - const choroplethDataGm: GmCollectionVaccineCoveragePerAgeGroup[] = data.filter((choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind); + const choroplethDataGm: ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth[] = data.filter( + (choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind + ); return ( {commonTexts.choropleth.vaccination_coverage.shared.dropdowns_title} - - - {text.vaccinationKindLabel && {text.vaccinationKindLabel}} - - {text.ageGroupLabel && {text.ageGroupLabel}} @@ -83,7 +70,7 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo }} metadata={{ source: commonTexts.choropleth.vaccination_coverage.shared.bronnen.rivm, - date: data.find((item: GmCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix, + date: data.find((item: ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth) => item.vaccination_type === selectedCoverageKind)?.date_unix, }} hasPadding > @@ -92,7 +79,7 @@ export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCo accessibility={{ key: 'vaccine_coverage_nl_choropleth' }} data={choroplethDataGm} dataConfig={{ - metricName: 'vaccine_coverage_per_age_group', + metricName: 'vaccine_coverage_per_age_group_choropleth_archived_20231004', metricProperty: `vaccinated_percentage_${selectedAgeGroup}_plus`, }} dataOptions={dataOptions} diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx index 1543d2ce79..9db0c7c4f4 100644 --- a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx +++ b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx @@ -1,4 +1,4 @@ -import { colors, GmCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common'; +import { colors, ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth } from '@corona-dashboard/common'; import { Vaccinaties as VaccinatieIcon } from '@corona-dashboard/icons'; import { GetStaticPropsContext } from 'next'; import { useState } from 'react'; @@ -18,12 +18,13 @@ import { useIntl } from '~/intl'; import { Languages, SiteText } from '~/locale'; import { getArticleParts, getDataExplainedParts, getFaqParts, getLinkParts, getPagePartsQuery } from '~/queries/get-page-parts-query'; import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props'; -import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectGmData, selectArchivedGmData } from '~/static-props/get-data'; +import { createGetContent, getLastGeneratedDate, getLokalizeTexts, selectGmData, selectArchivedGmData, createGetArchivedChoroplethData } from '~/static-props/get-data'; import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms'; import { assert, replaceVariablesInText, useFormatLokalizePercentage, useReverseRouter } from '~/utils'; import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts'; import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; import { getPageInformationHeaderContent } from '~/utils/get-page-information-header-content'; +import { WarningTile } from '~/components/warning-tile'; const pageMetrics = ['vaccine_coverage_per_age_group', 'vaccine_coverage_per_age_group_archived', 'booster_coverage_archived_20220904']; @@ -40,21 +41,26 @@ export { getStaticPaths } from '~/static-paths/gm'; export const getStaticProps = createGetStaticProps( ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, - selectGmData('code', 'vaccine_coverage_per_age_group'), - selectArchivedGmData('vaccine_coverage_per_age_group_archived_20220622', 'vaccine_coverage_per_age_group_archived_20220908', 'booster_coverage_archived_20220904'), - createGetChoroplethData({ - gm: ({ vaccine_coverage_per_age_group }, ctx) => { - if (!isDefined(vaccine_coverage_per_age_group)) { + selectGmData('code'), + selectArchivedGmData( + 'vaccine_coverage_per_age_group_archived_20220622', + 'vaccine_coverage_per_age_group_archived_20220908', + 'booster_coverage_archived_20220904', + 'vaccine_coverage_per_age_group_archived_20231004' + ), + createGetArchivedChoroplethData({ + gm: ({ vaccine_coverage_per_age_group_choropleth_archived_20231004 }, ctx) => { + if (!isDefined(vaccine_coverage_per_age_group_choropleth_archived_20231004)) { return { - vaccine_coverage_per_age_group: null as unknown as GmCollectionVaccineCoveragePerAgeGroup[], + vaccine_coverage_per_age_group_choropleth_archived_20231004: null as unknown as ArchivedGmCollectionVaccineCoveragePerAgeGroupChoropleth[], }; } const vrCode = isPresent(ctx.params?.code) ? vrCodeByGmCode[ctx.params?.code as 'string'] : undefined; return { - vaccine_coverage_per_age_group: isDefined(vrCode) - ? vaccine_coverage_per_age_group.filter((vaccineCoveragePerAgeGroup) => gmCodesByVrCode[vrCode].includes(vaccineCoveragePerAgeGroup.gmcode)) - : vaccine_coverage_per_age_group, + vaccine_coverage_per_age_group_choropleth_archived_20231004: isDefined(vrCode) + ? vaccine_coverage_per_age_group_choropleth_archived_20231004.filter((vaccineCoveragePerAgeGroup) => gmCodesByVrCode[vrCode].includes(vaccineCoveragePerAgeGroup.gmcode)) + : vaccine_coverage_per_age_group_choropleth_archived_20231004, }; }, }), @@ -73,12 +79,11 @@ export const getStaticProps = createGetStaticProps( ); export const VaccinationsGmPage = (props: StaticProps) => { - const { pageText, choropleth, municipalityName, selectedGmData: currentData, selectedArchivedGmData: archivedData, content, lastGenerated } = props; + const { pageText, archivedChoropleth, municipalityName, selectedGmData: currentData, selectedArchivedGmData: archivedData, content, lastGenerated } = props; const { commonTexts } = useIntl(); const { formatPercentageAsNumber } = useFormatLokalizePercentage(); const [hasHideArchivedCharts, setHideArchivedCharts] = useState(false); const reverseRouter = useReverseRouter(); - const { textGm, textNl, textShared } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts); const metadata = { @@ -92,8 +97,8 @@ export const VaccinationsGmPage = (props: StaticProps) => }; const filteredVaccination = { - primarySeries: currentData.vaccine_coverage_per_age_group.values.find((item) => item.vaccination_type === 'primary_series'), - autumn2022: currentData.vaccine_coverage_per_age_group.values.find((item) => item.vaccination_type === 'autumn_2022'), + primarySeries: archivedData.vaccine_coverage_per_age_group_archived_20231004.values.find((item) => item.vaccination_type === 'primary_series'), + autumn2022: archivedData.vaccine_coverage_per_age_group_archived_20231004.values.find((item) => item.vaccination_type === 'autumn_2022'), }; assert(filteredVaccination.primarySeries, `[${VaccinationsGmPage.name}] Could not find data for the vaccine coverage per age group for the primary series`); @@ -138,38 +143,9 @@ export const VaccinationsGmPage = (props: StaticProps) => faq: content.faqs, })} /> - {filteredVaccination.autumn2022.birthyear_range_60_plus && ( - - )} + + {!!textShared.warning && } + ) => dateOrRange={filteredVaccination.primarySeries.date_unix} /> ) => vaccinationKindLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_vaccination_coverage_kind_select, ageGroupLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_age_group_select, }} + isPrimarySeries /> {content.faqs && content.faqs.questions?.length > 0 && } @@ -228,6 +205,48 @@ export const VaccinationsGmPage = (props: StaticProps) => {hasHideArchivedCharts && ( <> + {filteredVaccination.autumn2022.birthyear_range_60_plus && ( + + )} + ({ - metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata, - textNl: siteText.pages.vaccinations_page.nl, - textShared: siteText.pages.vaccinations_page.shared, -}); - -type LokalizeTexts = ReturnType; - export const getStaticProps = createGetStaticProps( ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, - selectNlData( - 'vaccine_administered_doctors', - 'vaccine_administered_hospitals_and_care_institutions', - 'vaccine_administered_planned', - 'vaccine_administered_total', - 'vaccine_administered_last_timeframe', - 'vaccine_coverage_per_age_group', - 'vaccine_coverage_per_age_group_estimated_fully_vaccinated', - 'vaccine_coverage_per_age_group_estimated_autumn_2022', - 'vaccine_campaigns' - ), + selectNlData('vaccine_administered_last_timeframe', 'vaccine_campaigns'), selectArchivedNlData( + 'vaccine_administered_doctors_archived_20220324', + 'vaccine_administered_hospitals_and_care_institutions_archived_20220324', + 'vaccine_administered_planned_archived_20220518', + 'vaccine_administered_total_archived_20220324', 'vaccine_coverage_per_age_group_archived_20220908', 'vaccine_coverage_per_age_group_archived_20220622', + 'vaccine_coverage_per_age_group_archived_20231004', + '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_planned_archived_20220908', 'booster_coverage_archived_20220904', @@ -98,7 +97,7 @@ export const getStaticProps = createGetStaticProps( 'vaccine_stock_archived_20211024', 'vaccine_vaccinated_or_support_archived_20230411' ), - () => selectAdministrationData(getNlData().data.vaccine_administered), + () => selectAdministrationData(getArchivedNlData().data.vaccine_administered_archived_20220914), async (context: GetStaticPropsContext) => { const { content } = await createGetContent<{ parts: PagePartQueryResult; @@ -106,7 +105,7 @@ export const getStaticProps = createGetStaticProps( }>((context) => { return `{ "parts": ${getPagePartsQuery('vaccinations_page')}, - "elements": ${getElementsQuery('nl', ['vaccine_coverage_archived_20220518', 'vaccine_administered'], context.locale)} + "elements": ${getElementsQuery('nl', ['vaccine_coverage_archived_20220518', 'vaccine_administered_archived_20220914'], context.locale)} }`; })(context); @@ -125,13 +124,21 @@ export const getStaticProps = createGetStaticProps( }, }; }, - createGetChoroplethData({ - gm: ({ vaccine_coverage_per_age_group }) => vaccine_coverage_per_age_group ?? null, + createGetArchivedChoroplethData({ + gm: ({ vaccine_coverage_per_age_group_choropleth_archived_20231004 }) => vaccine_coverage_per_age_group_choropleth_archived_20231004 ?? null, }) ); +const selectLokalizeTexts = (siteText: SiteText) => ({ + metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata, + textNl: siteText.pages.vaccinations_page.nl, + textShared: siteText.pages.vaccinations_page.shared, +}); + +type LokalizeTexts = ReturnType; + function VaccinationPage(props: StaticProps) { - const { content, choropleth, selectedNlData: currentData, selectedArchivedNlData: archivedData, lastGenerated, administrationData } = props; + const { content, archivedChoropleth, selectedNlData: currentData, selectedArchivedNlData: archivedData, lastGenerated, administrationData } = props; const { commonTexts, formatNumber } = useIntl(); const reverseRouter = useReverseRouter(); @@ -145,8 +152,8 @@ function VaccinationPage(props: StaticProps) { description: textNl.metadata.description, }; - const vaccineCoverageEstimatedFullyVaccinated = currentData.vaccine_coverage_per_age_group_estimated_fully_vaccinated.last_value; - const vaccineCoverageEstimatedAutumn2022 = currentData.vaccine_coverage_per_age_group_estimated_autumn_2022.last_value; + const vaccineCoverageEstimatedFullyVaccinated = archivedData.vaccine_coverage_per_age_group_estimated_fully_vaccinated_archived_20231004.last_value; + const vaccineCoverageEstimatedAutumn2022 = archivedData.vaccine_coverage_per_age_group_estimated_autumn_2022_archived_20231004.last_value; const vaccineCoverageEstimatedArchivedLastValue = archivedData.vaccine_coverage_per_age_group_estimated_archived_20220908.last_value; @@ -176,7 +183,7 @@ function VaccinationPage(props: StaticProps) { description={textNl.information_block.description} metadata={{ datumsText: textNl.dates, - dateOrRange: currentData.vaccine_administered_total.last_value.date_unix, + dateOrRange: archivedData.vaccine_administered_total_archived_20220324.last_value.date_unix, dateOfInsertionUnix: lastInsertionDateOfPage, dataSources: [textShared.bronnen.rivm], }} @@ -188,35 +195,57 @@ function VaccinationPage(props: StaticProps) { /> + + + + + +