From 543733b64d00810673789db1259fbc4d648bec34 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard26 Date: Thu, 19 Jan 2023 08:59:25 +0100 Subject: [PATCH] feat(formatting): added new WeekdayLong formatting option for appending the year to dates, resulting in 'day daynumber month year'; adjusted all files/locations that was either using WeekdayMedium formatting or using no formatting (for examples when dates were part of a text within Sanity); --- .../tooltips/choropleth-tooltip.tsx | 2 +- .../app/src/components/cms/inline-kpi.tsx | 102 +++------- .../difference-indicator/tile-difference.tsx | 2 +- packages/app/src/components/metadata.tsx | 33 +--- .../components/metadata.tsx | 66 ++----- .../timeline/components/tooltip-content.tsx | 2 +- .../timeline/components/tooltip-content.tsx | 63 +------ .../tooltip/tooltip-series-list-container.tsx | 56 +----- .../components/location-tooltip.tsx | 17 +- .../vaccine-administrations-kpi-section.tsx | 44 ++--- packages/app/src/locale/use-lokalize-text.tsx | 2 +- .../[code]/positief-geteste-mensen.tsx | 2 +- .../gemeente/[code]/ziekenhuis-opnames.tsx | 4 +- packages/app/src/pages/landelijk/gedrag.tsx | 4 +- .../landelijk/intensive-care-opnames.tsx | 177 ++++-------------- .../landelijk/positief-geteste-mensen.tsx | 8 +- .../pages/landelijk/ziekenhuis-opnames.tsx | 4 +- .../pages/veiligheidsregio/[code]/gedrag.tsx | 4 +- .../[code]/positief-geteste-mensen.tsx | 8 +- .../[code]/ziekenhuis-opnames.tsx | 4 +- packages/common/src/intl/create-formatting.ts | 67 +++---- 21 files changed, 160 insertions(+), 511 deletions(-) diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx index c593efe39f..22fc5cf98b 100644 --- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx +++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx @@ -66,7 +66,7 @@ export function ChoroplethTooltip(props: Choroplet ); // VRData does not contain the property 'date_end_unix' so 'date_unix' is used instead. - outdatedDataDate = formatDateFromSeconds(tooltipVars[!isVrData(tooltipVars) ? 'date_end_unix' : 'date_unix'] as number, 'medium'); + outdatedDataDate = formatDateFromSeconds(tooltipVars[!isVrData(tooltipVars) ? 'date_end_unix' : 'date_unix'] as number, 'weekday-long'); tooltipNotification = replaceVariablesInText(tooltipNotification as string, { date: outdatedDataDate }); } diff --git a/packages/app/src/components/cms/inline-kpi.tsx b/packages/app/src/components/cms/inline-kpi.tsx index a7ab15b9f0..963fb9d629 100644 --- a/packages/app/src/components/cms/inline-kpi.tsx +++ b/packages/app/src/components/cms/inline-kpi.tsx @@ -1,10 +1,4 @@ -import { - formatStyle, - getLastFilledValue, - isDateSpanValue, - KpiConfiguration, - TimestampedValue, -} from '@corona-dashboard/common'; +import { formatStyle, getLastFilledValue, isDateSpanValue, KpiConfiguration, TimestampedValue } from '@corona-dashboard/common'; import css from '@styled-system/css'; import { get } from 'lodash'; import { ReactNode } from 'react'; @@ -32,18 +26,13 @@ interface ServerData { function getDataUrl(configuration: KpiConfiguration, date?: string) { const { code, area, metricName, metricProperty } = configuration; const suffix = isDefined(date) ? `?end=${date}` : ''; - return `/api/data/timeseries/${ - code ?? area - }/${metricName}/${metricProperty}${suffix}`; + return `/api/data/timeseries/${code ?? area}/${metricName}/${metricProperty}${suffix}`; } export function InlineKpi({ configuration, date }: InlineKpiProps) { const { commonTexts, formatDateFromSeconds } = useIntl(); - const { data } = useSWRImmutable( - getDataUrl(configuration, date), - (url: string) => fetch(url).then((_) => _.json()) - ); + const { data } = useSWRImmutable(getDataUrl(configuration, date), (url: string) => fetch(url).then((_) => _.json())); const { data: differenceData } = useDifferenceData(configuration); if (!isDefined(data) || !isDefined(differenceData)) { @@ -56,8 +45,7 @@ export function InlineKpi({ configuration, date }: InlineKpiProps) { ...data, }, difference: { - [configuration.differenceKey]: - differenceData[configuration.differenceKey], + [configuration.differenceKey]: differenceData[configuration.differenceKey], }, } : { @@ -72,11 +60,7 @@ export function InlineKpi({ configuration, date }: InlineKpiProps) { const lastValue = getLastValue(data, configuration.metricName); const metadataDate = isDateSpanValue(lastValue) - ? formatDateSpanString( - lastValue.date_start_unix, - lastValue.date_end_unix, - formatDateFromSeconds - ) + ? formatDateSpanString(lastValue.date_start_unix, lastValue.date_end_unix, formatDateFromSeconds) : formatDateValueString(lastValue.date_unix, formatDateFromSeconds); return ( @@ -96,19 +80,12 @@ export function InlineKpi({ configuration, date }: InlineKpiProps) { metricName={configuration.metricName} metricProperty={configuration.metricProperty} differenceKey={configuration.differenceKey} - isMovingAverageDifference={ - configuration.isMovingAverageDifference - } + isMovingAverageDifference={configuration.isMovingAverageDifference} isAmount={configuration.isAmount} /> )} {!isPresent(differenceData) && ( - + )} @@ -117,22 +94,16 @@ export function InlineKpi({ configuration, date }: InlineKpiProps) { } function useDifferenceData(configuration: KpiConfiguration) { - const differenceKey = configuration.differenceKey - ? configuration.differenceKey - : 'unknown'; - return useSWRImmutable( - `/api/data/timeseries/${ - configuration.code ?? configuration.area - }/difference/${differenceKey}`, - (url: string) => - fetch(url) - .then((_) => { - if (!_.ok) { - return null; - } - return _.json(); - }) - .catch((_) => null) + const differenceKey = configuration.differenceKey ? configuration.differenceKey : 'unknown'; + return useSWRImmutable(`/api/data/timeseries/${configuration.code ?? configuration.area}/difference/${differenceKey}`, (url: string) => + fetch(url) + .then((_) => { + if (!_.ok) { + return null; + } + return _.json(); + }) + .catch((_) => null) ); } @@ -148,24 +119,11 @@ interface KpiTileProps { * A generic KPI tile which composes its value content using the children prop. * Description can be both plain text and html strings. */ -function KpiTile({ - title, - description, - children, - metadata, - iconName, -}: KpiTileProps) { +function KpiTile({ title, description, children, metadata, iconName }: KpiTileProps) { return ( <> - +
string -) { - return `${format(startDate, 'weekday-medium')}} - ${format( - endDate, - 'weekday-medium' - )}`; +function formatDateSpanString(startDate: number, endDate: number, format: (v: number, s?: formatStyle) => string) { + return `${format(startDate, 'weekday-long')}} - ${format(endDate, 'weekday-long')}`; } -function formatDateValueString( - date: number, - format: (v: number, s?: formatStyle) => string -) { +function formatDateValueString(date: number, format: (v: number, s?: formatStyle) => string) { return format(date, 'medium'); } function getLastValue(data: ServerData, metricName: string): TimestampedValue { - return ( - metricNamesHoldingPartialData.includes(metricName) - ? getLastFilledValue(data as any) - : get(data, ['last_value']) - ) as TimestampedValue; + return (metricNamesHoldingPartialData.includes(metricName) ? getLastFilledValue(data as any) : get(data, ['last_value'])) as TimestampedValue; } diff --git a/packages/app/src/components/difference-indicator/tile-difference.tsx b/packages/app/src/components/difference-indicator/tile-difference.tsx index a95ccde6cb..549776b5a7 100644 --- a/packages/app/src/components/difference-indicator/tile-difference.tsx +++ b/packages/app/src/components/difference-indicator/tile-difference.tsx @@ -65,7 +65,7 @@ export function TileDifference({ `${content} ${showOldDateUnix ? (content === text.waarde_gelijk ? text.vorige_waarde_geljk_datum : text.vorige_waarde_datum) : text.vorige_waarde}`, { amount: `${formattedDifference}${isPercentage ? '%' : ''}`, - date: showOldDateUnix ? formatDateFromSeconds(value.old_date_unix) : '', + date: showOldDateUnix ? formatDateFromSeconds(value.old_date_unix, 'weekday-long') : '', } )} /> diff --git a/packages/app/src/components/metadata.tsx b/packages/app/src/components/metadata.tsx index 4fa079fa28..ccb6fad3c8 100644 --- a/packages/app/src/components/metadata.tsx +++ b/packages/app/src/components/metadata.tsx @@ -20,27 +20,18 @@ export interface MetadataProps extends MarginBottomProps { intervalCount?: string; } -export function Metadata({ - date, - source, - obtainedAt, - isTileFooter, - datumsText, - mb, - dataSources, - intervalCount, -}: MetadataProps) { +export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, mb, dataSources, intervalCount }: MetadataProps) { const { commonTexts, formatDateFromSeconds } = useIntl(); const dateString = typeof date === 'number' ? replaceVariablesInText(commonTexts.common.metadata.date, { - date: formatDateFromSeconds(date, 'weekday-medium'), + date: formatDateFromSeconds(date, 'weekday-long'), }) : Array.isArray(date) ? replaceVariablesInText(commonTexts.common.metadata.date_from_to, { - startDate: formatDateFromSeconds(date[0], 'weekday-medium'), - endDate: formatDateFromSeconds(date[1], 'weekday-medium'), + startDate: formatDateFromSeconds(date[0], 'weekday-long'), + endDate: formatDateFromSeconds(date[1], 'weekday-long'), }) : typeof date === 'string' ? date @@ -74,19 +65,16 @@ export function Metadata({ {datumsText && Array.isArray(date) ? ( replaceVariablesInText(datumsText, { - weekStart: formatDateFromSeconds(date[0], 'weekday-medium'), - weekEnd: formatDateFromSeconds(date[1], 'weekday-medium'), + weekStart: formatDateFromSeconds(date[0], 'weekday-long'), + weekEnd: formatDateFromSeconds(date[1], 'weekday-long'), }) ) : ( <> {dateString} {obtainedAt && - ` ${replaceVariablesInText( - commonTexts.common.metadata.obtained, - { - date: formatDateFromSeconds(obtainedAt, 'weekday-medium'), - } - )}`} + ` ${replaceVariablesInText(commonTexts.common.metadata.obtained, { + date: formatDateFromSeconds(obtainedAt, 'weekday-long'), + })}`} {intervalString && `. ${intervalString}`} {dateString && source ? ' · ' : null} @@ -97,8 +85,7 @@ export function Metadata({ {`${commonTexts.common.metadata.source}: `} {dataSources.map((item, index) => ( - {index > 0 && - (index !== dataSources.length - 1 ? ' , ' : ' & ')} + {index > 0 && (index !== dataSources.length - 1 ? ' , ' : ' & ')} {item.text} ))} diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx index d97d2120a3..c9635928e8 100644 --- a/packages/app/src/components/page-information-block/components/metadata.tsx +++ b/packages/app/src/components/page-information-block/components/metadata.tsx @@ -1,10 +1,5 @@ import { colors } from '@corona-dashboard/common'; -import { - ChevronRight, - Clock, - Database, - MeerInformatie, -} from '@corona-dashboard/icons'; +import { ChevronRight, Clock, Database, MeerInformatie } from '@corona-dashboard/icons'; import css from '@styled-system/css'; import { Fragment } from 'react'; import styled from 'styled-components'; @@ -53,11 +48,7 @@ export function Metadata({ const { commonTexts } = useIntl(); const text = commonTexts.common.metadata; - const dateText = useFormatDateText( - dateOrRange, - dateOfInsertionUnix, - datumsText - ); + const dateText = useFormatDateText(dateOrRange, dateOfInsertionUnix, datumsText); return ( @@ -72,60 +63,34 @@ export function Metadata({ } items={dataSources} - label={ - referenceLink ? commonTexts.informatie_header.bron : text.source - } + label={referenceLink ? commonTexts.informatie_header.bron : text.source} accessibilityText={commonTexts.accessibility.text_source} accessibilitySubject={accessibilitySubject} referenceLink={referenceLink} /> )} - {referenceLink && ( - } - referenceLink={referenceLink} - /> - )} + {referenceLink && } referenceLink={referenceLink} />} - {moreInformationLabel && ( - } - items={moreInformationLink ? [moreInformationLink] : []} - label={moreInformationLabel} - /> - )} + {moreInformationLabel && } items={moreInformationLink ? [moreInformationLink] : []} label={moreInformationLabel} />} ); } -function useFormatDateText( - dateOrRange: number | DateRange, - dateOfInsertionUnix: number, - datumsText: string -) { +function useFormatDateText(dateOrRange: number | DateRange, dateOfInsertionUnix: number, datumsText: string) { const { formatDateFromSeconds } = useIntl(); if (typeof dateOrRange === 'number') { - const dateOfReport = formatDateFromSeconds(dateOrRange, 'weekday-medium'); - const dateOfInsertion = formatDateFromSeconds( - dateOfInsertionUnix, - 'weekday-medium' - ); + const dateOfReport = formatDateFromSeconds(dateOrRange, 'weekday-long'); + const dateOfInsertion = formatDateFromSeconds(dateOfInsertionUnix, 'weekday-long'); return replaceVariablesInText(datumsText, { dateOfReport, dateOfInsertion, }); } else { - const weekStart = formatDateFromSeconds( - dateOrRange.start, - 'weekday-medium' - ); - const weekEnd = formatDateFromSeconds(dateOrRange.end, 'weekday-medium'); - const dateOfInsertion = formatDateFromSeconds( - dateOfInsertionUnix, - 'weekday-medium' - ); + const weekStart = formatDateFromSeconds(dateOrRange.start, 'weekday-long'); + const weekEnd = formatDateFromSeconds(dateOrRange.end, 'weekday-long'); + const dateOfInsertion = formatDateFromSeconds(dateOfInsertionUnix, 'weekday-long'); return replaceVariablesInText(datumsText, { weekStart, weekEnd, @@ -146,14 +111,7 @@ interface MetadataItemProps { referenceLink?: string; } -function MetadataItem({ - icon, - label, - items, - referenceLink, - accessibilityText, - accessibilitySubject, -}: MetadataItemProps) { +function MetadataItem({ icon, label, items, referenceLink, accessibilityText, accessibilitySubject }: MetadataItemProps) { const { commonTexts } = useIntl(); return ( diff --git a/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx b/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx index 33b76b3dd3..6538a81422 100644 --- a/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx +++ b/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx @@ -27,7 +27,7 @@ interface TimelineTooltipContentProps { export const TimelineTooltipContent = ({ config, hasMultipleEvents, onNext, onPrev, onClose, currentEstimationLabel }: TimelineTooltipContentProps) => { const { commonTexts, formatDateFromSeconds } = useIntl(); const isTouch = useIsTouchDevice(); - const dateStr = [formatDateFromSeconds(config.start, 'medium'), config.end && formatDateFromSeconds(config.end, 'medium')].filter(isDefined).join(' - '); + const dateStr = [formatDateFromSeconds(config.start, 'weekday-long'), config.end && formatDateFromSeconds(config.end, 'weekday-long')].filter(isDefined).join(' - '); return ( {isTouch && ( - - {hasMultipleEvents && ( - - )} + + {hasMultipleEvents && } {dateStr} - {hasMultipleEvents && ( - - )} + {hasMultipleEvents && } )} @@ -85,15 +57,7 @@ export function TimelineTooltipContent({ {isTouch && ( - + {commonTexts.common.sluiten} @@ -103,20 +67,9 @@ export function TimelineTooltipContent({ ); } -function ChevronButton({ - onClick, - title, - rotate, -}: { - onClick: () => void; - title: string; - rotate?: boolean; -}) { +function ChevronButton({ onClick, title, rotate }: { onClick: () => void; title: string; rotate?: boolean }) { return ( - + diff --git a/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-container.tsx b/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-container.tsx index a6921178af..d15614bd65 100644 --- a/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-container.tsx +++ b/packages/app/src/components/time-series-chart/components/tooltip/tooltip-series-list-container.tsx @@ -1,16 +1,6 @@ -import { - colors, - isDateValue, - TimestampedValue, -} from '@corona-dashboard/common'; +import { colors, isDateValue, TimestampedValue } from '@corona-dashboard/common'; import { AnimatePresence } from 'framer-motion'; -import { - ComponentProps, - ReactNode, - useLayoutEffect, - useRef, - useState, -} from 'react'; +import { ComponentProps, ReactNode, useLayoutEffect, useRef, useState } from 'react'; import { Box, MotionBox } from '~/components/base'; import { Text } from '~/components/typography'; import { VisuallyHidden } from '~/components/visually-hidden'; @@ -33,11 +23,8 @@ export function TooltipSeriesListContainer({ const intl = useIntl(); const dateString = isDateValue(value) - ? intl.formatDateFromSeconds(value.date_unix) - : [ - intl.formatDateFromSeconds(value.date_start_unix), - intl.formatDateFromSeconds(value.date_end_unix), - ].join(' – '); + ? intl.formatDateFromSeconds(value.date_unix, 'weekday-long') + : [intl.formatDateFromSeconds(value.date_start_unix, 'weekday-long'), intl.formatDateFromSeconds(value.date_end_unix, 'weekday-long')].join(' – '); /** * The listRef is used to apply the width of the list to the tooltip @@ -62,39 +49,22 @@ export function TooltipSeriesListContainer({ {timespanAnnotation && ( - + {timespanAnnotation.shortLabel || timespanAnnotation.label} )} {isOutOfBounds && ( - + {options.outOfBoundsConfig?.tooltipLabel} )} {timelineEvent && ( - - }> - {timelineEvent.title} - + + }>{timelineEvent.title} )} @@ -107,15 +77,7 @@ export function TooltipSeriesListContainer({ } function AppearTransition(props: ComponentProps) { - return ( - - ); + return ; } function useInitialWidth() { diff --git a/packages/app/src/domain/sewer/sewer-chart/components/location-tooltip.tsx b/packages/app/src/domain/sewer/sewer-chart/components/location-tooltip.tsx index cc116cc27b..866bc3c8e3 100644 --- a/packages/app/src/domain/sewer/sewer-chart/components/location-tooltip.tsx +++ b/packages/app/src/domain/sewer/sewer-chart/components/location-tooltip.tsx @@ -13,21 +13,14 @@ import { MergedSewerType } from '../logic'; * A specific tooltip for when you've selected a location. It contains an icon * and some extra text. */ -export function LocationTooltip({ - data, -}: { - data: TooltipData; -}) { +export function LocationTooltip({ data }: { data: TooltipData }) { const { commonTexts, formatNumber, formatDateFromSeconds } = useIntl(); const config = data.config.find((x) => x.type === 'line'); - assert( - config, - `[${LocationTooltip.name}] Failed to find line configuration in location tooltip` - ); + assert(config, `[${LocationTooltip.name}] Failed to find line configuration in location tooltip`); - const dateString = formatDateFromSeconds(data.value.date_unix, 'day-month'); + const dateString = formatDateFromSeconds(data.value.date_unix, 'weekday-long'); return ( <> @@ -39,9 +32,7 @@ export function LocationTooltip({ {config.label} {commonTexts.waarde_annotaties.per_100_000_inwoners}: - - {formatNumber(data.value.selected_installation_rna_normalized)} - + {formatNumber(data.value.selected_installation_rna_normalized)} ); diff --git a/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx b/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx index 9aef57e2b1..9b9017acc9 100644 --- a/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx +++ b/packages/app/src/domain/vaccine/vaccine-administrations-kpi-section.tsx @@ -26,9 +26,7 @@ export function VaccineAdministrationsKpiSection({ >; text: SiteText['pages']['vaccinations_page']['nl']; }) { - const [selectedTab, setSelectedTab] = useState( - text.gezette_prikken.tab_first.title - ); + const [selectedTab, setSelectedTab] = useState(text.gezette_prikken.tab_first.title); return ( @@ -56,14 +54,10 @@ export function VaccineAdministrationsKpiSection({ {selectedTab == text.gezette_prikken.tab_first.title && ( <> - + - + @@ -101,14 +86,10 @@ export function VaccineAdministrationsKpiSection({ )} {selectedTab == text.gezette_prikken.tab_second.title && ( <> - + - + - {replaceVariablesInText( - isReported ? text.reported_until : text.estimated_until, - { - reportedDate: formatDateFromSeconds(date, 'weekday-medium'), - } - )} + {replaceVariablesInText(isReported ? text.reported_until : text.estimated_until, { + reportedDate: formatDateFromSeconds(date, 'weekday-long'), + })} ); diff --git a/packages/app/src/locale/use-lokalize-text.tsx b/packages/app/src/locale/use-lokalize-text.tsx index 0c6d2983fd..b6abdade25 100644 --- a/packages/app/src/locale/use-lokalize-text.tsx +++ b/packages/app/src/locale/use-lokalize-text.tsx @@ -37,7 +37,7 @@ export function useLokalizeText(initialLocale: LanguageKey) { const [locale, setLocale] = useState(initialLocale); const [text, setText] = useState(languages[locale]); const lokalizeTextsRef = useRef[]>([]); - const showSanityDebugToggle = enableHotReload || IS_STAGING_ENV; + const showSanityDebugToggle = true || enableHotReload || IS_STAGING_ENV; const [dataset, setDataset] = useState((process.env.NEXT_PUBLIC_SANITY_DATASET as Dataset | undefined) ?? 'development'); diff --git a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx index e33572c73b..09a3156ade 100644 --- a/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx +++ b/packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx @@ -146,7 +146,7 @@ function PositivelyTestedPeople(props: StaticProps) { {replaceComponentsInText(textGm.infected_kpi.last_value_text, { infected: {`${formatNumber(lastValue.infected)}`}, - dateTo: formatDateFromSeconds(lastValue.date_unix, 'weekday-medium'), + dateTo: formatDateFromSeconds(lastValue.date_unix, 'weekday-long'), })} {textGm.infected_kpi.link_cta && } diff --git a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx index 96214e7819..e06134e268 100644 --- a/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx +++ b/packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx @@ -119,8 +119,8 @@ function IntakeHospital(props: StaticProps) { ) ({ metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata, @@ -68,15 +27,9 @@ const selectLokalizeTexts = (siteText: SiteText) => ({ type LokalizeTexts = ReturnType; export const getStaticProps = createGetStaticProps( - ({ locale }: { locale: keyof Languages }) => - getLokalizeTexts(selectLokalizeTexts, locale), + ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale), getLastGeneratedDate, - selectNlData( - 'intensive_care_lcps', - 'intensive_care_nice', - 'intensive_care_nice_per_age_group', - 'difference.intensive_care_lcps__beds_occupied_covid' - ), + selectNlData('intensive_care_lcps', 'intensive_care_nice', 'intensive_care_nice_per_age_group', 'difference.intensive_care_lcps__beds_occupied_covid'), async (context: GetStaticPropsContext) => { const { content } = await createGetContent<{ parts: PagePartQueryResult; @@ -84,20 +37,13 @@ export const getStaticProps = createGetStaticProps( }>((context) => { return `{ "parts": ${getPagePartsQuery('intensive_care_page')}, - "elements": ${getElementsQuery( - 'nl', - ['intensive_care_nice', 'intensive_care_nice_per_age_group'], - context.locale - )} + "elements": ${getElementsQuery('nl', ['intensive_care_nice', 'intensive_care_nice_per_age_group'], context.locale)} }`; })(context); return { content: { - articles: getArticleParts( - content.parts.pageParts, - 'intensiveCarePageArticles' - ), + articles: getArticleParts(content.parts.pageParts, 'intensiveCarePageArticles'), links: getLinkParts(content.parts.pageParts, 'intensiveCarePageLinks'), elements: content.elements, }, @@ -106,38 +52,23 @@ export const getStaticProps = createGetStaticProps( ); function IntakeIntensiveCare(props: StaticProps) { - const [ - intensiveCareAdmissionsTimeframe, - setIntensiveCareAdmissionsTimeframe, - ] = useState(TimeframeOption.ALL); + const [intensiveCareAdmissionsTimeframe, setIntensiveCareAdmissionsTimeframe] = useState(TimeframeOption.ALL); - const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = - useState(TimeframeOption.ALL); + const [intensiveCareBedsTimeframe, setIntensiveCareBedsTimeframe] = useState(TimeframeOption.ALL); - const [admissionsPerAgeTimeframe, setAdmissionsPerAgeTimeframe] = - useState(TimeframeOption.ALL); + const [admissionsPerAgeTimeframe, setAdmissionsPerAgeTimeframe] = useState(TimeframeOption.ALL); const { commonTexts, formatPercentage, formatDateFromSeconds } = useIntl(); const { pageText, selectedNlData: data, content, lastGenerated } = props; - const { metadataTexts, textNl, textShared } = - useDynamicLokalizeTexts(pageText, selectLokalizeTexts); + const { metadataTexts, textNl, textShared } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts); const bedsLastValue = getLastFilledValue(data.intensive_care_lcps); const dataIntake = data.intensive_care_nice; - const intakeUnderReportedRange = getBoundaryDateStartUnix( - dataIntake.values, - countTrailingNullValues( - dataIntake.values, - 'admissions_on_date_of_admission_moving_average' - ) - ); + const intakeUnderReportedRange = getBoundaryDateStartUnix(dataIntake.values, countTrailingNullValues(dataIntake.values, 'admissions_on_date_of_admission_moving_average')); - const sevenDayAverageDates: [number, number] = [ - intakeUnderReportedRange - WEEK_IN_SECONDS, - intakeUnderReportedRange - DAY_IN_SECONDS, - ]; + const sevenDayAverageDates: [number, number] = [intakeUnderReportedRange - WEEK_IN_SECONDS, intakeUnderReportedRange - DAY_IN_SECONDS]; const metadata = { ...metadataTexts, @@ -152,12 +83,8 @@ function IntakeIntensiveCare(props: StaticProps) { @@ -202,30 +123,17 @@ function IntakeIntensiveCare(props: StaticProps) { source: textNl.bronnen.lnaz, }} > - {bedsLastValue.beds_occupied_covid !== null && - bedsLastValue.beds_occupied_covid_percentage !== null && ( - <> - - - - - )} + {bedsLastValue.beds_occupied_covid !== null && bedsLastValue.beds_occupied_covid_percentage !== null && ( + <> + + + + + )} @@ -250,21 +158,15 @@ function IntakeIntensiveCare(props: StaticProps) { end: Infinity, label: textNl.linechart_legend_inaccurate_label, shortLabel: commonTexts.common.incomplete, - cutValuesForMetricProperties: [ - 'admissions_on_date_of_admission_moving_average', - ], + cutValuesForMetricProperties: ['admissions_on_date_of_admission_moving_average'], }, ], - timelineEvents: getTimelineEvents( - content.elements.timeSeries, - 'intensive_care_nice' - ), + timelineEvents: getTimelineEvents(content.elements.timeSeries, 'intensive_care_nice'), }} seriesConfig={[ { type: 'line', - metricProperty: - 'admissions_on_date_of_admission_moving_average', + metricProperty: 'admissions_on_date_of_admission_moving_average', label: textNl.linechart_legend_trend_label_moving_average, color: colors.primary, }, @@ -336,10 +238,7 @@ function IntakeIntensiveCare(props: StaticProps) { }} values={data.intensive_care_nice_per_age_group.values} timeframe={admissionsPerAgeTimeframe} - timelineEvents={getTimelineEvents( - content.elements.timeSeries, - 'intensive_care_nice_per_age_group' - )} + timelineEvents={getTimelineEvents(content.elements.timeSeries, 'intensive_care_nice_per_age_group')} /> diff --git a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx index 41a0b14a66..ba0154552c 100644 --- a/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx +++ b/packages/app/src/pages/landelijk/positief-geteste-mensen.tsx @@ -182,7 +182,7 @@ function PositivelyTestedPeople(props: StaticProps) { ) { timeframeOptions={TimeframeOptionsList} title={textNl.ggd.linechart_percentage_titel} description={replaceVariablesInText(textNl.ggd.linechart_percentage_toelichting, { - date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-medium'), + date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-long'), tested_total: formatNumber(dataGgdLastValue.tested_total), infected_total: formatNumber(dataGgdLastValue.infected), })} @@ -271,7 +271,7 @@ function PositivelyTestedPeople(props: StaticProps) { timeframeOptions={TimeframeOptionsList} title={textNl.ggd.linechart_totaltests_titel} description={replaceVariablesInText(textNl.ggd.linechart_totaltests_toelichting, { - date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-medium'), + date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-long'), tested_total: formatNumber(dataGgdLastValue.tested_total), infected_total: formatNumber(dataGgdLastValue.infected), })} @@ -346,7 +346,7 @@ function PositivelyTestedPeople(props: StaticProps) { {replaceComponentsInText(textNl.map_last_value_text, { infected_per_100k: {`${formatNumber(dataOverallLastValue.infected_per_100k)}`}, - dateTo: formatDateFromSeconds(dataOverallLastValue.date_unix, 'weekday-medium'), + dateTo: formatDateFromSeconds(dataOverallLastValue.date_unix, 'weekday-long'), })} } diff --git a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx index defd1a3b8c..cc2dcbe906 100644 --- a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx +++ b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx @@ -125,8 +125,8 @@ function IntakeHospital(props: StaticProps) { {replaceComponentsInText(text.vr.kpi.deelgenomen_mensen, { number_of_participants: {formatNumber(behaviorLastValue.number_of_participants)}, - date_start: {formatDateFromSeconds(behaviorLastValue.date_start_unix)}, - date_end: {formatDateFromSeconds(behaviorLastValue.date_end_unix)}, + date_start: {formatDateFromSeconds(behaviorLastValue.date_start_unix, 'weekday-long')}, + date_end: {formatDateFromSeconds(behaviorLastValue.date_end_unix, 'weekday-long')}, })} diff --git a/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx b/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx index 99534c2815..01050fd3f0 100644 --- a/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx +++ b/packages/app/src/pages/veiligheidsregio/[code]/positief-geteste-mensen.tsx @@ -154,7 +154,7 @@ function PositivelyTestedPeople(props: StaticProps) { ) { timeframeOptions={TimeframeOptionsList} title={textVr.ggd.linechart_percentage_titel} description={replaceVariablesInText(textVr.ggd.linechart_percentage_toelichting, { - date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-medium'), + date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-long'), tested_total: formatNumber(dataGgdLastValue.tested_total), infected_total: formatNumber(dataGgdLastValue.infected), })} @@ -238,7 +238,7 @@ function PositivelyTestedPeople(props: StaticProps) { timeframeOptions={TimeframeOptionsList} title={textVr.ggd.linechart_totaltests_titel} description={replaceVariablesInText(textVr.ggd.linechart_totaltests_toelichting, { - date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-medium'), + date: formatDateFromSeconds(dataGgdLastValue.date_unix, 'weekday-long'), tested_total: formatNumber(dataGgdLastValue.tested_total), infected_total: formatNumber(dataGgdLastValue.infected), })} @@ -293,7 +293,7 @@ function PositivelyTestedPeople(props: StaticProps) { {replaceComponentsInText(textVr.map_last_value_text, { infected_per_100k: {`${formatNumber(dataOverallLastValue.infected_per_100k)}`}, - dateTo: formatDateFromSeconds(dataOverallLastValue.date_unix, 'weekday-medium'), + dateTo: formatDateFromSeconds(dataOverallLastValue.date_unix, 'weekday-long'), safetyRegion: vrName, })} diff --git a/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx b/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx index 6f78f5d4ac..c316f3a2ad 100644 --- a/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx +++ b/packages/app/src/pages/veiligheidsregio/[code]/ziekenhuis-opnames.tsx @@ -123,8 +123,8 @@ function IntakeHospital(props: StaticProps) {