Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

removed feature flag and added archived graphs to NL, VR and GM #4274

Merged
merged 1 commit into from
Jun 2, 2022
Merged

removed feature flag and added archived graphs to NL, VR and GM #4274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/app/src/domain/topical/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];
2 changes: 1 addition & 1 deletion packages/app/src/domain/topical/mini-vaccination-coverage-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
13 changes: 6 additions & 7 deletions packages/app/src/domain/vaccine/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};
13 changes: 5 additions & 8 deletions ...pp/src/domain/vaccine/vaccine-coverage-per-age-group/components/narrow-coverage-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
/>

<Bar
value={item.has_one_shot_percentage}
color={COLOR_HAS_ONE_SHOT}
color={ARCHIVED_COLORS.COLOR_HAS_ONE_SHOT}
label={
'has_one_shot_percentage_label' in item
? item.has_one_shot_percentage_label
Expand All @@ -95,13 +92,13 @@ export function NarrowCoverageTable({
)
: `${formatPercentage(item.fully_vaccinated_percentage)}%`
}
color={COLOR_FULLY_VACCINATED}
color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED}
textLabel={text.headers.coverage}
/>

<Bar
value={item.fully_vaccinated_percentage}
color={COLOR_FULLY_VACCINATED}
color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED}
label={
'fully_vaccinated_percentage_label' in item
? item.fully_vaccinated_percentage_label
Expand Down
13 changes: 5 additions & 8 deletions .../app/src/domain/vaccine/vaccine-coverage-per-age-group/components/wide-coverage-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@ import { asResponsiveArray } from '~/style/utils';
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 { WidePercentage } from '~/domain/vaccine/components/wide-percentage';
import { AgeGroup } from '~/domain/vaccine/components/age-group';
Expand Down Expand Up @@ -122,7 +119,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
)
: `${formatPercentage(item.has_one_shot_percentage)}%`
}
color={COLOR_HAS_ONE_SHOT}
color={ARCHIVED_COLORS.COLOR_HAS_ONE_SHOT}
justifyContent="flex-end"
/>
</Cell>
Expand All @@ -136,15 +133,15 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
)
: `${formatPercentage(item.fully_vaccinated_percentage)}%`
}
color={COLOR_FULLY_VACCINATED}
color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED}
justifyContent="flex-end"
/>
</Cell>
<Cell>
<Box spacing={1}>
<Bar
value={item.has_one_shot_percentage}
color={COLOR_HAS_ONE_SHOT}
color={ARCHIVED_COLORS.COLOR_HAS_ONE_SHOT}
label={
'has_one_shot_percentage_label' in item
? item.has_one_shot_percentage_label
Expand All @@ -153,7 +150,7 @@ export function WideCoverageTable({ values, text }: WideCoverageTable) {
/>
<Bar
value={item.fully_vaccinated_percentage}
color={COLOR_FULLY_VACCINATED}
color={ARCHIVED_COLORS.COLOR_FULLY_VACCINATED}
label={
'fully_vaccinated_percentage_label' in item
? item.fully_vaccinated_percentage_label
Expand Down
76 changes: 42 additions & 34 deletions packages/app/src/pages/gemeente/[code]/vaccinaties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
Markdown,
PageInformationBlock,
TileList,
InView,
Divider,
} from '~/components';
import { thresholds } from '~/components/choropleth/logic';
import { gmCodesByVrCode, vrCodeByGmCode } from '~/data';
Expand Down Expand Up @@ -50,7 +52,6 @@ import {
useReverseRouter,
useFormatLokalizePercentage,
} from '~/utils';
import { useFeature } from '~/lib/features';

import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';

Expand Down Expand Up @@ -128,6 +129,8 @@ export const VaccinationsGmPage = (
const reverseRouter = useReverseRouter();
const [selectedAgeGroup, setSelectedAgeGroup] = useState<AgeGroup>('18+');
const { formatPercentageAsNumber } = useFormatLokalizePercentage();
const [hasHideArchivedCharts, setHideArchivedCharts] =
useState<boolean>(false);

const { textGm, textNl } = pageText;

Expand All @@ -141,10 +144,6 @@ export const VaccinationsGmPage = (
}),
};

const vaccinationBoosterShotsPerAgeGroupFeature = useFeature(
'nlVaccinationBoosterShotsPerAgeGroup'
);

/**
* Filter out only the the 12+ and 18+ for the toggle component.
*/
Expand Down Expand Up @@ -250,35 +249,20 @@ export const VaccinationsGmPage = (
}
labelTexts={textNl.vaccination_grade_toggle_tile.top_labels}
/>

{!vaccinationBoosterShotsPerAgeGroupFeature.isEnabled ? (
<VaccineCoveragePerAgeGroup
title={textGm.vaccination_coverage.title}
description={textGm.vaccination_coverage.description}
sortingOrder={['18+', '12+']}
metadata={{
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textGm.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
text={textNl.vaccination_coverage}
/>
) : (
<BoosterShotCoveragePerAgeGroup
title={textGm.vaccination_coverage.title}
description={
textGm.vaccination_coverage
.description_booster_and_fully_vaccinated
}
sortingOrder={['18+', '12+']}
metadata={{
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textGm.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
text={textNl.vaccination_coverage}
/>
)}
<BoosterShotCoveragePerAgeGroup
title={textGm.vaccination_coverage.title}
description={
textGm.vaccination_coverage
.description_booster_and_fully_vaccinated
}
sortingOrder={['18+', '12+']}
metadata={{
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textGm.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
text={textNl.vaccination_coverage}
/>

<ChoroplethTile
title={replaceVariablesInText(
Expand Down Expand Up @@ -339,6 +323,30 @@ export const VaccinationsGmPage = (
)}
/>
</ChoroplethTile>
<Divider />
<PageInformationBlock
title={textNl.section_archived.title}
description={textNl.section_archived.description}
isArchivedHidden={hasHideArchivedCharts}
onToggleArchived={() =>
setHideArchivedCharts(!hasHideArchivedCharts)
}
/>
{hasHideArchivedCharts && (
<InView rootMargin="500px">
<VaccineCoveragePerAgeGroup
title={textGm.vaccination_coverage.title}
description={textGm.vaccination_coverage.description}
sortingOrder={['18+', '12+']}
metadata={{
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textGm.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
text={textNl.vaccination_coverage}
/>
</InView>
)}
</TileList>
</GmLayout>
</Layout>
Expand Down
96 changes: 44 additions & 52 deletions packages/app/src/pages/landelijk/vaccinaties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import {
} from '~/domain/vaccine';
import { useIntl } from '~/intl';
import { Languages } from '~/locale';
import { useFeature } from '~/lib/features';
import {
ElementsQueryResult,
getElementsQuery,
Expand Down Expand Up @@ -184,10 +183,6 @@ const VaccinationPage = (props: StaticProps<typeof getStaticProps>) => {
const [hasHideArchivedCharts, setHideArchivedCharts] =
useState<boolean>(false);

const vaccinationBoosterShotsPerAgeGroupFeature = useFeature(
'nlVaccinationBoosterShotsPerAgeGroup'
);

const metadata = {
...metadataTexts,
title: textNl.metadata.title,
Expand Down Expand Up @@ -323,53 +318,28 @@ const VaccinationPage = (props: StaticProps<typeof getStaticProps>) => {
}}
/>
<VaccineCoverageChoroplethPerGm data={choropleth} />
{!vaccinationBoosterShotsPerAgeGroupFeature.isEnabled ? (
<VaccineCoveragePerAgeGroup
text={textNl.vaccination_coverage}
title={textNl.vaccination_coverage.title}
description={textNl.vaccination_coverage.toelichting}
sortingOrder={[
'81+',
'71-80',
'61-70',
'51-60',
'41-50',
'31-40',
'18-30',
'12-17',
'5-11',
]}
metadata={{
datumsText: textNl.datums,
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textNl.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
/>
) : (
<BoosterShotCoveragePerAgeGroup
text={textNl.vaccination_coverage}
title={textNl.vaccination_coverage.title}
description={textNl.vaccination_coverage.toelichting}
sortingOrder={[
'81+',
'71-80',
'61-70',
'51-60',
'41-50',
'31-40',
'18-30',
'12-17',
'5-11',
]}
metadata={{
datumsText: textNl.datums,
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textNl.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
/>
)}
<BoosterShotCoveragePerAgeGroup
text={textNl.vaccination_coverage}
title={textNl.vaccination_coverage.title}
description={textNl.vaccination_coverage.toelichting}
sortingOrder={[
'81+',
'71-80',
'61-70',
'51-60',
'41-50',
'31-40',
'18-30',
'12-17',
'5-11',
]}
metadata={{
datumsText: textNl.datums,
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textNl.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
/>
<VaccinationsKpiHeader
text={textNl.booster_information_block}
dateUnix={boosterShotAdministeredLastValue.date_unix}
Expand Down Expand Up @@ -424,6 +394,28 @@ const VaccinationPage = (props: StaticProps<typeof getStaticProps>) => {
/>
{hasHideArchivedCharts && (
<InView rootMargin="500px">
<VaccineCoveragePerAgeGroup
text={textNl.vaccination_coverage}
title={textNl.vaccination_coverage.title}
description={textNl.vaccination_coverage.toelichting}
sortingOrder={[
'81+',
'71-80',
'61-70',
'51-60',
'41-50',
'31-40',
'18-30',
'12-17',
'5-11',
]}
metadata={{
datumsText: textNl.datums,
date: data.vaccine_coverage_per_age_group.values[0].date_unix,
source: textNl.vaccination_coverage.bronnen.rivm,
}}
values={data.vaccine_coverage_per_age_group.values}
/>
<VaccineDeliveryBarChart
data={data.vaccine_delivery_per_supplier}
text={textNl}
Expand Down
Loading