Merge pull request #4756 from minvws/release/2.73.0

Release/2.73.0

packages/app/schema/gm_collection/__index.json

@@ -3,17 +3,7 @@
   "type": "object",
   "title": "gm_collection",
   "additionalProperties": false,
-  "required": [
-    "last_generated",
-    "proto_name",
-    "name",
-    "code",
-    "hospital_nice",
-    "hospital_nice_choropleth",
-    "tested_overall",
-    "sewer",
-    "vaccine_coverage_per_age_group"
-  ],
+  "required": ["last_generated", "proto_name", "name", "code", "hospital_nice", "hospital_nice_choropleth", "tested_overall", "sewer", "vaccine_coverage_per_age_group"],
   "properties": {
     "last_generated": {
       "type": "string"

packages/app/schema/gm_collection/tested_overall.json

@@ -3,13 +3,7 @@
   "type": "object",
   "title": "gm_collection_tested_overall",
   "additionalProperties": false,
-  "required": [
-    "date_unix",
-    "gmcode",
-    "infected",
-    "infected_per_100k",
-    "date_of_insertion_unix"
-  ],
+  "required": ["date_unix", "gmcode", "infected", "infected_per_100k", "date_of_insertion_unix"],
   "properties": {
     "date_unix": {
       "type": "integer"

packages/app/schema/nl/vulnerable_tested_per_age_group.json

@@ -2,21 +2,17 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "title": "nl_vulnerable_tested_per_age_group",
   "type": "object",
-  "required":[
-    "infected_age_70_plus",
-    "date_unix",
-    "date_of_insertion_unix"
-  ],
+  "required": ["infected_age_70_plus", "date_unix", "date_of_insertion_unix"],
   "additionalProperties": false,
   "properties": {
-      "infected_age_70_plus": {
-        "type": "integer"
-      },
-      "date_unix": {
-        "type": "integer"
-      },
-      "date_of_insertion_unix": {
-        "type": "integer"
-      }
+    "infected_age_70_plus": {
+      "type": "integer"
+    },
+    "date_unix": {
+      "type": "integer"
+    },
+    "date_of_insertion_unix": {
+      "type": "integer"
+    }
   }
-}
+}

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

@@ -0,0 +1,45 @@
+import { colors } from '@corona-dashboard/common';
+import styled from 'styled-components';
+import { Box } from '~/components/base';
+import { mediaQueries, space } from '~/style/theme';
+import { KpiTile } from '../kpi-tile';
+import { Metadata, MetadataProps } from '../metadata';
+import { TwoKpiSection } from '../two-kpi-section';
+import { Text } from '../typography';
+import { KpiContent } from './components/kpi-content';
+import { BorderedKpiSectionProps } from './types';
+
+export const BorderedKpiSection = ({ title, description, source, dateUnix, tilesData }: BorderedKpiSectionProps) => {
+  const metadata: MetadataProps = {
+    date: dateUnix,
+    source: source,
+  };
+
+  return (
+    <KpiTile title={title} hasNoPaddingBottom>
+      <Text>{description}</Text>
+      <TwoKpiSection spacing={5}>
+        <KpiContentContainer>
+          {tilesData.map((tile, index) => (
+            <KpiContent key={index} tile={tile} />
+          ))}
+        </KpiContentContainer>
+      </TwoKpiSection>
+      <Metadata {...metadata} isTileFooter />
+    </KpiTile>
+  );
+};
+
+const KpiContentContainer = styled(Box)`
+  border: 1px solid ${colors.gray3};
+  display: flex;
+  flex-direction: column;
+  gap: ${space[5]};
+  justify-content: space-between;
+  padding: 24px ${space[3]};
+
+  @media ${mediaQueries.sm} {
+    flex-direction: row;
+    padding: 24px;
+  }
+`;

packages/app/src/components/kpi/components/kpi-content.tsx

@@ -0,0 +1,48 @@
+import { Box } from '~/components/base';
+import { KpiValue } from '~/components/kpi-value';
+import { Markdown } from '~/components/markdown';
+import { BoldText } from '~/components/typography';
+import { Bar } from '~/domain/vaccine/components/bar';
+import { parseBirthyearRange } from '~/domain/vaccine/logic/parse-birthyear-range';
+import { useIntl } from '~/intl';
+import { space } from '~/style/theme';
+import { replaceVariablesInText } from '~/utils';
+import { KpiContentProps } from '../types';
+
+export const KpiContent = ({ tile }: KpiContentProps) => {
+  const { commonTexts, formatPercentage } = useIntl();
+  const parsedAgePercentage = tile.value ? `${formatPercentage(tile.value)}%` : '-';
+  const parsedBirthyearRange = tile.birthyear ? parseBirthyearRange(tile.birthyear) : null;
+
+  return (
+    <Box>
+      <BoldText>{tile.title}</BoldText>
+
+      <Box paddingTop={space[3]} paddingBottom={tile.differenceValue ? space[1] : space[3]}>
+        <KpiValue
+          absolute={tile.differenceValue ? tile.value : null}
+          difference={tile.differenceValue || undefined}
+          isAmount={!!tile.differenceValue}
+          text={!tile.differenceValue ? parsedAgePercentage : undefined}
+          color={tile?.bar?.color}
+        />
+      </Box>
+
+      {tile.bar && (
+        <Box paddingTop={space[2]} paddingBottom={space[3]}>
+          <Bar value={tile.bar.value} color={tile.bar.color} height={12} />
+        </Box>
+      )}
+
+      <Markdown
+        content={
+          parsedBirthyearRange
+            ? replaceVariablesInText(tile.description, {
+                birthyear: replaceVariablesInText(commonTexts.common.birthyear_ranges[parsedBirthyearRange.type], parsedBirthyearRange),
+              })
+            : tile.description
+        }
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { DifferenceInteger } from '@corona-dashboard/common';
+
+type TileData = {
+  description: string;
+  title: string;
+  value: number | null;
+  bar?: BarType;
+  birthyear?: string | null;
+  differenceValue?: DifferenceInteger;
+};
+
+export interface BorderedKpiSectionProps {
+  dateUnix: number;
+  description: string;
+  source: {
+    href: string;
+    text: string;
+  };
+  tilesData: [TileData, TileData];
+  title: string;
+}
+
+export interface KpiContentProps {
+  tile: TileData;
+}
+
+export type BarType = {
+  value: number;
+  color: string;
+};

packages/app/src/components/percentage-bar.tsx

@@ -15,7 +15,7 @@ export const PercentageBar = ({ percentage, height, color, backgroundColor = col
 
   return (
     <Box display="flex" position="relative" width="100%">
-      <Bar style={{ width: `${percentage}%` }} height={height} minWidth={minWidth} color={color} />
+      <Bar style={{ width: `${percentage}%` }} height={typeof height === 'number' ? `${height}px` : height} minWidth={minWidth} color={color} />
       <StyledDiv backgroundStyle={backgroundStyle} backgroundColor={backgroundColor} height={height} />
     </Box>
   );

packages/app/src/components/severity-indicator-tile/components/timeline/logic.ts

@@ -0,0 +1,74 @@
+import { middleOfDayInSeconds } from '@corona-dashboard/common';
+import { createDateFromUnixTimestamp } from '~/utils/create-date-from-unix-timestamp';
+import { SeverityIndicatorTimelineEventConfig } from './timeline';
+
+/**
+ * Calculated the difference, in days, between two dates.
+ * @param start - the start date of a given range
+ * @param end - the end date of a given range
+ * @returns the number of days between two dates
+ */
+export const getDifferenceInDays = (start: Date, end: Date): number => {
+  return Math.floor((end.getTime() - start.getTime()) / (1000 * 3600 * 24));
+};
+
+/**
+ * Calculates the middle of the day for each passed in date (either today or the start and end date for a given range).
+ * @param today - today's Date object
+ * @param startDate - the start date of a given range
+ * @param endDate - the end date of a given range
+ * @returns the date representing the middle of the day for the passed in dates
+ */
+const getMiddleOfDayDates = (today: Date, startDate: number, endDate: number): Record<string, Date> => {
+  const todayMiddleOfDayDate = createDateFromUnixTimestamp(middleOfDayInSeconds(today.getTime() / 1000));
+  const startOfIntervalDate = createDateFromUnixTimestamp(middleOfDayInSeconds(startDate));
+  const endOfIntervalDate = createDateFromUnixTimestamp(middleOfDayInSeconds(endDate));
+
+  return {
+    startOfIntervalDate,
+    endOfIntervalDate,
+    todayMiddleOfDayDate,
+  };
+};
+
+/**
+ * Calculates the relative offset value for the 'Today' label on the timeline.
+ * @param today - today's Date object
+ * @param startDate - the start date of the timeline
+ * @param endDate - the end date of the timeline
+ * @returns the relative offset value for the 'Today' label on the timeline
+ */
+export const getTimelineBarArrowOffset = (today: Date, startDate: number, endDate: number): number => {
+  const { startOfIntervalDate, endOfIntervalDate, todayMiddleOfDayDate } = getMiddleOfDayDates(today, startDate, endDate);
+  const numberOfDaysInInterval = getDifferenceInDays(startOfIntervalDate, endOfIntervalDate);
+  const numberOfDaysFromStartToToday = getDifferenceInDays(startOfIntervalDate, todayMiddleOfDayDate);
+  const arrowOffset = (numberOfDaysFromStartToToday / numberOfDaysInInterval) * 100;
+
+  return arrowOffset;
+};
+
+/**
+ * Calculates the amount of relative width a timeline bar part covers.
+ * @param daysInBarPart - the amount of days in a timeline bar part
+ * @param totalDays - the total amount of days in a timeline
+ * @returns the relative width of a timeline bar part
+ */
+export const getTimelineBarPartWidth = (daysInBarPart: ReturnType<typeof getDifferenceInDays>, totalDays: number) => (daysInBarPart / totalDays) * 100;
+
+/**
+ * Calculates the start and end date of a given timeline range.
+ * @param timelineEvents - the timeline events/range to calculate the start and end dates for
+ * @returns the start and end date of the given timeline range
+ */
+export const getTimelineRangeDates = (timelineEvents: SeverityIndicatorTimelineEventConfig[]) => {
+  const timelineEventDates = timelineEvents
+    .flatMap((timelineEvent: SeverityIndicatorTimelineEventConfig) => [timelineEvent.start, timelineEvent.end])
+    .map((timelineEventDate: number) => {
+      return createDateFromUnixTimestamp(timelineEventDate).getTime();
+    });
+
+  return {
+    startDate: Math.min(...timelineEventDates),
+    endDate: Math.max(...timelineEventDates),
+  };
+};

packages/app/src/components/severity-indicator-tile/components/timeline/timeline.tsx

@@ -1,20 +1,21 @@
 import { colors, middleOfDayInSeconds } from '@corona-dashboard/common';
 import { ReactNode, useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { useIntl } from '~/intl';
-import { space } from '~/style/theme';
-import { useResizeObserver } from '~/utils/use-resize-observer';
 import { Box } from '~/components/base';
-import { LegendItem, Legend } from '~/components/legend';
+import { Legend, LegendItem } from '~/components/legend';
 import { TimelineEvent } from '~/components/time-series-chart/components/timeline/components/timeline-event';
 import { Heading } from '~/components/typography';
+import { useIntl } from '~/intl';
+import { space } from '~/style/theme';
 import { useCurrentDate } from '~/utils/current-date-context';
+import { useResizeObserver } from '~/utils/use-resize-observer';
+import { getSeverityColor } from '../../logic/get-severity-color';
+import { SeverityLevels } from '../../types';
 import { TimelineBar } from './components/timeline-bar';
 import { TimelineBarPart } from './components/timeline-bar-part';
 import { TimelineTooltipContent } from './components/tooltip-content';
-import { getSeverityColor } from '../../logic/get-severity-color';
-import { getTimelineBarArrowOffset } from './logic/get-timeline-bar-arrow-offset';
-import { SeverityLevels } from '../../types';
+import { getDifferenceInDays, getTimelineBarArrowOffset, getTimelineBarPartWidth } from './logic';
+import { createDateFromUnixTimestamp } from '~/utils/create-date-from-unix-timestamp';
 
 export interface SeverityIndicatorTimelineEventConfig {
   title: string;
@@ -49,6 +50,11 @@ export const Timeline = ({ labels, startDate, endDate, legendItems, size = 10, t
 
   if (!timelineEvents) return null;
 
+  const totalDays = (endDate - startDate) / (1000 * 3600 * 24);
+
+  const timelineBarPartDays = (timelineEvent: SeverityIndicatorTimelineEventConfig) =>
+    getDifferenceInDays(createDateFromUnixTimestamp(timelineEvent.start), createDateFromUnixTimestamp(timelineEvent.end));
+
   return (
     <Box marginY={space[3]} position="relative">
       <TimelineHeading level={4}>{labels.heading}</TimelineHeading>
@@ -61,7 +67,7 @@ export const Timeline = ({ labels, startDate, endDate, legendItems, size = 10, t
             isFirst={i === 0}
             isLast={i + 1 === timelineEvents.length}
             size={size}
-            width={`${100 / timelineEvents.length}%`}
+            width={`${getTimelineBarPartWidth(timelineBarPartDays(timelineEvent), totalDays)}%`}
           >
             {i + 1 === timelineEvents.length && (
               <TimelineBarArrow startDate={timelineEvents[timelineEvents.length - 1].start} endDate={timelineEvents[timelineEvents.length - 1].end}>