bugfix/COR-1951_COR-1956_metadata-adjustment-and-default-time-frame-option-selection

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

@@ -19,6 +19,7 @@ export const KpiContent = ({ title, description, value, bar, birthyear, differen
     source: source,
     isTimeframePeriodKpi: true,
     dateOfInsertion: dateOfInsertion,
+    isArchived: true,
   };
 
   return (

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

@@ -28,31 +28,26 @@ interface TileFooterMetadataProps extends MetadataProps {
  * @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.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 = [],
-  dateOfInsertion,
-  disclaimer,
-  isArchived,
-  obtainedAt,
-  referenceLink,
-  source,
-}: TileFooterMetadataProps) {
+export function TileFooterMetadata({ dateString, marginBottom, dataSources = [], dateOfInsertion, disclaimer, isArchived, referenceLink, source }: 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">
         <>
+          {disclaimer && (
+            <Box paddingBottom={space[2]}>
+              <Markdown content={disclaimer}></Markdown>
+            </Box>
+          )}
+
           {dateString && (
-            <Box display="flex" alignItems="flex-start" color="gray7" marginY={space[1]}>
+            <Box display="flex" alignItems="flex-start" color="gray7" marginBottom={space[1]}>
               <MetadataIcon>
                 <Calendar aria-hidden color={colors.gray7} />
               </MetadataIcon>
@@ -61,7 +56,7 @@ export function TileFooterMetadata({
           )}
 
           {dateOfInsertion && (
-            <Box display="flex" alignItems="flex-start" color="gray7" marginY={space[1]}>
+            <Box display="flex" alignItems="flex-start" color="gray7" marginBottom={space[1]}>
               <MetadataIcon>
                 <Clock aria-hidden color={colors.gray7} />
               </MetadataIcon>
@@ -75,34 +70,20 @@ export function TileFooterMetadata({
             </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>
-          )}
-
+          {/**
+           * Since all components of a specific page use the same lokalize key, the refactored version of the metadata
+           * component will transform all sources to external links. In order to avoid that, we reset the .href property
+           * when we pass the items to the MetadataItem component.
+           */}
           {source ? (
-            <MetadataItem icon={<Database aria-hidden />} items={[source]} label={commonTexts.common.metadata.source} />
+            <MetadataItem icon={<Database aria-hidden />} items={[{ ...source, href: '' }]} 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>
-          )}
         </>
       </Text>
     </Box>

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

@@ -34,7 +34,6 @@ export function Metadata({
   marginBottom,
   moreInformationLabel,
   moreInformationLink,
-  obtainedAt,
   referenceLink,
   source,
   timeframePeriod,
@@ -106,7 +105,6 @@ export function Metadata({
           dataSources={dataSources}
           referenceLink={referenceLink}
           disclaimer={disclaimer}
-          obtainedAt={obtainedAt}
           intervalString={intervalString}
           isTimeframePeriodKpi={isTimeframePeriodKpi}
         />

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

@@ -41,7 +41,6 @@ export interface DateRange {
  * @property {number|DateRange|string} [date] - Date of the metadata item. It can be a number, a DateRange object, or a string.
  * @property {Source} [source] - Source of the metadata.
  * @property {Source[]} [dataSources] - Array of data sources for the metadata.
- * @property {number} [obtainedAt] - Unix timestamp of when the metadata was obtained.
  * @property {boolean} [isTileFooter] - Flag indicating whether the metadata is for a tile footer.
  * @property {boolean} [isPageInformationBlock] - Flag indicating whether the metadata is for a page information block.
  * @property {string} [datumsText] - Textual representation of the metadata date.
@@ -61,7 +60,6 @@ export interface DateRange {
 export type MetadataProps = {
   source?: Source;
   dataSources?: Source[];
-  obtainedAt?: number;
   isTileFooter?: boolean;
   isPageInformationBlock?: boolean;
   datumsText?: string;

packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx

@@ -152,6 +152,7 @@ export const SewerChart = ({ accessibility, dataAverages, dataPerInstallation, t
         source: text.source,
         timeframePeriod: sewerChartTimeframePeriod,
         dateOfInsertion: metadataLastInsertionDate,
+        isArchived: true,
       }}
       description={text.description}
     >

packages/app/src/domain/tested/reproduction-chart-tile.tsx

@@ -34,7 +34,7 @@ export const ReproductionChartTile = ({ data, timelineEvents, text }: Reproducti
       metadata={{
         source: text.bronnen.rivm,
         dateOfInsertion: metadataDateOfInsertion,
-        timeframePeriod: last_value.date_of_insertion_unix,
+        timeframePeriod: { start: values[0].date_unix, end: last_value.date_unix },
         isArchived: true,
       }}
     >

packages/app/src/domain/variants/variants-table-tile.tsx

@@ -28,7 +28,7 @@ interface VariantsTableTileProps {
   dates: {
     date_start_unix: number;
     date_end_unix: number;
-    date_of_report_unix: number;
+    date_of_insertion_unix: number;
   };
   children?: ReactNode;
 }
@@ -70,7 +70,7 @@ interface VariantsTableTileWithDataProps {
   dates: {
     date_start_unix: number;
     date_end_unix: number;
-    date_of_report_unix: number;
+    date_of_insertion_unix: number;
   };
   children?: ReactNode;
 }
@@ -81,8 +81,9 @@ function VariantsTableTileWithData({ text, sampleThresholdPassed, source, data,
   const metadata: MetadataProps = {
     timeframePeriod: { start: dates.date_start_unix, end: dates.date_end_unix },
     source,
-    obtainedAt: dates.date_of_report_unix,
+    dateOfInsertion: dates.date_of_insertion_unix,
     isTimeframePeriodKpi: true,
+    isArchived: true,
   };
 
   const [date_start, date_end] = formatDateSpan({ seconds: dates.date_start_unix }, { seconds: dates.date_end_unix });

packages/app/src/pages/landelijk/de-coronaprik.tsx

@@ -231,7 +231,9 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
                 start: archivedData.vaccine_administered_last_timeframe_archived_20240117.date_start_unix,
                 end: archivedData.vaccine_administered_last_timeframe_archived_20240117.date_end_unix,
               },
-              obtainedAt: archivedData.vaccine_administered_last_timeframe_archived_20240117.date_of_insertion_unix,
+              dateOfInsertion: archivedData.vaccine_administered_last_timeframe_archived_20240117.date_of_insertion_unix,
+              isArchived: true,
+              isTimeframePeriodKpi: true,
             }}
           />
 
@@ -254,6 +256,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
             source={textShared.vaccination_grade_tile.fully_vaccinated_labels.source}
             timeframePeriod={vaccineCoverageEstimatedFullyVaccinated.date_unix}
             isTimeframePeriodKpi={true}
+            isArchived={true}
             dateOfInsertion={vaccineCoverageEstimatedFullyVaccinated.date_of_insertion_unix}
             tilesData={[
               {
@@ -291,6 +294,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
               ageGroupLabel: commonTexts.choropleth.vaccination_coverage.shared.dropdown_label_age_group_select,
             }}
             isPrimarySeries
+            isArchived
           />
 
           <PrimarySeriesShotCoveragePerAgeGroup
@@ -304,6 +308,7 @@ function VaccinationPage(props: StaticProps<typeof getStaticProps>) {
               isTimeframePeriodKpi: true,
               dateOfInsertion: archivedData.vaccine_coverage_per_age_group_archived_20231004.values[0].date_of_insertion_unix,
               source: textNl.vaccination_coverage.bronnen.rivm,
+              isArchived: true,
             }}
             values={archivedData.vaccine_coverage_per_age_group_archived_20231004.values}
           />

packages/app/src/pages/landelijk/gehandicaptenzorg.tsx

@@ -263,7 +263,16 @@ function DisabilityCare(props: StaticProps<typeof getStaticProps>) {
             referenceLink={textNl.oversterfte.reference.href}
           />
 
-          <ChartTile metadata={{ source: textNl.oversterfte.bronnen.rivm }} title={textNl.oversterfte.linechart_titel} description={textNl.oversterfte.linechart_description}>
+          <ChartTile
+            metadata={{
+              source: textNl.oversterfte.bronnen.rivm,
+              timeframePeriod: { start: values[0].date_unix, end: values[values.length - 1].date_unix },
+              dateOfInsertion: values[values.length - 1].date_of_insertion_unix,
+              isArchived: true,
+            }}
+            title={textNl.oversterfte.linechart_titel}
+            description={textNl.oversterfte.linechart_description}
+          >
             <TimeSeriesChart
               accessibility={{
                 key: 'disability_care_deceased_over_time_chart',

packages/app/src/pages/landelijk/infectieradar.tsx

@@ -67,10 +67,10 @@ const InfectionRadar = (props: StaticProps<typeof getStaticProps>) => {
 
   const reverseRouter = useReverseRouter();
 
-  const [confirmedCasesSelfTestedTimeframe, setConfirmedCasesSelfTestedTimeframe] = useState<TimeframeOption>(TimeframeOption.SIX_MONTHS);
+  const [confirmedCasesSelfTestedTimeframe, setConfirmedCasesSelfTestedTimeframe] = useState<TimeframeOption>(TimeframeOption.ALL);
   const [confirmedCasesSelfTestedTimeframePeriod, setConfirmedCasesSelfTestedTimeframePeriod] = useState<DateRange | undefined>({ start: 0, end: 0 });
 
-  const [confirmedCasesCovidSymptomsPerAgeTimeFrame, setConfirmedCasesCovidSymptomsPerAgeTimeFrame] = useState<TimeframeOption>(TimeframeOption.THREE_MONTHS);
+  const [confirmedCasesCovidSymptomsPerAgeTimeFrame, setConfirmedCasesCovidSymptomsPerAgeTimeFrame] = useState<TimeframeOption>(TimeframeOption.ALL);
   const [confirmedCasesCovidSymptomsPerAgeTimeframePeriod, setConfirmedCasesCovidSymptomsPerAgeTimeframePeriod] = useState<DateRange | undefined>({ start: 0, end: 0 });
 
   const { commonTexts } = useIntl();
@@ -130,6 +130,7 @@ const InfectionRadar = (props: StaticProps<typeof getStaticProps>) => {
                 dateOfInsertion: data.self_test_overall.last_value.date_of_insertion_unix,
                 source: textNl.sources.self_test,
                 isTimeframePeriodKpi: true,
+                isArchived: true,
               }}
               description={replaceVariablesInText(textNl.kpi_tile.infected_participants_percentage.description, {
                 infectedPercentage: totalInfectedPercentage,
@@ -144,6 +145,7 @@ const InfectionRadar = (props: StaticProps<typeof getStaticProps>) => {
                 dateOfInsertion: data.self_test_overall.last_value.date_of_insertion_unix,
                 source: textNl.sources.self_test,
                 isTimeframePeriodKpi: true,
+                isArchived: true,
               }}
               description={textNl.kpi_tile.total_participants.description}
             >
@@ -158,6 +160,7 @@ const InfectionRadar = (props: StaticProps<typeof getStaticProps>) => {
               source: textNl.sources.self_test,
               timeframePeriod: confirmedCasesSelfTestedTimeframePeriod,
               dateOfInsertion: getLastInsertionDateOfPage(data, ['self_test_overall']),
+              isArchived: true,
             }}
             timeframeOptions={TimeframeOptionsList}
             timeframeInitialValue={confirmedCasesSelfTestedTimeframe}

packages/app/src/pages/landelijk/patienten-in-beeld.tsx

@@ -203,6 +203,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
                   source: textNl.sources.nice,
                   dateOfInsertion: lastInsertionDateHospitalAdmissionsPerAgeGroupOverTime,
                   timeframePeriod: hospitalAdmissionsPerAgeGroupOverTimeTimeframePeriod,
+                  isArchived: true,
                 }}
                 onSelectTimeframe={setHospitalAdmissionsPerAgeGroupOverTimeTimeframe}
                 toggle={{
@@ -233,6 +234,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
                   source: textNl.sources.nice,
                   dateOfInsertion: lastInsertionDateIntensiveCareAdmissionsPerAgeGroupOverTime,
                   timeframePeriod: intensiveCareAdmissionsPerAgeGroupOverTimeTimeframePeriod,
+                  isArchived: true,
                 }}
                 onSelectTimeframe={setIntensiveCareAdmissionsPerAgeGroupOverTimeTimeframe}
                 toggle={{
@@ -263,6 +265,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
                   source: textNl.sources.nice,
                   dateOfInsertion: lastInsertionDateHospitalAdmissionsOverTime,
                   timeframePeriod: hospitalAdmissionsOverTimeTimeframePeriod,
+                  isArchived: true,
                 }}
                 timeframeOptions={TimeframeOptionsList}
                 timeframeInitialValue={TimeframeOption.ALL}
@@ -318,6 +321,7 @@ const PatientsPage = (props: StaticProps<typeof getStaticProps>) => {
                   source: textNl.sources.nice,
                   dateOfInsertion: lastInsertionDateIntensiveCareAdmissionsOverTime,
                   timeframePeriod: intensiveCareAdmissionsOverTimeTimeframePeriod,
+                  isArchived: true,
                 }}
                 timeframeOptions={TimeframeOptionsList}
                 timeframeInitialValue={TimeframeOption.ALL}

packages/app/src/pages/landelijk/reproductiegetal.tsx

@@ -114,8 +114,10 @@ const ReproductionIndex = (props: StaticProps<typeof getStaticProps>) => {
               title={textNl.barscale_titel}
               metadata={{
                 timeframePeriod: reproductionLastValue.date_unix,
-                obtainedAt: reproductionLastValue.date_of_insertion_unix,
+                dateOfInsertion: reproductionLastValue.date_of_insertion_unix,
                 source: textNl.bronnen.rivm,
+                isTimeframePeriodKpi: true,
+                isArchived: true,
               }}
               hasNoBorder
               description={textNl.barscale_toelichting}

packages/app/src/pages/landelijk/rioolwater.tsx

@@ -125,6 +125,7 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
                 dateOfInsertion: sewerAverages.last_value.date_of_insertion_unix,
                 source: textNl.bronnen.rivm,
                 isTimeframePeriodKpi: true,
+                isArchived: true,
               }}
             >
               <KpiValue
@@ -162,6 +163,7 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
               dateOfInsertion: choropleth.gm.sewer[0].date_of_insertion_unix,
               source: textNl.bronnen.rivm,
               isTimeframePeriodKpi: true,
+              isArchived: true,
             }}
             valueAnnotation={commonTexts.waarde_annotaties.riool_normalized}
             legend={{

packages/app/src/pages/landelijk/sterfte.tsx

@@ -132,7 +132,12 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
           {hasActiveWarningTile && <WarningTile isFullWidth message={textShared.notification.message} variant="informational" />}
 
           <ChartTile
-            metadata={{ source: textNl.section_sterftemonitor.bronnen.cbs, timeframePeriod: deceasedOverTimeTimeframePeriod, dateOfInsertion: deceasedOverTimeLastInsertionDate }}
+            metadata={{
+              source: textNl.section_sterftemonitor.bronnen.cbs,
+              timeframePeriod: deceasedOverTimeTimeframePeriod,
+              dateOfInsertion: deceasedOverTimeLastInsertionDate,
+              isArchived: true,
+            }}
             title={textNl.section_sterftemonitor.deceased_monitor_chart_title}
             description={textNl.section_sterftemonitor.deceased_monitor_chart_description}
           >
@@ -219,9 +224,10 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
                   title={textNl.section_deceased_rivm.kpi_covid_daily_title}
                   metadata={{
                     timeframePeriod: dataRivm.last_value.date_unix,
-                    obtainedAt: dataRivm.last_value.date_of_insertion_unix,
+                    dateOfInsertion: dataRivm.last_value.date_of_insertion_unix,
                     source: textNl.section_deceased_rivm.bronnen.rivm,
                     isTimeframePeriodKpi: true,
+                    isArchived: true,
                   }}
                   description={textNl.section_deceased_rivm.kpi_covid_daily_description}
                 >
@@ -231,9 +237,10 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
                   title={textNl.section_deceased_rivm.kpi_covid_total_title}
                   metadata={{
                     timeframePeriod: dataRivm.last_value.date_unix,
-                    obtainedAt: dataRivm.last_value.date_of_insertion_unix,
+                    dateOfInsertion: dataRivm.last_value.date_of_insertion_unix,
                     source: textNl.section_deceased_rivm.bronnen.rivm,
                     isTimeframePeriodKpi: true,
+                    isArchived: true,
                   }}
                   description={textNl.section_deceased_rivm.kpi_covid_total_description}
                 >
@@ -282,6 +289,7 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
                 title={textNl.age_groups.title}
                 description={textNl.age_groups.description}
                 metadata={{
+                  timeframePeriod: dataDeceasedPerAgeGroup.values[dataDeceasedPerAgeGroup.values.length - 1].date_unix,
                   dateOfInsertion: lastdeceasedPerAgeGroupInsertionDate,
                   source: textNl.age_groups.bronnen.rivm,
                   isArchived: true,

packages/app/src/pages/landelijk/thuiswonende-70-plussers.tsx

@@ -205,7 +205,7 @@ function ElderlyAtHomeNationalPage(props: StaticProps<typeof getStaticProps>) {
           />
           <ChartTile
             title={textNl.section_deceased.line_chart_daily_title}
-            metadata={{ source: textNl.section_positive_tested.bronnen.rivm, dateOfInsertion: lastInsertionDateOfPage, timeframePeriod: metadataTimeframePeriod }}
+            metadata={{ source: textNl.section_positive_tested.bronnen.rivm, dateOfInsertion: lastInsertionDateOfPage, timeframePeriod: metadataTimeframePeriod, isArchived: true }}
             description={textNl.section_deceased.line_chart_daily_description}
           >
             <TimeSeriesChart