Merge branch 'develop' into release/2.52.0

packages/app/package.json

@@ -43,6 +43,7 @@
     "http-proxy-middleware": "^2.0.1",
     "intercept-stdout": "^0.1.2",
     "konva": "^7.2.5",
+    "konva-node": "^0.11.2",
     "lodash": "^4.17.21",
     "match-sorter": "^6.3.1",
     "next": "^12.0.4",

packages/app/src/components/age-demographic/age-demographic-chart.tsx

@@ -1,4 +1,4 @@
-import { Color, colors } from '@corona-dashboard/common';
+import { Color, colors, KeysOfType } from '@corona-dashboard/common';
 import css from '@styled-system/css';
 import { AxisBottom, TickRendererProps } from '@visx/axis';
 import { GridColumns } from '@visx/grid';
@@ -32,8 +32,8 @@ interface AgeDemographicChartProps<T extends AgeDemographicDefaultValue> {
   onMouseMoveBar: (value: T, event: MouseEvent<SVGElement>) => void;
   onMouseLeaveBar: () => void;
   onKeyInput: (event: KeyboardEvent<SVGElement>) => void;
-  rightMetricProperty: keyof T;
-  leftMetricProperty: keyof T;
+  rightMetricProperty: KeysOfType<T, number, true>;
+  leftMetricProperty: KeysOfType<T, number, true>;
   rightColor: Color;
   leftColor: Color;
   maxDisplayValue?: number;
@@ -88,18 +88,16 @@ export function AgeDemographicChart<T extends AgeDemographicDefaultValue>({
 
   const annotations = useAccessibilityAnnotations(accessibility);
 
-  const getNumberValue = (data: T, key: keyof T): number => {
-    const value = data[key];
-    return typeof value === 'number' ? value : 0;
-  };
-
   const hasClippedValue = !!values.find(
     (value) =>
       getIsClipped(
-        getNumberValue(value, leftMetricProperty),
+        value[leftMetricProperty] as unknown as number,
         maxDisplayValue
       ) ||
-      getIsClipped(getNumberValue(value, rightMetricProperty), maxDisplayValue)
+      getIsClipped(
+        value[rightMetricProperty] as unknown as number,
+        maxDisplayValue
+      )
   );
 
   return (
@@ -193,12 +191,12 @@ export function AgeDemographicChart<T extends AgeDemographicDefaultValue>({
           const rightBarWidth = rightPoint(value);
 
           const isClippedLeftGroup = getIsClipped(
-            getNumberValue(value, leftMetricProperty),
+            value[leftMetricProperty] as unknown as number,
             maxDisplayValue
           );
 
           const isClippedRightGroup = getIsClipped(
-            getNumberValue(value, rightMetricProperty),
+            value[rightMetricProperty] as unknown as number,
             maxDisplayValue
           );
 

packages/app/src/components/age-demographic/age-demographic-coordinates.ts

@@ -1,3 +1,4 @@
+import { KeysOfType } from '@corona-dashboard/common';
 import { localPoint } from '@visx/event';
 import { scaleBand, scaleLinear, ScaleTypeToD3Scale } from '@visx/scale';
 import { MouseEvent, useMemo } from 'react';
@@ -41,8 +42,8 @@ export function useAgeDemographicCoordinates<
   T extends AgeDemographicDefaultValue
 >(
   data: { values: T[] },
-  rightMetricProperty: keyof T,
-  leftMetricProperty: keyof T,
+  rightMetricProperty: KeysOfType<T, number, true>,
+  leftMetricProperty: KeysOfType<T, number, true>,
   maxDisplayValue?: number
 ) {
   const [ref, { width = 840 }] = useResizeObserver<HTMLDivElement>();
@@ -78,8 +79,8 @@ function calculateAgeDemographicCoordinates<
   T extends AgeDemographicDefaultValue
 >(
   data: { values: T[] },
-  rightMetricProperty: keyof T,
-  leftMetricProperty: keyof T,
+  rightMetricProperty: KeysOfType<T, number, true>,
+  leftMetricProperty: KeysOfType<T, number, true>,
   isSmallScreen: boolean,
   parentWidth: number,
   isExtraSmallScreen: boolean,
@@ -117,14 +118,10 @@ function calculateAgeDemographicCoordinates<
   const yMax = height - margin.top - margin.bottom;
 
   // Helper functions to retrieve parts of the values
-  const getLeftValue = (value: T) => {
-    const leftValue = value[leftMetricProperty];
-    return typeof leftValue === 'number' ? leftValue : 0;
-  };
-  const getRightValue = (value: T) => {
-    const rightValue = value[rightMetricProperty];
-    return typeof rightValue === 'number' ? rightValue : 0;
-  };
+  const getLeftValue = (value: T) =>
+    value[leftMetricProperty] as unknown as number;
+  const getRightValue = (value: T) =>
+    value[rightMetricProperty] as unknown as number;
   const ageGroupRange = (value: T) => value.age_group_range;
 
   // Scales to map between values and coordinates

packages/app/src/components/age-demographic/age-demographic-tooltip-content.tsx

@@ -1,4 +1,4 @@
-import type { Color } from '@corona-dashboard/common';
+import type { Color, KeysOfType } from '@corona-dashboard/common';
 import css from '@styled-system/css';
 import styled from 'styled-components';
 import { BoldText } from '~/components/typography';
@@ -11,8 +11,8 @@ interface AgeDemographicTooltipContentProps<
   T extends AgeDemographicDefaultValue
 > {
   value: T;
-  rightMetricProperty: keyof T;
-  leftMetricProperty: keyof T;
+  rightMetricProperty: KeysOfType<T, number, true>;
+  leftMetricProperty: KeysOfType<T, number, true>;
   rightColor: Color;
   leftColor: Color;
   text: AgeDemographicChartText;
@@ -30,13 +30,6 @@ export function AgeDemographicTooltipContent<
   text,
   formatValue,
 }: AgeDemographicTooltipContentProps<T>) {
-  const valueRight = value[rightMetricProperty];
-  const rightMetricPropertyValue =
-    typeof valueRight === 'number' ? valueRight : 0;
-
-  const valueLeft = value[leftMetricProperty];
-  const leftMetricPropertyValue = typeof valueLeft === 'number' ? valueLeft : 0;
-
   return (
     <>
       <Box px={3} py={2}>
@@ -48,13 +41,17 @@ export function AgeDemographicTooltipContent<
       </Box>
       <Legend>
         <LegendItem color={rightColor}>
-          <BoldText>{formatValue(rightMetricPropertyValue)}</BoldText>{' '}
+          <BoldText>
+            {formatValue(value[rightMetricProperty] as unknown as number)}
+          </BoldText>{' '}
           {replaceVariablesInText(text.right_tooltip, {
             ageGroupRange: formatAgeGroupRange(value.age_group_range),
           })}
         </LegendItem>
         <LegendItem color={leftColor}>
-          <BoldText>{formatValue(leftMetricPropertyValue)}</BoldText>{' '}
+          <BoldText>
+            {formatValue(value[leftMetricProperty] as unknown as number)}
+          </BoldText>{' '}
           {replaceVariablesInText(text.left_tooltip, {
             ageGroupRange: formatAgeGroupRange(value.age_group_range),
           })}

packages/app/src/components/age-demographic/age-demographic.tsx

@@ -1,4 +1,4 @@
-import type { Color } from '@corona-dashboard/common';
+import type { Color, KeysOfType } from '@corona-dashboard/common';
 import { Box } from '~/components/base';
 import { ErrorBoundary } from '~/components/error-boundary';
 import { Tooltip, useTooltip } from '~/components/tooltip';
@@ -16,8 +16,8 @@ import { AgeDemographicChartText, AgeDemographicDefaultValue } from './types';
 
 export interface AgeDemographicProps<T extends AgeDemographicDefaultValue> {
   data: { values: T[] };
-  rightMetricProperty: keyof T;
-  leftMetricProperty: keyof T;
+  rightMetricProperty: KeysOfType<T, number, true>;
+  leftMetricProperty: KeysOfType<T, number, true>;
   rightColor: Color;
   leftColor: Color;
   /**

packages/app/src/components/choropleth/components/canvas-choropleth-map.tsx

@@ -321,7 +321,7 @@ const Outlines = memo((props: OutlinesProps) => {
 type FeaturesProps = {
   geoInfo: ProjectedGeoInfo[];
   featureProps: FeatureProps;
-  children: React.ReactNode;
+  children: any;
 };
 
 const Features = memo((props: FeaturesProps) => {

packages/app/src/components/choropleth/index.tsx

@@ -1,3 +1,4 @@
+import { KeysOfType } from '@corona-dashboard/common';
 import css from '@styled-system/css';
 import type { GeoProjection } from 'd3-geo';
 import withLoadingProps from 'next-dynamic-loading-props';
@@ -63,12 +64,16 @@ export type OptionalDataConfig<T extends ChoroplethDataItem> = {
   /**
    * A top-level property name of either VR_COLLECTION.json or GM_COLLECTION.json
    */
-  metricName: keyof InferedDataCollection<T>;
+  metricName: KeysOfType<InferedDataCollection<T>, T[]>;
   /**
    * A property name of the object determined by the metric name. This value is used to determine the color
    * of the feature.
    */
-  metricProperty: keyof T;
+  metricProperty: KeysOfType<
+    T,
+    string | number | null | boolean | undefined,
+    true
+  >;
   /**
    * The color that is used for the feature when no data is available (a null value for example).
    */

packages/app/src/components/choropleth/logic/create-data-config.ts

@@ -18,8 +18,8 @@ export function createDataConfig<T extends ChoroplethDataItem>(
 ) {
   if (partialDataConfig.metricName === 'veiligheidsregio') {
     return {
-      metricName: 'veiligheidsregio',
-      metricProperty: 'admissions_on_date_of_admission',
+      metricName: 'veiligheidsregio' as any,
+      metricProperty: 'admissions_on_date_of_admission' as any,
       areaStroke: colors.white,
       areaStrokeWidth: 1,
       hoverFill: colors.white,

packages/app/src/components/choropleth/logic/types.ts

@@ -1,19 +1,7 @@
 import type {
   GmCollection,
-  GmCollectionHospitalNice,
-  GmCollectionSewer,
-  GmCollectionTestedOverall,
-  GmCollectionVaccineCoveragePerAgeGroup,
+  KeysOfType,
   VrCollection,
-  VrCollectionBehavior,
-  VrCollectionDisabilityCare,
-  VrCollectionElderlyAtHome,
-  VrCollectionHospitalNice,
-  VrCollectionNursingHome,
-  VrCollectionSewer,
-  VrCollectionSituations,
-  VrCollectionTestedOverall,
-  VrCollectionVaccineCoveragePerAgeGroup,
 } from '@corona-dashboard/common';
 import type { ParsedFeature } from '@visx/geo/lib/projections/Projection';
 import type {
@@ -47,18 +35,9 @@ export enum CHOROPLETH_ASPECT_RATIO {
  */
 export type MapType = 'gm' | 'vr';
 
-const CODE_PROP_GM = 'gmcode';
-const CODE_PROP_VR = 'vrcode';
-const CODE_PROP_COUNTRY = 'country_code';
-
 export type CodeProp =
-  | typeof CODE_PROP_GM
-  | typeof CODE_PROP_VR
-  | typeof CODE_PROP_COUNTRY;
-
-export const isCodeProp = (input: string): input is CodeProp => {
-  return [CODE_PROP_GM, CODE_PROP_VR, CODE_PROP_COUNTRY].includes(input);
-};
+  | KeysOfType<VrDataItem, string, true>
+  | KeysOfType<GmDataItem, string, true>;
 
 export const mapToCodeType: Record<MapType, CodeProp> = {
   gm: 'gmcode',
@@ -80,24 +59,22 @@ export type InferedDataCollection<T extends ChoroplethDataItem> =
     ? VrCollection
     : never;
 
-export type VrDataCollection =
-  | VrCollectionHospitalNice[]
-  | VrCollectionHospitalNice[]
-  | VrCollectionTestedOverall[]
-  | VrCollectionNursingHome[]
-  | VrCollectionSewer[]
-  | VrCollectionBehavior[]
-  | VrCollectionDisabilityCare[]
-  | VrCollectionElderlyAtHome[]
-  | VrCollectionSituations[]
-  | VrCollectionVaccineCoveragePerAgeGroup[];
+/**
+ * Select all the item types of all the properties from the VrCollection with an array type that has a vrcode property
+ */
+export type VrDataCollection = VrCollection[KeysOfType<
+  VrCollection,
+  { vrcode: string }[]
+>];
 export type VrDataItem = VrDataCollection[number];
 
-export type GmDataCollection =
-  | GmCollectionHospitalNice[]
-  | GmCollectionTestedOverall[]
-  | GmCollectionSewer[]
-  | GmCollectionVaccineCoveragePerAgeGroup[];
+/**
+ * Select all the item types of all the properties from the GmCollection with an array type that has a gmcode property
+ */
+export type GmDataCollection = GmCollection[KeysOfType<
+  GmCollection,
+  { gmcode: string }[]
+>];
 export type GmDataItem = GmDataCollection[number];
 
 /**