Release/2.82.0

packages/app/package.json

@@ -122,7 +122,7 @@
     "next-transpile-modules": "^9.0.0",
     "node-mocks-http": "^1.11.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.31",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
     "react-test-renderer": "^17.0.2",
@@ -139,7 +139,7 @@
     "bootstrap": "exit 0",
     "export": "next export",
     "dev": "yarn workspace @corona-dashboard/icons build && yarn workspace @corona-dashboard/common build && run-p dev:common dev:next dev:lokalize",
-    "dev:next": "node next-server.js",
+    "dev:next": "cross-env NODE_OPTIONS='--inspect' node next-server.js",
     "dev:lokalize": "chokidar \"./src/locale/nl_export.json\" -c \"yarn workspace @corona-dashboard/cms lokalize:generate-types\"",
     "dev:common": "yarn workspace @corona-dashboard/common build:watch",
     "build": "cross-env NEXT_TELEMETRY_DISABLED=1 && next build",

packages/app/schema/archived_nl/__index.json

@@ -42,6 +42,7 @@
     "vaccine_vaccinated_or_support_archived_20230411",
     "vaccine_delivery_per_supplier_archived_20211101",
     "vaccine_stock_archived_20211024",
+    "variants_archived_20231101",
     "tested_ggd_archived_20230321",
     "tested_overall_archived_20230331",
     "tested_per_age_group_archived_20230331",
@@ -186,6 +187,9 @@
     "vaccine_stock_archived_20211024": {
       "$ref": "vaccine_stock.json"
     },
+    "variants_archived_20231101": {
+      "$ref": "variants.json"
+    },
     "repeating_shot_administered_20220713": {
       "$ref": "repeating_shot_administered.json"
     },

packages/app/schema/archived_nl/variants.json

@@ -0,0 +1,86 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "archived_nl_variants",
+  "required": ["values"],
+  "additionalProperties": false,
+  "properties": {
+    "values": {
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/variant"
+      }
+    }
+  },
+  "definitions": {
+    "variant": {
+      "type": "object",
+      "title": "archived_nl_variants_variant",
+      "additionalProperties": false,
+      "required": ["variant_code", "values", "last_value"],
+      "properties": {
+        "variant_code": {
+          "type": "string"
+        },
+        "values": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/value"
+          }
+        },
+        "last_value": {
+          "$ref": "#/definitions/value"
+        }
+      }
+    },
+    "value": {
+      "type": "object",
+      "title": "archived_nl_variants_variant_value",
+      "additionalProperties": false,
+      "required": [
+        "order",
+        "occurrence",
+        "percentage",
+        "sample_size",
+        "date_start_unix",
+        "date_end_unix",
+        "date_of_report_unix",
+        "date_of_insertion_unix",
+        "label_nl",
+        "label_en"
+      ],
+      "properties": {
+        "order": {
+          "type": "integer"
+        },
+        "occurrence": {
+          "type": "integer"
+        },
+        "percentage": {
+          "type": "number"
+        },
+        "sample_size": {
+          "type": "integer"
+        },
+        "date_start_unix": {
+          "type": "integer"
+        },
+        "date_end_unix": {
+          "type": "integer"
+        },
+        "date_of_insertion_unix": {
+          "type": "integer"
+        },
+        "date_of_report_unix": {
+          "type": "integer"
+        },
+        "label_nl": {
+          "type": "string"
+        },
+        "label_en": {
+          "type": "string"
+        }
+      }
+    }
+  }
+}

packages/app/schema/nl/__difference.json

@@ -26,6 +26,9 @@
     },
     "vulnerable_hospital_admissions": {
       "$ref": "#/definitions/diff_integer"
+    },
+    "self_test_overall": {
+      "$ref": "#/definitions/diff_decimal"
     }
   },
   "required": [
@@ -34,7 +37,8 @@
     "infectious_people__estimate",
     "intensive_care_nice__admissions_on_date_of_reporting_moving_average",
     "intensive_care_lcps__beds_occupied_covid",
-    "sewer__average"
+    "sewer__average",
+    "self_test_overall"
   ],
   "additionalProperties": false,
   "definitions": {

packages/app/schema/nl/__index.json

@@ -20,7 +20,8 @@
     "infectionradar_symptoms_trend_per_age_group_weekly",
     "sewer",
     "vaccine_campaigns",
-    "vaccine_administered_last_timeframe"
+    "vaccine_administered_last_timeframe",
+    "variants"
   ],
   "additionalProperties": false,
   "properties": {

packages/app/schema/nl/self_test_overall.json

@@ -3,12 +3,15 @@
     "value": {
       "title": "nl_self_test_overall_value",
       "type": "object",
-      "required": ["infected_percentage", "date_start_unix", "date_end_unix", "date_of_insertion_unix"],
+      "required": ["infected_percentage", "n_participants_total_unfiltered", "date_start_unix", "date_end_unix", "date_of_insertion_unix"],
       "additionalProperties": false,
       "properties": {
         "infected_percentage": {
           "type": ["number", "null"]
         },
+        "n_participants_total_unfiltered": {
+          "type": ["number"]
+        },
         "date_start_unix": {
           "type": "integer"
         },

packages/app/src/components/articles/page-articles-tile.tsx

@@ -77,7 +77,6 @@ const ArticleCard = styled(Anchor)`
   display: flex;
   flex-direction: column;
   gap: ${space[2]};
-  height: 100%;
   padding: ${space[3]};
 
   ${Text} {

packages/app/src/components/interactive-legend.tsx

@@ -37,7 +37,7 @@ export function InteractiveLegend<T = string>({ helpText, selectOptions, selecti
             const isSelected = selection.includes(item.metricProperty);
             return (
               <Item key={item.label}>
-                <StyledLabel htmlFor={`checkboxgroup-${item.label}`} isActive={hasSelection && isSelected} borderColor={item.color} data-text={item.label}>
+                <StyledLabel htmlFor={`checkboxgroup-${item.metricProperty}`} isActive={hasSelection && isSelected} borderColor={item.color} data-text={item.label}>
                   {item.label}
                   {item.shape === 'line' && <Line color={item.color} />}
                   {item.shape === 'dashed' && (
@@ -51,7 +51,7 @@ export function InteractiveLegend<T = string>({ helpText, selectOptions, selecti
                 </StyledLabel>
                 <StyledInput
                   type="checkbox"
-                  id={`checkboxgroup-${item.label}`}
+                  id={`checkboxgroup-${item.metricProperty}`}
                   value={item.label}
                   onClick={() => onToggleItem(item.metricProperty)}
                   aria-label={item.legendAriaLabel}

packages/app/src/components/kpi/bordered-kpi-section.tsx

@@ -9,10 +9,11 @@ import { KpiContent } from './components/kpi-content';
 import { BorderedKpiSectionProps } from './types';
 import { Markdown } from '../markdown';
 
-export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData }: BorderedKpiSectionProps) => {
+export const BorderedKpiSection = ({ title, description, source, dateOrRange, tilesData, disclaimer }: BorderedKpiSectionProps) => {
   const metadata: MetadataProps = {
     date: dateOrRange,
     source: source,
+    disclaimer: disclaimer,
   };
 
   return (

packages/app/src/components/kpi/types.ts

@@ -29,6 +29,7 @@ export interface BorderedKpiSectionProps {
   };
   tilesData: [TileData, TileData];
   title: string;
+  disclaimer?: string;
 }
 
 type BarType = {

packages/app/src/components/metadata.tsx

@@ -5,6 +5,7 @@ import { space } from '~/style/theme';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { Box } from './base';
 import { InlineText, Text } from './typography';
+import { Markdown } from '~/components/markdown';
 
 type source = {
   text: string;
@@ -25,9 +26,10 @@ export interface MetadataProps extends MarginBottomProps {
   isTileFooter?: boolean;
   datumsText?: string;
   intervalCount?: string;
+  disclaimer?: string;
 }
 
-export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, marginBottom, dataSources, intervalCount }: MetadataProps) {
+export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, marginBottom, dataSources, intervalCount, disclaimer }: MetadataProps) {
   const { commonTexts, formatDateFromSeconds } = useIntl();
 
   const dateString =
@@ -77,6 +79,11 @@ export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, m
               })
             ) : (
               <>
+                {disclaimer && (
+                  <Box paddingBottom={space[3]}>
+                    <Markdown content={disclaimer}></Markdown>
+                  </Box>
+                )}
                 {dateString}
                 {obtainedAt &&
                   ` ${replaceVariablesInText(commonTexts.common.metadata.obtained, {

packages/app/src/components/sitemap/use-data-sitemap.ts

@@ -48,8 +48,8 @@ export function useDataSitemap(base: 'nl' | 'gm', code?: string, data?: Pick<Nl,
       header: commonTexts.sidebar.categories.vaccinations.title,
       links: [
         {
-          text: commonTexts.sidebar.metrics.vaccinations.title,
-          href: reverseRouter.nl.vaccinaties(),
+          text: commonTexts.sidebar.metrics.the_corona_vaccine.title,
+          href: reverseRouter.nl.deCoronaprik(),
         },
       ],
     },

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

@@ -65,6 +65,7 @@ type StackedChartProps<T extends TimestampedValue> = {
   config: Config<T>[];
   valueAnnotation?: string;
   initialWidth?: number;
+  disableLegend?: boolean;
   expectedLabel?: string;
   formatTooltip?: TooltipFormatter<T & StackedBarTooltipData>;
   isPercentage?: boolean;
@@ -105,6 +106,7 @@ export function StackedChart<T extends TimestampedValue>(props: StackedChartProp
     config,
     initialWidth = 840,
     isPercentage,
+    disableLegend,
     expectedLabel,
     formatTickValue: formatYTickValue,
     formatTooltip,
@@ -461,9 +463,11 @@ export function StackedChart<T extends TimestampedValue>(props: StackedChartProp
           )}
         </ResponsiveContainer>
       </Box>
-      <Box paddingLeft={`${padding.left}px`}>
-        <Legend items={legendItems} />
-      </Box>
+      {!disableLegend && legendItems && (
+        <Box paddingLeft={`${padding.left}px`}>
+          <Legend items={legendItems} />
+        </Box>
+      )}
     </>
   );
 }

packages/app/src/components/time-series-chart/components/series-icon.tsx

@@ -8,6 +8,7 @@ import { ScatterPlotIcon } from './scatter-plot';
 import { RangeTrendIcon } from './range-trend';
 import { SplitAreaTrendIcon } from './split-area-trend';
 import { StackedAreaTrendIcon } from './stacked-area-trend';
+import { StackedBarTrendIcon } from '~/components/time-series-chart/components/stacked-bar-trend';
 
 interface SeriesIconProps<T extends TimestampedValue> {
   config: SeriesConfig<T>[number];
@@ -20,47 +21,25 @@ interface SeriesIconProps<T extends TimestampedValue> {
   value?: number | null;
 }
 
-export function SeriesIcon<T extends TimestampedValue>({
-  config,
-  value,
-}: SeriesIconProps<T>) {
+export function SeriesIcon<T extends TimestampedValue>({ config, value }: SeriesIconProps<T>) {
   switch (config.type) {
     case 'line':
     case 'gapped-line':
-      return (
-        <LineTrendIcon
-          color={config.color}
-          strokeWidth={config.strokeWidth}
-          style={config.style}
-        />
-      );
+      return <LineTrendIcon color={config.color} strokeWidth={config.strokeWidth} style={config.style} />;
     case 'scatter-plot':
       return <ScatterPlotIcon color={config.color} />;
     case 'range':
-      return (
-        <RangeTrendIcon color={config.color} fillOpacity={config.fillOpacity} />
-      );
+      return <RangeTrendIcon color={config.color} fillOpacity={config.fillOpacity} />;
     case 'area':
     case 'gapped-area':
-      return (
-        <AreaTrendIcon
-          color={config.color}
-          fillOpacity={config.fillOpacity}
-          strokeWidth={config.strokeWidth}
-        />
-      );
+      return <AreaTrendIcon color={config.color} fillOpacity={config.fillOpacity} strokeWidth={config.strokeWidth} />;
     case 'stacked-area':
     case 'gapped-stacked-area':
-      return (
-        <StackedAreaTrendIcon
-          color={config.color}
-          fillOpacity={config.fillOpacity}
-        />
-      );
+      return <StackedAreaTrendIcon color={config.color} fillOpacity={config.fillOpacity} />;
     case 'bar':
-      return (
-        <BarTrendIcon color={config.color} fillOpacity={config.fillOpacity} />
-      );
+      return <BarTrendIcon color={config.color} fillOpacity={config.fillOpacity} />;
+    case 'stacked-bar':
+      return <StackedBarTrendIcon color={config.color} fillOpacity={config.fillOpacity}></StackedBarTrendIcon>;
     case 'split-area':
       /**
        * Here we return the icon even if there is no value, because it
@@ -71,20 +50,9 @@ export function SeriesIcon<T extends TimestampedValue>({
        *
        * @TODO Possibly we want this behavior for split-bar as well...
        */
-      return (
-        <SplitAreaTrendIcon
-          color={findSplitPointForValue(config.splitPoints, value).color}
-          fillOpacity={config.fillOpacity}
-          strokeWidth={config.strokeWidth}
-        />
-      );
+      return <SplitAreaTrendIcon color={findSplitPointForValue(config.splitPoints, value).color} fillOpacity={config.fillOpacity} strokeWidth={config.strokeWidth} />;
     case 'split-bar':
-      return isPresent(value) ? (
-        <BarTrendIcon
-          color={findSplitPointForValue(config.splitPoints, value).color}
-          fillOpacity={config.fillOpacity}
-        />
-      ) : null;
+      return isPresent(value) ? <BarTrendIcon color={findSplitPointForValue(config.splitPoints, value).color} fillOpacity={config.fillOpacity} /> : null;
     default:
       return null;
   }