Merge branch 'develop' into release/2.86.0

minvws · Jan 23, 2024 · 5d22e56 · 5d22e56
2 parents 76fadfb + afd3bee
commit 5d22e56
Show file tree

Hide file tree

Showing 32 changed files with 259 additions and 207 deletions.
diff --git a/packages/app/schema/archived_nl/__index.json b/packages/app/schema/archived_nl/__index.json
@@ -51,7 +51,9 @@
     "repeating_shot_administered_20220713",
     "corona_melder_app_warning_archived_20220421",
     "corona_melder_app_download_archived_20220421",
-    "infectious_people_archived_20210709"
+    "infectious_people_archived_20210709",
+    "vaccine_campaigns_archived_20240117",
+    "vaccine_administered_last_timeframe_archived_20240117"
   ],
   "additionalProperties": false,
   "properties": {
@@ -201,6 +203,12 @@
     },
     "infectious_people_archived_20210709": {
       "$ref": "infectious_people.json"
+    },
+    "vaccine_administered_last_timeframe_archived_20240117": {
+      "$ref": "vaccine_administered_last_timeframe.json"
+    },
+    "vaccine_campaigns_archived_20240117": {
+      "$ref": "vaccine_campaigns.json"
     }
   },
   "$defs": {

diff --git a/.../vaccine_administered_last_timeframe.json → .../vaccine_administered_last_timeframe.json b/.../vaccine_administered_last_timeframe.json → .../vaccine_administered_last_timeframe.json
@@ -16,7 +16,7 @@
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "title": "nl_vaccine_administered_last_timeframe",
+  "title": "archived_nl_vaccine_administered_last_timeframe",
   "type": "object",
   "required": ["vaccine_types", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"],
   "additionalProperties": false,

diff --git a/...ages/app/schema/nl/vaccine_campaigns.json → ...schema/archived_nl/vaccine_campaigns.json b/...ages/app/schema/nl/vaccine_campaigns.json → ...schema/archived_nl/vaccine_campaigns.json
@@ -1,7 +1,7 @@
 {
   "definitions": {
     "vaccine_campaign": {
-      "title": "nl_vaccine_campaigns",
+      "title": "archived_nl_vaccine_campaigns",
       "type": "object",
       "required": ["vaccine_campaign_order", "vaccine_campaign_name_nl", "vaccine_campaign_name_en", "vaccine_administered_total", "vaccine_administered_last_timeframe"],
       "additionalProperties": false,
@@ -25,7 +25,7 @@
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "title": "nl_vaccine_campaign",
+  "title": "archived_nl_vaccine_campaign",
   "type": "object",
   "required": ["vaccine_campaigns", "date_unix", "date_start_unix", "date_end_unix", "date_of_insertion_unix"],
   "additionalProperties": false,

diff --git a/packages/app/schema/nl/__index.json b/packages/app/schema/nl/__index.json
@@ -19,8 +19,6 @@
     "self_test_overall",
     "infectionradar_symptoms_trend_per_age_group_weekly",
     "sewer",
-    "vaccine_campaigns",
-    "vaccine_administered_last_timeframe",
     "variants"
   ],
   "additionalProperties": false,
@@ -67,12 +65,6 @@
     "deceased_cbs": {
       "$ref": "deceased_cbs.json"
     },
-    "vaccine_administered_last_timeframe": {
-      "$ref": "vaccine_administered_last_timeframe.json"
-    },
-    "vaccine_campaigns": {
-      "$ref": "vaccine_campaigns.json"
-    },
     "variants": {
       "$ref": "variants.json"
     },

diff --git a/packages/app/src/components/metadata.tsx b/packages/app/src/components/metadata.tsx
@@ -6,6 +6,8 @@ import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
 import { Box } from './base';
 import { InlineText, Text } from './typography';
 import { Markdown } from '~/components/markdown';
+import { External as ExternalLinkIcon } from '@corona-dashboard/icons';
+import React from 'react';
 
 type source = {
   text: string;
@@ -59,6 +61,7 @@ export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, m
           {`${dateString} - ${commonTexts.common.metadata.source}: `}
           <ExternalLink ariaLabel={source.aria_text} href={source.href}>
             {source.text}
+            <ExternalLinkIcon width={space[3]} height={space[2]} />
           </ExternalLink>
         </Text>
       )}

diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx
@@ -1,14 +1,15 @@
 import { colors } from '@corona-dashboard/common';
-import { ChevronRight, Clock, Database, MeerInformatie } from '@corona-dashboard/icons';
+import { ChevronRight, Clock, Database, External as ExternalLinkIcon, MeerInformatie } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { ExternalLink } from '~/components/external-link';
 import { Anchor, InlineText, Text } from '~/components/typography';
 import { useIntl } from '~/intl';
 import { Link } from '~/utils/link';
 import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+import { space } from '~/style/theme';
 
 interface Datasource {
   href: string;
@@ -112,18 +113,11 @@ interface MetadataItemProps {
 }
 
 function MetadataItem({ icon, label, items, referenceLink, accessibilityText, accessibilitySubject }: MetadataItemProps) {
-  const { commonTexts } = useIntl();
-
   return (
-    <Box display="flex" alignItems="flex-start" color="gray7">
+    <Box display="flex" alignItems="flex-start" color={colors.gray7}>
       <Icon>{icon}</Icon>
 
       <Text variant="label1">
-        {referenceLink && !items && (
-          <Link href={referenceLink} passHref>
-            <a>{commonTexts.informatie_header.meer_informatie_link}</a>
-          </Link>
-        )}
         {items && referenceLink && (
           <>
             {`${label}: `}
@@ -146,6 +140,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac
                 {item.href && (
                   <ExternalLink
                     href={item.href}
+                    underline="hover"
                     ariaLabel={
                       accessibilityText && accessibilitySubject
                         ? replaceVariablesInText(accessibilityText, {
@@ -156,6 +151,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac
                     }
                   >
                     {item.text}
+                    <ExternalLinkIcon width={space[3]} height={space[2]} />
                   </ExternalLink>
                 )}
                 {!item.href && item.text}

diff --git a/packages/app/src/components/tables/components/wide-percentage-data.tsx b/packages/app/src/components/tables/components/wide-percentage-data.tsx
@@ -2,21 +2,21 @@ import { Box } from '~/components/base';
 import { BehaviorTrend } from '~/domain/behavior/components/behavior-trend';
 import { WidePercentage } from '~/components/tables/components/wide-percentage';
 import { space } from '~/style/theme';
-import { PercentageDataPoint } from '../types';
-import { tableColumnWidths } from '../wide-table';
+import { PercentageDataPoint, TableColumnWidths } from '../types';
 import { PercentageBarWithoutNumber } from './percentage-bar-without-number';
 import { Cell } from './shared-styled-components';
 
 interface PercentageDataProps {
   percentageDataPoints: PercentageDataPoint[];
+  columnWidths: TableColumnWidths;
 }
 
 // Component used to show percentages on wide screens.
-export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) => {
+export const PercentageData = ({ percentageDataPoints, columnWidths }: PercentageDataProps) => {
   return (
     <>
       {percentageDataPoints.map((percentageDataPoint, index) => (
-        <Cell minWidth={tableColumnWidths.percentageColumn} border="0" key={index}>
+        <Cell minWidth={columnWidths.percentageColumn} border="0" key={index}>
           <WidePercentage
             value={
               percentageDataPoint.trendDirection ? (
@@ -31,7 +31,7 @@ export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) =>
         </Cell>
       ))}
 
-      <Cell minWidth={tableColumnWidths.percentageBarColumn} border="0">
+      <Cell minWidth={columnWidths.percentageBarColumn} border="0">
         <Box display="flex" flexDirection="column">
           {percentageDataPoints.map((percentageDataPoint, index) => (
             // In some cases, the percentage value is a string so it needs to be parsed for the progress bar to be filled properly.

diff --git a/packages/app/src/components/tables/types.ts b/packages/app/src/components/tables/types.ts
@@ -3,6 +3,12 @@ import { BehaviorTrendType } from '~/domain/behavior/logic/behavior-types';
 
 type TrendDirection = BehaviorTrendType | null;
 
+export type TableColumnWidths = {
+  labelColumn: string;
+  percentageColumn: string;
+  percentageBarColumn: string;
+};
+
 export type PercentageDataPoint = {
   title: string;
   trendDirection?: TrendDirection;
@@ -34,6 +40,7 @@ export interface TableData extends BaseTableData {
 export type BaseCoverageTable = BaseTableData;
 
 export interface CommonTableProps {
+  tableColumnWidths?: TableColumnWidths;
   tableData: SingleCoverageTableData[] | TableData[];
   percentageData: PercentageDataPoint[][];
 }
diff --git a/packages/app/src/components/tables/wide-table.tsx b/packages/app/src/components/tables/wide-table.tsx
@@ -5,18 +5,18 @@ import { PercentageData } from './components/wide-percentage-data';
 import { Cell, HeaderCell, Table, TableHead } from './components/shared-styled-components';
 import { CommonTableProps } from './types';
 
-export const tableColumnWidths = {
+interface WideTableProps extends CommonTableProps {
+  headerText: { [key: string]: string };
+}
+
+const defaultColumnWidths = {
   labelColumn: '30%',
   percentageColumn: '20%',
   percentageBarColumn: '30%',
 };
 
-interface WideTableProps extends CommonTableProps {
-  headerText: { [key: string]: string };
-}
-
 // Component shown for tables on wide screens.
-export const WideTable = ({ tableData, headerText, percentageData }: WideTableProps) => {
+export const WideTable = ({ tableData, headerText, tableColumnWidths = defaultColumnWidths, percentageData }: WideTableProps) => {
   return (
     <Box overflow="auto">
       <Table>
@@ -47,7 +47,7 @@ export const WideTable = ({ tableData, headerText, percentageData }: WideTablePr
               <Cell minWidth={tableColumnWidths.labelColumn} border="0">
                 {item.firstColumnLabel}
               </Cell>
-              <PercentageData percentageDataPoints={percentageData[tableDataIndex]} key={`wide-${item.id}-${tableDataIndex}`} />
+              <PercentageData columnWidths={tableColumnWidths} percentageDataPoints={percentageData[tableDataIndex]} key={`wide-${item.id}-${tableDataIndex}`} />
             </Row>
           ))}
         </tbody>

diff --git a/packages/app/src/components/time-series-chart/logic/series.ts b/packages/app/src/components/time-series-chart/logic/series.ts
@@ -186,6 +186,7 @@ export interface StackedBarSeriesDefinition<T extends TimestampedValue> extends
   shortLabel?: string;
   color: string;
   fillOpacity?: number;
+  order: number;
 }
 
 /**

diff --git a/packages/app/src/domain/behavior/behavior-table-tile.tsx b/packages/app/src/domain/behavior/behavior-table-tile.tsx
@@ -47,6 +47,11 @@ export const BehaviorTableTile = ({ title, description, value, annotation, setCu
           }}
           tableData={behaviorsTableData}
           percentageData={percentageData}
+          tableColumnWidths={{
+            labelColumn: '35%',
+            percentageColumn: '20%',
+            percentageBarColumn: '30%',
+          }}
         />
       ) : (
         <NarrowTable tableData={behaviorsTableData} percentageData={percentageData} headerText={text.basisregels.header_basisregel} />

diff --git a/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx b/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx
@@ -6,6 +6,7 @@ import { Anchor } from '~/components/typography';
 import { fontWeights, mediaQueries, space } from '~/style/theme';
 import { BehaviorIdentifier } from '../logic/behavior-types';
 import { BehaviorIcon } from './behavior-icon';
+import { ChevronRight } from '@corona-dashboard/icons';
 
 type ScrollRef = { current: HTMLDivElement | null };
 
@@ -33,8 +34,9 @@ export const BehaviorIconWithLabel = ({ id, description, onClickConfig }: Behavi
       </Box>
 
       <BehaviorAnchor as="button" underline="hover" color={colors.black} onClick={() => anchorButtonClickHandler(id, onClickConfig.scrollRef)}>
-        <Box as="span" display="flex" alignItems="center" textAlign="left" flexWrap="wrap">
+        <Box as="span" display="flex" alignItems="center" textAlign="left" flexWrap="wrap" gridColumnGap={space[1]}>
           {description}
+          <ChevronRight width={space[2]} height={space[2]} />
         </Box>
       </BehaviorAnchor>
     </Box>

diff --git a/packages/app/src/domain/layout/gm-layout.tsx b/packages/app/src/domain/layout/gm-layout.tsx
@@ -77,7 +77,7 @@ export function GmLayout(props: GmLayoutProps) {
         hideBackButton={isMainRoute}
         searchComponent={
           <Box height="100%" maxWidth={{ _: '38rem', md: undefined }} marginX="auto">
-            <GmComboBox getLink={getLink} selectedGmCode={code} />
+            <GmComboBox getLink={getLink} selectedGmCode={code} shouldFocusInput={false} />
           </Box>
         }
         sidebarComponent={

diff --git a/packages/app/src/domain/layout/layout.tsx b/packages/app/src/domain/layout/layout.tsx
@@ -1,14 +1,14 @@
-import { ReactNode } from 'react';
+import { AppFooter } from '~/components/layout/app-footer';
+import { AppHeader } from '~/components/layout/app-header';
 import { Box } from '~/components/base/box';
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { BreadcrumbsDataProvider } from '~/components/breadcrumbs/logic/use-breadcrumbs';
-import { AppFooter } from '~/components/layout/app-footer';
-import { AppHeader } from '~/components/layout/app-header';
+import { CurrentDateProvider } from '~/utils/current-date-context';
 import { NotificationBanner } from '~/components/notification-banner';
+import { ReactNode } from 'react';
 import { SEOHead } from '~/components/seo-head';
 import { SkipLinkMenu } from '~/components/skip-link-menu';
 import { useIntl } from '~/intl';
-import { CurrentDateProvider } from '~/utils/current-date-context';
 
 interface LayoutProps {
   children: ReactNode;
@@ -30,12 +30,12 @@ export function Layout({ breadcrumbsData, children, title, description, openGrap
       <SkipLinkMenu
         ariaLabel={commonTexts.aria_labels.skip_links}
         links={[
-          { href: '#content', label: commonTexts.skiplinks.inhoud },
           { href: '#main-navigation', label: commonTexts.skiplinks.nav },
           {
             href: '#metric-navigation',
             label: commonTexts.skiplinks.metric_nav,
           },
+          { href: '#content', label: commonTexts.skiplinks.inhoud },
           {
             href: '#footer-navigation',
             label: commonTexts.skiplinks.footer_nav,

diff --git a/...ccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx b/...ccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx
@@ -51,6 +51,11 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata
           }}
           tableData={sortedData}
           percentageData={percentageData}
+          tableColumnWidths={{
+            labelColumn: '10%',
+            percentageColumn: '20%',
+            percentageBarColumn: '30%',
+          }}
         />
       ) : (
         <NarrowTable headerText={text.headers.agegroup} tableData={sortedData} percentageData={percentageData} />

diff --git a/...n/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx b/...n/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx
@@ -51,6 +51,11 @@ export const PrimarySeriesShotCoveragePerAgeGroup = ({ title, description, metad
           }}
           tableData={sortedData}
           percentageData={percentageData}
+          tableColumnWidths={{
+            labelColumn: '10%',
+            percentageColumn: '20%',
+            percentageBarColumn: '30%',
+          }}
         />
       ) : (
         <NarrowTable headerText={text.headers.agegroup} tableData={sortedData} percentageData={percentageData} />

diff --git a/packages/app/src/domain/variants/data-selection/get-variant-bar-chart-data.ts b/packages/app/src/domain/variants/data-selection/get-variant-bar-chart-data.ts
@@ -20,7 +20,7 @@ export function getVariantBarChartData(variants: NlVariants) {
     return EMPTY_VALUES;
   }
 
-  const sortedVariants = variants.values.sort((a, b) => b.last_value.order - a.last_value.order);
+  const sortedVariants = variants.values.sort((a, b) => a.last_value.order - b.last_value.order);
 
   const firstVariantInList = sortedVariants.shift();
 

diff --git a/packages/app/src/domain/variants/data-selection/get-variant-orders.ts b/packages/app/src/domain/variants/data-selection/get-variant-orders.ts
@@ -0,0 +1,21 @@
+import { NlVariants } from '@corona-dashboard/common';
+import { OrderMatch } from '~/domain/variants/data-selection/types';
+import { isDefined } from 'ts-is-present';
+
+export const getVariantOrders = (variants: NlVariants): OrderMatch[] => {
+  if (!isDefined(variants) || !isDefined(variants.values)) {
+    return [];
+  }
+
+  const order = variants.values
+    .sort((a, b) => a.last_value.order - b.last_value.order)
+    .map((variant) => {
+      const variantOrder = variant.last_value.order;
+      return {
+        variant: variant.variant_code,
+        order: variantOrder,
+      };
+    });
+
+  return order;
+};
diff --git a/packages/app/src/domain/variants/data-selection/index.ts b/packages/app/src/domain/variants/data-selection/index.ts
@@ -2,3 +2,4 @@ export * from './get-variant-bar-chart-data';
 export * from './get-archived-variant-chart-data';
 export * from './get-variant-order-colors';
 export * from './get-variant-table-data';
+export * from './get-variant-orders';
diff --git a/packages/app/src/domain/variants/data-selection/types.ts b/packages/app/src/domain/variants/data-selection/types.ts
@@ -9,6 +9,11 @@ export type ColorMatch = {
   color: string;
 };
 
+export type OrderMatch = {
+  variant: VariantCode;
+  order: number;
+};
+
 export type VariantTableData = ReturnType<typeof getVariantTableData>;
 
 export type VariantChartValue = {