Release/2.49.0

packages/app/schema/nl/booster_shot_administered.json

@@ -25,19 +25,13 @@
         "administered_total": {
           "type": "number"
         },
-        "ggd_administered_last_7_days": {
-          "type": "number"
-        },
         "ggd_administered_total": {
           "type": "number"
         },
         "others_administered_total": {
           "type": "number"
         },
-        "date_start_unix": {
-          "type": "integer"
-        },
-        "date_end_unix": {
+        "date_unix": {
           "type": "integer"
         },
         "date_of_insertion_unix": {
@@ -46,11 +40,9 @@
       },
       "required": [
         "administered_total",
-        "ggd_administered_last_7_days",
         "ggd_administered_total",
         "others_administered_total",
-        "date_start_unix",
-        "date_end_unix",
+        "date_unix",
         "date_of_insertion_unix"
       ],
       "additionalProperties": false

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

@@ -10,6 +10,7 @@ import { KeyboardEvent, MouseEvent } from 'react';
 import styled from 'styled-components';
 import { Box } from '~/components/base';
 import { Text } from '~/components/typography';
+import { replaceVariablesInText } from '~/utils';
 import {
   AccessibilityDefinition,
   useAccessibilityAnnotations,
@@ -229,12 +230,16 @@ export function AgeDemographicChart<T extends AgeDemographicDefaultValue>({
                 textAnchor="middle"
                 verticalAnchor="middle"
                 fontSize="12"
+                fontWeight="bold"
                 y={ageGroupRangePoint(value) + singleBarHeight / 2}
                 x={width / 2}
-                fill={colors.annotation}
+                fill="black"
               >
-                {formatAgeGroupRange(ageGroupRange(value)) +
-                  (isClippedValue ? ' *' : '')}
+                {replaceVariablesInText(text.age_group_range_tooltip, {
+                  ageGroupRange:
+                    formatAgeGroupRange(ageGroupRange(value)) +
+                    (isClippedValue ? ' *' : ''),
+                })}
               </VisxText>
               <Bar
                 x={width / 2 + axisWidth / 2}

packages/app/src/components/index.ts

@@ -3,13 +3,15 @@ export * from './collapsible/collapsible-content';
 export * from './collapsible/collapsible-section';
 export type { AgeDemographicProps } from './age-demographic';
 export type { PieChartProps } from './pie-chart';
+export type { MetadataProps } from './metadata';
 
 export { AgeDemographic } from './age-demographic';
 export { ChartTile } from './chart-tile';
 export { InView } from './in-view';
 export { Metadata } from './metadata';
 export { PageInformationBlock } from './page-information-block';
 export { TileList } from './tile-list';
+export { Tile } from './tile';
 export { TimeSeriesChart } from './time-series-chart';
 export { WarningTile } from './warning-tile';
 export { Divider } from './divider';
@@ -26,3 +28,4 @@ export { SEOHead } from './seo-head';
 export { PageKpi } from './page-kpi';
 export { PageBarScale } from './page-barscale';
 export { VisuallyHidden } from './visually-hidden';
+export { Message } from './message';

packages/app/src/components/layout/components/top-navigation.tsx

@@ -32,7 +32,9 @@ export function TopNavigation() {
       >
         {collapsible.button(
           <NavToggle>
-            {collapsible.isOpen ? <CloseThick /> : <Menu />}
+            {collapsible.isOpen
+              ? <CloseThick heigth="36px" width="36px"/>
+              : <Menu  heigth="36px" width="36px"/>}
             <VisuallyHidden>
               {collapsible.isOpen
                 ? commonTexts.nav.menu.close_menu

packages/app/src/components/page-information-block/components/header.tsx

@@ -32,7 +32,7 @@ export function Header({
       {icon && !isMediumScreen && <Icon gridArea="topIcon">{icon}</Icon>}
       {category && (
         <Box gridArea="category">
-          <Heading level={1} variant="subtitle2">
+          <Heading level={2} variant="subtitle2">
             {category}
             {screenReaderCategory && (
               <VisuallyHidden>{`- ${screenReaderCategory}`}</VisuallyHidden>
@@ -41,12 +41,7 @@ export function Header({
         </Box>
       )}
       {icon && isMediumScreen && <Icon gridArea="sideIcon">{icon}</Icon>}
-      <Heading
-        level={1}
-        as="h2"
-        hyphens="auto"
-        css={css({ gridArea: 'title' })}
-      >
+      <Heading level={1} hyphens="auto" css={css({ gridArea: 'title' })}>
         {title}
       </Heading>
     </GridLayout>

packages/app/src/components/page-information-block/components/metadata.tsx

@@ -7,6 +7,7 @@ import {
 } from '@corona-dashboard/icons';
 import css from '@styled-system/css';
 import { 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';
@@ -61,9 +62,9 @@ export function Metadata({
   return (
     <Box spacing={2}>
       <Box display="flex" alignItems="flex-start" color="annotation">
-        <Box as="span" minWidth="1.8rem">
+        <Icon>
           <Clock aria-hidden color={colors.annotation} />
-        </Box>
+        </Icon>
         <Text variant="label1">{dateText}</Text>
       </Box>
 
@@ -157,9 +158,7 @@ function MetadataItem({
 
   return (
     <Box display="flex" alignItems="flex-start" color="annotation">
-      <Box as="span" minWidth="1.8rem">
-        {icon}
-      </Box>
+      <Icon>{icon}</Icon>
 
       <Text variant="label1">
         {referenceLink && !items && (
@@ -223,7 +222,7 @@ function MetadataReference({ icon, referenceLink }: metadataReferenceProps) {
 
   return (
     <Box display="flex" alignItems="flex-start" color="annotation">
-      <Box minWidth="1.8rem">{icon}</Box>
+      <Icon>{icon}</Icon>
 
       <Link href={referenceLink} passHref>
         <Anchor underline="hover" variant="label1">
@@ -249,3 +248,14 @@ function MetadataReference({ icon, referenceLink }: metadataReferenceProps) {
     </Box>
   );
 }
+
+const Icon = styled.span(() =>
+  css({
+    minWidth: '1.8rem',
+
+    svg: {
+      height: '15px',
+      width: 'auto',
+    },
+  })
+);

packages/app/src/components/rich-content-select/components/index.tsx

@@ -101,7 +101,9 @@ export const ListBoxOption = styled(Box)(
       },
     },
     '&:hover': {
-      backgroundColor: 'tileGray',
+      backgroundColor: 'blue',
+      color: 'white',
+      fontWeight: 'normal',
     },
   })
 );

packages/app/src/components/time-series-chart/components/bar-trend.tsx

@@ -119,7 +119,7 @@ export function BarTrend({
                 height={barHeight}
                 width={barWidth}
                 fill={transparentize(1 - fillOpacity, color)}
-                id={id}
+                id={`${id}_${index}`}
               />
             );
           })}

packages/app/src/components/time-series-chart/components/gapped-line-trend.tsx

@@ -35,7 +35,7 @@ export function GappedLinedTrend(props: GappedLinedTrendProps) {
           curve={curve}
           getX={getX}
           getY={getY}
-          id={id}
+          id={`${id}_${index}`}
         />
       ))}
     </>

packages/app/src/components/time-series-chart/components/index.ts

@@ -6,6 +6,7 @@ export * from './chart-container';
 export * from './date-line-marker';
 export * from './date-span-marker';
 export * from './line-trend';
+export * from './scatter-plot';
 export * from './overlay';
 export * from './point-markers';
 export * from './range-trend';

packages/app/src/components/time-series-chart/components/scatter-plot.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+import { isPresent } from 'ts-is-present';
+import { SeriesItem, SeriesSingleValue } from '../logic';
+import { Group } from '@visx/group';
+
+const DEFAULT_DOT_SIZE = 3;
+
+type LineTrendProps = {
+  series: SeriesSingleValue[];
+  color: string;
+  getX: (v: SeriesItem) => number;
+  getY: (v: SeriesSingleValue) => number;
+  id: string;
+};
+
+export function ScatterPlot({
+  series: dataSeries,
+  color,
+  getX,
+  getY,
+  id,
+}: LineTrendProps) {
+  const series = useMemo(
+    () => dataSeries.filter((x) => isPresent(x.__value)),
+    [dataSeries]
+  );
+
+  return series.length === 0 ? null : (
+    <Group>
+      {series.map((data, i) => (
+        <circle
+          key={i}
+          id={`${id}-${i}`}
+          r={DEFAULT_DOT_SIZE}
+          cx={getX(data)}
+          cy={getY(data)}
+          fill={color}
+        />
+      ))}
+    </Group>
+  );
+}
+
+interface ScatterPlotIconProps {
+  color: string;
+  radius?: number;
+  width?: number;
+  height?: number;
+}
+
+export function ScatterPlotIcon({
+  color,
+  width = 15,
+  height = 15,
+  radius = 3,
+}: ScatterPlotIconProps) {
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+      <circle
+        r={Math.min(width / 2, radius)}
+        fill={color}
+        cy={height / 2}
+        cx={width / 2}
+      />
+    </svg>
+  );
+}

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

@@ -4,6 +4,7 @@ import { findSplitPointForValue, SeriesConfig } from '../logic';
 import { AreaTrendIcon } from './area-trend';
 import { BarTrendIcon } from './bar-trend';
 import { LineTrendIcon } from './line-trend';
+import { ScatterPlotIcon } from './scatter-plot';
 import { RangeTrendIcon } from './range-trend';
 import { SplitAreaTrendIcon } from './split-area-trend';
 import { StackedAreaTrendIcon } from './stacked-area-trend';
@@ -33,6 +34,8 @@ export function SeriesIcon<T extends TimestampedValue>({
           style={config.style}
         />
       );
+    case 'scatter-plot':
+      return <ScatterPlotIcon color={config.color} />;
     case 'range':
       return (
         <RangeTrendIcon color={config.color} fillOpacity={config.fillOpacity} />

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

@@ -1,7 +1,7 @@
 import { TimestampedValue } from '@corona-dashboard/common';
 import { ScaleLinear } from 'd3-scale';
 import { memo } from 'react';
-import { AreaTrend, BarTrend, LineTrend, RangeTrend } from '.';
+import { AreaTrend, BarTrend, LineTrend, ScatterPlot, RangeTrend } from '.';
 import {
   Bounds,
   GetX,
@@ -61,8 +61,8 @@ function SeriesUnmemoized<T extends TimestampedValue>({
           const config = seriesConfig[index];
           const id =
             config.type === 'range'
-              ? `${chartId}_${config.metricPropertyLow}_${config.metricPropertyHigh}`
-              : `${chartId}_${config.metricProperty}`;
+              ? `${chartId}_${config.metricPropertyLow}_${config.metricPropertyHigh}_${config.type}`
+              : `${chartId}_${config.metricProperty}_${config.type}`;
 
           switch (config.type) {
             case 'gapped-line':
@@ -93,6 +93,17 @@ function SeriesUnmemoized<T extends TimestampedValue>({
                   id={id}
                 />
               );
+            case 'scatter-plot':
+              return (
+                <ScatterPlot
+                  key={index}
+                  series={series as SeriesSingleValue[]}
+                  color={config.color}
+                  getX={getX}
+                  getY={getY}
+                  id={id}
+                />
+              );
             case 'area':
               return (
                 <AreaTrend

packages/app/src/components/time-series-chart/components/split-bar-trend.tsx

@@ -73,7 +73,7 @@ export function SplitBarTrend({
         return (
           <rect
             key={index}
-            id={id}
+            id={`${id}_${index}`}
             x={x}
             y={y}
             height={barHeight}

packages/app/src/components/time-series-chart/logic/common.ts

@@ -20,7 +20,11 @@ export interface DataOptions {
 export type OutOfBoundsConfig = {
   label: string;
   tooltipLabel: string;
-  checkIsOutofBounds: (a: any, b: number) => boolean;
+  checkIsOutofBounds: (
+    a: any,
+    b: number,
+    c: [start: number, end: number]
+  ) => boolean;
 };
 
 export interface BenchmarkConfig {

packages/app/src/components/time-series-chart/logic/hover-state.ts

@@ -333,6 +333,7 @@ export function useHoverState<T extends TimestampedValue>({
 
         switch (config.type) {
           case 'line':
+          case 'scatter-plot':
           case 'gapped-line':
           case 'area':
           case 'gapped-area':

packages/app/src/components/time-series-chart/logic/legend.tsx

@@ -20,7 +20,8 @@ type SplitLegendGroup = { label: string; items: LegendItem[] };
 export function useLegendItems<T extends TimestampedValue>(
   domain: number[],
   config: SeriesConfig<T>,
-  dataOptions?: DataOptions
+  dataOptions?: DataOptions,
+  hasOutofBoudsValues = false
 ) {
   const { timelineEvents, timespanAnnotations, outOfBoundsConfig } =
     dataOptions || {};
@@ -50,9 +51,9 @@ export function useLegendItems<T extends TimestampedValue>(
       })
       .filter(isDefined);
 
-    if (outOfBoundsConfig) {
+    if (hasOutofBoudsValues) {
       legendItems.push({
-        label: outOfBoundsConfig.label,
+        label: outOfBoundsConfig?.label,
         shape: 'custom',
         shapeComponent: <OutOfBoundsIcon />,
       } as LegendItem);
@@ -136,5 +137,6 @@ export function useLegendItems<T extends TimestampedValue>(
     timelineEvents,
     timespanAnnotations,
     outOfBoundsConfig,
+    hasOutofBoudsValues,
   ]);
 }