Feature/cor 750 add dotted time series style

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,78 @@
+import { DAY_IN_SECONDS } from '@corona-dashboard/common';
+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, color, getX, getY, id }: LineTrendProps) {
+  const nonNullSeries = useMemo(() => {
+    let nonNull = series.filter((x) => isPresent(x.__value));
+    if (nonNull.length === 1) {
+      nonNull = [
+        {
+          __date_unix: nonNull[0].__date_unix - DAY_IN_SECONDS,
+          __value: nonNull[0].__value,
+        },
+        {
+          __date_unix: nonNull[0].__date_unix + DAY_IN_SECONDS,
+          __value: nonNull[0].__value,
+        },
+      ];
+    }
+    return nonNull;
+  }, [series]);
+
+  if (!nonNullSeries.length) {
+    return null;
+  }
+
+  return (
+    <Group>
+      {nonNullSeries.map((d, i) => (
+        <circle
+          key={i}
+          id={`${id}-${i}`}
+          r={DEFAULT_DOT_SIZE}
+          cx={getX(d)}
+          cy={getY(d)}
+          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,
@@ -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/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/series.ts

@@ -15,6 +15,7 @@ import { SplitPoint } from './split';
 
 type SeriesConfigSingle<T extends TimestampedValue> =
   | LineSeriesDefinition<T>
+  | ScatterPlotSeriesDefinition<T>
   | RangeSeriesDefinition<T>
   | AreaSeriesDefinition<T>
   | StackedAreaSeriesDefinition<T>
@@ -89,6 +90,15 @@ export interface LineSeriesDefinition<T extends TimestampedValue>
   curve?: 'linear' | 'step';
 }
 
+export interface ScatterPlotSeriesDefinition<T extends TimestampedValue>
+  extends SeriesCommonDefinition {
+  type: 'scatter-plot';
+  metricProperty: keyof T;
+  label: string;
+  shortLabel?: string;
+  color: string;
+}
+
 export interface AreaSeriesDefinition<T extends TimestampedValue>
   extends SeriesCommonDefinition {
   type: 'area';

packages/app/src/pages/landelijk/intensive-care-opnames.tsx

@@ -297,11 +297,17 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
                 }}
                 seriesConfig={[
                   {
-                    type: 'gapped-area',
+                    type: 'line',
                     metricProperty: 'beds_occupied_covid',
                     label: textNl.chart_bedbezetting.legend_trend_label,
                     color: colors.data.primary,
                   },
+                  {
+                    type: 'scatter-plot',
+                    metricProperty: 'beds_occupied_covid',
+                    label: textNl.chart_bedbezetting.legend_dot_label,
+                    color: colors.data.primary,
+                  },
                 ]}
               />
             )}

packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx

@@ -299,11 +299,17 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
                 timeframe={timeframe}
                 seriesConfig={[
                   {
-                    type: 'gapped-area',
+                    type: 'line',
                     metricProperty: 'beds_occupied_covid',
                     label: textNl.chart_bedbezetting.legend_trend_label,
                     color: colors.data.primary,
                   },
+                  {
+                    type: 'scatter-plot',
+                    metricProperty: 'beds_occupied_covid',
+                    label: textNl.chart_bedbezetting.legend_dot_label,
+                    color: colors.data.primary,
+                  },
                 ]}
                 dataOptions={{
                   timespanAnnotations: [

packages/cms/src/lokalize/key-mutations.csv

@@ -33,3 +33,4 @@ timestamp,action,key,document_id,move_to
 2022-05-12T07:55:42.658Z,delete,common.charts.time_controls.firstOfSeptember,A5Y41hFe5J3wNnB7O7FFlP,__
 2022-05-17T11:30:05.964Z,delete,pages.vaccinationsPage.nl.booster_kpi.booster_shot_last_seven_days.description,W42pYebYgNKSplnOwA9UMB,__
 2022-05-23T10:24:35.671Z,add,pages.situationsPage.shared.belangrijk_bericht,RQYRq9yqc5kuEd5capEHG3,__
+2022-05-25T12:52:50.949Z,add,pages.hospitalPage.nl.chart_bedbezetting.legend_dot_label,hErpiCVzoc9qP245irsdCS,__