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

Commit

Permalink
feat: aligned timeframe options on all charts (#4155)
Browse files Browse the repository at this point in the history 
* feat: aligned timeframe options on all charts

* feat: moved option list to a maintainable location
  • Loading branch information
@hasan-ozaynaci
hasan-ozaynaci authored Apr 6, 2022
1 parent 7b7da75 commit 1b8eb28
Show file tree
Hide file tree
Showing 21 changed files with 69 additions and 339 deletions.
15 changes: 5 additions & 10 deletions packages/app/src/components/chart-time-controls.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { useMemo } from 'react';
import { TimeframeOption } from '@corona-dashboard/common';
import {
TimeframeOption,
TimeframeOptionsList,
} from '@corona-dashboard/common';
import { Box } from '~/components/base';
import { Text } from '~/components/typography';
import { RichContentSelect } from '~/components/rich-content-select';
Expand All @@ -15,15 +18,7 @@ export function ChartTimeControls(props: ChartTimeControlsProps) {
const {
onChange,
timeframe,
timeframeOptions = [
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
],
timeframeOptions = TimeframeOptionsList,
} = props;
const { commonTexts } = useIntl();

Expand Down
12 changes: 2 additions & 10 deletions packages/app/src/domain/sewer/sewer-chart/sewer-chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
NlSewer,
SewerPerInstallationData,
TimeframeOption,
TimeframeOptionsList,
VrSewer,
} from '@corona-dashboard/common';
import { useMemo } from 'react';
Expand Down Expand Up @@ -100,15 +100,7 @@ export function SewerChart({

return (
<ChartTile
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
title={text.title}
metadata={{
source: text.source,
Expand Down
11 changes: 2 additions & 9 deletions packages/app/src/domain/tested/reproduction-chart-tile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
NlReproduction,
NlReproductionValue,
TimeframeOption,
TimeframeOptionsList,
} from '@corona-dashboard/common';
import { last } from 'lodash';
import { isPresent } from 'ts-is-present';
Expand All @@ -22,15 +23,7 @@ interface ReproductionChartTileProps {

export function ReproductionChartTile({
data,
timeframeOptions = [
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
],
timeframeOptions = TimeframeOptionsList,
timeframeInitialValue = TimeframeOption.ALL,
timelineEvents,
text,
Expand Down
12 changes: 2 additions & 10 deletions packages/app/src/pages/gemeente/[code]/positief-geteste-mensen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { colors, TimeframeOption } from '@corona-dashboard/common';
import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
import { Test } from '@corona-dashboard/icons';
import { GetStaticPropsContext } from 'next';
import { Box } from '~/components/base';
Expand Down Expand Up @@ -243,15 +243,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
metadata={{
source: textGm.bronnen.rivm,
}}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down
12 changes: 2 additions & 10 deletions packages/app/src/pages/gemeente/[code]/sterfte.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { colors, TimeframeOption } from '@corona-dashboard/common';
import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
import { Coronavirus } from '@corona-dashboard/icons';
import { GetStaticPropsContext } from 'next';
import {
Expand Down Expand Up @@ -159,15 +159,7 @@ const DeceasedMunicipalPage = (props: StaticProps<typeof getStaticProps>) => {
</TwoKpiSection>

<ChartTile
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
title={textGm.section_deceased_rivm.line_chart_covid_daily_title}
description={
textGm.section_deceased_rivm.line_chart_covid_daily_description
Expand Down
12 changes: 2 additions & 10 deletions packages/app/src/pages/gemeente/[code]/ziekenhuis-opnames.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
colors,
DAY_IN_SECONDS,
TimeframeOption,
TimeframeOptionsList,
WEEK_IN_SECONDS,
} from '@corona-dashboard/common';
import { Ziekenhuis } from '@corona-dashboard/icons';
Expand Down Expand Up @@ -183,15 +183,7 @@ const IntakeHospital = (props: StaticProps<typeof getStaticProps>) => {
title={textGm.linechart_titel}
description={textGm.linechart_description}
metadata={{ source: textGm.bronnen.rivm }}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down
12 changes: 2 additions & 10 deletions packages/app/src/pages/landelijk/coronamelder.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { colors, TimeframeOption } from '@corona-dashboard/common';
import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
import { External, Phone } from '@corona-dashboard/icons';
import { css } from '@styled-system/css';
import styled from 'styled-components';
Expand Down Expand Up @@ -140,15 +140,7 @@ const CoronamelderPage = (props: StaticProps<typeof getStaticProps>) => {
description={
corona_melder_app.waarschuwingen_over_tijd_grafiek.description
}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down
32 changes: 4 additions & 28 deletions packages/app/src/pages/landelijk/gehandicaptenzorg.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { colors, TimeframeOption } from '@corona-dashboard/common';
import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
import {
Coronavirus,
GehandicaptenZorg,
Expand Down Expand Up @@ -157,15 +157,7 @@ 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.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
description={textNl.positief_geteste_personen.linechart_description}
>
{(timeframe) => (
Expand Down Expand Up @@ -307,15 +299,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
metadata={{
source: textNl.besmette_locaties.bronnen.rivm,
}}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
description={textNl.besmette_locaties.linechart_description}
>
{(timeframe) => (
Expand Down Expand Up @@ -372,15 +356,7 @@ const DisabilityCare = (props: StaticProps<typeof getStaticProps>) => {
<ChartTile
metadata={{ source: textNl.oversterfte.bronnen.rivm }}
title={textNl.oversterfte.linechart_titel}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
description={textNl.oversterfte.linechart_description}
>
{(timeframe) => (
Expand Down
31 changes: 4 additions & 27 deletions packages/app/src/pages/landelijk/intensive-care-opnames.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
NlHospitalVaccineIncidencePerAgeGroupValue,
NlIntensiveCareVaccinationStatusValue,
TimeframeOption,
TimeframeOptionsList,
WEEK_IN_SECONDS,
} from '@corona-dashboard/common';
import { Arts } from '@corona-dashboard/icons';
Expand Down Expand Up @@ -330,15 +331,7 @@ const IntakeIntensiveCare = (props: StaticProps<typeof getStaticProps>) => {
title={textNl.linechart_titel}
description={textNl.linechart_description}
metadata={{ source: textNl.bronnen.nice }}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
>
{(timeframe) => (
Expand Down Expand Up @@ -388,15 +381,7 @@ 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.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
>
{(timeframe) => (
Expand Down Expand Up @@ -431,15 +416,7 @@ 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.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
timeframeInitialValue={TimeframeOption.THIRTY_DAYS}
metadata={{ source: textNl.bronnen.nice }}
>
Expand Down
28 changes: 4 additions & 24 deletions packages/app/src/pages/landelijk/positief-geteste-mensen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
colors,
NlTestedOverallValue,
TimeframeOption,
TimeframeOptionsList,
} from '@corona-dashboard/common';
import { GgdTesten, Test } from '@corona-dashboard/icons';
import { GetStaticPropsContext } from 'next';
Expand Down Expand Up @@ -242,15 +242,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
metadata={{
source: textNl.bronnen.rivm,
}}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
>
{(timeframe) => (
<TimeSeriesChart
Expand Down Expand Up @@ -383,13 +375,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {
<ChartTile
title={textShared.infected_per_age_group.title}
description={textShared.infected_per_age_group.description}
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
metadata={{
source: textNl.bronnen.rivm,
}}
Expand Down Expand Up @@ -505,13 +491,7 @@ const PositivelyTestedPeople = (props: StaticProps<typeof getStaticProps>) => {

<InView rootMargin="400px">
<ChartTile
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
title={textNl.ggd.linechart_totaltests_titel}
description={textNl.ggd.linechart_totaltests_toelichting}
metadata={{
Expand Down
12 changes: 2 additions & 10 deletions packages/app/src/pages/landelijk/sterfte.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { colors, TimeframeOption } from '@corona-dashboard/common';
import { colors, TimeframeOptionsList } from '@corona-dashboard/common';
import { Coronavirus } from '@corona-dashboard/icons';
import { GetStaticPropsContext } from 'next';
import {
Expand Down Expand Up @@ -156,15 +156,7 @@ const DeceasedNationalPage = (props: StaticProps<typeof getStaticProps>) => {
</TwoKpiSection>

<ChartTile
timeframeOptions={[
TimeframeOption.ALL,
TimeframeOption.ONE_WEEK,
TimeframeOption.TWO_WEEKS,
TimeframeOption.THIRTY_DAYS,
TimeframeOption.THREE_MONTHS,
TimeframeOption.SIX_MONTHS,
TimeframeOption.LAST_YEAR,
]}
timeframeOptions={TimeframeOptionsList}
title={textNl.section_deceased_rivm.line_chart_covid_daily_title}
description={
textNl.section_deceased_rivm.line_chart_covid_daily_description
Expand Down
Loading

0 comments on commit 1b8eb28

Please sign in to comment.