feature/COR-1369-date-formatting-adjustments

packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx

@@ -66,7 +66,7 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(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 });
   }
 

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<ServerData>(
-    getDataUrl(configuration, date),
-    (url: string) => fetch(url).then((_) => _.json())
-  );
+  const { data } = useSWRImmutable<ServerData>(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) && (
-            <PageKpi
-              data={allData}
-              metricName={configuration.metricName}
-              metricProperty={configuration.metricProperty}
-              isAmount={configuration.isAmount}
-            />
+            <PageKpi data={allData} metricName={configuration.metricName} metricProperty={configuration.metricProperty} isAmount={configuration.isAmount} />
           )}
         </KpiTile>
       </Box>
@@ -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 (
     <>
       <Box spacing={3}>
-        <Box
-          display="flex"
-          flexDirection="row"
-          flexWrap="nowrap"
-          alignItems="center"
-          spacingHorizontal={{ md: 2 }}
-          pr={{ md: 2 }}
-        >
+        <Box display="flex" flexDirection="row" flexWrap="nowrap" alignItems="center" spacingHorizontal={{ md: 2 }} pr={{ md: 2 }}>
           <div
             aria-hidden={true}
             css={css({
@@ -198,28 +156,14 @@ function KpiTile({
   );
 }
 
-function formatDateSpanString(
-  startDate: number,
-  endDate: number,
-  format: (v: number, s?: formatStyle) => 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;
 }

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') : '',
           }
         )}
       />

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({
           <Text color="gray7" variant="label1">
             {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) => (
                       <InlineText key={index}>
-                        {index > 0 &&
-                          (index !== dataSources.length - 1 ? ' , ' : ' & ')}
+                        {index > 0 && (index !== dataSources.length - 1 ? ' , ' : ' & ')}
                         {item.text}
                       </InlineText>
                     ))}

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 (
     <Box spacing={2}>
@@ -72,60 +63,34 @@ export function Metadata({
         <MetadataItem
           icon={<Database aria-hidden />}
           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 && (
-        <MetadataReference
-          icon={<MeerInformatie aria-hidden />}
-          referenceLink={referenceLink}
-        />
-      )}
+      {referenceLink && <MetadataReference icon={<MeerInformatie aria-hidden />} referenceLink={referenceLink} />}
 
-      {moreInformationLabel && (
-        <MetadataItem
-          icon={<MeerInformatie aria-hidden />}
-          items={moreInformationLink ? [moreInformationLink] : []}
-          label={moreInformationLabel}
-        />
-      )}
+      {moreInformationLabel && <MetadataItem icon={<MeerInformatie aria-hidden />} items={moreInformationLink ? [moreInformationLink] : []} label={moreInformationLabel} />}
     </Box>
   );
 }
 
-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 (

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 (
     <Box