From fbc89d0d120664b07a26ca2420086f4e55c6f5db Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 25 May 2022 13:52:24 +0200 Subject: [PATCH 1/4] Added a dot line for the time series graph --- .../time-series-chart/components/index.ts | 1 + .../components/scatter-plot.tsx | 52 +++++++++++++++++++ .../components/series-icon.tsx | 1 + .../time-series-chart/components/series.tsx | 13 ++++- .../time-series-chart/logic/hover-state.ts | 1 + .../time-series-chart/logic/series.ts | 10 ++++ .../landelijk/intensive-care-opnames.tsx | 8 ++- .../pages/landelijk/ziekenhuis-opnames.tsx | 8 ++- 8 files changed, 91 insertions(+), 3 deletions(-) create mode 100644 packages/app/src/components/time-series-chart/components/scatter-plot.tsx 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..9f83c893ce --- /dev/null +++ b/packages/app/src/components/time-series-chart/components/scatter-plot.tsx @@ -0,0 +1,52 @@ +import { DAY_IN_SECONDS } from '@corona-dashboard/common'; +import { useMemo } from 'react'; +import { isPresent } from 'ts-is-present'; +import { SeriesItem, SeriesSingleValue } from '../logic'; + +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 ( + <> + {nonNullSeries.map((d, i) => ( + + ))} + + ); +} 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..3306b7d727 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 @@ -25,6 +25,7 @@ export function SeriesIcon({ }: SeriesIconProps) { switch (config.type) { case 'line': + case 'scatter-plot': case 'gapped-line': return ( ({ 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..a17af43c6b 100644 --- a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx +++ b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx @@ -297,7 +297,13 @@ 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_trend_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..c8778e9a41 100644 --- a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx +++ b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx @@ -299,7 +299,13 @@ 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_trend_label, color: colors.data.primary, From 01c44241c2faa52930c0d6176db051d9eaf41cec Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 25 May 2022 15:11:50 +0200 Subject: [PATCH 2/4] Added laganda support and group scatter plot dots --- .../components/scatter-plot.tsx | 30 +++++++++++++++++-- .../components/series-icon.tsx | 4 ++- .../landelijk/intensive-care-opnames.tsx | 2 +- .../pages/landelijk/ziekenhuis-opnames.tsx | 2 +- packages/cms/src/lokalize/key-mutations.csv | 1 + 5 files changed, 34 insertions(+), 5 deletions(-) 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 index 9f83c893ce..36efc199a4 100644 --- a/packages/app/src/components/time-series-chart/components/scatter-plot.tsx +++ b/packages/app/src/components/time-series-chart/components/scatter-plot.tsx @@ -2,6 +2,7 @@ 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; @@ -36,7 +37,7 @@ export function ScatterPlot({ series, color, getX, getY, id }: LineTrendProps) { } return ( - <> + {nonNullSeries.map((d, 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 3306b7d727..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'; @@ -25,7 +26,6 @@ export function SeriesIcon({ }: SeriesIconProps) { switch (config.type) { case 'line': - case 'scatter-plot': case 'gapped-line': return ( ({ style={config.style} /> ); + case 'scatter-plot': + return ; case 'range': return ( diff --git a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx index a17af43c6b..cca83c827e 100644 --- a/packages/app/src/pages/landelijk/intensive-care-opnames.tsx +++ b/packages/app/src/pages/landelijk/intensive-care-opnames.tsx @@ -305,7 +305,7 @@ const IntakeIntensiveCare = (props: StaticProps) => { { type: 'scatter-plot', metricProperty: 'beds_occupied_covid', - label: textNl.chart_bedbezetting.legend_trend_label, + 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 c8778e9a41..860ac1aecc 100644 --- a/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx +++ b/packages/app/src/pages/landelijk/ziekenhuis-opnames.tsx @@ -307,7 +307,7 @@ const IntakeHospital = (props: StaticProps) => { { type: 'scatter-plot', metricProperty: 'beds_occupied_covid', - label: textNl.chart_bedbezetting.legend_trend_label, + label: textNl.chart_bedbezetting.legend_dot_label, color: colors.data.primary, }, ]} diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv index 9e862c6a68..47c9a804f6 100755 --- a/packages/cms/src/lokalize/key-mutations.csv +++ b/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,__ From 1829f33ff97cfc8f8efc7fc0436c486c5fd7bc3d Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 25 May 2022 15:36:29 +0200 Subject: [PATCH 3/4] added Intensive care key --- packages/cms/src/lokalize/key-mutations.csv | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv index 47c9a804f6..d920e89a0e 100755 --- a/packages/cms/src/lokalize/key-mutations.csv +++ b/packages/cms/src/lokalize/key-mutations.csv @@ -34,3 +34,4 @@ timestamp,action,key,document_id,move_to 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,__ From b158ea8ccd27d9ac9ab956234b511f4a5af023e0 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard18 <93984341+VWSCoronaDashboard18@users.noreply.github.com> Date: Wed, 25 May 2022 16:10:22 +0200 Subject: [PATCH 4/4] PR feedback solved --- .../components/scatter-plot.tsx | 41 +++++++------------ 1 file changed, 15 insertions(+), 26 deletions(-) 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 index 36efc199a4..b564fd77c7 100644 --- a/packages/app/src/components/time-series-chart/components/scatter-plot.tsx +++ b/packages/app/src/components/time-series-chart/components/scatter-plot.tsx @@ -1,4 +1,3 @@ -import { DAY_IN_SECONDS } from '@corona-dashboard/common'; import { useMemo } from 'react'; import { isPresent } from 'ts-is-present'; import { SeriesItem, SeriesSingleValue } from '../logic'; @@ -14,37 +13,27 @@ type LineTrendProps = { 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; - } +export function ScatterPlot({ + series: dataSeries, + color, + getX, + getY, + id, +}: LineTrendProps) { + const series = useMemo( + () => dataSeries.filter((x) => isPresent(x.__value)), + [dataSeries] + ); - return ( + return series.length === 0 ? null : ( - {nonNullSeries.map((d, i) => ( + {series.map((data, i) => ( ))}