diff --git a/packages/app/src/domain/topical/common.ts b/packages/app/src/domain/topical/common.ts new file mode 100644 index 0000000000..4e1edf18ce --- /dev/null +++ b/packages/app/src/domain/topical/common.ts @@ -0,0 +1,5 @@ +import { colors } from '@corona-dashboard/common'; + +export const COLOR_HAS_ONE_SHOT = colors.data.scale.blue[0]; +export const COLOR_FULLY_VACCINATED = colors.data.primary; +export const COLOR_FULLY_BOOSTERED = colors.data.scale.blue[5]; diff --git a/packages/app/src/domain/topical/mini-vaccination-coverage-tile.tsx b/packages/app/src/domain/topical/mini-vaccination-coverage-tile.tsx index f56f68a5be..fe69975495 100644 --- a/packages/app/src/domain/topical/mini-vaccination-coverage-tile.tsx +++ b/packages/app/src/domain/topical/mini-vaccination-coverage-tile.tsx @@ -4,7 +4,7 @@ import { COLOR_FULLY_VACCINATED, COLOR_HAS_ONE_SHOT, COLOR_FULLY_BOOSTERED, -} from '../vaccine/common'; +} from './common'; import { Bar } from '../vaccine/components/bar'; import { MiniTile, MiniTileProps } from './mini-tile'; diff --git a/packages/app/src/domain/vaccine/common.ts b/packages/app/src/domain/vaccine/common.ts index 71a70230dc..5fb744d2cb 100644 --- a/packages/app/src/domain/vaccine/common.ts +++ b/packages/app/src/domain/vaccine/common.ts @@ -1,10 +1,9 @@ import { colors } from '@corona-dashboard/common'; -// TODO: after removing feature-flag {nlVaccinationBoosterShotsPerAgeGroup} -// delete -// - COLOR_HAS_ONE_SHOT -// replace -// - COLOR_FULLY_VACCINATED with colors.data.scale.blue[3]; -export const COLOR_HAS_ONE_SHOT = colors.data.scale.blue[0]; -export const COLOR_FULLY_VACCINATED = colors.data.primary; +export const COLOR_FULLY_VACCINATED = colors.data.scale.blue[3]; export const COLOR_FULLY_BOOSTERED = colors.data.scale.blue[5]; + +export const ARCHIVED_COLORS = { + COLOR_HAS_ONE_SHOT: colors.data.scale.blue[0], + COLOR_FULLY_VACCINATED: colors.data.primary, +}; \ No newline at end of file diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-per-age-group/components/narrow-coverage-table.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-per-age-group/components/narrow-coverage-table.tsx index 76c894188f..fb59d85fa1 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-per-age-group/components/narrow-coverage-table.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-per-age-group/components/narrow-coverage-table.tsx @@ -4,10 +4,7 @@ import { useIntl } from '~/intl'; import { formatAgeGroupString } from '~/utils/format-age-group-string'; import { formatBirthyearRangeString } from '~/utils/format-birthyear-range-string'; import { useVaccineCoveragePercentageFormatter } from '~/domain/vaccine/logic/use-vaccine-coverage-percentage-formatter'; -import { - COLOR_FULLY_VACCINATED, - COLOR_HAS_ONE_SHOT, -} from '~/domain/vaccine/common'; +import { ARCHIVED_COLORS } from '~/domain/vaccine/common'; import { Bar } from '~/domain/vaccine/components/bar'; import { NarrowPercentage } from '~/domain/vaccine/components/narrow-percentage'; import { AgeGroup } from '~/domain/vaccine/components/age-group'; @@ -68,13 +65,13 @@ export function NarrowCoverageTable({ ? formatCoveragePercentage(item, 'has_one_shot_percentage') : `${formatPercentage(item.has_one_shot_percentage)}%` } - color={COLOR_HAS_ONE_SHOT} + color={ARCHIVED_COLORS.COLOR_HAS_ONE_SHOT} textLabel={text.headers.first_shot} /> @@ -136,7 +133,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) { ) : `${formatPercentage(item.fully_vaccinated_percentage)}%` } - color={COLOR_FULLY_VACCINATED} + color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED} justifyContent="flex-end" /> @@ -144,7 +141,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) { ('18+'); const { formatPercentageAsNumber } = useFormatLokalizePercentage(); + const [hasHideArchivedCharts, setHideArchivedCharts] = + useState(false); const { textGm, textNl } = pageText; @@ -141,10 +144,6 @@ export const VaccinationsGmPage = ( }), }; - const vaccinationBoosterShotsPerAgeGroupFeature = useFeature( - 'nlVaccinationBoosterShotsPerAgeGroup' - ); - /** * Filter out only the the 12+ and 18+ for the toggle component. */ @@ -250,35 +249,20 @@ export const VaccinationsGmPage = ( } labelTexts={textNl.vaccination_grade_toggle_tile.top_labels} /> - - {!vaccinationBoosterShotsPerAgeGroupFeature.isEnabled ? ( - - ) : ( - - )} + + + + setHideArchivedCharts(!hasHideArchivedCharts) + } + /> + {hasHideArchivedCharts && ( + + + + )} diff --git a/packages/app/src/pages/landelijk/vaccinaties.tsx b/packages/app/src/pages/landelijk/vaccinaties.tsx index 0c482688e4..b2ae2af806 100644 --- a/packages/app/src/pages/landelijk/vaccinaties.tsx +++ b/packages/app/src/pages/landelijk/vaccinaties.tsx @@ -30,7 +30,6 @@ import { } from '~/domain/vaccine'; import { useIntl } from '~/intl'; import { Languages } from '~/locale'; -import { useFeature } from '~/lib/features'; import { ElementsQueryResult, getElementsQuery, @@ -184,10 +183,6 @@ const VaccinationPage = (props: StaticProps) => { const [hasHideArchivedCharts, setHideArchivedCharts] = useState(false); - const vaccinationBoosterShotsPerAgeGroupFeature = useFeature( - 'nlVaccinationBoosterShotsPerAgeGroup' - ); - const metadata = { ...metadataTexts, title: textNl.metadata.title, @@ -323,53 +318,28 @@ const VaccinationPage = (props: StaticProps) => { }} /> - {!vaccinationBoosterShotsPerAgeGroupFeature.isEnabled ? ( - - ) : ( - - )} + ) => { /> {hasHideArchivedCharts && ( + (false); const [selectedAgeGroup, setSelectedAgeGroup] = useState('18+'); @@ -135,10 +138,6 @@ export const VaccinationsVrPage = ( }), }; - const vaccinationBoosterShotsPerAgeGroupFeature = useFeature( - 'nlVaccinationBoosterShotsPerAgeGroup' - ); - const gmCodes = gmCodesByVrCode[router.query.code as string]; const selectedGmCode = gmCodes ? gmCodes[0] : undefined; @@ -247,39 +246,21 @@ export const VaccinationsVrPage = ( } labelTexts={textNl.vaccination_grade_toggle_tile.top_labels} /> - {!vaccinationBoosterShotsPerAgeGroupFeature.isEnabled ? ( - - ) : ( - - )} - + + + + setHideArchivedCharts(!hasHideArchivedCharts) + } + /> + {hasHideArchivedCharts && ( + + + + )} diff --git a/packages/common/src/feature-flags/features.ts b/packages/common/src/feature-flags/features.ts index 082a56df78..00c2f809ed 100644 --- a/packages/common/src/feature-flags/features.ts +++ b/packages/common/src/feature-flags/features.ts @@ -1,10 +1,4 @@ import { Feature } from '~/types'; export const features: Feature[] = [ - { - name: 'nlVaccinationBoosterShotsPerAgeGroup', - isEnabled: false, - metricName: 'vaccine_coverage_per_age_group', - metricProperties: ['booster_shot_percentage_label', 'booster_shot_percentage'], - }, ];