Merge branch 'develop' into feature/COR-1601-articles-overview-improv…

…ed-design

packages/app/schema/archived_gm/__index.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "archived_gm",
+  "additionalProperties": false,
+  "required": [
+    "last_generated",
+    "proto_name",
+    "name",
+    "code",
+    "sewer_archived_20230623"
+  ],
+  "properties": {
+    "last_generated": {
+      "type": "string"
+    },
+    "proto_name": {
+      "$ref": "#/$defs/archived_gm_code"
+    },
+    "name": {
+      "$ref": "#/$defs/archived_gm_code"
+    },
+    "code": {
+      "$ref": "#/$defs/archived_gm_code"
+    },
+    "sewer_archived_20230623": {
+      "$ref": "sewer.json"
+    }
+  },
+  "$defs": {
+    "archived_gm_code": {
+      "type": "string",
+      "pattern": "^GM[0-9]+$"
+    }
+  }
+}

packages/app/schema/archived_gm/sewer.json

@@ -0,0 +1,61 @@
+{
+  "definitions": {
+    "value": {
+      "title": "gm_sewer_value",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "date_start_unix",
+        "date_end_unix",
+        "average",
+        "total_number_of_samples",
+        "sampled_installation_count",
+        "total_installation_count",
+        "date_of_insertion_unix",
+        "data_is_outdated"
+      ],
+      "properties": {
+        "date_start_unix": {
+          "type": "integer"
+        },
+        "date_end_unix": {
+          "type": "integer"
+        },
+        "average": {
+          "type": "integer"
+        },
+        "total_number_of_samples": {
+          "type": "integer"
+        },
+        "sampled_installation_count": {
+          "type": "integer"
+        },
+        "total_installation_count": {
+          "type": "integer"
+        },
+        "date_of_insertion_unix": {
+          "type": "integer"
+        },
+        "data_is_outdated": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "gm_sewer",
+  "type": "object",
+  "required": ["values", "last_value"],
+  "additionalProperties": false,
+  "properties": {
+    "values": {
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/value"
+      }
+    },
+    "last_value": {
+      "$ref": "#/definitions/value"
+    }
+  }
+}

packages/app/schema/archived_gm_collection/__index.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "archived_gm_collection",
+  "additionalProperties": false,
+  "required": [
+    "last_generated",
+    "proto_name",
+    "name",
+    "code",
+    "sewer_archived_20230623"
+  ],
+  "properties": {
+    "last_generated": {
+      "type": "string"
+    },
+    "proto_name": {
+      "$ref": "#/$defs/archived_gm_collection_id"
+    },
+    "name": {
+      "$ref": "#/$defs/archived_gm_collection_id"
+    },
+    "code": {
+      "$ref": "#/$defs/archived_gm_collection_id"
+    },
+    "sewer_archived_20230623": {
+      "type": "array",
+      "minItems": 342,
+      "maxItems": 342,
+      "items": {
+        "$ref": "sewer.json"
+      }
+    }
+  },
+  "$defs": {
+    "archived_gm_collection_id": {
+      "type": "string",
+      "enum": ["GM_COLLECTION"]
+    }
+  }
+}

packages/app/schema/archived_gm_collection/sewer.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "gm_collection_sewer",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "date_start_unix",
+    "date_end_unix",
+    "gmcode",
+    "average",
+    "total_installation_count",
+    "date_of_insertion_unix",
+    "data_is_outdated"
+  ],
+  "properties": {
+    "date_start_unix": {
+      "type": "integer"
+    },
+    "date_end_unix": {
+      "type": "integer"
+    },
+    "gmcode": {
+      "type": "string",
+      "pattern": "^GM[0-9]+$"
+    },
+    "average": {
+      "type": "integer"
+    },
+    "total_installation_count": {
+      "type": "number"
+    },
+    "date_of_insertion_unix": {
+      "type": "integer"
+    },
+    "data_is_outdated": {
+      "type": "boolean"
+    }
+  }
+}

packages/app/schema/archived_nl/__index.json

@@ -3,14 +3,15 @@
   "type": "object",
   "title": "archived_nl",
   "required": [
+    "last_generated",
+    "proto_name",
+    "name",
+    "code",
     "behavior_archived_20230411",
     "behavior_annotations_archived_20230412",
     "behavior_per_age_group_archived_20230411",
-    "code",
     "doctor_archived_20210903",
-    "last_generated",
-    "name",
-    "proto_name"
+    "sewer_archived_20230623"
   ],
   "additionalProperties": false,
   "properties": {
@@ -37,6 +38,9 @@
     },
     "doctor_archived_20210903": {
       "$ref": "doctor.json"
+    },
+    "sewer_archived_20230623": {
+      "$ref": "sewer.json"
     }
   },
   "$defs": {

packages/app/schema/archived_nl/sewer.json

@@ -0,0 +1,37 @@
+{
+  "definitions": {
+    "value": {
+      "title": "nl_sewer_value",
+      "type": "object",
+      "required": ["average", "date_of_insertion_unix", "date_unix"],
+      "additionalProperties": false,
+      "properties": {
+        "average": {
+          "type": ["integer", "null"]
+        },
+        "date_of_insertion_unix": {
+          "type": "integer"
+        },
+        "date_unix": {
+          "type": "integer"
+        }
+      }
+    }
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "nl_sewer",
+  "type": "object",
+  "required": ["values", "last_value"],
+  "additionalProperties": false,
+  "properties": {
+    "values": {
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/value"
+      }
+    },
+    "last_value": {
+      "$ref": "#/definitions/value"
+    }
+  }
+}

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

@@ -16,14 +16,26 @@ interface ChartTileProps {
   title: string;
   description?: string;
   disableFullscreen?: boolean;
+  id?: string;
   metadata?: MetadataProps;
   timeframeInitialValue?: TimeframeOption;
   timeframeOptions?: TimeframeOption[];
   toggle?: ChartTileToggleProps;
   onSelectTimeframe?: (timeframe: TimeframeOption) => void;
 }
 
-export const ChartTile = ({ children, title, description, disableFullscreen, metadata, timeframeInitialValue, toggle, timeframeOptions, onSelectTimeframe }: ChartTileProps) => {
+export const ChartTile = ({
+  children,
+  title,
+  description,
+  disableFullscreen,
+  id,
+  metadata,
+  timeframeInitialValue,
+  toggle,
+  timeframeOptions,
+  onSelectTimeframe,
+}: ChartTileProps) => {
   const [timeframe, setTimeframe] = useState<TimeframeOption>(timeframeInitialValue || TimeframeOption.ALL);
 
   useEffect(() => {
@@ -33,7 +45,7 @@ export const ChartTile = ({ children, title, description, disableFullscreen, met
   }, [timeframe, onSelectTimeframe]);
 
   return (
-    <FullscreenChartTile metadata={metadata} disabled={disableFullscreen}>
+    <FullscreenChartTile metadata={metadata} disabled={disableFullscreen} id={id}>
       <ChartTileHeader title={title} description={description} toggle={toggle}>
         {timeframeOptions && timeframe && (
           <Box width={{ sm: '100%', lg: '50%', xl: '25%' }}>

packages/app/src/components/cms/rich-content.tsx

@@ -18,6 +18,7 @@ import { ChevronRight, Download, External as ExternalLinkIcon } from '@corona-da
 import { space } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils';
 import React from 'react';
+import { InlineText } from '../typography';
 
 type ElementAlignment = 'start' | 'center' | 'end' | 'stretch';
 
@@ -34,22 +35,14 @@ export function RichContent({ contentWrapper, blocks, imageSizes, elementAlignme
   const serializers = {
     types: {
       inlineBlock: (props: unknown) => {
-        assert(
-          PortableText.defaultSerializers.types?.inlineBlock,
-          `[${RichContent.name}] PortableText needs to provide a serializer for inlineBlock content`
-        );
+        assert(PortableText.defaultSerializers.types?.inlineBlock, `[${RichContent.name}] PortableText needs to provide a serializer for inlineBlock content`);
         return <ContentWrapper>{PortableText.defaultSerializers.types.inlineBlock(props)}</ContentWrapper>;
       },
       block: (props: unknown) => {
-        assert(
-          PortableText.defaultSerializers.types?.block,
-          `[${RichContent.name}] PortableText needs to provide a serializer for block content`
-        );
+        assert(PortableText.defaultSerializers.types?.block, `[${RichContent.name}] PortableText needs to provide a serializer for block content`);
         return <ContentWrapper>{PortableText.defaultSerializers.types.block(props)}</ContentWrapper>;
       },
-      image: (props: { node: ImageBlock | RichContentImageBlock }) => (
-        <ContentImage contentWrapper={contentWrapper} sizes={imageSizes} {...props} />
-      ),
+      image: (props: { node: ImageBlock | RichContentImageBlock }) => <ContentImage contentWrapper={contentWrapper} sizes={imageSizes} {...props} />,
       inlineCollapsible: (props: { node: InlineCollapsibleList }) => {
         if (!props.node.content.inlineBlockContent) return null;
 
@@ -86,13 +79,15 @@ export function RichContent({ contentWrapper, blocks, imageSizes, elementAlignme
         return (
           <>
             {children.map((child, index) => (
-              <React.Fragment key={index}>
-                {child.includes('{{kpiValue}}') && variableValue ? replaceVariablesInText(child, { kpiValue: variableValue }) : child}
-              </React.Fragment>
+              <React.Fragment key={index}>{child.includes('{{kpiValue}}') && variableValue ? replaceVariablesInText(child, { kpiValue: variableValue }) : child}</React.Fragment>
             ))}
           </>
         );
       },
+      u: (props: { children: string[] }) => {
+        const { children } = props;
+        return <InlineText className="underline">{children}</InlineText>;
+      },
     },
   };
 

packages/app/src/components/collapsible/collapsible-section.tsx

@@ -14,11 +14,21 @@ interface CollapsibleSectionProps extends BoxProps {
   className?: string;
   id?: string;
   hideBorder?: boolean;
+  fontSize?: string;
   textColor?: string;
   borderColor?: string;
 }
 
-export const CollapsibleSection = ({ summary, children, id, hideBorder, textColor = colors.blue8, borderColor = colors.gray2, className }: CollapsibleSectionProps) => {
+export const CollapsibleSection = ({
+  summary,
+  children,
+  id,
+  hideBorder,
+  textColor = colors.blue8,
+  fontSize = fontSizes[5],
+  borderColor = colors.gray2,
+  className,
+}: CollapsibleSectionProps) => {
   const section = useRef<HTMLElement>(null);
 
   const collapsible = useCollapsible();
@@ -53,7 +63,7 @@ export const CollapsibleSection = ({ summary, children, id, hideBorder, textColo
 
   return (
     <Box as="section" borderTop={hideBorder ? undefined : `1px solid ${borderColor}`} id={id} ref={section} className={`${className} ${collapsible.isOpen ? 'open' : ''}`}>
-      <StyledSummary textColor={textColor} onClick={() => collapsible.toggle()}>
+      <Summary color={textColor} onClick={() => collapsible.toggle()} fontSize={fontSize}>
         <Box width="100%" position="relative">
           {summary}
           {id && (
@@ -63,7 +73,7 @@ export const CollapsibleSection = ({ summary, children, id, hideBorder, textColo
           )}
         </Box>
         {collapsible.button()}
-      </StyledSummary>
+      </Summary>
       {collapsible.content(<Box paddingX={space[3]}>{children}</Box>)}
     </Box>
   );
@@ -85,16 +95,10 @@ const StyledAnchor = styled(Anchor)`
   }
 `;
 
-interface SummaryProps {
-  textColor: string;
-}
-
-const StyledSummary = styled(Box)<SummaryProps>`
+const Summary = styled(Box)`
   align-items: center;
-  color: ${({ textColor }) => textColor};
   cursor: pointer;
   display: flex;
-  font-size: ${fontSizes[5]};
   font-weight: ${fontWeights.bold};
   justify-content: space-between;
   padding: ${space[3]};