Squashed commit of the following:

commit 77ff781 Author: VWSCoronaDashboard25 <[email protected]> Date: Tue May 31 11:12:17 2022 +0200 feature(CMS): slice first 3 path elements of for the title because they are redundant in the preview (#4272) closes: COR-543 Co-authored-by: VWSCoronaDashboard25 <[email protected]> commit f5bd004 Author: MN <[email protected]> Date: Mon May 30 16:10:34 2022 +0200 COR-725 unix date correction (#4255) * fix: use startOfDay for all graph values * fix: convert dates to startOfDay * fix: use endOfDay instead of middleOfDay for current date hook * fix: update tests Co-authored-by: VWSCoronaDashboard24 <[email protected]> commit 6fcf9b4 Author: J <[email protected]> Date: Fri May 27 10:52:13 2022 +0200 Feature/cor 750 add dotted time series style (#4267) * Added a dot line for the time series graph * Added laganda support and group scatter plot dots commit 4eeff20 Author: VWSCoronaDashboard22 <[email protected]> Date: Wed May 25 15:22:14 2022 +0200 Removed obsolete code for international pages (#4268) * Removed obsolete code for international pages * Removed type parameter commit 10d9706 Author: VWSCoronaDashboard25 <[email protected]> Date: Wed May 25 14:24:46 2022 +0200 fix: set icon size for the top menu icons on smaller screens (#4266) These were forgotten with the refactor Co-authored-by: VWSCoronaDashboard25 <[email protected]> commit 4f4abc9 Author: VWSCoronaDashboard22 <[email protected]> Date: Wed May 25 13:27:53 2022 +0200 Implemented redesign combobox and select list (#4264) * Implemented redesign combobox and select list * Removed unused imports * Removed sorting by score * Added padding to no results message * Always keep the same width for search form * Removed unused import * Fixed padding search results commit 38ec557 Author: MN <[email protected]> Date: Tue May 24 16:29:36 2022 +0200 COR-736 Behavior Choropleth Tooltip (#4262) * fix: fall back to - when no data is available for behavior choropleth tooltip * fix: show 0% when data is not null but 0 Co-authored-by: VWSCoronaDashboard24 <[email protected]> commit cb44e92 Author: HO <[email protected]> Date: Tue May 24 14:45:50 2022 +0200 fix: revert changes, replace with empty div and pass optional props (#4263) commit 26a07c7 Author: MN <[email protected]> Date: Tue May 24 11:34:08 2022 +0200 COR-618 Resolve duplicate IDs (#4261) * fix: only render mini charts once based on screen size * fix: use unique ids for different chart elements and accessibility-annotations * fix: mock useUniqueId hook * fix: cleanup mock after test Co-authored-by: VWSCoronaDashboard24 <[email protected]> commit 64861ee Author: HO <[email protected]> Date: Mon May 23 15:02:23 2022 +0200 Archive page and add warning tile (#4260) * feat(situationsPage): archive page and add warning tile * feat: added new key for warning commit 1ab4c1b Author: VWSCoronaDashboard25 <[email protected]> Date: Mon May 23 12:05:16 2022 +0200 Refactor/cor 73 remove fixed width and height in icons (#4256) * refactor: remove width and height of icons with a viewBox * refactor: replace width and height of icons with a viewBox * refactor: set size of metadata icon in metadata instead Use a styled span similar to the icon in the header component * refactor: set size of situation icon in code Using the extended properties of the generated React element Co-authored-by: VWSCoronaDashboard25 <[email protected]> commit 2605658 Author: VWSCoronaDashboard22 <[email protected]> Date: Thu May 19 15:05:53 2022 +0200 Added string year to age group (#4259) commit f506760 Author: J <[email protected]> Date: Thu May 19 13:58:38 2022 +0200 Feature/cor 615 fix two kpi tiles with one column (#4257) * change to grid * Remove extra KPI tile * Fix margins and paddings commit 4d02ed5 Author: MN <[email protected]> Date: Thu May 19 13:46:30 2022 +0200 fix: fall back to - when no data is available for behavior choropleth tooltip (#4258) Co-authored-by: VWSCoronaDashboard24 <[email protected]> commit 2fd679b Author: VWSCoronaDashboard22 <[email protected]> Date: Thu May 19 08:46:13 2022 +0200 Feature/cor 733 hospital admissions per 100000 (#4254) * Removed user-scalable and added maximum-scale=5 * Changed metric key and legend on hospital admissions choropleth commit ed58ee4 Author: VWSCoronaDashboard22 <[email protected]> Date: Wed May 18 12:37:29 2022 +0200 Removed user-scalable and added maximum-scale=5 (#4253) commit eed6f66 Author: HO <[email protected]> Date: Wed May 18 10:05:48 2022 +0200 feat: upgrade version sanity cli (#4251) commit 479eab0 Author: VWSCoronaDashboard22 <[email protected]> Date: Wed May 18 09:51:22 2022 +0200 Set text y axis to bold and black (#4250) commit 20f9d6a Author: VWSCoronaDashboard22 <[email protected]> Date: Wed May 18 08:37:22 2022 +0200 Ignore forced maximum when out of bounds value is outside time domain (#4246) * Ignore forced maximum when out of bounds value is outside time domain * Lint fixes * Added hasOutofBoudsValues to useMemo dependency array * Use Math.min instead of ternary operator * Type check calculatedForcedMaximumValue for seriesMax commit f34638f Author: MN <[email protected]> Date: Tue May 17 14:58:00 2022 +0200 COR-676 - Behavior keys optional in json schemas (#4241) * fix: make selftest_visit_behavior optional in json schemas * feat: make behavior json keys optional Co-authored-by: VWSCoronaDashboard24 <[email protected]> commit 390905b Author: HO <[email protected]> Date: Tue May 17 13:57:11 2022 +0200 Remove booster past seven days from vaccinations page (#4249) * feat: updated schemas * feat(booster): remove last seven days from booster commit 50fc1e8 Author: HO <[email protected]> Date: Tue May 17 09:54:11 2022 +0200 feat(measures): change h2 to h1 for page title (#4247) commit 7d0b918 Author: HO <[email protected]> Date: Tue May 17 09:03:53 2022 +0200 feat: change display names to search terms (#4245) commit 83dff18 Author: HO <[email protected]> Date: Fri May 13 11:50:42 2022 +0200 feat: flip h1 with h2 and keep styling as it is (#4244)
minvws · Jun 1, 2022 · 8b32345 · 8b32345
1 parent 8ecb650
commit 8b32345
Show file tree

Hide file tree

Showing 211 changed files with 616 additions and 405 deletions.
diff --git a/packages/app/schema/nl/booster_shot_administered.json b/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

diff --git a/packages/app/src/components/age-demographic/age-demographic-chart.tsx b/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}

diff --git a/packages/app/src/components/index.ts b/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';
diff --git a/packages/app/src/components/layout/components/top-navigation.tsx b/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

diff --git a/packages/app/src/components/page-information-block/components/header.tsx b/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>

diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/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',
+    },
+  })
+);
diff --git a/packages/app/src/components/rich-content-select/components/index.tsx b/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',
     },
   })
 );
diff --git a/packages/app/src/components/time-series-chart/components/bar-trend.tsx b/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}`}
               />
             );
           })}

diff --git a/packages/app/src/components/time-series-chart/components/gapped-line-trend.tsx b/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}`}
         />
       ))}
     </>

diff --git a/packages/app/src/components/time-series-chart/components/index.ts b/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';

diff --git a/packages/app/src/components/time-series-chart/components/scatter-plot.tsx b/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>
+  );
+}
diff --git a/packages/app/src/components/time-series-chart/components/series-icon.tsx b/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} />

diff --git a/packages/app/src/components/time-series-chart/components/series.tsx b/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

diff --git a/packages/app/src/components/time-series-chart/components/split-bar-trend.tsx b/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}

diff --git a/packages/app/src/components/time-series-chart/logic/common.ts b/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 {

diff --git a/packages/app/src/components/time-series-chart/logic/hover-state.ts b/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':

diff --git a/packages/app/src/components/time-series-chart/logic/legend.tsx b/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,
   ]);
 }