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,__