From 726ee16fa2a597496c8b7a5d8a232deceb40c3dd Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 4 Nov 2022 12:13:37 +0100
Subject: [PATCH 01/13] WIP

---
 .../tooltips/choropleth-tooltip.tsx           | 79 ++++++-------------
 .../choropleth/tooltips/tooltip-content.tsx   | 16 +---
 .../tooltips/tooltip-notification.tsx         | 17 ++++
 .../choropleth/tooltips/tooltip-subject.tsx   | 56 ++++++-------
 .../choropleth/tooltips/tooltip.tsx           | 46 ++---------
 5 files changed, 75 insertions(+), 139 deletions(-)
 create mode 100644 packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index c2281a4448..721b2e79d2 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -7,6 +7,7 @@ import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { ChoroplethDataItem } from '../logic';
 import { TooltipContent } from './tooltip-content';
 import { TooltipSubject } from './tooltip-subject';
+import { TooltipNotification } from './tooltip-notification';
 import { TooltipData } from './types';
 
 type ChoroplethDataItemProps<T extends ChoroplethDataItem> = {
@@ -14,61 +15,29 @@ type ChoroplethDataItemProps<T extends ChoroplethDataItem> = {
   dataFormatters?: Partial<Record<keyof T, (input: string | number) => string>>;
 };
 
-export function ChoroplethTooltip<T extends ChoroplethDataItem>(
-  props: ChoroplethDataItemProps<T>
-) {
+export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: ChoroplethDataItemProps<T>) {
   const { data, dataFormatters } = props;
-  const {
-    commonTexts,
-    formatNumber,
-    formatPercentage,
-    formatDate,
-    formatDateFromSeconds,
-    formatDateFromMilliseconds,
-    formatRelativeDate,
-    formatDateSpan,
-  } = useIntl();
+  const { commonTexts, formatNumber, formatPercentage, formatDate, formatDateFromSeconds, formatDateFromMilliseconds, formatRelativeDate, formatDateSpan } = useIntl();
 
   const text = commonTexts.choropleth_tooltip;
 
-  const subject = (
-    text as unknown as Record<string, Record<string, Record<string, string>>>
-  )[data.map]?.[data.dataConfig.metricProperty as string]?.subject;
-  assert(
-    isDefined(subject),
-    `[${
-      ChoroplethTooltip.name
-    }] No tooltip subject found in siteText.choropleth_tooltip.${
-      data.map
-    }.${data.dataConfig.metricProperty.toString()}`
-  );
+  const subject = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]?.subject;
+  assert(isDefined(subject), `[${ChoroplethTooltip.name}] No tooltip subject found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`);
 
-  const tooltipContent = (
-    text as unknown as Record<string, Record<string, Record<string, string>>>
-  )[data.map]?.[data.dataConfig.metricProperty as string]?.content;
-  assert(
-    isDefined(tooltipContent),
-    `[${
-      ChoroplethTooltip.name
-    }] No tooltip content found in siteText.choropleth_tooltip.${
-      data.map
-    }.${data.dataConfig.metricProperty.toString()}`
-  );
+  const tooltipContent = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]?.content;
+  assert(isDefined(tooltipContent), `[${ChoroplethTooltip.name}] No tooltip content found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`);
 
   const tooltipVars = {
     ...data.dataItem,
     ...data.dataOptions.tooltipVariables,
   } as Record<string, string | number>;
 
-  const formattedTooltipVars = Object.entries(dataFormatters || {}).reduce(
-    (acc, [key, formatter]) => {
-      return {
-        ...acc,
-        [key]: formatter(tooltipVars[key]),
-      };
-    },
-    tooltipVars
-  );
+  const formattedTooltipVars = Object.entries(dataFormatters || {}).reduce((acc, [key, formatter]) => {
+    return {
+      ...acc,
+      [key]: formatter(tooltipVars[key]),
+    };
+  }, tooltipVars);
 
   const content = replaceVariablesInText(tooltipContent, formattedTooltipVars, {
     formatNumber,
@@ -86,24 +55,20 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(
   const filterBelow = typeof dataItem === 'number' ? dataItem : null;
 
   return (
-    <TooltipContent
-      title={data.featureName}
-      link={
-        data.dataOptions.getLink
-          ? data.dataOptions.getLink(data.code)
-          : undefined
-      }
-    >
-      <TooltipSubject
-        subject={replaceVariablesInText(subject, tooltipVars)}
-        thresholdValues={data.thresholdValues}
-        filterBelow={filterBelow}
-      >
+    <TooltipContent title={data.featureName} link={data.dataOptions.getLink ? data.dataOptions.getLink(data.code) : undefined}>
+      <TooltipSubject subject={replaceVariablesInText(subject, tooltipVars)} thresholdValues={data.thresholdValues} filterBelow={filterBelow}>
         <VisuallyHidden>{ariaContent}</VisuallyHidden>
         <Box aria-hidden>
           <Markdown content={content} />
         </Box>
       </TooltipSubject>
+
+      {/* Setting to true for the timebeing, it should eventually come from tooltip.data.dataItem (see index.tsx -> ToolTip), can get rid of the isOutDated Prop */}
+      {true && (
+        <TooltipNotification>
+          <Markdown content={'**Some** dummy content about old data.'} />
+        </TooltipNotification>
+      )}
     </TooltipContent>
   );
 }
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
index 2d71593db3..315c76d322 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
@@ -17,11 +17,7 @@ export function TooltipContent(props: IProps) {
   const isTouch = useIsTouchDevice();
 
   return (
-    <StyledTooltipContent
-      isInteractive={isTouch}
-      onClick={onSelect}
-      aria-live="polite"
-    >
+    <StyledTooltipContent isInteractive={isTouch} onClick={onSelect} aria-live="polite">
       <TooltipHeader href={link}>
         <Text variant="choroplethTooltipHeader">
           <StyledLocationIcon>
@@ -47,13 +43,7 @@ const StyledTooltipContent = styled.div<{ isInteractive: boolean }>((x) =>
   })
 );
 
-function TooltipHeader({
-  href,
-  children,
-}: {
-  href?: string;
-  children: ReactNode;
-}) {
+function TooltipHeader({ href, children }: { href?: string; children: ReactNode }) {
   if (href) {
     return (
       <StyledTooltipHeader href={href} as="a">
@@ -96,8 +86,6 @@ const TooltipInfo = styled.div(
     cursor: 'pointer',
     borderTop: '1px solid',
     borderTopColor: 'gray3',
-    py: 2,
-    px: 3,
   })
 );
 
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
new file mode 100644
index 0000000000..88eae631fc
--- /dev/null
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
@@ -0,0 +1,17 @@
+import { Box } from '~/components/base';
+import { colors } from '@corona-dashboard/common';
+import { space } from '~/style/theme';
+
+interface TooltipNotificationProps {
+  children: React.ReactNode;
+}
+
+export const TooltipNotification = (props: TooltipNotificationProps): React.ReactElement => {
+  const { children } = props;
+
+  return (
+    <Box paddingX={space[3]} paddingY={space[2]} backgroundColor={colors.yellow1}>
+      {children}
+    </Box>
+  );
+};
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
index e1ef6ff5a7..dd95ad472b 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
@@ -5,6 +5,7 @@ import { isDefined, isPresent } from 'ts-is-present';
 import { Box } from '~/components/base';
 import { BoldText } from '~/components/typography';
 import { getThresholdValue } from '~/utils/get-threshold-value';
+import styled from 'styled-components';
 
 interface TooltipSubjectProps {
   subject?: string;
@@ -14,13 +15,7 @@ interface TooltipSubjectProps {
   noDataFillColor?: string;
 }
 
-export function TooltipSubject({
-  subject,
-  thresholdValues,
-  filterBelow,
-  children,
-  noDataFillColor,
-}: TooltipSubjectProps) {
+export function TooltipSubject({ subject, thresholdValues, filterBelow, children, noDataFillColor }: TooltipSubjectProps) {
   const color =
     !isPresent(filterBelow) && isDefined(thresholdValues)
       ? noDataFillColor || getThresholdValue(thresholdValues, 0).color
@@ -29,30 +24,31 @@ export function TooltipSubject({
       : noDataFillColor;
 
   return (
-    <Box spacing={1}>
-      {subject && <BoldText>{subject}</BoldText>}
-      <Box
-        m={0}
-        spacingHorizontal={2}
-        css={css({
-          display: 'flex',
-          alignItems: 'center',
-          flexWrap: 'nowrap',
-          whiteSpace: 'pre-wrap',
-        })}
-      >
-        {children}
+    <StyledTooltipSubject>
+      <Box spacing={1}>
+        <p>HELLO</p>
+        {subject && <BoldText>{subject}</BoldText>}
         <Box
-          flexShrink={0}
-          height={13}
-          width={13}
-          borderRadius={'2px'}
-          ml={'auto'}
-          mb={'auto'}
-          mt={'5px'}
-          backgroundColor={color}
-        />
+          m={0}
+          spacingHorizontal={2}
+          css={css({
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+            whiteSpace: 'pre-wrap',
+          })}
+        >
+          {children}
+          <Box flexShrink={0} height={13} width={13} borderRadius={'2px'} ml={'auto'} mb={'auto'} mt={'5px'} backgroundColor={color} />
+        </Box>
       </Box>
-    </Box>
+    </StyledTooltipSubject>
   );
 }
+
+const StyledTooltipSubject = styled.div(
+  css({
+    py: 2,
+    px: 3,
+  })
+);
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip.tsx b/packages/app/src/components/choropleth/tooltips/tooltip.tsx
index 7e5d771716..82f78a7df6 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip.tsx
@@ -28,25 +28,14 @@ const padding = {
   top: 12,
 };
 
-export function Tooltip<T extends ChoroplethDataItem>({
-  left,
-  top,
-  formatTooltip,
-  data,
-  dataFormatters,
-  placement = 'bottom-right',
-}: TTooltipProps<T>) {
+export function Tooltip<T extends ChoroplethDataItem>({ left, top, formatTooltip, data, dataFormatters, placement = 'bottom-right' }: TTooltipProps<T>) {
   const viewportSize = useViewport();
   const isMounted = useIsMounted({ delayMs: 10 });
   const [ref, { height = 0 }] = useResizeObserver<HTMLDivElement>();
   const [boundingBox, boundingBoxRef] = useBoundingBox<HTMLDivElement>();
   const isTouch = useIsTouchDevice();
 
-  const content = isDefined(formatTooltip) ? (
-    formatTooltip(data)
-  ) : (
-    <ChoroplethTooltip data={data} dataFormatters={dataFormatters} />
-  );
+  const content = isDefined(formatTooltip) ? formatTooltip(data) : <ChoroplethTooltip data={data} dataFormatters={dataFormatters} />;
 
   if (!content) return null;
 
@@ -56,25 +45,16 @@ export function Tooltip<T extends ChoroplethDataItem>({
   const maxx = boundingBox?.width ?? 400;
   const maxy = viewportSize.height ?? 480;
 
-  const t = (
-    placement: ChoroplethTooltipPlacement,
-    top: number,
-    left: number
-  ): string => {
+  const t = (placement: ChoroplethTooltipPlacement, top: number, left: number): string => {
     switch (placement) {
       case 'top-center': {
-        const xt = (current: number) =>
-          Math.round((100 * (current - minx)) / (maxx - minx));
+        const xt = (current: number) => Math.round((100 * (current - minx)) / (maxx - minx));
         return `translateX(-${xt(left)}%)`;
       }
       case 'bottom-right':
       default: {
-        const xt = (current: number) =>
-          Math.round((100 * (current - minx)) / (maxx - minx));
-        const yt = (current: number) =>
-          Math.round(
-            current > maxy / 2 ? -(height + padding.top) : padding.top
-          );
+        const xt = (current: number) => Math.round((100 * (current - minx)) / (maxx - minx));
+        const yt = (current: number) => Math.round(current > maxy / 2 ? -(height + padding.top) : padding.top);
         const bboxTop = boundingBox?.top ?? 0;
         return `translate(-${xt(left)}%, ${yt(bboxTop + top)}px)`;
       }
@@ -82,18 +62,8 @@ export function Tooltip<T extends ChoroplethDataItem>({
   };
 
   return (
-    <Box
-      ref={boundingBoxRef}
-      position="absolute"
-      top="0"
-      left="0"
-      width="100%"
-      height="100%"
-    >
-      <Box
-        position="absolute"
-        style={{ top, left, width: '1px', height: '1px' }}
-      >
+    <Box ref={boundingBoxRef} position="absolute" top="0" left="0" width="100%" height="100%">
+      <Box position="absolute" style={{ top, left, width: '1px', height: '1px' }}>
         <Box
           bg="white"
           ref={ref}

From 7ad030de701825a8f6a00d27c8a290b54f586c48 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Mon, 7 Nov 2022 17:47:12 +0100
Subject: [PATCH 02/13] feat(sewer-choropleth): Implement tooltip notification
 for outdated data

---
 .../tooltips/choropleth-tooltip.tsx           | 24 ++++++++++++++++---
 .../choropleth/tooltips/tooltip-subject.tsx   |  1 +
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index 721b2e79d2..67edde04d3 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -18,6 +18,10 @@ type ChoroplethDataItemProps<T extends ChoroplethDataItem> = {
 export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: ChoroplethDataItemProps<T>) {
   const { data, dataFormatters } = props;
   const { commonTexts, formatNumber, formatPercentage, formatDate, formatDateFromSeconds, formatDateFromMilliseconds, formatRelativeDate, formatDateSpan } = useIntl();
+  const isSewerMap = data.dataConfig.metricName === 'sewer';
+  let tooltipNotification;
+  let showNotification;
+  let outdatedDataDate;
 
   const text = commonTexts.choropleth_tooltip;
 
@@ -27,6 +31,15 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const tooltipContent = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]?.content;
   assert(isDefined(tooltipContent), `[${ChoroplethTooltip.name}] No tooltip content found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`);
 
+  if (isSewerMap) {
+    tooltipNotification = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]
+      ?.outdated_data_notification;
+    assert(
+      isDefined(tooltipNotification),
+      `[${ChoroplethTooltip.name}] No tooltip notification found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`
+    );
+  }
+
   const tooltipVars = {
     ...data.dataItem,
     ...data.dataOptions.tooltipVariables,
@@ -54,6 +67,12 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const dataItem = data.dataItem[data.dataConfig.metricProperty];
   const filterBelow = typeof dataItem === 'number' ? dataItem : null;
 
+  if (isSewerMap) {
+    // TODO:Arjun -  Setting to true for the timebeing, it should eventually come from tooltip.data.dataItem (see index.tsx -> ToolTip)
+    showNotification = true || tooltipVars.hasOutDatedData;
+    outdatedDataDate = formatDateFromSeconds(tooltipVars['date_of_insertion_unix'] as number, 'medium'); // TODO:Arjun - Not sure which date to use yet
+  }
+
   return (
     <TooltipContent title={data.featureName} link={data.dataOptions.getLink ? data.dataOptions.getLink(data.code) : undefined}>
       <TooltipSubject subject={replaceVariablesInText(subject, tooltipVars)} thresholdValues={data.thresholdValues} filterBelow={filterBelow}>
@@ -63,10 +82,9 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
         </Box>
       </TooltipSubject>
 
-      {/* Setting to true for the timebeing, it should eventually come from tooltip.data.dataItem (see index.tsx -> ToolTip), can get rid of the isOutDated Prop */}
-      {true && (
+      {showNotification && outdatedDataDate && tooltipNotification && (
         <TooltipNotification>
-          <Markdown content={'**Some** dummy content about old data.'} />
+          <Markdown content={replaceVariablesInText(tooltipNotification, { date: outdatedDataDate })} />
         </TooltipNotification>
       )}
     </TooltipContent>
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
index dd95ad472b..b0734636c2 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
@@ -26,6 +26,7 @@ export function TooltipSubject({ subject, thresholdValues, filterBelow, children
   return (
     <StyledTooltipSubject>
       <Box spacing={1}>
+        {/* TODO:Arjun - remove before committing */}
         <p>HELLO</p>
         {subject && <BoldText>{subject}</BoldText>}
         <Box

From 676b0fa7b30c2cb6927465d72d3cfc59d385a61a Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 11 Nov 2022 10:04:11 +0100
Subject: [PATCH 03/13] feat(sewer-choropleth): Implement yellow color on map
 when data for that area is outdated

---
 .../choropleth/logic/use-fill-color.ts        | 83 +++++++++----------
 1 file changed, 40 insertions(+), 43 deletions(-)

diff --git a/packages/app/src/components/choropleth/logic/use-fill-color.ts b/packages/app/src/components/choropleth/logic/use-fill-color.ts
index 68088f29c0..662e8839fe 100644
--- a/packages/app/src/components/choropleth/logic/use-fill-color.ts
+++ b/packages/app/src/components/choropleth/logic/use-fill-color.ts
@@ -1,4 +1,4 @@
-import { assert, ChoroplethThresholdsValue } from '@corona-dashboard/common';
+import { assert, ChoroplethThresholdsValue, colors } from '@corona-dashboard/common';
 import { scaleThreshold } from 'd3-scale';
 import { useMemo } from 'react';
 import { isDefined, isPresent } from 'ts-is-present';
@@ -17,70 +17,73 @@ import { isCodedValueType } from './utils';
  * @param dataConfig
  * @returns
  */
-export function useFillColor<T extends ChoroplethDataItem>(
-  data: T[],
-  map: MapType,
-  dataConfig: DataConfig<T>,
-  thresholdMap?: MapType
-) {
+export function useFillColor<T extends ChoroplethDataItem>(data: T[], map: MapType, dataConfig: DataConfig<T>, thresholdMap?: MapType) {
   const codeType = mapToCodeType[map];
   const { metricProperty, noDataFillColor } = dataConfig;
 
-  const getValueByCode = useMemo(
-    () => createGetValueByCode(metricProperty, codeType, data),
-    [metricProperty, codeType, data]
-  );
+  const getValueByCode = useMemo(() => createGetValueByCode(metricProperty, codeType, data), [metricProperty, codeType, data]);
+
+  const getIsOutdatedByCode = useMemo(() => createIsOutdatedByCode(codeType, data), [codeType, data]);
 
   const threshold = thresholds[thresholdMap || map][metricProperty as string];
-  assert(
-    isDefined(threshold),
-    `[${
-      useFillColor.name
-    }] No threshold configured for map type ${map} and metric property ${metricProperty.toString()}`
-  );
+  assert(isDefined(threshold), `[${useFillColor.name}] No threshold configured for map type ${map} and metric property ${metricProperty.toString()}`);
 
   const colorScale = useMemo(() => createColorScale(threshold), [threshold]);
 
-  return useMemo(
-    () => createGetFillColor(getValueByCode, colorScale, noDataFillColor),
-    [getValueByCode, colorScale, noDataFillColor]
-  );
+  return useMemo(() => createGetFillColor(getValueByCode, getIsOutdatedByCode, colorScale, noDataFillColor), [getValueByCode, getIsOutdatedByCode, colorScale, noDataFillColor]);
 }
 
-export function getFillColor<T extends ChoroplethDataItem>(
-  data: T[],
-  map: MapType,
-  dataConfig: DataConfig<T>,
-  thresholdMap?: MapType
-) {
+export function getFillColor<T extends ChoroplethDataItem>(data: T[], map: MapType, dataConfig: DataConfig<T>, thresholdMap?: MapType) {
   const codeType = mapToCodeType[map];
   const { metricProperty, noDataFillColor } = dataConfig;
 
   const getValueByCode = createGetValueByCode(metricProperty, codeType, data);
+  const getIsOutdatedByCode = createIsOutdatedByCode(codeType, data);
+
   const threshold = thresholds[thresholdMap || map][metricProperty as string];
-  assert(
-    isDefined(threshold),
-    `[${
-      getFillColor.name
-    }] No threshold configured for map type ${map} and metric property ${metricProperty.toString()}`
-  );
+  assert(isDefined(threshold), `[${getFillColor.name}] No threshold configured for map type ${map} and metric property ${metricProperty.toString()}`);
   const colorScale = createColorScale(threshold);
 
-  return createGetFillColor(getValueByCode, colorScale, noDataFillColor);
+  return createGetFillColor(getValueByCode, getIsOutdatedByCode, colorScale, noDataFillColor);
 }
 
 function createGetFillColor(
   getValueByCode: ReturnType<typeof createGetValueByCode>,
+  getIsOutdatedByCode: ReturnType<typeof createIsOutdatedByCode>,
   colorScale: ReturnType<typeof createColorScale>,
   noDataFillColor: string
 ) {
   return (code: string) => {
     const value = getValueByCode(code);
-    const result = isPresent(value) ? colorScale(value) : noDataFillColor;
+    const shouldOverrideDefaultColor = getIsOutdatedByCode(code);
+    let result = noDataFillColor;
+
+    if (isPresent(value)) result = colorScale(value);
+
+    // Override the default color scale when a datapoint contains outdated data.
+    if (shouldOverrideDefaultColor) result = colors.yellow1;
+
     return result;
   };
 }
 
+// Returns a function which returns a boolean when the datapoint (matching the code passed in) contains outdated data.
+function createIsOutdatedByCode<T extends ChoroplethDataItem>(codeType: CodeProp, data: T[]): (code: string) => boolean | undefined {
+  return (code: string) => {
+    const dataPointByCode = data.find((dataPoint) => {
+      if ((dataPoint as unknown as Record<string, string>)[codeType] === code) {
+        return dataPoint;
+      }
+    });
+
+    if (dataPointByCode && 'data_is_outdated' in dataPointByCode) {
+      return dataPointByCode.data_is_outdated;
+    }
+
+    return false;
+  };
+}
+
 function createColorScale(threshold: ChoroplethThresholdsValue<number>[]) {
   const domain = threshold.map((t) => t.threshold);
   domain.shift();
@@ -91,11 +94,7 @@ function createColorScale(threshold: ChoroplethThresholdsValue<number>[]) {
   return color;
 }
 
-function createGetValueByCode<T extends ChoroplethDataItem>(
-  metricProperty: keyof T,
-  codeType: CodeProp,
-  data: T[]
-) {
+function createGetValueByCode<T extends ChoroplethDataItem>(metricProperty: keyof T, codeType: CodeProp, data: T[]) {
   return (code: string) => {
     const item = data
       .filter((x) => {
@@ -104,8 +103,6 @@ function createGetValueByCode<T extends ChoroplethDataItem>(
       })
       .find((x) => (x as unknown as Record<string, string>)[codeType] === code);
 
-    return isDefined(item) && isPresent(item[metricProperty])
-      ? Number(item[metricProperty])
-      : undefined;
+    return isDefined(item) && isPresent(item[metricProperty]) ? Number(item[metricProperty]) : undefined;
   };
 }

From ae770be725b006b28dab18401ef6eb1b67312527 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 11 Nov 2022 10:08:13 +0100
Subject: [PATCH 04/13] feat(sewer-choropleth): Implements new legend item for
 outdated data, exports font-sizes.

---
 .../app/src/components/choropleth-legenda.tsx | 54 +++++++--------
 .../app/src/components/choropleth-tile.tsx    | 51 ++++----------
 .../app/src/pages/landelijk/rioolwater.tsx    | 67 +++++--------------
 packages/app/src/style/theme.ts               |  2 +-
 4 files changed, 55 insertions(+), 119 deletions(-)

diff --git a/packages/app/src/components/choropleth-legenda.tsx b/packages/app/src/components/choropleth-legenda.tsx
index 75efeb0ce8..d9bbc8e2bb 100644
--- a/packages/app/src/components/choropleth-legenda.tsx
+++ b/packages/app/src/components/choropleth-legenda.tsx
@@ -1,28 +1,26 @@
-import { ChoroplethThresholdsValue } from '@corona-dashboard/common';
+import { ChoroplethThresholdsValue, colors } from '@corona-dashboard/common';
 import { css, SystemStyleObject } from '@styled-system/css';
 import styled from 'styled-components';
 import { ValueAnnotation } from '~/components/value-annotation';
 import { useIntl } from '~/intl';
+import { space, fontSizes } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { useResizeObserver } from '~/utils/use-resize-observer';
 import { Box } from './base';
 import { Legend, LegendItem } from './legend';
-import { Text } from './typography';
+import { InlineText, Text } from './typography';
 
 interface ChoroplethLegendaProps {
   title: string;
   thresholds: ChoroplethThresholdsValue[];
   valueAnnotation?: string;
   type?: 'default' | 'bar';
+  pageType?: string;
+  outdatedDataLabel?: string;
 }
 
-export function ChoroplethLegenda({
-  title,
-  thresholds,
-  valueAnnotation,
-  type = 'bar',
-}: ChoroplethLegendaProps) {
+export function ChoroplethLegenda({ title, thresholds, valueAnnotation, type = 'bar', pageType, outdatedDataLabel }: ChoroplethLegendaProps) {
   const [itemRef, itemSize] = useResizeObserver<HTMLLIElement>();
   const [endLabelRef, endLabelSize] = useResizeObserver<HTMLSpanElement>();
   const { commonTexts, formatNumber } = useIntl();
@@ -44,13 +42,18 @@ export function ChoroplethLegenda({
   );
 
   return (
-    <Box
-      width="100%"
-      pr={`${endLabelSize.width ?? 0 / 2}px`}
-      spacing={2}
-      aria-hidden="true"
-    >
+    <Box width="100%" pr={`${endLabelSize.width ?? 0 / 2}px`} spacing={2} aria-hidden="true">
       {title && <Text variant="subtitle1">{title}</Text>}
+
+      {pageType === 'sewer' && (
+        <Box display="flex" alignItems="center" paddingBottom={space[2]}>
+          <LegendaColor first={true} width={`${100 / thresholds.length}%`} color={colors.yellow1} />
+          <Box paddingLeft={space[3]} fontSize={fontSizes[1]}>
+            <InlineText>{outdatedDataLabel}</InlineText>
+          </Box>
+        </Box>
+      )}
+
       {'bar' === type ? (
         <List>
           {thresholds.map(({ color, threshold, label, endLabel }, index) => {
@@ -60,20 +63,11 @@ export function ChoroplethLegenda({
             const formattedTreshold = formatNumber(threshold);
 
             return (
-              <Item
-                key={color + threshold}
-                ref={index === 0 ? itemRef : undefined}
-              >
+              <Item key={color + threshold} ref={index === 0 ? itemRef : undefined} width={100 / thresholds.length}>
                 <LegendaColor color={color} first={isFirst} last={isLast} />
-                {isFirst ? (
-                  <StartLabel>{label ?? formattedTreshold}</StartLabel>
-                ) : (
-                  displayLabel && <Label>{label ?? formattedTreshold}</Label>
-                )}
+                {isFirst ? <StartLabel>{label ?? formattedTreshold}</StartLabel> : displayLabel && <Label>{label ?? formattedTreshold}</Label>}
 
-                {isLast && endLabel && (
-                  <EndLabel ref={endLabelRef}>{endLabel}</EndLabel>
-                )}
+                {isLast && endLabel && <EndLabel ref={endLabelRef}>{endLabel}</EndLabel>}
               </Item>
             );
           })}
@@ -96,9 +90,13 @@ const List = styled.ul(
   })
 );
 
-const Item = styled.li(
+// Assigning a flex-basis based on number of items in threshold so that legend items outside of the threshold array can be displayed using the same measurement.
+const Item = styled.li<{
+  width: number;
+}>(({ width }) =>
   css({
     flex: 1,
+    flexBasis: `${width}%`,
     position: 'relative',
   })
 );
@@ -106,6 +104,7 @@ const Item = styled.li(
 const LegendaColor = styled.div<{
   first?: boolean;
   last?: boolean;
+  width?: string;
   color: string;
 }>((x) =>
   css({
@@ -113,6 +112,7 @@ const LegendaColor = styled.div<{
     height: '10px',
     flexGrow: 0,
     flexShrink: 0,
+    flexBasis: x.width,
     borderRadius: x.first ? '2px 0 0 2px' : x.last ? '0 2px 2px 0' : 0,
     backgroundColor: x.color,
   })
diff --git a/packages/app/src/components/choropleth-tile.tsx b/packages/app/src/components/choropleth-tile.tsx
index 3556fc5405..513c06c6b5 100644
--- a/packages/app/src/components/choropleth-tile.tsx
+++ b/packages/app/src/components/choropleth-tile.tsx
@@ -3,10 +3,7 @@ import { ChoroplethLegenda } from '~/components/choropleth-legenda';
 import { DataProps } from '~/types/attributes';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { Box } from './base';
-import {
-  ChartRegionControls,
-  RegionControlOption,
-} from './chart-region-controls';
+import { ChartRegionControls, RegionControlOption } from './chart-region-controls';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
 import { MetadataProps } from './metadata';
@@ -20,10 +17,12 @@ type ChoroplethTileProps = DataProps & {
     title: string;
     thresholds: ChoroplethThresholdsValue[];
     type?: 'default' | 'bar';
+    outdatedDataLabel?: string;
   };
   metadata?: MetadataProps;
   valueAnnotation?: string;
   hasPadding?: boolean;
+  pageType?: string;
 } & (
     | {
         onChartRegionChange: (v: RegionControlOption) => void;
@@ -45,6 +44,7 @@ export function ChoroplethTile({
   metadata,
   valueAnnotation,
   hasPadding,
+  pageType,
   ...dataProps
 }: ChoroplethTileProps) {
   const breakpoints = useBreakpoints(true);
@@ -55,40 +55,23 @@ export function ChoroplethTile({
         title={legend.title}
         valueAnnotation={valueAnnotation}
         type={legend.type}
+        pageType={pageType}
+        outdatedDataLabel={legend.outdatedDataLabel}
       />
     </Box>
   );
 
   return (
     <FullscreenChartTile metadata={metadata}>
-      <Box
-        display="flex"
-        flexDirection={{ _: 'column', lg: 'row' }}
-        m={0}
-        as="figure"
-        {...dataProps}
-        height="100%"
-        spacing={3}
-      >
+      <Box display="flex" flexDirection={{ _: 'column', lg: 'row' }} m={0} as="figure" {...dataProps} height="100%" spacing={3}>
         <Box flex={{ lg: 1 }} as="figcaption" spacing={3}>
           <Heading level={3}>{title}</Heading>
 
-          {typeof description === 'string' ? (
-            <Text>{description}</Text>
-          ) : (
-            description
-          )}
+          {typeof description === 'string' ? <Text>{description}</Text> : description}
 
           {onChartRegionChange && chartRegion && (
-            <Box
-              display="flex"
-              justifyContent={{ _: 'center', lg: 'flex-start' }}
-              pt={4}
-            >
-              <ChartRegionControls
-                value={chartRegion}
-                onChange={onChartRegionChange}
-              />
+            <Box display="flex" justifyContent={{ _: 'center', lg: 'flex-start' }} pt={4}>
+              <ChartRegionControls value={chartRegion} onChange={onChartRegionChange} />
             </Box>
           )}
 
@@ -99,18 +82,8 @@ export function ChoroplethTile({
           )}
         </Box>
 
-        <Box
-          flex={{ lg: 1 }}
-          display="flex"
-          flexDirection="column"
-          height="100%"
-          spacing={3}
-        >
-          <Box
-            height="100%"
-            mt={4}
-            pl={hasPadding && breakpoints.lg ? 4 : undefined}
-          >
+        <Box flex={{ lg: 1 }} display="flex" flexDirection="column" height="100%" spacing={3}>
+          <Box height="100%" mt={4} pl={hasPadding && breakpoints.lg ? 4 : undefined}>
             <ErrorBoundary>{children}</ErrorBoundary>
           </Box>
 
diff --git a/packages/app/src/pages/landelijk/rioolwater.tsx b/packages/app/src/pages/landelijk/rioolwater.tsx
index ab02725bff..6274dffa61 100644
--- a/packages/app/src/pages/landelijk/rioolwater.tsx
+++ b/packages/app/src/pages/landelijk/rioolwater.tsx
@@ -17,29 +17,13 @@ import { NlLayout } from '~/domain/layout/nl-layout';
 import { SewerChart } from '~/domain/sewer/sewer-chart';
 import { useIntl } from '~/intl';
 import { Languages, SiteText } from '~/locale';
-import {
-  getArticleParts,
-  getPagePartsQuery,
-} from '~/queries/get-page-parts-query';
-import {
-  createGetStaticProps,
-  StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
-  createGetChoroplethData,
-  createGetContent,
-  getLastGeneratedDate,
-  selectNlData,
-  getLokalizeTexts,
-} from '~/static-props/get-data';
+import { getArticleParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetChoroplethData, createGetContent, getLastGeneratedDate, selectNlData, getLokalizeTexts } from '~/static-props/get-data';
 import { ArticleParts, PagePartQueryResult } from '~/types/cms';
 import { useReverseRouter } from '~/utils/use-reverse-router';
 import { getLastInsertionDateOfPage } from '~/utils/get-last-insertion-date-of-page';
-import {
-  ElementsQueryResult,
-  getElementsQuery,
-  getTimelineEvents,
-} from '~/queries/get-elements-query';
+import { ElementsQueryResult, getElementsQuery, getTimelineEvents } from '~/queries/get-elements-query';
 import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
 
 const pageMetrics = ['sewer'];
@@ -47,8 +31,7 @@ const pageMetrics = ['sewer'];
 const selectLokalizeTexts = (siteText: SiteText) => ({
   caterogyTexts: {
     category: siteText.common.sidebar.categories.development_of_the_virus.title,
-    screenReaderCategory:
-      siteText.common.sidebar.metrics.sewage_measurement.title,
+    screenReaderCategory: siteText.common.sidebar.metrics.sewage_measurement.title,
   },
   metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata,
   textNl: siteText.pages.sewer_page.nl,
@@ -58,8 +41,7 @@ const selectLokalizeTexts = (siteText: SiteText) => ({
 type LokalizeTexts = ReturnType<typeof selectLokalizeTexts>;
 
 export const getStaticProps = createGetStaticProps(
-  ({ locale }: { locale: keyof Languages }) =>
-    getLokalizeTexts(selectLokalizeTexts, locale),
+  ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
   getLastGeneratedDate,
   selectNlData('sewer', 'difference.sewer__average'),
   createGetChoroplethData({
@@ -89,16 +71,9 @@ export const getStaticProps = createGetStaticProps(
 const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
   const { commonTexts, formatNumber } = useIntl();
   const reverseRouter = useReverseRouter();
-  const {
-    pageText,
-    selectedNlData: data,
-    choropleth,
-    content,
-    lastGenerated,
-  } = props;
-
-  const { caterogyTexts, metadataTexts, textNl, textShared } =
-    useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
+  const { pageText, selectedNlData: data, choropleth, content, lastGenerated } = props;
+
+  const { caterogyTexts, metadataTexts, textNl, textShared } = useDynamicLokalizeTexts<LokalizeTexts>(pageText, selectLokalizeTexts);
   const sewerAverages = data.sewer;
   const [selectedMap, setSelectedMap] = useState<RegionControlOption>('gm');
 
@@ -130,9 +105,7 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
             articles={content.articles}
           />
 
-          {!isEmpty(textNl.warning_method) && (
-            <WarningTile message={textNl.warning_method} icon={Experimenteel} />
-          )}
+          {!isEmpty(textNl.warning_method) && <WarningTile message={textNl.warning_method} icon={Experimenteel} />}
 
           <TwoKpiSection>
             <KpiTile
@@ -152,10 +125,7 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
               />
             </KpiTile>
 
-            <KpiTile
-              title={textNl.tile_explanation_title}
-              description={textNl.tile_explanation_description}
-            />
+            <KpiTile title={textNl.tile_explanation_title} description={textNl.tile_explanation_description} />
           </TwoKpiSection>
 
           <SewerChart
@@ -170,23 +140,14 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
               averagesDataLabel: commonTexts.common.daggemiddelde,
               valueAnnotation: commonTexts.waarde_annotaties.riool_normalized,
             }}
-            timelineEvents={getTimelineEvents(
-              content.elements.timeSeries,
-              'sewer'
-            )}
+            timelineEvents={getTimelineEvents(content.elements.timeSeries, 'sewer')}
           />
 
           <ChoroplethTile
             title={textNl.map_titel}
             description={textNl.map_toelichting}
             metadata={{
-              date:
-                selectedMap === 'gm'
-                  ? [
-                      choropleth.gm.sewer[0].date_start_unix,
-                      choropleth.gm.sewer[0].date_end_unix,
-                    ]
-                  : choropleth.vr.sewer[0].date_unix,
+              date: selectedMap === 'gm' ? [choropleth.gm.sewer[0].date_start_unix, choropleth.gm.sewer[0].date_end_unix] : choropleth.vr.sewer[0].date_unix,
               source: textNl.bronnen.rivm,
             }}
             onChartRegionChange={setSelectedMap}
@@ -195,7 +156,9 @@ const SewerWater = (props: StaticProps<typeof getStaticProps>) => {
             legend={{
               title: textNl.legenda_titel,
               thresholds: thresholds.vr.average,
+              outdatedDataLabel: textNl.choropleth_legend_outdated_data_label,
             }}
+            pageType="sewer"
           >
             {selectedMap === 'gm' && (
               <DynamicChoropleth
diff --git a/packages/app/src/style/theme.ts b/packages/app/src/style/theme.ts
index 95725a50a8..6a8738915b 100644
--- a/packages/app/src/style/theme.ts
+++ b/packages/app/src/style/theme.ts
@@ -28,7 +28,7 @@ const fonts = {
 } as const;
 
 // prettier-ignore
-const fontSizes = [
+export const fontSizes = [
   '0.75rem',    // 0 -> 12px
   '0.875rem',   // 1 -> 14px
   '1rem',       // 2 -> 16px

From ae8ae4b680d672fec1899444677a00e6b89bc940 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 11 Nov 2022 10:10:20 +0100
Subject: [PATCH 05/13] feat(sewer-choropleth): Cleanup and finalize outdated
 data tooltip addition.

---
 .../choropleth/tooltips/choropleth-tooltip.tsx        | 11 +++++------
 .../choropleth/tooltips/tooltip-subject.tsx           |  2 --
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index 67edde04d3..63f59a7301 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -19,9 +19,6 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const { data, dataFormatters } = props;
   const { commonTexts, formatNumber, formatPercentage, formatDate, formatDateFromSeconds, formatDateFromMilliseconds, formatRelativeDate, formatDateSpan } = useIntl();
   const isSewerMap = data.dataConfig.metricName === 'sewer';
-  let tooltipNotification;
-  let showNotification;
-  let outdatedDataDate;
 
   const text = commonTexts.choropleth_tooltip;
 
@@ -31,6 +28,7 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const tooltipContent = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]?.content;
   assert(isDefined(tooltipContent), `[${ChoroplethTooltip.name}] No tooltip content found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`);
 
+  let tooltipNotification;
   if (isSewerMap) {
     tooltipNotification = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]
       ?.outdated_data_notification;
@@ -67,10 +65,11 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const dataItem = data.dataItem[data.dataConfig.metricProperty];
   const filterBelow = typeof dataItem === 'number' ? dataItem : null;
 
+  let showNotification;
+  let outdatedDataDate;
   if (isSewerMap) {
-    // TODO:Arjun -  Setting to true for the timebeing, it should eventually come from tooltip.data.dataItem (see index.tsx -> ToolTip)
-    showNotification = true || tooltipVars.hasOutDatedData;
-    outdatedDataDate = formatDateFromSeconds(tooltipVars['date_of_insertion_unix'] as number, 'medium'); // TODO:Arjun - Not sure which date to use yet
+    showNotification = tooltipVars.data_is_outdated;
+    outdatedDataDate = formatDateFromSeconds(tooltipVars['date_end_unix'] as number, 'medium');
   }
 
   return (
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
index b0734636c2..46c53a0a08 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
@@ -26,8 +26,6 @@ export function TooltipSubject({ subject, thresholdValues, filterBelow, children
   return (
     <StyledTooltipSubject>
       <Box spacing={1}>
-        {/* TODO:Arjun - remove before committing */}
-        <p>HELLO</p>
         {subject && <BoldText>{subject}</BoldText>}
         <Box
           m={0}

From 997ddd187e5eb7782a79f4fbe1b36b8a9ebb2de9 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 11 Nov 2022 11:27:04 +0100
Subject: [PATCH 06/13] feat(sewer-choropleth): Adjust tooltip to account for
 different data in VR and GM datapoints.

---
 .../components/choropleth/tooltips/choropleth-tooltip.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index 63f59a7301..6a2a5fd371 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -4,7 +4,7 @@ import { Markdown, VisuallyHidden } from '~/components';
 import { Box } from '~/components/base';
 import { useIntl } from '~/intl';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
-import { ChoroplethDataItem } from '../logic';
+import { ChoroplethDataItem, isVrData } from '../logic';
 import { TooltipContent } from './tooltip-content';
 import { TooltipSubject } from './tooltip-subject';
 import { TooltipNotification } from './tooltip-notification';
@@ -69,7 +69,9 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   let outdatedDataDate;
   if (isSewerMap) {
     showNotification = tooltipVars.data_is_outdated;
-    outdatedDataDate = formatDateFromSeconds(tooltipVars['date_end_unix'] as number, 'medium');
+
+    // 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');
   }
 
   return (

From 8ea2b15a70a5d3902455ab581246f4fded882c45 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 11 Nov 2022 11:28:17 +0100
Subject: [PATCH 07/13] feat(sewer-choropleth): Adds new outdated data property
 to schema for GM and VR collections.

---
 packages/app/schema/gm_collection/sewer.json | 6 +++++-
 packages/app/schema/vr_collection/sewer.json | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/app/schema/gm_collection/sewer.json b/packages/app/schema/gm_collection/sewer.json
index 87326bccf0..7cd18a9855 100644
--- a/packages/app/schema/gm_collection/sewer.json
+++ b/packages/app/schema/gm_collection/sewer.json
@@ -9,7 +9,8 @@
     "gmcode",
     "average",
     "total_installation_count",
-    "date_of_insertion_unix"
+    "date_of_insertion_unix",
+    "data_is_outdated"
   ],
   "properties": {
     "date_start_unix": {
@@ -30,6 +31,9 @@
     },
     "date_of_insertion_unix": {
       "type": "integer"
+    },
+    "data_is_outdated": {
+      "type": "boolean"
     }
   }
 }
diff --git a/packages/app/schema/vr_collection/sewer.json b/packages/app/schema/vr_collection/sewer.json
index 7ea55377af..649f779eaf 100644
--- a/packages/app/schema/vr_collection/sewer.json
+++ b/packages/app/schema/vr_collection/sewer.json
@@ -3,7 +3,7 @@
   "title": "vr_collection_sewer",
   "type": "object",
   "additionalProperties": false,
-  "required": ["date_unix", "vrcode", "average", "date_of_insertion_unix"],
+  "required": ["date_unix", "vrcode", "average", "date_of_insertion_unix", "data_is_outdated"],
   "properties": {
     "date_unix": {
       "type": "integer"
@@ -17,6 +17,9 @@
     },
     "date_of_insertion_unix": {
       "type": "integer"
+    },
+    "data_is_outdated": {
+      "type": "boolean"
     }
   }
 }

From fcaa220bb10358c2f78bbe7ccb8fc5f73f8c0148 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Fri, 11 Nov 2022 11:42:44 +0100
Subject: [PATCH 08/13] feat(sewer-choropleth): New sanity keys and data types.

---
 packages/cms/src/lokalize/key-mutations.csv | 7 +++++++
 packages/common/src/types/data.ts           | 2 ++
 2 files changed, 9 insertions(+)

diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv
index 43e5682f71..1c30186c6d 100644
--- a/packages/cms/src/lokalize/key-mutations.csv
+++ b/packages/cms/src/lokalize/key-mutations.csv
@@ -98,3 +98,10 @@ timestamp,action,key,document_id,move_to
 2022-10-19T12:59:21.053Z,add,pages.behavior_page.nl.section_archived.title,rSoN2URF0rxEHQvXsrmWoN,__
 2022-10-20T12:37:16.287Z,add,common.behavior.subjects.posttest_isolation,ibZWLQHfYl2AyCZBOySw6K,__
 2022-10-20T08:52:25.474Z,delete,pages.intensive_care_page.nl.kpi_bedbezetting.barscale_screenreader_text,jDbv30Y7XYH5kl8ZaovZD6,__
+2022-11-07T15:09:11.939Z,add,common.choropleth_tooltip.gm.outdated_data_notification,TrUIlGMFRR6fBR627mmYKT,__
+2022-11-07T15:41:35.054Z,delete,common.choropleth_tooltip.gm.outdated_data_notification,TrUIlGMFRR6fBR627mmYKT,__
+2022-11-07T15:57:14.611Z,add,common.choropleth_tooltip.outdated_data_notification,Fgb5SAAswLDPRQ9KRzHRc8,__
+2022-11-07T16:00:34.118Z,delete,common.choropleth_tooltip.outdated_data_notification,Fgb5SAAswLDPRQ9KRzHRc8,__
+2022-11-07T16:01:10.105Z,add,common.choropleth_tooltip.gm.average.outdated_data_notification,Fgb5SAAswLDPRQ9KRzIAnG,__
+2022-11-07T16:01:11.103Z,add,common.choropleth_tooltip.vr.average.outdated_data_notification,BBCOmHCrMQzaQKV1wWKvZ9,__
+2022-11-11T08:49:48.826Z,add,pages.sewer_page.nl.choropleth_legend_outdated_data_label,TrUIlGMFRR6fBR628D5VMd,__
diff --git a/packages/common/src/types/data.ts b/packages/common/src/types/data.ts
index f7da5898df..45b72e3681 100644
--- a/packages/common/src/types/data.ts
+++ b/packages/common/src/types/data.ts
@@ -196,6 +196,7 @@ export interface GmCollectionSewer {
   average: number;
   total_installation_count: number;
   date_of_insertion_unix: number;
+  data_is_outdated: boolean;
 }
 export interface GmCollectionVaccineCoveragePerAgeGroup {
   gmcode: string;
@@ -1732,6 +1733,7 @@ export interface VrCollectionSewer {
   vrcode: string;
   average: number | null;
   date_of_insertion_unix: number;
+  data_is_outdated: boolean;
 }
 export interface VrCollectionBehaviorArchived_20221019 {
   vrcode: string;

From 6dc9de46789cfe12f6484088780a518bc5fd5de5 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Mon, 14 Nov 2022 14:44:13 +0100
Subject: [PATCH 09/13] feat(sewer-choropleth): PR feedback round 1, and a few
 other fixes/refactoring.

---
 .../app/src/components/choropleth-legenda.tsx |  8 ++--
 .../choropleth/logic/use-fill-color.ts        |  2 +-
 .../tooltips/choropleth-tooltip.tsx           |  4 +-
 .../choropleth/tooltips/tooltip-content.tsx   |  2 +
 .../tooltips/tooltip-notification.tsx         | 17 ++++----
 .../choropleth/tooltips/tooltip-subject.tsx   | 40 +++++++------------
 6 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/packages/app/src/components/choropleth-legenda.tsx b/packages/app/src/components/choropleth-legenda.tsx
index d9bbc8e2bb..faeaa0b1c0 100644
--- a/packages/app/src/components/choropleth-legenda.tsx
+++ b/packages/app/src/components/choropleth-legenda.tsx
@@ -42,7 +42,7 @@ export function ChoroplethLegenda({ title, thresholds, valueAnnotation, type = '
   );
 
   return (
-    <Box width="100%" pr={`${endLabelSize.width ?? 0 / 2}px`} spacing={2} aria-hidden="true">
+    <Box width="100%" paddingRight={`${endLabelSize.width ?? 0 / 2}px`} spacing={2} aria-hidden="true">
       {title && <Text variant="subtitle1">{title}</Text>}
 
       {pageType === 'sewer' && (
@@ -63,7 +63,7 @@ export function ChoroplethLegenda({ title, thresholds, valueAnnotation, type = '
             const formattedTreshold = formatNumber(threshold);
 
             return (
-              <Item key={color + threshold} ref={index === 0 ? itemRef : undefined} width={100 / thresholds.length}>
+              <Item key={color + threshold} ref={index === 0 ? itemRef : undefined} width={`${100 / thresholds.length}%`}>
                 <LegendaColor color={color} first={isFirst} last={isLast} />
                 {isFirst ? <StartLabel>{label ?? formattedTreshold}</StartLabel> : displayLabel && <Label>{label ?? formattedTreshold}</Label>}
 
@@ -92,11 +92,11 @@ const List = styled.ul(
 
 // Assigning a flex-basis based on number of items in threshold so that legend items outside of the threshold array can be displayed using the same measurement.
 const Item = styled.li<{
-  width: number;
+  width: string;
 }>(({ width }) =>
   css({
     flex: 1,
-    flexBasis: `${width}%`,
+    flexBasis: width,
     position: 'relative',
   })
 );
diff --git a/packages/app/src/components/choropleth/logic/use-fill-color.ts b/packages/app/src/components/choropleth/logic/use-fill-color.ts
index 662e8839fe..3d77af034f 100644
--- a/packages/app/src/components/choropleth/logic/use-fill-color.ts
+++ b/packages/app/src/components/choropleth/logic/use-fill-color.ts
@@ -68,7 +68,7 @@ function createGetFillColor(
 }
 
 // Returns a function which returns a boolean when the datapoint (matching the code passed in) contains outdated data.
-function createIsOutdatedByCode<T extends ChoroplethDataItem>(codeType: CodeProp, data: T[]): (code: string) => boolean | undefined {
+function createIsOutdatedByCode<T extends ChoroplethDataItem>(codeType: CodeProp, data: T[]): (code: string) => boolean {
   return (code: string) => {
     const dataPointByCode = data.find((dataPoint) => {
       if ((dataPoint as unknown as Record<string, string>)[codeType] === code) {
diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index 6a2a5fd371..281ce3ef9e 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -43,9 +43,9 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
     ...data.dataOptions.tooltipVariables,
   } as Record<string, string | number>;
 
-  const formattedTooltipVars = Object.entries(dataFormatters || {}).reduce((acc, [key, formatter]) => {
+  const formattedTooltipVars = Object.entries(dataFormatters || {}).reduce((accumulator, [key, formatter]) => {
     return {
-      ...acc,
+      ...accumulator,
       [key]: formatter(tooltipVars[key]),
     };
   }, tooltipVars);
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
index 315c76d322..048307e4c3 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-content.tsx
@@ -3,6 +3,7 @@ import css from '@styled-system/css';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 import { Text } from '~/components/typography';
+import { space } from '~/style/theme';
 import { useIsTouchDevice } from '~/utils/use-is-touch-device';
 
 interface IProps {
@@ -86,6 +87,7 @@ const TooltipInfo = styled.div(
     cursor: 'pointer',
     borderTop: '1px solid',
     borderTopColor: 'gray3',
+    padding: `${space[2]} ${space[3]}`,
   })
 );
 
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
index 88eae631fc..d0028a9360 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
@@ -1,17 +1,20 @@
-import { Box } from '~/components/base';
 import { colors } from '@corona-dashboard/common';
 import { space } from '~/style/theme';
+import styled from 'styled-components';
 
 interface TooltipNotificationProps {
   children: React.ReactNode;
 }
 
-export const TooltipNotification = (props: TooltipNotificationProps): React.ReactElement => {
+export const TooltipNotification = (props: TooltipNotificationProps) => {
   const { children } = props;
 
-  return (
-    <Box paddingX={space[3]} paddingY={space[2]} backgroundColor={colors.yellow1}>
-      {children}
-    </Box>
-  );
+  return <StyledTooltipNotification>{children}</StyledTooltipNotification>;
 };
+
+// Negative margin is used her to offset the padding from the parent component and to not alter styles for tooltips without a notification.
+const StyledTooltipNotification = styled.div`
+  background-color: ${colors.yellow1};
+  margin: ${space[2]} -${space[3]} -${space[2]};
+  padding: ${space[2]} ${space[3]};
+`;
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
index 46c53a0a08..6946490c56 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-subject.tsx
@@ -5,7 +5,6 @@ import { isDefined, isPresent } from 'ts-is-present';
 import { Box } from '~/components/base';
 import { BoldText } from '~/components/typography';
 import { getThresholdValue } from '~/utils/get-threshold-value';
-import styled from 'styled-components';
 
 interface TooltipSubjectProps {
   subject?: string;
@@ -24,30 +23,21 @@ export function TooltipSubject({ subject, thresholdValues, filterBelow, children
       : noDataFillColor;
 
   return (
-    <StyledTooltipSubject>
-      <Box spacing={1}>
-        {subject && <BoldText>{subject}</BoldText>}
-        <Box
-          m={0}
-          spacingHorizontal={2}
-          css={css({
-            display: 'flex',
-            alignItems: 'center',
-            flexWrap: 'nowrap',
-            whiteSpace: 'pre-wrap',
-          })}
-        >
-          {children}
-          <Box flexShrink={0} height={13} width={13} borderRadius={'2px'} ml={'auto'} mb={'auto'} mt={'5px'} backgroundColor={color} />
-        </Box>
+    <Box spacing={1}>
+      {subject && <BoldText>{subject}</BoldText>}
+      <Box
+        margin={0}
+        spacingHorizontal={2}
+        css={css({
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'nowrap',
+          whiteSpace: 'pre-wrap',
+        })}
+      >
+        {children}
+        <Box flexShrink={0} height="13px" width="13px" borderRadius="2px" ml="auto" mb="auto" mt="5px" backgroundColor={color} />
       </Box>
-    </StyledTooltipSubject>
+    </Box>
   );
 }
-
-const StyledTooltipSubject = styled.div(
-  css({
-    py: 2,
-    px: 3,
-  })
-);

From 6709e8bc3805bb010715fa1eb413974ff0033bd1 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Mon, 14 Nov 2022 15:07:49 +0100
Subject: [PATCH 10/13] feat(sewer-choropleth): PR feedback round 2 - Add
 content for assistive technologies (screenreaders).

---
 .../choropleth/tooltips/choropleth-tooltip.tsx       |  5 +++--
 .../choropleth/tooltips/tooltip-notification.tsx     | 12 ++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index 281ce3ef9e..6416f8b119 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -72,6 +72,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');
+    tooltipNotification = replaceVariablesInText(tooltipNotification as string, { date: outdatedDataDate });
   }
 
   return (
@@ -84,8 +85,8 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
       </TooltipSubject>
 
       {showNotification && outdatedDataDate && tooltipNotification && (
-        <TooltipNotification>
-          <Markdown content={replaceVariablesInText(tooltipNotification, { date: outdatedDataDate })} />
+        <TooltipNotification ariaContent={tooltipNotification}>
+          <Markdown content={tooltipNotification} />
         </TooltipNotification>
       )}
     </TooltipContent>
diff --git a/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx b/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
index d0028a9360..51e44c9975 100644
--- a/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
+++ b/packages/app/src/components/choropleth/tooltips/tooltip-notification.tsx
@@ -1,15 +1,23 @@
 import { colors } from '@corona-dashboard/common';
+import { VisuallyHidden } from '~/components';
 import { space } from '~/style/theme';
 import styled from 'styled-components';
 
 interface TooltipNotificationProps {
   children: React.ReactNode;
+  ariaContent?: string;
 }
 
 export const TooltipNotification = (props: TooltipNotificationProps) => {
-  const { children } = props;
+  const { children, ariaContent } = props;
 
-  return <StyledTooltipNotification>{children}</StyledTooltipNotification>;
+  return (
+    <StyledTooltipNotification>
+      {ariaContent && <VisuallyHidden>{ariaContent.replace(/(\n|\*)/g, '')}</VisuallyHidden>}
+
+      {children}
+    </StyledTooltipNotification>
+  );
 };
 
 // Negative margin is used her to offset the padding from the parent component and to not alter styles for tooltips without a notification.

From 9fda34d7aaaa70178b68fc211e5dbe2b52c4e847 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Wed, 16 Nov 2022 09:18:39 +0100
Subject: [PATCH 11/13] feat(sewer-choropleth): PR feedback - Change condition
 for assigning outdated data variables.

---
 .../tooltips/choropleth-tooltip.tsx           | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
index 6416f8b119..c593efe39f 100644
--- a/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
+++ b/packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx
@@ -18,7 +18,6 @@ type ChoroplethDataItemProps<T extends ChoroplethDataItem> = {
 export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: ChoroplethDataItemProps<T>) {
   const { data, dataFormatters } = props;
   const { commonTexts, formatNumber, formatPercentage, formatDate, formatDateFromSeconds, formatDateFromMilliseconds, formatRelativeDate, formatDateSpan } = useIntl();
-  const isSewerMap = data.dataConfig.metricName === 'sewer';
 
   const text = commonTexts.choropleth_tooltip;
 
@@ -28,16 +27,6 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const tooltipContent = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]?.content;
   assert(isDefined(tooltipContent), `[${ChoroplethTooltip.name}] No tooltip content found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`);
 
-  let tooltipNotification;
-  if (isSewerMap) {
-    tooltipNotification = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]
-      ?.outdated_data_notification;
-    assert(
-      isDefined(tooltipNotification),
-      `[${ChoroplethTooltip.name}] No tooltip notification found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`
-    );
-  }
-
   const tooltipVars = {
     ...data.dataItem,
     ...data.dataOptions.tooltipVariables,
@@ -65,10 +54,16 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
   const dataItem = data.dataItem[data.dataConfig.metricProperty];
   const filterBelow = typeof dataItem === 'number' ? dataItem : null;
 
-  let showNotification;
+  const showNotification = tooltipVars?.data_is_outdated;
   let outdatedDataDate;
-  if (isSewerMap) {
-    showNotification = tooltipVars.data_is_outdated;
+  let tooltipNotification;
+  if (showNotification) {
+    tooltipNotification = (text as unknown as Record<string, Record<string, Record<string, string>>>)[data.map]?.[data.dataConfig.metricProperty as string]
+      ?.outdated_data_notification;
+    assert(
+      isDefined(tooltipNotification),
+      `[${ChoroplethTooltip.name}] No tooltip notification found in siteText.choropleth_tooltip.${data.map}.${data.dataConfig.metricProperty.toString()}`
+    );
 
     // 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');

From d405f1a46c82f756e5ae01956e2d06500b1d46fc Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Mon, 21 Nov 2022 16:50:11 +0100
Subject: [PATCH 12/13] feat(sewer-choropleth): Based on new info from backend,
 adding data_is_outdated property to sewer.json each GM and VR area

---
 packages/app/schema/gm/sewer.json | 6 +++++-
 packages/app/schema/vr/sewer.json | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/app/schema/gm/sewer.json b/packages/app/schema/gm/sewer.json
index 00e925cffe..02c4ae016b 100644
--- a/packages/app/schema/gm/sewer.json
+++ b/packages/app/schema/gm/sewer.json
@@ -11,7 +11,8 @@
         "total_number_of_samples",
         "sampled_installation_count",
         "total_installation_count",
-        "date_of_insertion_unix"
+        "date_of_insertion_unix",
+        "data_is_outdated"
       ],
       "properties": {
         "date_start_unix": {
@@ -34,6 +35,9 @@
         },
         "date_of_insertion_unix": {
           "type": "integer"
+        },
+        "data_is_outdated": {
+          "type": "boolean"
         }
       }
     }
diff --git a/packages/app/schema/vr/sewer.json b/packages/app/schema/vr/sewer.json
index 55764ef52a..2b87d3e818 100644
--- a/packages/app/schema/vr/sewer.json
+++ b/packages/app/schema/vr/sewer.json
@@ -4,7 +4,7 @@
       "title": "vr_sewer_value",
       "type": "object",
       "additionalProperties": false,
-      "required": ["date_unix", "average", "date_of_insertion_unix"],
+      "required": ["date_unix", "average", "date_of_insertion_unix", "data_is_outdated"],
       "properties": {
         "date_unix": {
           "type": "integer"
@@ -14,6 +14,9 @@
         },
         "date_of_insertion_unix": {
           "type": "integer"
+        },
+        "data_is_outdated": {
+          "type": "boolean"
         }
       }
     }

From 04427e28bcb0497db82fb0f74d06bbae686025d7 Mon Sep 17 00:00:00 2001
From: Arjun Puri <arjun.puri.ordina@gmail.com>
Date: Mon, 21 Nov 2022 17:40:07 +0100
Subject: [PATCH 13/13] feat(sewer-choropleth): generate data types for new
 properties

---
 packages/common/src/types/data.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/common/src/types/data.ts b/packages/common/src/types/data.ts
index 45b72e3681..341b12995a 100644
--- a/packages/common/src/types/data.ts
+++ b/packages/common/src/types/data.ts
@@ -93,6 +93,7 @@ export interface GmSewerValue {
   sampled_installation_count: number;
   total_installation_count: number;
   date_of_insertion_unix: number;
+  data_is_outdated: boolean;
 }
 export interface GmSewerPerInstallation {
   values: MunicipalSewerPerInstallationInstallation[];
@@ -1402,6 +1403,7 @@ export interface VrSewerValue {
   date_unix: number;
   average: number | null;
   date_of_insertion_unix: number;
+  data_is_outdated: boolean;
 }
 export interface VrSewerPerInstallation {
   values: VrSewerPerInstallationInstallation[];