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

Commit

Permalink
removed feature flag and added archived graphs to NL, VR and GM (#4274)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jorrik-Klijnsma-Work
Jorrik-Klijnsma-Work authored Jun 2, 2022
1 parent e6b8ae7 commit 6b825c2
Show file tree
Hide file tree
Showing 9 changed files with 154 additions and 154 deletions.
5 changes: 5 additions & 0 deletions packages/app/src/domain/topical/common.ts
View file
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
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
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
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
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
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
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

0 comments on commit 6b825c2

Please sign in to comment.