feature/COR-1684-fix-null-value-for-archived-reproduction-data

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

@@ -0,0 +1,25 @@
+import { Tile } from '~/components/tile';
+import { space } from '~/style/theme';
+import { Box } from './base/box';
+
+interface IllustrationProps {
+  image: string;
+  alt: string;
+  description: string;
+  hasNoBorder?: boolean;
+  hasNoPaddingBottom?: boolean;
+}
+
+/**
+ * A image KPI tile which composes an image into the tile itself.
+ */
+export function IllustrationTile({ image, alt, description, hasNoBorder, hasNoPaddingBottom }: IllustrationProps) {
+  return (
+    <Tile hasNoBorder={hasNoBorder} hasNoPaddingBottom={hasNoPaddingBottom}>
+      <Box marginBottom={space[3]}>
+        <img width="315px" height="100px" loading="lazy" src={image} alt={alt} />
+      </Box>
+      <p>{description}</p>
+    </Tile>
+  );
+}

packages/app/src/components/index.ts

@@ -24,7 +24,6 @@ export { TwoKpiSection } from './two-kpi-section';
 export { LinkWithIcon } from './link-with-icon';
 export { ChoroplethLegenda } from './choropleth-legenda';
 export { SEOHead } from './seo-head';
-export { PageKpi } from './page-kpi';
 export { PageBarScale } from './page-barscale';
 export { VisuallyHidden } from './visually-hidden';
 export { Message } from './message';

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

@@ -17,6 +17,7 @@ interface KpiValueBaseProps {
   isMovingAverageDifference?: boolean;
   differenceFractionDigits?: number;
   numFractionDigits?: number;
+  showOldDateUnixForDifference?: boolean;
 }
 
 type DifferenceProps =
@@ -65,6 +66,7 @@ export function KpiValue({
   isAmount,
   differenceFractionDigits,
   numFractionDigits,
+  showOldDateUnixForDifference,
   ...otherProps
 }: KpiValueProps) {
   const { formatPercentage, formatNumber } = useIntl();
@@ -112,7 +114,13 @@ export function KpiValue({
           </Box>
         ) : isDefined(difference) ? (
           <Box paddingTop={space[2]}>
-            <TileDifference value={difference} isPercentage={isDefined(percentage) && !isDefined(absolute)} isAmount={isAmount} maximumFractionDigits={differenceFractionDigits} />
+            <TileDifference
+              value={difference}
+              isPercentage={isDefined(percentage) && !isDefined(absolute)}
+              isAmount={isAmount}
+              showOldDateUnix={showOldDateUnixForDifference}
+              maximumFractionDigits={differenceFractionDigits}
+            />
           </Box>
         ) : null)}
       {valueAnnotation && <ValueAnnotation>{valueAnnotation}</ValueAnnotation>}

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

@@ -2,12 +2,11 @@ import { getLastFilledValue } from '@corona-dashboard/common';
 import { Reproductiegetal } from '@corona-dashboard/icons';
 import { GetStaticPropsContext } from 'next';
 import { InView } from '~/components/in-view';
-import { KpiWithIllustrationTile } from '~/components/kpi-with-illustration-tile';
+import { IllustrationTile } from '~/components/illustration-tile';
 import { Markdown } from '~/components/markdown';
 import { PageArticlesTile } from '~/components/articles/page-articles-tile';
 import { PageFaqTile } from '~/components/page-faq-tile';
 import { PageInformationBlock } from '~/components/page-information-block';
-import { PageKpi } from '~/components/page-kpi';
 import { TileList } from '~/components/tile-list';
 import { TwoKpiSection } from '~/components/two-kpi-section';
 import { WarningTile } from '~/components/warning-tile';
@@ -24,6 +23,8 @@ import { ArticleParts, PagePartQueryResult } from '~/types/cms';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
 import { getPageInformationHeaderContent } from '~/utils/get-page-information-header-content';
+import { KpiTile } from '~/components/kpi-tile';
+import { KpiValue } from '~/components/kpi-value';
 
 const pageMetrics = ['reproduction_archived_20230711'];
 
@@ -104,31 +105,27 @@ const ReproductionIndex = (props: StaticProps<typeof getStaticProps>) => {
 
           {hasActiveWarningTile && <WarningTile isFullWidth message={textNl.belangrijk_bericht} variant="informational" />}
 
-          <TwoKpiSection>
-            <KpiWithIllustrationTile
+          <TwoKpiSection hasBorder>
+            <KpiTile
               title={textNl.barscale_titel}
               metadata={{
                 date: reproductionLastValue.date_unix,
                 source: textNl.bronnen.rivm,
                 obtainedAt: reproductionLastValue.date_of_insertion_unix,
               }}
-              illustration={{
-                image: '/images/reproductie-explainer.svg',
-                alt: textNl.reproductie_explainer_alt,
-                description: textNl.extra_uitleg,
-              }}
+              hasNoBorder
             >
-              <PageKpi
-                data={data}
-                metricName="reproduction_archived_20230711"
-                metricProperty="index_average"
-                differenceKey="reproduction__index_average_archived_20230711"
+              <KpiValue
+                absolute={reproductionLastValue.index_average}
                 differenceFractionDigits={2}
-                showOldDateUnix
-                isAmount={false}
+                difference={data.difference.reproduction__index_average_archived_20230711}
+                showOldDateUnixForDifference
+                isAmount
               />
               <Markdown content={textNl.barscale_toelichting} />
-            </KpiWithIllustrationTile>
+            </KpiTile>
+
+            <IllustrationTile image={'/images/reproductie-explainer.svg'} alt={textNl.reproductie_explainer_alt} description={textNl.extra_uitleg} hasNoBorder />
           </TwoKpiSection>
 
           <ReproductionChartTile data={reproductionValues} text={textNl} />