From 5a152ffb35e39c0738f83cd1bd9f75b99bba2920 Mon Sep 17 00:00:00 2001 From: J <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 5 Apr 2023 11:48:31 +0200 Subject: [PATCH] COR-1499-safety-region-removal-navigation-and-router (#4724) --- .../components/choropleth/logic/thresholds.ts | 71 ------------- .../src/components/choropleth/logic/types.ts | 2 - .../behavior/tooltip/vr-behavior-tooltip.tsx | 99 ------------------- .../vaccine/vaccine-coverage-choropleth.tsx | 1 - .../__tests__/use-reverse-router.spec.tsx | 45 ++------- .../app/src/utils/get-current-page-scope.ts | 14 +-- packages/cms/src/lokalize/key-mutations.csv | 2 + packages/common/src/data/reverse-router.ts | 12 --- packages/common/src/feature-flags/features.ts | 6 -- packages/common/src/types/data-utils.ts | 17 ++-- 10 files changed, 24 insertions(+), 245 deletions(-) delete mode 100644 packages/app/src/domain/behavior/tooltip/vr-behavior-tooltip.tsx diff --git a/packages/app/src/components/choropleth/logic/thresholds.ts b/packages/app/src/components/choropleth/logic/thresholds.ts index 6f8d4bae0f..8cc4cd5737 100644 --- a/packages/app/src/components/choropleth/logic/thresholds.ts +++ b/packages/app/src/components/choropleth/logic/thresholds.ts @@ -1,6 +1,5 @@ import { colors } from '@corona-dashboard/common'; import { MapType } from '~/components/choropleth/logic'; -import { BehaviorIdentifier, behaviorIdentifiers } from '~/domain/behavior/logic/behavior-types'; const positiveTestedThresholds: ChoroplethThresholdsValue[] = [ { @@ -203,68 +202,6 @@ const infectedLocationsPercentageThresholds: ChoroplethThresholdsValue[] = [ }, ]; -const behaviorComplianceThresholds: ChoroplethThresholdsValue[] = [ - { - color: colors.scale.blue[0], - threshold: 0, - }, - { - color: colors.scale.blue[1], - threshold: 40, - }, - { - color: colors.scale.blue[2], - threshold: 50, - }, - { - color: colors.scale.blue[3], - threshold: 60, - }, - { - color: colors.scale.blue[4], - threshold: 70, - }, - { - color: colors.scale.blue[5], - threshold: 80, - }, - { - color: colors.scale.blue[6], - threshold: 90, - }, -]; - -const behaviorSupportThresholds: ChoroplethThresholdsValue[] = [ - { - color: colors.scale.yellow[0], - threshold: 0, - }, - { - color: colors.scale.yellow[1], - threshold: 40, - }, - { - color: colors.scale.yellow[2], - threshold: 50, - }, - { - color: colors.scale.yellow[3], - threshold: 60, - }, - { - color: colors.scale.yellow[4], - threshold: 70, - }, - { - color: colors.scale.yellow[5], - threshold: 80, - }, - { - color: colors.scale.yellow[6], - threshold: 90, - }, -]; - const vaccineCoverageThresholds: ChoroplethThresholdsValue[] = [ { color: colors.scale.blue[0], @@ -404,14 +341,6 @@ export const thresholds: Thresholds = { vaccinated_percentage_18_plus: vaccineCoveragePercentageThresholds, vaccinated_percentage_60_plus: vaccineCoveragePercentageThresholds, other: situationsThreshold, - ...(Object.fromEntries(behaviorIdentifiers.map((key) => [`${key}_support`, behaviorSupportThresholds])) as Record< - `${BehaviorIdentifier}_support`, - ChoroplethThresholdsValue[] - >), - ...(Object.fromEntries(behaviorIdentifiers.map((key) => [`${key}_compliance`, behaviorComplianceThresholds])) as Record< - `${BehaviorIdentifier}_compliance`, - ChoroplethThresholdsValue[] - >), }, }; diff --git a/packages/app/src/components/choropleth/logic/types.ts b/packages/app/src/components/choropleth/logic/types.ts index 4b59a21f95..c53e78d768 100644 --- a/packages/app/src/components/choropleth/logic/types.ts +++ b/packages/app/src/components/choropleth/logic/types.ts @@ -5,7 +5,6 @@ import type { GmCollectionTestedOverall, GmCollectionVaccineCoveragePerAgeGroup, VrCollection, - VrCollectionBehaviorArchived_20221019, VrCollectionDisabilityCareArchived_20230126, VrCollectionElderlyAtHomeArchived_20230126, VrCollectionHospitalNice, @@ -62,7 +61,6 @@ export type VrDataCollection = | VrCollectionNursingHomeArchived_20230126[] | VrCollectionVulnerableNursingHome[] | VrCollectionSewer[] - | VrCollectionBehaviorArchived_20221019[] | VrCollectionDisabilityCareArchived_20230126[] | VrCollectionElderlyAtHomeArchived_20230126[] | VrCollectionSituations[] diff --git a/packages/app/src/domain/behavior/tooltip/vr-behavior-tooltip.tsx b/packages/app/src/domain/behavior/tooltip/vr-behavior-tooltip.tsx deleted file mode 100644 index 6babed300c..0000000000 --- a/packages/app/src/domain/behavior/tooltip/vr-behavior-tooltip.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { VrCollectionBehaviorArchived_20221019 } from '@corona-dashboard/common'; -import css from '@styled-system/css'; -import styled from 'styled-components'; -import { Box } from '~/components/base'; -import { thresholds } from '~/components/choropleth/logic/thresholds'; -import { TooltipContent } from '~/components/choropleth/tooltips'; -import { TooltipData } from '~/components/choropleth/tooltips/types'; -import { BoldText } from '~/components/typography'; -import { BehaviorIdentifier } from '~/domain/behavior/logic/behavior-types'; -import { useIntl } from '~/intl'; -import { SiteText } from '~/locale'; -import { space } from '~/style/theme'; -import { getThresholdValue } from '~/utils/get-threshold-value'; -import { useReverseRouter } from '~/utils/use-reverse-router'; - -interface VrBehaviorTooltipProps { - context: TooltipData; - currentMetric: BehaviorIdentifier; - currentComplianceValue: number | null; - currentSupportValue: number | null; - behaviorType: 'compliance' | 'support'; - text: SiteText['pages']['behavior_page']; -} - -export function VrBehaviorTooltip({ context, currentMetric, currentComplianceValue, currentSupportValue, behaviorType, text }: VrBehaviorTooltipProps) { - const { commonTexts, formatPercentage } = useIntl(); - const reverseRouter = useReverseRouter(); - const complianceThresholdKey = `${currentMetric}_compliance` as const; - const supportThresholdKey = `${currentMetric}_support` as const; - - const complianceFilteredThreshold = getThresholdValue(thresholds.vr[complianceThresholdKey], currentComplianceValue ?? 0); - - const supportFilteredThreshold = getThresholdValue(thresholds.vr[supportThresholdKey], currentSupportValue ?? 0); - - const complianceTooltipInfo = ( - - ); - - const supportTooltipInfo = ( - - ); - - return ( - - - {commonTexts.behavior.subjects[currentMetric]} - - {/* Change order of the info based on the metric name */} - {behaviorType === 'compliance' ? ( -
- {complianceTooltipInfo} - {supportTooltipInfo} -
- ) : ( -
- {supportTooltipInfo} - {complianceTooltipInfo} -
- )} - - - ); -} - -interface TooltipInfoProps { - title: string; - value: string; - background: string; -} - -function TooltipInfo({ title, value, background }: TooltipInfoProps) { - return ( - - {title} - - {value} - - - - ); -} - -const LegendaColorBox = styled.div<{ backgroundColor: string }>((x) => - css({ - height: '13px', - width: '13px', - borderRadius: '2px', - marginLeft: space[1], - backgroundColor: x.backgroundColor, - }) -); diff --git a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx index bfa0c465d0..770acaef1d 100644 --- a/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx +++ b/packages/app/src/domain/vaccine/vaccine-coverage-choropleth.tsx @@ -123,7 +123,6 @@ export const VaccineCoverageChoropleth = ({ data }: VaccineCoverageChoroplethPro }} dataOptions={{ isPercentage: true, - getLink: (vrcode) => reverseRouter.vr.vaccinaties(vrcode), }} formatTooltip={(context) => } /> diff --git a/packages/app/src/utils/__tests__/use-reverse-router.spec.tsx b/packages/app/src/utils/__tests__/use-reverse-router.spec.tsx index 96a12d0c55..2b5b38be59 100644 --- a/packages/app/src/utils/__tests__/use-reverse-router.spec.tsx +++ b/packages/app/src/utils/__tests__/use-reverse-router.spec.tsx @@ -1,8 +1,5 @@ import { cleanup, render } from '@testing-library/react'; -import { - cleanup as cleanupHooks, - renderHook, -} from '@testing-library/react-hooks'; +import { cleanup as cleanupHooks, renderHook } from '@testing-library/react-hooks'; import injectJsDom from 'jsdom-global'; import * as sinon from 'sinon'; import { ThemeProvider } from 'styled-components'; @@ -15,7 +12,6 @@ import { useReverseRouter } from '../use-reverse-router'; const UseReverseRouter = suite('useReverseRouter'); let largeScreen = false; -const vrCode = 'VR25'; const gmCode = 'GM001'; UseReverseRouter.before((context) => { @@ -61,52 +57,31 @@ const TestBed = () => { return ( <>
{router.nl.index()}
-
{router.vr.index(vrCode)}
{router.gm.index(gmCode)}
); }; -UseReverseRouter( - 'indexes should link to the actual index on small screens', - () => { - largeScreen = false; - const result = render(); - const nlDiv = result.getByTestId('nl'); - const vrDiv = result.getByTestId('vr'); - const gmDiv = result.getByTestId('gm'); - - assert.equal(nlDiv.textContent?.endsWith('/landelijk'), true); - assert.equal(vrDiv.textContent?.endsWith(vrCode), true); - assert.equal(gmDiv.textContent?.endsWith(gmCode), true); - } -); +UseReverseRouter('indexes should link to the actual index on small screens', () => { + largeScreen = false; + const result = render(); + const nlDiv = result.getByTestId('nl'); + const gmDiv = result.getByTestId('gm'); + + assert.equal(nlDiv.textContent?.endsWith('/landelijk'), true); + assert.equal(gmDiv.textContent?.endsWith(gmCode), true); +}); UseReverseRouter("indexes should 'redirect' to child pages", () => { largeScreen = true; const result = render(); const nlDiv = result.getByTestId('nl'); - const vrDiv = result.getByTestId('vr'); const gmDiv = result.getByTestId('gm'); assert.equal(nlDiv.textContent?.endsWith('/vaccinaties'), true); - assert.equal(vrDiv.textContent?.endsWith('/vaccinaties'), true); assert.equal(gmDiv.textContent?.endsWith('/vaccinaties'), true); }); -UseReverseRouter('VR routes should have the VR code in them', () => { - const { result } = renderHook(() => useReverseRouter()); - - const keys = Object.keys(result.current.vr); - keys.forEach((name) => { - const route = (result.current.vr as any)[name](vrCode); - assert.equal(route.indexOf(vrCode) > -1, true); - }); - - const route = result.current.vr.rioolwater(vrCode); - assert.equal(route.indexOf(vrCode) > -1, true); -}); - UseReverseRouter('GM routes should have the GM code in them', () => { const { result } = renderHook(() => useReverseRouter()); diff --git a/packages/app/src/utils/get-current-page-scope.ts b/packages/app/src/utils/get-current-page-scope.ts index 0ffff5f9d1..6182caddee 100644 --- a/packages/app/src/utils/get-current-page-scope.ts +++ b/packages/app/src/utils/get-current-page-scope.ts @@ -1,17 +1,9 @@ -import { DataScopeKey } from '@corona-dashboard/common'; +import { DataScopeKeyForRouter } from '@corona-dashboard/common'; import { NextRouter } from 'next/router'; /** * Returns a typed DataScope based on the current route's path */ -export function getCurrentPageScope( - router: NextRouter -): DataScopeKey | undefined { - return router.pathname.startsWith('/landelijk') - ? 'nl' - : router.pathname.startsWith('/veiligheidsregio') - ? 'vr' - : router.pathname.startsWith('/gemeente') - ? 'gm' - : undefined; +export function getCurrentPageScope(router: NextRouter): DataScopeKeyForRouter | undefined { + return router.pathname.startsWith('/landelijk') ? 'nl' : router.pathname.startsWith('/gemeente') ? 'gm' : undefined; } diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv index 19fb667aab..fc7b3b8ae3 100644 --- a/packages/cms/src/lokalize/key-mutations.csv +++ b/packages/cms/src/lokalize/key-mutations.csv @@ -471,3 +471,5 @@ timestamp,action,key,document_id,move_to 2023-03-27T13:01:45.445Z,delete,common.accessibility.charts.elderly_at_home_deceased_over_time_chart.label,G1DXw0RdifOml06twMjRl8,__ 2023-03-28T13:00:33.765Z,delete,common.accessibility.charts.sewer_region_choropleth.description,cl0A2qFve1QxscrDIqKL1F,__ 2023-03-28T13:00:33.766Z,delete,common.accessibility.charts.sewer_region_choropleth.label,Z3v1SKYekK4CLDpzUPc5x5,__ +2023-04-03T15:45:47.784Z,delete,pages.behavior_page.nl.tooltip_labels.compliance,uFGMarfssEPhdNlk3s6Avk,__ +2023-04-03T15:45:47.785Z,delete,pages.behavior_page.nl.tooltip_labels.support,EaUS1FZKh46VBcUuh47mI4,__ diff --git a/packages/common/src/data/reverse-router.ts b/packages/common/src/data/reverse-router.ts index db16a1ac3c..2c632716d8 100644 --- a/packages/common/src/data/reverse-router.ts +++ b/packages/common/src/data/reverse-router.ts @@ -35,18 +35,6 @@ export function getReverseRouter(isMobile: boolean) { varianten: () => `/landelijk/varianten`, }, - vr: { - index: (code?: string) => (code ? (isMobile ? `/veiligheidsregio/${code}` : reverseRouter.vr.rioolwater(code)) : '/veiligheidsregio'), - vaccinaties: (code: string) => `/veiligheidsregio/${code}/vaccinaties`, - positiefGetesteMensen: (code: string) => `/veiligheidsregio/${code}/positief-geteste-mensen`, - sterfte: (code: string) => `/veiligheidsregio/${code}/sterfte`, - ziekenhuisopnames: (code: string) => `/veiligheidsregio/${code}/ziekenhuis-opnames`, - thuiswonendeOuderen: (code: string) => `/veiligheidsregio/${code}/thuiswonende-ouderen`, - rioolwater: (code: string) => `/veiligheidsregio/${code}/rioolwater`, - gedrag: (code: string) => `/veiligheidsregio/${code}/gedrag`, - brononderzoek: (code: string) => `/veiligheidsregio/${code}/brononderzoek`, - }, - gm: { index: (code?: string) => (code ? (isMobile ? `/gemeente/${code}` : reverseRouter.gm.rioolwater(code)) : '/gemeente'), positiefGetesteMensen: (code: string) => `/gemeente/${code}/positief-geteste-mensen`, diff --git a/packages/common/src/feature-flags/features.ts b/packages/common/src/feature-flags/features.ts index a546a70967..6ad19929c9 100644 --- a/packages/common/src/feature-flags/features.ts +++ b/packages/common/src/feature-flags/features.ts @@ -1,12 +1,6 @@ import { Feature } from '..'; export const features: Feature[] = [ - { - name: 'archivedBehavior', - isEnabled: false, - metricName: 'behavior_archived_20221019', - dataScopes: ['vr'], - }, { name: 'nlVaccinationCoveragePerAgeGroupAutumn2022', isEnabled: false, diff --git a/packages/common/src/types/data-utils.ts b/packages/common/src/types/data-utils.ts index 412c827aaf..2b37073713 100644 --- a/packages/common/src/types/data-utils.ts +++ b/packages/common/src/types/data-utils.ts @@ -7,17 +7,21 @@ import { Gm, Nl, Vr } from '.'; export type ScopedData = { gm: Gm; nl: Nl; + /** TODO: when this gets removed, also remove the type "DataScopeKeyForRouter". + ** It was created for COR-1499, because the router needed to have the VR excluded. + ** When picking up ticket COR-1504 this line scoped data should be adjusted for the validation of the VR JSONS. + ** The clean up of "DataScopeKeyForRouter" described above needs to happen as well. + **/ vr: Vr; }; +export type DataScopeKeyForRouter = 'gm' | 'nl'; + export type DataScopeKey = keyof ScopedData; export type DataScope = ScopedData[DataScopeKey]; -export type MetricKeys = keyof Omit< - T, - 'last_generated' | 'proto_name' | 'name' | 'code' ->; +export type MetricKeys = keyof Omit; export type MetricName = MetricKeys; @@ -35,7 +39,4 @@ type ValueKeys = T extends ValuesMetric ? ValueKeys : keyof T; /** * The metric properties of metric M in data scope S (scope being In/Nl/Vr/Gm) */ -export type MetricProperty< - S extends DataScope, - M extends MetricKeys -> = ValueKeys; +export type MetricProperty> = ValueKeys;