Release/2.67.0

packages/app/schema/nl/hospital_lcps.json

@@ -23,6 +23,12 @@
         "beds_occupied_covid": {
           "type": ["integer", "null"]
         },
+        "influx_covid_patients": {
+          "type": ["integer", "null"]
+        },
+        "influx_covid_patients_moving_average": {
+          "type": ["number", "null"]
+        },
         "date_unix": {
           "type": "integer"
         },
@@ -32,6 +38,8 @@
       },
       "required": [
         "beds_occupied_covid",
+        "influx_covid_patients",
+        "influx_covid_patients_moving_average",
         "date_unix",
         "date_of_insertion_unix"
       ],

packages/app/schema/nl/intensive_care_lcps.json

@@ -23,10 +23,13 @@
         "beds_occupied_covid": {
           "type": ["integer", "null"]
         },
-        "beds_occupied_non_covid": {
+        "beds_occupied_covid_percentage": {
+          "type": ["number", "null"]
+        },
+        "influx_covid_patients": {
           "type": ["integer", "null"]
         },
-        "beds_occupied_covid_percentage": {
+        "influx_covid_patients_moving_average": {
           "type": ["number", "null"]
         },
         "date_unix": {
@@ -38,8 +41,9 @@
       },
       "required": [
         "beds_occupied_covid",
-        "beds_occupied_non_covid",
         "beds_occupied_covid_percentage",
+        "influx_covid_patients",
+        "influx_covid_patients_moving_average",
         "date_unix",
         "date_of_insertion_unix"
       ],

packages/app/src/components/age-groups/age-group.tsx

@@ -0,0 +1,31 @@
+import { Box } from '~/components/base';
+import { BoldText, InlineText } from '~/components/typography';
+import { useIntl } from '~/intl';
+import { formatAgeGroupString } from '~/utils/format-age-group-string';
+import { formatBirthyearRangeString } from '~/utils/format-birthyear-range-string';
+import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
+
+interface AgeGroupProps {
+  birthYearRange: string;
+  range: string;
+  peopleInAgeGroup?: number;
+}
+
+export const AgeGroup = ({ range, peopleInAgeGroup, birthYearRange }: AgeGroupProps) => {
+  const { commonTexts, formatNumber } = useIntl();
+  const ageRange = formatAgeGroupString(range, commonTexts.common.agegroup);
+  const yearOfBirthRange = formatBirthyearRangeString(birthYearRange, commonTexts.common.birthyears);
+
+  const totalText = peopleInAgeGroup
+    ? replaceVariablesInText(commonTexts.common.agegroup.total_people, {
+        total: formatNumber(peopleInAgeGroup),
+      })
+    : '';
+
+  return (
+    <Box display="flex" flexDirection="column">
+      <BoldText>{ageRange}</BoldText>
+      <InlineText variant="label1">{`${yearOfBirthRange}: ${totalText}`}</InlineText>
+    </Box>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { Box } from './base';
+import { RadioGroup } from './radio-group';
+
+export type ChartTileToggleItem = {
+  label: string;
+  value: string;
+};
+
+export interface ChartTileToggleProps {
+  initialValue: string;
+  items: ChartTileToggleItem[];
+  onChange: (value: string) => void;
+}
+
+export const ChartTileToggle = ({ initialValue, items, onChange }: ChartTileToggleProps) => {
+  return (
+    <Box display="flex">
+      <RadioGroup value={initialValue} items={items} onChange={onChange} />
+    </Box>
+  );
+};

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

@@ -1,39 +1,30 @@
 import { TimeframeOption } from '@corona-dashboard/common';
-import css from '@styled-system/css';
 import { ReactNode, useEffect, useState } from 'react';
-import { asResponsiveArray } from '~/style/utils';
+import styled from 'styled-components';
+import theme, { space } from '~/style/theme';
 import { Box, Spacer } from './base';
+import { ChartTileToggle, ChartTileToggleProps } from './chart-tile-toggle';
 import { ChartTimeControls } from './chart-time-controls';
 import { ErrorBoundary } from './error-boundary';
 import { FullscreenChartTile } from './fullscreen-chart-tile';
-import { Heading } from './typography';
 import { Markdown } from './markdown';
 import { MetadataProps } from './metadata';
+import { Heading } from './typography';
 
 interface ChartTileProps {
+  children: ReactNode;
   title: string;
-  metadata?: MetadataProps;
   description?: string;
-  timeframeInitialValue?: TimeframeOption;
   disableFullscreen?: boolean;
+  metadata?: MetadataProps;
+  timeframeInitialValue?: TimeframeOption;
   timeframeOptions?: TimeframeOption[];
+  toggle?: ChartTileToggleProps;
   onSelectTimeframe?: (timeframe: TimeframeOption) => void;
-  children: ReactNode;
 }
 
-export function ChartTile({
-  title,
-  metadata,
-  description,
-  timeframeInitialValue,
-  disableFullscreen,
-  timeframeOptions,
-  onSelectTimeframe,
-  children,
-}: ChartTileProps) {
-  const [timeframe, setTimeframe] = useState<TimeframeOption>(
-    timeframeInitialValue || TimeframeOption.ALL
-  );
+export const ChartTile = ({ children, title, description, disableFullscreen, metadata, timeframeInitialValue, toggle, timeframeOptions, onSelectTimeframe }: ChartTileProps) => {
+  const [timeframe, setTimeframe] = useState<TimeframeOption>(timeframeInitialValue || TimeframeOption.ALL);
 
   useEffect(() => {
     if (onSelectTimeframe) {
@@ -43,22 +34,10 @@ export function ChartTile({
 
   return (
     <FullscreenChartTile metadata={metadata} disabled={disableFullscreen}>
-      <ChartTileHeader title={title} description={description}>
+      <ChartTileHeader title={title} description={description} toggle={toggle}>
         {timeframeOptions && timeframe && (
-          <Box
-            css={css({
-              width: asResponsiveArray({
-                xl: '25%',
-                lg: '50%',
-                sm: '100%',
-              }),
-            })}
-          >
-            <ChartTimeControls
-              timeframeOptions={timeframeOptions}
-              timeframe={timeframe}
-              onChange={setTimeframe}
-            />
+          <Box width={{ sm: '100%', lg: '50%', xl: '25%' }}>
+            <ChartTimeControls timeframeOptions={timeframeOptions} timeframe={timeframe} onChange={setTimeframe} />
           </Box>
         )}
       </ChartTileHeader>
@@ -68,36 +47,40 @@ export function ChartTile({
       <ErrorBoundary>{children}</ErrorBoundary>
     </FullscreenChartTile>
   );
-}
+};
 
 interface ChartTileHeaderProps {
   title: string;
-  description?: string;
   children?: ReactNode;
+  description?: string;
+  toggle?: ChartTileToggleProps;
 }
 
-function ChartTileHeader({
-  title,
-  description,
-  children,
-}: ChartTileHeaderProps) {
+const ChartTileHeader = ({ title, description, children, toggle }: ChartTileHeaderProps) => {
   return (
     <Box spacing={3}>
-      {/* padding-right to make sure the title doesn't touch/overlap the full screen button */}
-      <Heading level={3} css={css({ pr: asResponsiveArray({ md: 5 }) })}>
-        {title}
-      </Heading>
+      <ChartTileHeading level={3}>{title}</ChartTileHeading>
+
+      {toggle && <ChartTileToggle initialValue={toggle.initialValue} items={toggle.items} onChange={toggle.onChange} />}
 
       {description && (
         <Box maxWidth="maxWidthText">
           <Markdown content={description} />
         </Box>
       )}
+
       {children && (
         <Box display="inline-table" alignSelf="flex-start" width="100%">
           {children}
         </Box>
       )}
     </Box>
   );
-}
+};
+
+const ChartTileHeading = styled(Heading)`
+  // padding-right to make sure the title doesn't touch/overlap the full screen button
+  @media ${theme.mediaQueries.md} {
+    padding-right: ${space[5]};
+  }
+`;

packages/app/src/components/choropleth/tooltips/choropleth-tooltip.tsx

@@ -66,7 +66,7 @@ export function ChoroplethTooltip<T extends ChoroplethDataItem>(props: Choroplet
     );
 
     // VRData does not contain the property 'date_end_unix' so 'date_unix' is used instead.
-    outdatedDataDate = formatDateFromSeconds(tooltipVars[!isVrData(tooltipVars) ? 'date_end_unix' : 'date_unix'] as number, 'medium');
+    outdatedDataDate = formatDateFromSeconds(tooltipVars[!isVrData(tooltipVars) ? 'date_end_unix' : 'date_unix'] as number, 'weekday-long');
     tooltipNotification = replaceVariablesInText(tooltipNotification as string, { date: outdatedDataDate });
   }