feature/COR-1953_non-archived-graphs-adjustments

packages/app/src/components/chart-tile-double-column.tsx

@@ -1,13 +1,13 @@
-import { ReactNode } from 'react';
-import css from '@styled-system/css';
 import { asResponsiveArray } from '~/style/utils';
 import { Box } from './base';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
 import { Heading } from './typography';
 import { Markdown } from './markdown';
-import { MetadataProps } from '~/components/metadata';
+import { MetadataProps } from './metadata/types';
+import { ReactNode } from 'react';
 import { space } from '~/style/theme';
+import css from '@styled-system/css';
 
 interface ChartTileDoubleColumnProps {
   title: string;

packages/app/src/components/chart-tile.tsx

@@ -1,15 +1,15 @@
-import { TimeframeOption } from '@corona-dashboard/common';
-import { ReactNode, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import theme, { space } from '~/style/theme';
 import { Box, Spacer } from './base';
 import { ChartTileToggle, ChartTileToggleProps } from './chart-tile-toggle';
 import { ChartTimeControls } from './chart-time-controls';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
-import { Markdown } from './markdown';
-import { MetadataProps } from '~/components/metadata';
 import { Heading } from './typography';
+import { Markdown } from './markdown';
+import { MetadataProps } from './metadata/types';
+import { ReactNode, useEffect, useState } from 'react';
+import { TimeframeOption } from '@corona-dashboard/common';
+import styled from 'styled-components';
+import theme, { space } from '~/style/theme';
 
 interface ChartTileProps {
   children: ReactNode;

packages/app/src/components/choropleth-tile.tsx

@@ -1,14 +1,15 @@
-import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
-import { space } from '~/style/theme';
-import { ChoroplethLegenda } from '~/components/choropleth-legenda';
-import { useBreakpoints } from '~/utils/use-breakpoints';
 import { Box } from './base';
+import { CalendarGear } from '@corona-dashboard/icons';
 import { ChartRegionControls, RegionControlOption } from './chart-region-controls';
+import { ChoroplethLegenda } from '~/components/choropleth-legenda';
+import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
-import { MetadataProps } from '~/components/metadata';
 import { Heading, Text } from './typography';
-import { CalendarGear } from '@corona-dashboard/icons';
+import { MetadataProps } from './metadata/types';
+import { space } from '~/style/theme';
+import { useBreakpoints } from '~/utils/use-breakpoints';
+
 type ChoroplethTileProps = {
   title: string;
   description?: string | React.ReactNode;

packages/app/src/components/fullscreen-chart-tile.tsx

@@ -1,18 +1,19 @@
-import { colors } from '@corona-dashboard/common';
+import { Box } from './base/box';
 import { Close, Expand } from '@corona-dashboard/icons';
-import { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { Tile } from '~/components/tile';
-import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
+import { colors } from '@corona-dashboard/common';
+import { IconButton } from './icon-button';
+import { Metadata } from '~/components/metadata';
+import { MetadataProps } from './metadata/types';
+import { Modal } from './modal';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+import { space } from '~/style/theme';
+import { Spacer } from './base';
+import { Tile } from '~/components/tile';
 import { useBreakpoints } from '~/utils/use-breakpoints';
+import { useEffect, useRef, useState } from 'react';
+import { useIntl } from '~/intl';
 import { usePrevious } from '~/utils/use-previous';
-import { Spacer } from './base';
-import { Box } from './base/box';
-import { IconButton } from './icon-button';
-import { Metadata, MetadataProps } from '~/components/metadata';
-import { Modal } from './modal';
+import styled from 'styled-components';
 
 interface FullscreenChartTileProps {
   children: React.ReactNode;

packages/app/src/components/kpi-tile.tsx

@@ -1,9 +1,11 @@
-import { Markdown } from '~/components/markdown';
-import { Tile } from '~/components/tile';
-import { fontSizes } from '~/style/theme';
 import { Box } from './base';
-import { Metadata, MetadataProps } from '~/components/metadata';
+import { fontSizes } from '~/style/theme';
 import { Heading } from './typography';
+import { Markdown } from '~/components/markdown';
+import { Metadata } from '~/components/metadata';
+import { MetadataProps } from './metadata/types';
+import { Tile } from '~/components/tile';
+
 interface KpiTileProps {
   title?: string;
   description?: string;

packages/app/src/components/kpi/bordered-kpi-section.tsx

@@ -3,11 +3,11 @@ import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { mediaQueries, space } from '~/style/theme';
 import { KpiTile } from '../kpi-tile';
-import { MetadataProps } from '~/components/metadata';
 import { TwoKpiSection } from '../two-kpi-section';
 import { KpiContent } from './components/kpi-content';
 import { BorderedKpiSectionProps } from './types';
 import { Markdown } from '../markdown';
+import { MetadataProps } from '../metadata/types';
 
 export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData, disclaimer }: BorderedKpiSectionProps) => {
   const metadata: MetadataProps = {

packages/app/src/components/kpi/components/kpi-content.tsx

@@ -1,14 +1,14 @@
+import { Bar } from '~/domain/vaccine/components/bar';
+import { BoldText } from '~/components/typography';
 import { Box } from '~/components/base';
 import { KpiValue } from '~/components/kpi-value';
 import { Markdown } from '~/components/markdown';
-import { BoldText } from '~/components/typography';
-import { Bar } from '~/domain/vaccine/components/bar';
+import { Metadata, MetadataProps } from '~/components';
 import { parseBirthyearRange } from '~/domain/vaccine/logic/parse-birthyear-range';
-import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
+import { space } from '~/style/theme';
 import { TileData as KpiContentProps } from '../types';
-import { Metadata, MetadataProps } from '~/components';
+import { useIntl } from '~/intl';
 
 export const KpiContent = ({ title, description, value, bar, birthyear, differenceValue, isPercentage = false, dateOrRange, source }: KpiContentProps) => {
   const { commonTexts } = useIntl();

packages/app/src/components/lokalize-metadata.tsx

@@ -1,7 +1,7 @@
-import { useIntl } from '~/intl';
 import { Box } from '~/components/base';
-import { Text } from '~/components/typography';
 import { space } from '~/style/theme';
+import { Text } from '~/components/typography';
+import { useIntl } from '~/intl';
 
 export interface MetadataProps {
   date: string;

packages/app/src/components/metadata/components/page-information-block-metadata.tsx

@@ -1,11 +1,11 @@
 import { Box } from '~/components/base';
 import { Clock, Database, MeerInformatie } from '@corona-dashboard/icons';
 import { colors } from '@corona-dashboard/common';
-import React from 'react';
 import { MetadataItem } from '~/components/metadata/components/items/metadata-item';
 import { MetadataProps } from '~/components';
-import { useIntl } from '~/intl';
 import { MetadataReference } from '~/components/metadata/components/items/metadata-reference';
+import { useIntl } from '~/intl';
+import React from 'react';
 
 interface PageInformationBlockMetadataProps extends MetadataProps {
   dateText: string | undefined;

packages/app/src/components/metadata/components/tile-footer-metadata.tsx

@@ -1,15 +1,14 @@
-import { space } from '~/style/theme';
-import { Text } from '~/components/typography';
-import { replaceVariablesInText } from '~/utils';
 import { Box } from '~/components/base';
 import { Calendar, Clock, Database } from '@corona-dashboard/icons';
 import { colors } from '@corona-dashboard/common';
-import { insertDateIntoString } from '~/components/metadata/logic/insert-date-into-string';
 import { Markdown, MetadataProps } from '~/components';
-import React from 'react';
+import { MetadataIcon } from '~/components/metadata/components/items/metadata-icon';
 import { MetadataItem } from '~/components/metadata/components/items/metadata-item';
+import { replaceVariablesInText } from '~/utils';
+import { space } from '~/style/theme';
+import { Text } from '~/components/typography';
 import { useIntl } from '~/intl';
-import { MetadataIcon } from '~/components/metadata/components/items/metadata-icon';
+import React from 'react';
 
 interface TileFooterMetadataProps extends MetadataProps {
   dateString: string | null;
@@ -28,7 +27,7 @@ interface TileFooterMetadataProps extends MetadataProps {
  * @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.dateOfInsertionUnix - Unix timestamp of when the metadata was inserted.
+ * @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.
@@ -39,19 +38,19 @@ interface TileFooterMetadataProps extends MetadataProps {
  * @returns {ReactElement} A React element that contains the tile footer with metadata items.
  */
 export function TileFooterMetadata({
+  dataSources = [],
+  date,
+  dateOfInsertion,
   dateString,
-  marginBottom,
   datumsText,
-  date,
-  datePeriod,
-  dateOfInsertionUnix,
-  isArchivedGraph,
-  source,
-  dataSources = [],
-  referenceLink,
   disclaimer,
-  obtainedAt,
   intervalString,
+  isArchivedGraph,
+  marginBottom,
+  obtainedAt,
+  referenceLink,
+  source,
+  timeframePeriod,
 }: TileFooterMetadataProps) {
   const { commonTexts, formatDateFromSeconds } = useIntl();
   const metadataText = commonTexts.common.metadata;
@@ -66,35 +65,33 @@ export function TileFooterMetadata({
           })
         ) : (
           <>
-            {datePeriod && (
+            {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(datePeriod.start, 'weekday-long'),
-                    dateEnd: formatDateFromSeconds(datePeriod.end, 'weekday-long'),
+                    dateStart: formatDateFromSeconds(timeframePeriod.start, 'weekday-long'),
+                    dateEnd: formatDateFromSeconds(timeframePeriod.end, 'weekday-long'),
                   })}
                 </Text>
               </Box>
             )}
 
-            {dateOfInsertionUnix && (
-              <MetadataItem
-                icon={<Clock aria-hidden colors={colors.gray7} />}
-                items={[
-                  {
-                    text: insertDateIntoString(
-                      formatDateFromSeconds,
-                      isArchivedGraph ? commonTexts.common.metadata.last_insertion_date_archived : commonTexts.common.metadata.last_insertion_date,
-                      dateOfInsertionUnix,
-                      dateOfInsertionUnix,
-                      'weekday-long'
-                    ),
-                  },
-                ]}
-              />
+            {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>
             )}
 
             {source ? (

packages/app/src/components/metadata/metadata.tsx

@@ -1,14 +1,14 @@
 import { External as ExternalLinkIcon } from '@corona-dashboard/icons';
 import { ExternalLink } from '~/components/external-link';
-import { Text } from '../typography';
-import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
-import { space } from '~/style/theme';
-import { useIntl } from '~/intl';
-import React from 'react';
 import { insertDateIntoString } from '~/components/metadata/logic/insert-date-into-string';
 import { MetadataProps } from './types';
 import { PageInformationBlockMetadata } from '~/components/metadata/components/page-information-block-metadata';
+import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+import { space } from '~/style/theme';
+import { Text } from '../typography';
 import { TileFooterMetadata } from '~/components/metadata/components/tile-footer-metadata';
+import { useIntl } from '~/intl';
+import React from 'react';
 
 /**
  * @function
@@ -20,25 +20,25 @@ import { TileFooterMetadata } from '~/components/metadata/components/tile-footer
  * @returns {JSX.Element} JSX Element that represents metadata information.
  */
 export function Metadata({
+  accessibilitySubject,
   dataSources = [],
   date,
-  dateOfInsertionUnix,
-  datePeriod,
+  dateOfInsertion,
+  dateOrRange,
   datumsText,
   disclaimer,
   intervalCount,
   isArchivedGraph = false,
-  isTileFooter,
   isPageInformationBlock,
+  isTileFooter,
+  jsonSources = [],
   marginBottom,
-  obtainedAt,
-  source,
-  dateOrRange,
-  accessibilitySubject,
   moreInformationLabel,
   moreInformationLink,
+  obtainedAt,
   referenceLink,
-  jsonSources = [],
+  source,
+  timeframePeriod,
 }: MetadataProps) {
   const { commonTexts, formatDateFromSeconds } = useIntl();
 
@@ -56,7 +56,7 @@ export function Metadata({
         })
       : null;
 
-  const dateText = datumsText && dateOfInsertionUnix && dateOrRange ? insertDateIntoString(formatDateFromSeconds, datumsText, dateOfInsertionUnix, dateOrRange) : undefined;
+  const dateText = datumsText && dateOfInsertion && dateOrRange ? insertDateIntoString(formatDateFromSeconds, datumsText, dateOfInsertion, dateOrRange) : undefined;
 
   const intervalString =
     intervalCount &&
@@ -94,8 +94,8 @@ export function Metadata({
           marginBottom={marginBottom}
           datumsText={datumsText}
           date={date}
-          datePeriod={datePeriod}
-          dateOfInsertionUnix={dateOfInsertionUnix}
+          timeframePeriod={timeframePeriod}
+          dateOfInsertion={dateOfInsertion}
           isArchivedGraph={isArchivedGraph}
           source={source}
           dataSources={dataSources}

packages/app/src/components/metadata/types.ts

@@ -48,7 +48,7 @@ export interface DateRange {
  * @property {string} [intervalCount] - Interval count for the metadata.
  * @property {string} [disclaimer] - Disclaimer text for the metadata.
  * @property {DateRange} [datePeriod] - Date range for the metadata.
- * @property {number} [dateOfInsertionUnix] - Unix timestamp of when the metadata was inserted.
+ * @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 {number|DateRange} [dateOrRange] - Date or date range of the metadata.
  * @property {string} [accessibilitySubject] - Accessibility subject text for the metadata.
@@ -68,8 +68,8 @@ export type MetadataProps = {
   datumsText?: string;
   intervalCount?: string;
   disclaimer?: string;
-  datePeriod?: DateRange;
-  dateOfInsertionUnix?: number;
+  timeframePeriod?: DateRange;
+  dateOfInsertion?: number;
   isArchivedGraph?: boolean;
   dateOrRange?: number | DateRange;
   accessibilitySubject?: string;