Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Expanded timeframe options for most charts #4142

Merged
merged 1 commit into from
Mar 31, 2022
Merged

Expanded timeframe options for most charts #4142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,15 @@ export function SewerChart({

return (
<ChartTile
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
title={text.title}
metadata={{
source: text.source,
Expand Down
10 changes: 9 additions & 1 deletion packages/app/src/domain/tested/reproduction-chart-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,15 @@ interface ReproductionChartTileProps {

export function ReproductionChartTile({
data,
timeframeOptions = [TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS],
timeframeOptions = [
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
],
timeframeInitialValue = TimeframeOption.ALL,
timelineEvents,
text,
Expand Down
107 changes: 51 additions & 56 deletions packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,64 +117,59 @@ function VariantStackedAreaTileWithData({
title={text.titel}
description={text.toelichting}
metadata={metadata}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
>
{(timeframe) => (
<>
{children}
{children && <Spacer mb={3} />}
<InteractiveLegend
helpText={text.legend_help_tekst}
selectOptions={selectOptions}
selection={list}
onToggleItem={toggle}
onReset={clear}
/>
<Spacer mb={2} />
<TimeSeriesChart
accessibility={{
key: 'variants_stacked_area_over_time_chart',
}}
values={values}
timeframe={timeframe}
seriesConfig={filteredConfig}
disableLegend
dataOptions={{
isPercentage: true,
forcedMaximumValue: 100,
timespanAnnotations,
renderNullAsZero: true,
}}
formatTooltip={(context) => {
/**
* In the chart the 'other_percentage' stack is rendered on top,
* but in the tooltip it needs to be displayed as the last item.
* (These are both design decisions)
*/
const reorderContext = {
...context,
config: [
...context.config.filter(
(x) =>
!hasMetricProperty(x) ||
x.metricProperty !== 'other_graph_percentage'
),
context.config.find(
(x) =>
hasMetricProperty(x) &&
x.metricProperty === 'other_graph_percentage'
),
].filter(isDefined),
};
{children}
{children && <Spacer mb={3} />}
<InteractiveLegend
helpText={text.legend_help_tekst}
selectOptions={selectOptions}
selection={list}
onToggleItem={toggle}
onReset={clear}
/>
<Spacer mb={2} />
<TimeSeriesChart
accessibility={{
key: 'variants_stacked_area_over_time_chart',
}}
values={values}
timeframe={TimeframeOption.ALL}
seriesConfig={filteredConfig}
disableLegend
dataOptions={{
isPercentage: true,
forcedMaximumValue: 100,
timespanAnnotations,
renderNullAsZero: true,
}}
formatTooltip={(context) => {
/**
* In the chart the 'other_percentage' stack is rendered on top,
* but in the tooltip it needs to be displayed as the last item.
* (These are both design decisions)
*/
const reorderContext = {
...context,
config: [
...context.config.filter(
(x) =>
!hasMetricProperty(x) ||
x.metricProperty !== 'other_graph_percentage'
),
context.config.find(
(x) =>
hasMetricProperty(x) &&
x.metricProperty === 'other_graph_percentage'
),
].filter(isDefined),
};

return <TooltipSeriesList data={reorderContext} />;
}}
numGridLines={0}
tickValues={[0, 25, 50, 75, 100]}
/>
<Legend items={staticLegendItems} />
</>
)}
return <TooltipSeriesList data={reorderContext} />;
}}
numGridLines={0}
tickValues={[0, 25, 50, 75, 100]}
/>
<Legend items={staticLegendItems} />
</ChartTile>
);
}
Expand Down
10 changes: 9 additions & 1 deletion packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,15 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
metadata={{
source: textGm.bronnen.rivm,
}}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down
10 changes: 9 additions & 1 deletion packages/app/src/pages/gemeente/[code]/sterfte.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,15 @@ const DeceasedMunicipalPage = (props: StaticProps<typeof getStaticProps>) => {
</TwoKpiSection>

<ChartTile
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
title={textGm.section_deceased_rivm.line_chart_covid_daily_title}
description={
textGm.section_deceased_rivm.line_chart_covid_daily_description
Expand Down
10 changes: 9 additions & 1 deletion packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,15 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
title={textGm.linechart_titel}
description={textGm.linechart_description}
metadata={{ source: textGm.bronnen.rivm }}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down
10 changes: 9 additions & 1 deletion packages/app/src/pages/landelijk/coronamelder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,15 @@ const CoronamelderPage = (props: StaticProps<typeof getStaticProps>) => {
description={
corona_melder_app.waarschuwingen_over_tijd_grafiek.description
}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down
30 changes: 27 additions & 3 deletions packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,15 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
<ChartTile
metadata={{ source: textNl.positief_geteste_personen.bronnen.rivm }}
title={textNl.positief_geteste_personen.linechart_titel}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
description={textNl.positief_geteste_personen.linechart_description}
>
{(timeframe) => (
Expand Down Expand Up @@ -299,7 +307,15 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
metadata={{
source: textNl.besmette_locaties.bronnen.rivm,
}}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
description={textNl.besmette_locaties.linechart_description}
>
{(timeframe) => (
Expand Down Expand Up @@ -356,7 +372,15 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
<ChartTile
metadata={{ source: textNl.oversterfte.bronnen.rivm }}
title={textNl.oversterfte.linechart_titel}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
description={textNl.oversterfte.linechart_description}
>
{(timeframe) => (
Expand Down
36 changes: 30 additions & 6 deletions packages/app/src/pages/landelijk/intensive-care-opnames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,8 +330,16 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
title={textNl.linechart_titel}
description={textNl.linechart_description}
metadata={{ source: textNl.bronnen.nice }}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeInitialValue={TimeframeOption.FIVE_WEEKS}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down Expand Up @@ -380,8 +388,16 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
title={textNl.chart_bedbezetting.title}
description={textNl.chart_bedbezetting.description}
metadata={{ source: textNl.bronnen.lnaz }}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeInitialValue={TimeframeOption.FIVE_WEEKS}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down Expand Up @@ -415,8 +431,16 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
<ChartTile
title={textShared.admissions_per_age_group.chart_title}
description={textShared.admissions_per_age_group.chart_description}
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeInitialValue={TimeframeOption.FIVE_WEEKS}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
metadata={{ source: textNl.bronnen.nice }}
>
{(timeframe) => (
Expand Down
10 changes: 9 additions & 1 deletion packages/app/src/pages/landelijk/sterfte.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,15 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
</TwoKpiSection>

<ChartTile
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
title={textNl.section_deceased_rivm.line_chart_covid_daily_title}
description={
textNl.section_deceased_rivm.line_chart_covid_daily_description
Expand Down
20 changes: 18 additions & 2 deletions packages/app/src/pages/landelijk/thuiswonende-ouderen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,15 @@ const ElderlyAtHomeNationalPage = (
</TwoKpiSection>

<ChartTile
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
title={textNl.section_positive_tested.line_chart_daily_title}
metadata={{ source: textNl.section_positive_tested.bronnen.rivm }}
description={
Expand Down Expand Up @@ -304,7 +312,15 @@ const ElderlyAtHomeNationalPage = (
</TwoKpiSection>

<ChartTile
timeframeOptions={[TimeframeOption.ALL, TimeframeOption.FIVE_WEEKS]}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
title={textNl.section_deceased.line_chart_daily_title}
metadata={{ source: textNl.section_positive_tested.bronnen.rivm }}
description={textNl.section_deceased.line_chart_daily_description}
Expand Down
Loading