From 4eba3a928be4adb3b6e5e8b0cec0d4464204b8d2 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard27 <111750729+VWSCoronaDashboard27@users.noreply.github.com> Date: Tue, 11 Apr 2023 11:07:51 +0200 Subject: [PATCH] Feature/cor 1498 vaccinations toggle button removal cherrypick (#4728) * fix: merged conflicts * fix: removed left vr * feat: merged two files together * Revert "fix: merged conflicts" This reverts commit 8a14ed0e332d8c01af187685bc96d584be11f492, reversing changes made to 5a152ffb35e39c0738f83cd1bd9f75b99bba2920. * fix: merged conflicts * fix: removed left vr * feat: merged two files together * fix: conflict --------- Co-authored-by: VWSCoronaDashboard27 --- .../components/choropleth/logic/thresholds.ts | 1 - .../vaccine/vaccine-coverage-choropleth.tsx | 83 +++------ .../vaccine-coverage-choropleth_vr_and_gm.tsx | 159 ------------------ .../src/pages/gemeente/[code]/vaccinaties.tsx | 14 +- .../app/src/pages/landelijk/vaccinaties.tsx | 15 +- packages/cms/src/lokalize/key-mutations.csv | 1 + 6 files changed, 46 insertions(+), 227 deletions(-) delete mode 100644 packages/app/src/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm.tsx diff --git a/packages/app/src/components/choropleth/logic/thresholds.ts b/packages/app/src/components/choropleth/logic/thresholds.ts index 8cc4cd5737..fcff0e617f 100644 --- a/packages/app/src/components/choropleth/logic/thresholds.ts +++ b/packages/app/src/components/choropleth/logic/thresholds.ts @@ -335,7 +335,6 @@ export const thresholds: Thresholds = { travel: situationsThreshold, hospitality: situationsThreshold, fully_vaccinated_percentage: vaccineCoveragePercentageThresholds, - primary_series_percentage: vaccineCoveragePercentageThresholds, autumn_2022_vaccinated_percentage: vaccineCoveragePercentageThresholds, vaccinated_percentage_12_plus: vaccineCoveragePercentageThresholds, vaccinated_percentage_18_plus: vaccineCoveragePercentageThresholds, diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index 770acaef1d..4def68de8b 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx @@ -1,12 +1,11 @@ -import { colors, GmCollectionVaccineCoveragePerAgeGroup, VrCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common'; +import { colors, GmCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common'; import { SiteText } from '~/locale'; import { matchingAgeGroups, VaccineCoverageData, DataPerAgeGroup, BirthyearRangeKeysOfAgeGroups, PercentageKeysOfAgeGroups, PercentageLabelKeysOfAgeGroups } from './common'; import css from '@styled-system/css'; import { useState } from 'react'; import { space } from '~/style/theme'; import { Box } from '~/components/base'; -import { RegionControlOption } from '~/components/chart-region-controls'; -import { DynamicChoropleth } from '~/components/choropleth'; +import { DataOptions, DynamicChoropleth } from '~/components/choropleth'; import { ChoroplethTile } from '~/components/choropleth-tile'; import { thresholds } from '~/components/choropleth/logic'; import { TooltipContent, TooltipSubject } from '~/components/choropleth/tooltips'; @@ -15,25 +14,23 @@ import { Markdown } from '~/components/markdown'; import { BoldText } from '~/components/typography'; import { useIntl } from '~/intl'; import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; -import { useReverseRouter } from '~/utils/use-reverse-router'; import { AgeGroup, AgeGroupSelect } from './components/age-group-select'; import { CoverageKindProperty, VaccinationCoverageKindSelect } from './components/vaccination-coverage-kind-select'; import { parseVaccinatedPercentageLabel } from './logic/parse-vaccinated-percentage-label'; interface VaccineCoverageChoroplethProps { - data: { - gm: GmCollectionVaccineCoveragePerAgeGroup[]; - vr: VrCollectionVaccineCoveragePerAgeGroup[]; + data: GmCollectionVaccineCoveragePerAgeGroup[]; + dataOptions: DataOptions; + text: { + title: string; + description: string; }; } -export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethProps) => { +export const VaccineCoverageChoropleth = ({ data, dataOptions, text }: VaccineCoverageChoroplethProps) => { const { commonTexts } = useIntl(); - const [selectedMap, setSelectedMap] = useState('gm'); const [selectedAgeGroup, setSelectedAgeGroup] = useState('18'); const [selectedCoverageKind, setSelectedCoverageKind] = useState('primary_series'); - const reverseRouter = useReverseRouter(); - /** * When changing between coverage kinds where the selected age group isn't available, * the other coverage kind set the non-matching age group to a default one. @@ -46,19 +43,14 @@ export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethPro setSelectedCoverageKind(coverageKind); }; - const variables = { - regio: commonTexts.choropleth.choropleth_vaccination_coverage.shared[selectedMap], - }; - - const choroplethDataVr: VrCollectionVaccineCoveragePerAgeGroup[] = data.vr.filter((choroplethDataSingleVR) => choroplethDataSingleVR.vaccination_type === selectedCoverageKind); - const choroplethDataGm: GmCollectionVaccineCoveragePerAgeGroup[] = data.gm.filter((choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind); + const choroplethDataGm: GmCollectionVaccineCoveragePerAgeGroup[] = data.filter((choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind); return ( - + } legend={{ - thresholds: selectedMap === 'gm' ? thresholds.gm.primary_series_percentage : thresholds.vr.primary_series_percentage, + thresholds: thresholds.gm.primary_series_percentage, title: commonTexts.choropleth.choropleth_vaccination_coverage.shared.legend_title, }} metadata={{ source: commonTexts.choropleth.vaccination_coverage.shared.bronnen.rivm, - date: - selectedMap === 'gm' - ? data.gm.find((item: GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix - : data.vr.find((item: GmCollectionVaccineCoveragePerAgeGroup | VrCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix, + date: data.find((item: GmCollectionVaccineCoveragePerAgeGroup) => item.vaccination_type === selectedCoverageKind)?.date_unix, }} - chartRegion={selectedMap} - onChartRegionChange={setSelectedMap} + hasPadding > - {selectedMap === 'gm' && ( - reverseRouter.gm.vaccinaties(gmcode), - }} - formatTooltip={(context) => } - /> - )} - - {selectedMap === 'vr' && ( - } - /> - )} + } + /> ); }; diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm.tsx deleted file mode 100644 index cf51a30ca5..0000000000 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { colors, GmCollectionVaccineCoveragePerAgeGroup } from '@corona-dashboard/common'; -import { SiteText } from '~/locale'; -import { matchingAgeGroups, VaccineCoverageData, DataPerAgeGroup, BirthyearRangeKeysOfAgeGroups, PercentageKeysOfAgeGroups, PercentageLabelKeysOfAgeGroups } from './common'; -import css from '@styled-system/css'; -import { useState } from 'react'; -import { space } from '~/style/theme'; -import { Box } from '~/components/base'; -import { DataOptions, DynamicChoropleth } from '~/components/choropleth'; -import { ChoroplethTile } from '~/components/choropleth-tile'; -import { thresholds } from '~/components/choropleth/logic'; -import { TooltipContent, TooltipSubject } from '~/components/choropleth/tooltips'; -import { TooltipData } from '~/components/choropleth/tooltips/types'; -import { Markdown } from '~/components/markdown'; -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 { parseVaccinatedPercentageLabel } from './logic/parse-vaccinated-percentage-label'; - -interface VaccineCoverageChoroplethProps { - data: GmCollectionVaccineCoveragePerAgeGroup[]; - vrOrGmOptions: { - dataOptions: DataOptions; - text: { - title: string; - description: string; - }; - }; -} - -export const VaccineCoverageChoroplethVrAndGm = ({ data, vrOrGmOptions }: VaccineCoverageChoroplethProps) => { - const { commonTexts } = useIntl(); - const [selectedAgeGroup, setSelectedAgeGroup] = useState('18'); - const [selectedCoverageKind, setSelectedCoverageKind] = useState('primary_series'); - - const setSelectedCoverageKindAndAge = (coverageKind: CoverageKindProperty) => { - if (coverageKind === selectedCoverageKind) return; - if (selectedAgeGroup !== '12') { - setSelectedAgeGroup(selectedAgeGroup === '18' ? '60' : '18'); - } - setSelectedCoverageKind(coverageKind); - }; - - const choroplethDataGm: GmCollectionVaccineCoveragePerAgeGroup[] = data.filter((choroplethDataSingleGM) => choroplethDataSingleGM.vaccination_type === selectedCoverageKind); - - return ( - - - - - {commonTexts.choropleth.vaccination_coverage.shared.dropdowns_title} - - - - - - - - - - - - - - - } - legend={{ - thresholds: thresholds.gm.primary_series_percentage, - title: commonTexts.choropleth.choropleth_vaccination_coverage.shared.legend_title, - }} - metadata={{ - source: commonTexts.choropleth.vaccination_coverage.shared.bronnen.rivm, - date: data.find((item) => item.vaccination_type === selectedCoverageKind)?.date_unix, - }} - hasPadding - > - } - /> - - ); -}; - -type ChoroplethTooltipProps = { - data: TooltipData; - selectedCoverageKind: CoverageKindProperty; - ageGroups: AgeGroup[]; -}; - -export function ChoroplethTooltip({ data, selectedCoverageKind, ageGroups }: ChoroplethTooltipProps) { - const { commonTexts, formatPercentage } = useIntl(); - const coverageKindsText = commonTexts.vaccinations.coverage_kinds; - 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` 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, - }; - - const parsedLabel: { - vaccinated_percentage_plus_label?: string | null; - } = {}; - - const ageGroupPercentage = data.dataItem[ageGroupKeys.vaccinated_percentage_plus as unknown as keyof VaccineCoverageData] as number; - const coveragePercentageLabel = data.dataItem[ageGroupKeys.vaccinated_percentage_plus_label as unknown as keyof VaccineCoverageData] as string; - const minWidthOfLabel = coveragePercentageLabel !== null ? '120px' : undefined; - - const result = coveragePercentageLabel ? parseVaccinatedPercentageLabel(coveragePercentageLabel) : null; - - if (result) { - const content = result.sign === '>' ? commonTexts.common.meer_dan : commonTexts.common.minder_dan; - parsedLabel.vaccinated_percentage_plus_label = replaceVariablesInText(content, { - value: `${formatPercentage(ageGroupPercentage)}%`, - }); - } - - return ( - - - - - - {typeof ageGroupPercentage === 'number' && ( - - {parsedLabel.vaccinated_percentage_plus_label ? parsedLabel.vaccinated_percentage_plus_label : `${formatPercentage(ageGroupPercentage)}%`} - - )} - - - ); - }); - - return ( - - {coverageKindsText[selectedCoverageKind]} - {secondaryContent} - - ); -} diff --git a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx index 740c5307fa..eae1bf8975 100644 --- a/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx +++ b/packages/app/src/pages/gemeente/[code]/vaccinaties.tsx @@ -17,7 +17,7 @@ import { ArticleParts, LinkParts, PagePartQueryResult } from '~/types/cms'; import { assert, replaceVariablesInText, useReverseRouter, useFormatLokalizePercentage } from '~/utils'; import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page'; import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts'; -import { VaccineCoverageChoroplethVrAndGm } from '~/domain/vaccine/vaccine-coverage-choropleth_vr_and_gm'; +import { VaccineCoverageChoropleth } from '~/domain/vaccine/vaccine-coverage-choropleth'; import { emptyCoverageData } from '~/data/gm/vaccinations/empty-coverage-data'; const pageMetrics = ['vaccine_coverage_per_age_group', 'vaccine_coverage_per_age_group_archived', 'booster_coverage_archived_20220904']; @@ -202,14 +202,12 @@ export const VaccinationsGmPage = (props: StaticProps) => coverageData={parsedVaccineCoverageData.primarySeries} dateUnix={filteredVaccination.primarySeries.date_unix} /> - diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx index 30ab8078fc..321534d04a 100644 --- a/packages/app/src/pages/landelijk/vaccinaties.tsx +++ b/packages/app/src/pages/landelijk/vaccinaties.tsx @@ -5,6 +5,7 @@ import { GetStaticPropsContext } from 'next'; import { useState } from 'react'; import { ChartTile, PageInformationBlock, TileList, TimeSeriesChart, WarningTile, Divider } from '~/components'; import { Layout, NlLayout } from '~/domain/layout'; +import { useReverseRouter } from '~/utils/use-reverse-router'; import { selectAdministrationData, VaccinationsOverTimeTile, @@ -121,6 +122,7 @@ export const getStaticProps = createGetStaticProps( function VaccinationPage(props: StaticProps) { const { content, choropleth, selectedNlData: data, lastGenerated, administrationData } = props; const { commonTexts, formatNumber } = useIntl(); + const reverseRouter = useReverseRouter(); const { metadataTexts, textNl, textShared } = useDynamicLokalizeTexts(props.pageText, selectLokalizeTexts); const { formatPercentageAsNumber } = useFormatLokalizePercentage(); @@ -151,6 +153,10 @@ function VaccinationPage(props: StaticProps) { const lastInsertionDateOfPage = getLastInsertionDateOfPage(data, pageMetrics); + const variables = { + regio: commonTexts.choropleth.choropleth_vaccination_coverage.shared.gm, + }; + return ( @@ -253,7 +259,14 @@ function VaccinationPage(props: StaticProps) { }} /> - + reverseRouter.gm.vaccinaties(gmcode), isPercentage: true }} + text={{ + title: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.title, variables), + description: replaceVariablesInText(commonTexts.choropleth.choropleth_vaccination_coverage.nl.description, variables), + }} + />