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

Commit

Permalink
feat(formatting): added new WeekdayLong formatting option for appendi…
Browse files Browse the repository at this point in the history
…ng 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);
  • Loading branch information
VWSCoronaDashboard26 committed Jan 19, 2023
1 parent 52a080f commit 543733b
Show file tree
Hide file tree
Showing 21 changed files with 160 additions and 511 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}

Expand Down
102 changes: 23 additions & 79 deletions packages/app/src/components/cms/inline-kpi.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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)) {
Expand All @@ -56,8 +45,7 @@ export function InlineKpi({ configuration, date }: InlineKpiProps) {
...data,
},
difference: {
[configuration.differenceKey]:
differenceData[configuration.differenceKey],
[configuration.differenceKey]: differenceData[configuration.differenceKey],
},
}
: {
Expand All @@ -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 (
Expand All @@ -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>
Expand All @@ -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)
);
}

Expand All @@ -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({
Expand Down Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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') : '',
}
)}
/>
Expand Down
33 changes: 10 additions & 23 deletions packages/app/src/components/metadata.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}

Expand All @@ -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>
))}
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}>
Expand All @@ -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,
Expand All @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit 543733b

Please sign in to comment.