feature(COR-1956): Adjusted KPI's and Choropleths to new metadata

minvws · Mar 21, 2024 · 7498f39 · 7498f39
1 parent 697c182
commit 7498f39
Show file tree

Hide file tree

Showing 37 changed files with 347 additions and 207 deletions.
diff --git a/packages/app/src/components/kpi/bordered-kpi-section.tsx b/packages/app/src/components/kpi/bordered-kpi-section.tsx
@@ -9,11 +9,24 @@ import { BorderedKpiSectionProps } from './types';
 import { Markdown } from '../markdown';
 import { MetadataProps } from '../metadata/types';
 
-export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData, disclaimer }: BorderedKpiSectionProps) => {
+export const BorderedKpiSection = ({
+  title,
+  description,
+  source,
+  timeframePeriod,
+  dateOfInsertion,
+  isTimeframePeriodKpi,
+  tilesData,
+  disclaimer,
+  isArchived,
+}: BorderedKpiSectionProps) => {
   const metadata: MetadataProps = {
-    date: dateOrRange,
+    timeframePeriod: timeframePeriod,
     source: source,
     disclaimer: disclaimer,
+    isTimeframePeriodKpi: isTimeframePeriodKpi,
+    dateOfInsertion: dateOfInsertion,
+    isArchived: isArchived,
   };
 
   return (

diff --git a/packages/app/src/components/kpi/components/kpi-content.tsx b/packages/app/src/components/kpi/components/kpi-content.tsx
@@ -10,13 +10,15 @@ import { space } from '~/style/theme';
 import { TileData as KpiContentProps } from '../types';
 import { useIntl } from '~/intl';
 
-export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false, dateOrRange, source }: KpiContentProps) => {
+export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false, dateOfInsertion, dateOrRange, source }: KpiContentProps) => {
   const { commonTexts } = useIntl();
   const parsedBirthyearRange = birthyear ? parseBirthyearRange(birthyear) : null;
 
   const metadata: MetadataProps = {
-    date: dateOrRange,
+    timeframePeriod: dateOrRange,
     source: source,
+    isTimeframePeriodKpi: true,
+    dateOfInsertion: dateOfInsertion,
   };
 
   return (

diff --git a/packages/app/src/components/kpi/types.ts b/packages/app/src/components/kpi/types.ts
@@ -2,6 +2,7 @@ import { DifferenceInteger } from '@corona-dashboard/common';
 
 export type TileData = {
   dateOrRange?: number | DateRange;
+  dateOfInsertion?: number;
   source?: {
     href: string;
     text: string;
@@ -21,7 +22,10 @@ interface DateRange {
 }
 
 export interface BorderedKpiSectionProps {
-  dateOrRange?: number | DateRange;
+  timeframePeriod?: number | DateRange;
+  isTimeframePeriodKpi?: boolean;
+  dateOfInsertion?: number;
+  isArchived?: boolean;
   description: string;
   source?: {
     href: string;

diff --git a/packages/app/src/components/metadata/components/tile-footer-metadata.tsx b/packages/app/src/components/metadata/components/tile-footer-metadata.tsx
@@ -24,99 +24,86 @@ interface TileFooterMetadataProps extends MetadataProps {
  * @param {TileFooterMetadataProps} props - The properties that define the metadata items to be displayed.
  * @param {string|null} props.dateString - The string representation of the date or null.
  * @param {string} props.marginBottom - The margin-bottom property of the TileFooterMetadata component.
- * @param {string} props.datumsText - Textual representation of the metadata date.
- * @param {(number|DateRange|string)} props.date - Date of the metadata item. It can be a number, a DateRange object, or a string.
- * @param {DateRange} props.datePeriod - Date range for the metadata.
- * @param {number} props.dateOfInsertion - Unix timestamp of when the metadata was inserted.
- * @param {boolean} props.isArchivedGraph - Flag indicating whether the metadata is for an archived graph.
- * @param {Source} props.source - Source of the metadata.
  * @param {Source[]} [props.dataSources=[]] - Array of data sources for the metadata.
- * @param {string} [props.referenceLink] - Reference link for the metadata.
+ * @param {number} props.dateOfInsertion - Unix timestamp of when the metadata was inserted.
  * @param {string} props.disclaimer - Disclaimer text for the metadata.
+ * @param {boolean} props.isArchived - Flag indicating whether the metadata is for an archived KPI / Graph / Choropleth.
  * @param {number} props.obtainedAt - Unix timestamp of when the metadata was obtained.
- * @param {string} props.intervalCount - Interval count for the metadata.
+ * @param {string} [props.referenceLink] - Reference link for the metadata.
+ * @param {Source} props.source - Source of the metadata.
  * @returns {ReactElement} A React element that contains the tile footer with metadata items.
  */
 export function TileFooterMetadata({
+  dateString,
+  marginBottom,
   dataSources = [],
-  date,
   dateOfInsertion,
-  dateString,
-  datumsText,
   disclaimer,
-  intervalString,
-  isArchivedGraph,
-  marginBottom,
+  isArchived,
   obtainedAt,
   referenceLink,
   source,
-  timeframePeriod,
 }: TileFooterMetadataProps) {
   const { commonTexts, formatDateFromSeconds } = useIntl();
   const metadataText = commonTexts.common.metadata;
 
   return (
     <Box as="footer" marginTop={space[3]} marginBottom={marginBottom || { _: '0', sm: `-${space[3]}` }} gridArea="metadata">
       <Text color="gray7" variant="label1">
-        {datumsText && Array.isArray(date) ? (
-          replaceVariablesInText(datumsText, {
-            weekStart: formatDateFromSeconds(date[0], 'weekday-long'),
-            weekEnd: formatDateFromSeconds(date[1], 'weekday-long'),
-          })
-        ) : (
-          <>
-            {timeframePeriod && (
-              <Box display="flex" alignItems="flex-start" color="gray7">
-                <MetadataIcon>
-                  <Calendar aria-hidden color={colors.gray7} />
-                </MetadataIcon>
-                <Text variant="label1">
-                  {replaceVariablesInText(commonTexts.common.metadata.time_interval, {
-                    dateStart: formatDateFromSeconds(timeframePeriod.start, 'weekday-long'),
-                    dateEnd: formatDateFromSeconds(timeframePeriod.end, 'weekday-long'),
-                  })}
-                </Text>
-              </Box>
-            )}
+        <>
+          {dateString && (
+            <Box display="flex" alignItems="flex-start" color="gray7" marginY={space[1]}>
+              <MetadataIcon>
+                <Calendar aria-hidden color={colors.gray7} />
+              </MetadataIcon>
+              <Text variant="label1">{dateString}</Text>
+            </Box>
+          )}
+
+          {dateOfInsertion && (
+            <Box display="flex" alignItems="flex-start" color="gray7" marginY={space[1]}>
+              <MetadataIcon>
+                <Clock aria-hidden color={colors.gray7} />
+              </MetadataIcon>
+              <Text variant="label1">
+                {isArchived
+                  ? replaceVariablesInText(commonTexts.common.metadata.last_insertion_date_archived, {
+                      dateOfInsertion: formatDateFromSeconds(dateOfInsertion, 'weekday-long'),
+                    })
+                  : replaceVariablesInText(commonTexts.common.metadata.last_insertion_date, { dateOfInsertion: formatDateFromSeconds(dateOfInsertion, 'weekday-long') })}
+              </Text>
+            </Box>
+          )}
 
-            {dateOfInsertion && (
-              <Box display="flex" alignItems="flex-start" color="gray7" marginY={space[1]}>
-                <MetadataIcon>
-                  <Clock aria-hidden color={colors.gray7} />
-                </MetadataIcon>
-                <Text variant="label1">
-                  {isArchivedGraph
-                    ? replaceVariablesInText(commonTexts.common.metadata.last_insertion_date_archived, {
-                        dateOfInsertion: formatDateFromSeconds(dateOfInsertion, 'weekday-long'),
-                      })
-                    : replaceVariablesInText(commonTexts.common.metadata.last_insertion_date, { dateOfInsertion: formatDateFromSeconds(dateOfInsertion, 'weekday-long') })}
-                </Text>
-              </Box>
-            )}
+          {obtainedAt && (
+            <Box display="flex" alignItems="flex-start" color="gray7" marginY={space[1]}>
+              <MetadataIcon>
+                <Clock aria-hidden color={colors.gray7} />
+              </MetadataIcon>
+              <Text variant="label1">
+                {replaceVariablesInText(commonTexts.common.metadata.obtained, {
+                  date: formatDateFromSeconds(obtainedAt, 'weekday-long'),
+                })}
+              </Text>
+            </Box>
+          )}
 
-            {source ? (
-              <MetadataItem icon={<Database aria-hidden />} items={[source]} label={commonTexts.common.metadata.source} />
-            ) : dataSources && dataSources.length > 0 ? (
-              <MetadataItem
-                icon={<Database aria-hidden color={colors.gray7} />}
-                items={dataSources}
-                label={referenceLink ? commonTexts.informatie_header.bron : metadataText.source}
-              />
-            ) : null}
+          {source ? (
+            <MetadataItem icon={<Database aria-hidden />} items={[source]} label={commonTexts.common.metadata.source} />
+          ) : dataSources && dataSources.length > 0 ? (
+            <MetadataItem
+              icon={<Database aria-hidden color={colors.gray7} />}
+              items={dataSources}
+              label={referenceLink ? commonTexts.informatie_header.bron : metadataText.source}
+            />
+          ) : null}
 
-            {disclaimer && (
-              <Box paddingBottom={space[3]}>
-                <Markdown content={disclaimer}></Markdown>
-              </Box>
-            )}
-            {dateString}
-            {obtainedAt &&
-              ` ${replaceVariablesInText(commonTexts.common.metadata.obtained, {
-                date: formatDateFromSeconds(obtainedAt, 'axis-with-year'),
-              })}`}
-            {intervalString && `. ${intervalString}`}
-          </>
-        )}
+          {disclaimer && (
+            <Box paddingBottom={space[3]}>
+              <Markdown content={disclaimer}></Markdown>
+            </Box>
+          )}
+        </>
       </Text>
     </Box>
   );

diff --git a/packages/app/src/components/metadata/metadata.tsx b/packages/app/src/components/metadata/metadata.tsx
@@ -22,13 +22,12 @@ import React from 'react';
 export function Metadata({
   accessibilitySubject,
   dataSources = [],
-  date,
   dateOfInsertion,
   dateOrRange,
   datumsText,
   disclaimer,
   intervalCount,
-  isArchivedGraph = false,
+  isArchived = false,
   isPageInformationBlock,
   isTileFooter,
   jsonSources = [],
@@ -39,22 +38,29 @@ export function Metadata({
   referenceLink,
   source,
   timeframePeriod,
+  isTimeframePeriodKpi,
 }: MetadataProps) {
   const { commonTexts, formatDateFromSeconds } = useIntl();
 
-  const dateString =
-    typeof date === 'number'
+  const dateString = isTimeframePeriodKpi
+    ? typeof timeframePeriod === 'number'
       ? replaceVariablesInText(commonTexts.common.metadata.date, {
-          date: formatDateFromSeconds(date, 'axis-with-year'),
+          date: formatDateFromSeconds(timeframePeriod, 'weekday-long'),
         })
-      : typeof date === 'string'
-      ? date
-      : date && date.start && date.end
+      : typeof timeframePeriod === 'string'
+      ? timeframePeriod
+      : timeframePeriod && timeframePeriod.start && timeframePeriod.end
       ? replaceVariablesInText(commonTexts.common.metadata.date_from_to, {
-          startDate: formatDateFromSeconds(date.start, 'weekday-long'),
-          endDate: formatDateFromSeconds(date.end, 'weekday-long'),
+          startDate: formatDateFromSeconds(timeframePeriod.start, 'weekday-long'),
+          endDate: formatDateFromSeconds(timeframePeriod.end, 'weekday-long'),
         })
-      : null;
+      : null
+    : timeframePeriod && typeof timeframePeriod !== 'string' && typeof timeframePeriod !== 'number'
+    ? replaceVariablesInText(commonTexts.common.metadata.time_interval, {
+        dateStart: formatDateFromSeconds(timeframePeriod.start, 'weekday-long'),
+        dateEnd: formatDateFromSeconds(timeframePeriod.end, 'weekday-long'),
+      })
+    : null;
 
   const dateText = datumsText && dateOfInsertion && dateOrRange ? insertDateIntoString(formatDateFromSeconds, datumsText, dateOfInsertion, dateOrRange) : undefined;
 
@@ -93,16 +99,16 @@ export function Metadata({
           dateString={dateString}
           marginBottom={marginBottom}
           datumsText={datumsText}
-          date={date}
           timeframePeriod={timeframePeriod}
           dateOfInsertion={dateOfInsertion}
-          isArchivedGraph={isArchivedGraph}
+          isArchived={isArchived}
           source={source}
           dataSources={dataSources}
           referenceLink={referenceLink}
           disclaimer={disclaimer}
           obtainedAt={obtainedAt}
           intervalString={intervalString}
+          isTimeframePeriodKpi={isTimeframePeriodKpi}
         />
       )}
     </>

diff --git a/packages/app/src/components/metadata/types.ts b/packages/app/src/components/metadata/types.ts
@@ -49,7 +49,7 @@ export interface DateRange {
  * @property {string} [disclaimer] - Disclaimer text for the metadata.
  * @property {DateRange} [datePeriod] - Date range for the metadata.
  * @property {number} [dateOfInsertion] - Unix timestamp of when the metadata was inserted.
- * @property {boolean} [isArchivedGraph] - Flag indicating whether the metadata is for an archived graph.
+ * @property {boolean} [isArchived] - Flag indicating whether the metadata is for an archived graph.
  * @property {number|DateRange} [dateOrRange] - Date or date range of the metadata.
  * @property {string} [accessibilitySubject] - Accessibility subject text for the metadata.
  * @property {string} [moreInformationLabel] - Label for the "More Information" link.
@@ -59,7 +59,6 @@ export interface DateRange {
  * @memberof module:Metadata
  */
 export type MetadataProps = {
-  date?: number | DateRange | string;
   source?: Source;
   dataSources?: Source[];
   obtainedAt?: number;
@@ -68,9 +67,9 @@ export type MetadataProps = {
   datumsText?: string;
   intervalCount?: string;
   disclaimer?: string;
-  timeframePeriod?: DateRange;
+  timeframePeriod?: number | DateRange | string;
   dateOfInsertion?: number;
-  isArchivedGraph?: boolean;
+  isArchived?: boolean;
   dateOrRange?: number | DateRange;
   accessibilitySubject?: string;
   moreInformationLabel?: string;
@@ -80,4 +79,5 @@ export type MetadataProps = {
   };
   referenceLink?: string;
   jsonSources?: Datasource[];
+  isTimeframePeriodKpi?: boolean;
 } & MarginBottomProps;
diff --git a/packages/app/src/components/time-series-chart/time-series-chart.tsx b/packages/app/src/components/time-series-chart/time-series-chart.tsx
@@ -210,7 +210,7 @@ export function TimeSeriesChart<T extends TimestampedValue, C extends SeriesConf
 
   useEffect(() => {
     if (onHandleTimeframePeriodChange) {
-      if (values.length == 0) {
+      if (values.length === 0) {
         onHandleTimeframePeriodChange(undefined);
       } else if (isDateSpanSeries(values)) {
         onHandleTimeframePeriodChange({

diff --git a/packages/app/src/domain/tested/g-number-bar-chart-tile.tsx b/packages/app/src/domain/tested/g-number-bar-chart-tile.tsx
@@ -25,8 +25,7 @@ export function GNumberBarChartTile({ data: __data, timeframeInitialValue = Time
   const last_value = __data.last_value;
   const endDate = createDateFromUnixTimestamp(last_value.date_unix);
 
-  const metadataTimeframePeriod = { start: values[0].date_unix, end: values[values.length - 1].date_unix };
-  const metadataDateOfInsertion = values[values.length - 1].date_of_insertion_unix;
+  const metadataDateOfInsertion = last_value.date_of_insertion_unix;
 
   return (
     <ChartTile
@@ -35,11 +34,10 @@ export function GNumberBarChartTile({ data: __data, timeframeInitialValue = Time
       timeframeInitialValue={timeframeInitialValue}
       timeframeOptions={TimeframeOptionsList}
       metadata={{
-        date: last_value.date_of_insertion_unix,
         source: text.bronnen,
         dateOfInsertion: metadataDateOfInsertion,
-        timeframePeriod: metadataTimeframePeriod,
-        isArchivedGraph: true,
+        timeframePeriod: last_value.date_of_insertion_unix,
+        isArchived: true,
       }}
       onSelectTimeframe={setGnumberTimeframe}
     >

diff --git a/packages/app/src/domain/tested/reproduction-chart-tile.tsx b/packages/app/src/domain/tested/reproduction-chart-tile.tsx
@@ -36,7 +36,6 @@ export const ReproductionChartTile = ({
   );
   const last_value = last(values) as ArchivedNlReproductionValue;
 
-  const metadataTimeframePeriod = { start: values[0].date_unix, end: values[values.length - 1].date_unix };
   const metadataDateOfInsertion = data.last_value.date_of_insertion_unix;
 
   return (
@@ -46,11 +45,10 @@ export const ReproductionChartTile = ({
       timeframeOptions={timeframeOptions}
       timeframeInitialValue={timeframeInitialValue}
       metadata={{
-        date: last_value.date_of_insertion_unix,
         source: text.bronnen.rivm,
         dateOfInsertion: metadataDateOfInsertion,
-        timeframePeriod: metadataTimeframePeriod,
-        isArchivedGraph: true,
+        timeframePeriod: last_value.date_of_insertion_unix,
+        isArchived: true,
       }}
       onSelectTimeframe={setReproductionTimeframe}
     >