Feature/COR-1170-rioolwaterpagina-verbetering-choropletenkaart-nl (#4493

) * feat(sewer-choropleth): Implement tooltip notification for outdated data * feat(sewer-choropleth): Implement yellow color on map when data for that area is outdated * feat(sewer-choropleth): Implements new legend item for outdated data, exports font-sizes. * feat(sewer-choropleth): Cleanup and finalize outdated data tooltip addition. * feat(sewer-choropleth): Adjust tooltip to account for different data in VR and GM datapoints. * feat(sewer-choropleth): Adds new outdated data property to schema for GM and VR collections. * feat(sewer-choropleth): New sanity keys and data types. * feat(sewer-choropleth): PR feedback round 1, and a few other fixes/refactoring. * feat(sewer-choropleth): PR feedback round 2 - Add content for assistive technologies (screenreaders). * feat(sewer-choropleth): PR feedback - Change condition for assigning outdated data variables. * feat(sewer-choropleth): Based on new info from backend, adding data_is_outdated property to sewer.json each GM and VR area * feat(sewer-choropleth): generate data types for new properties
minvws · Nov 23, 2022 · 052c743 · 052c743
1 parent 398b058
commit 052c743
Show file tree

Hide file tree

Showing 29 changed files with 936 additions and 1,171 deletions.
diff --git 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/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/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"
         }
       }
     }

diff --git 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"
     }
   }
 }
diff --git 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%" paddingRight={`${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,23 +90,29 @@ 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: string;
+}>(({ width }) =>
   css({
     flex: 1,
+    flexBasis: width,
     position: 'relative',
   })
 );
 
 const LegendaColor = styled.div<{
   first?: boolean;
   last?: boolean;
+  width?: string;
   color: string;
 }>((x) =>
   css({
     width: '100%',
     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
@@ -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>