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

COR-1487-remove-toggle-on-positive-tested-page #4716

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion packages/app/src/components/choropleth/logic/thresholds.ts
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,6 @@ export const thresholds: Thresholds = {
vaccinated_percentage_60_plus: vaccineCoveragePercentageThresholds,
},
vr: {
infected_per_100k: positiveTestedThresholds,
admissions_on_date_of_admission: vrHospitalAdmissionsThresholds,
infected_locations_percentage: infectedLocationsPercentageThresholds,
positive_tested_daily_per_100k: elderlyAtHomeThresholds,
Expand Down
88 changes: 27 additions & 61 deletions packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { colors, NlTestedOverallValue, TimeframeOption, TimeframeOptionsList } f
import { GgdTesten } from '@corona-dashboard/icons';
import { GetStaticPropsContext } from 'next';
import { useState } from 'react';
import { RegionControlOption } from '~/components/chart-region-controls';
import { Box } from '~/components/base';
import { ChartTile } from '~/components/chart-tile';
import { ChartTileToggleItem } from '~/components/chart-tile-toggle';
import { DynamicChoropleth } from '~/components/choropleth';
Expand All @@ -25,6 +25,7 @@ import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/quer
import { getArticleParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
import { createGetChoroplethData, createGetContent, getLastGeneratedDate, getLokalizeTexts, selectNlData } from '~/static-props/get-data';
import { space } from '~/style/theme';
import { ArticleParts, PagePartQueryResult } from '~/types/cms';
import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
Expand Down Expand Up @@ -58,7 +59,6 @@ export const getStaticProps = createGetStaticProps(
),
createGetChoroplethData({
gm: ({ tested_overall }) => ({ tested_overall }),
vr: ({ tested_overall }) => ({ tested_overall }),
}),
async (context: GetStaticPropsContext) => {
const { content } = await createGetContent<{
Expand Down Expand Up @@ -100,7 +100,6 @@ function PositivelyTestedPeople(props: StaticProps<typeof getStaticProps>) {

const { metadataTexts, textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);

const [selectedMap, setSelectedMap] = useState<RegionControlOption>('gm');
const [selectedGgdGraph, setSelectedGgdGraph] = useState<string>('GGD_infected_percentage_over_time_chart');

const ggdGraphToggleItems: ChartTileToggleItem[] = [
Expand Down Expand Up @@ -345,70 +344,37 @@ function PositivelyTestedPeople(props: StaticProps<typeof getStaticProps>) {
description={
<>
<Markdown content={textNl.map_toelichting} />
{replaceComponentsInText(textNl.map_last_value_text, {
infected_per_100k: <BoldText>{`${formatNumber(dataOverallLastValue.infected_per_100k)}`}</BoldText>,
dateTo: formatDateFromSeconds(dataOverallLastValue.date_unix, 'weekday-long'),
})}
<Box marginBottom={space[3]}>
Jorrik-Klijnsma-Work marked this conversation as resolved.
Show resolved Hide resolved
{replaceComponentsInText(textNl.map_last_value_text, {
infected_per_100k: <BoldText>{`${formatNumber(dataOverallLastValue.infected_per_100k)}`}</BoldText>,
dateTo: formatDateFromSeconds(dataOverallLastValue.date_unix, 'weekday-long'),
})}
</Box>
</>
}
onChartRegionChange={setSelectedMap}
chartRegion={selectedMap}
legend={{
title: textShared.chloropleth_legenda.titel,
thresholds: thresholds.vr.infected_per_100k,
thresholds: thresholds.gm.infected_per_100k,
}}
>
{/**
* It's probably a good idea to abstract this even further, so that
* the switching of charts, and the state involved, are all handled by
* the component. The page does not have to be bothered with this.
*
* Ideally the ChoroplethTile would receive some props with the data
* it needs to render either Choropleth without it caring about
* MunicipalityChloropleth or VrChloropleth, that data would
* make the chart and define the tooltip layout for each, but maybe for
* now that is a bridge too far. Let's take it one step at a time.
*/}
{selectedMap === 'gm' && (
<DynamicChoropleth
map="gm"
accessibility={{
key: 'confirmed_cases_municipal_choropleth',
}}
data={choropleth.gm.tested_overall}
dataConfig={{
metricName: 'tested_overall',
metricProperty: 'infected_per_100k',
dataFormatters: {
infected: formatNumber,
infected_per_100k: formatNumber,
},
}}
dataOptions={{
getLink: reverseRouter.gm.positiefGetesteMensen,
}}
/>
)}
{selectedMap === 'vr' && (
<DynamicChoropleth
map="vr"
accessibility={{
key: 'confirmed_cases_region_choropleth',
}}
data={choropleth.vr.tested_overall}
dataConfig={{
metricName: 'tested_overall',
metricProperty: 'infected_per_100k',
dataFormatters: {
infected: formatNumber,
infected_per_100k: formatNumber,
},
}}
dataOptions={{
getLink: reverseRouter.vr.positiefGetesteMensen,
}}
/>
)}
<DynamicChoropleth
map="gm"
accessibility={{
key: 'confirmed_cases_municipal_choropleth',
}}
data={choropleth.gm.tested_overall}
dataConfig={{
metricName: 'tested_overall',
metricProperty: 'infected_per_100k',
dataFormatters: {
infected: formatNumber,
infected_per_100k: formatNumber,
},
}}
dataOptions={{
getLink: reverseRouter.gm.positiefGetesteMensen,
}}
/>
</ChoroplethTile>
</InView>

Expand Down
2 changes: 2 additions & 0 deletions packages/cms/src/lokalize/key-mutations.csv
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,8 @@ timestamp,action,key,document_id,move_to
2023-03-24T07:45:03.890Z,delete,pages.topical_page.shared.secties.search.title.nl,PGwiP4IwXrA0GfLCLD9Tth,__
2023-03-24T07:45:03.890Z,delete,pages.topical_page.shared.secties.search.title.vr,7nClfXqPlyZyEU7PO2TAAw,__
2023-03-23T08:50:33.174Z,delete,common.nav.links.veiligheidsregio,jF33EuwumlGuwav2FD3VW8,__
2023-03-28T12:50:47.492Z,delete,common.accessibility.charts.confirmed_cases_region_choropleth.description,Z3v1SKYekK4CLDpzUPbJIJ,__
2023-03-28T12:50:47.493Z,delete,common.accessibility.charts.confirmed_cases_region_choropleth.label,G1DXw0RdifOml06twMjEhw,__
2023-03-28T12:52:25.750Z,delete,common.accessibility.charts.hospital_admissions_region_choropleth.description,YzrXb3vQYHnZxtu61Xgzap,__
2023-03-28T12:52:25.751Z,delete,common.accessibility.charts.hospital_admissions_region_choropleth.label,Z3v1SKYekK4CLDpzUPbgJt,__
2023-03-27T13:01:45.444Z,delete,common.accessibility.charts.elderly_at_home_deceased_over_time_chart.description,G1DXw0RdifOml06twMjSTZ,__
Expand Down