diff --git a/packages/app/src/components/time-series-chart/components/index.ts b/packages/app/src/components/time-series-chart/components/index.ts
index 18c25f2d3a..ed37ed435a 100644
--- 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
new file mode 100644
index 0000000000..b564fd77c7
--- /dev/null
+++ 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 : (
+
+ {series.map((data, i) => (
+
+ ))}
+
+ );
+}
+
+interface ScatterPlotIconProps {
+ color: string;
+ radius?: number;
+ width?: number;
+ height?: number;
+}
+
+export function ScatterPlotIcon({
+ color,
+ width = 15,
+ height = 15,
+ radius = 3,
+}: ScatterPlotIconProps) {
+ return (
+
+ );
+}
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
index 8f9466caf8..589f3c3f60 100644
--- 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({
style={config.style}
/>
);
+ case 'scatter-plot':
+ return ;
case 'range':
return (
diff --git a/packages/app/src/components/time-series-chart/components/series.tsx b/packages/app/src/components/time-series-chart/components/series.tsx
index 946292b8c3..0699cdb44b 100644
--- 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,
@@ -93,6 +93,17 @@ function SeriesUnmemoized({
id={id}
/>
);
+ case 'scatter-plot':
+ return (
+
+ );
case 'area':
return (
({
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/series.ts b/packages/app/src/components/time-series-chart/logic/series.ts
index ecf400ee73..041b9756bd 100644
--- a/packages/app/src/components/time-series-chart/logic/series.ts
+++ b/packages/app/src/components/time-series-chart/logic/series.ts
@@ -15,6 +15,7 @@ import { SplitPoint } from './split';
type SeriesConfigSingle =
| LineSeriesDefinition
+ | ScatterPlotSeriesDefinition
| RangeSeriesDefinition
| AreaSeriesDefinition
| StackedAreaSeriesDefinition
@@ -89,6 +90,15 @@ export interface LineSeriesDefinition
curve?: 'linear' | 'step';
}
+export interface ScatterPlotSeriesDefinition
+ extends SeriesCommonDefinition {
+ type: 'scatter-plot';
+ metricProperty: keyof T;
+ label: string;
+ shortLabel?: string;
+ color: string;
+}
+
export interface AreaSeriesDefinition
extends SeriesCommonDefinition {
type: 'area';
diff --git a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx
index 2967815423..cca83c827e 100644
--- a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx
+++ b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx
@@ -297,11 +297,17 @@ const IntakeIntensiveCare = (props: StaticProps) => {
}}
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,
+ },
]}
/>
)}
diff --git a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
index 564284d120..860ac1aecc 100644
--- a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
+++ b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx
@@ -299,11 +299,17 @@ const IntakeHospital = (props: StaticProps) => {
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: [
diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv
index 9e862c6a68..d920e89a0e 100755
--- a/packages/cms/src/lokalize/key-mutations.csv
+++ b/packages/cms/src/lokalize/key-mutations.csv
@@ -33,3 +33,5 @@ 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,__
+2022-05-25T13:25:56.013Z,add,pages.intensiveCarePage.nl.chart_bedbezetting.legend_dot_label,l9y47X7Mn753quuWoDXzrN,__