Skip to content

Commit 1b423f7

Browse files
kunkoalakunkoala
committed
🎉 🔧 update display settings, add chip for better presentation above data cards
1 parent 8a0aceb commit 1b423f7

File tree

5 files changed

+126
-46
lines changed

5 files changed

+126
-46
lines changed

‎locales/de-global.json5‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,19 @@
2929
'display-settings': {
3030
tooltip: 'Anzeigeeinstellungen für Daten',
3131
title: 'Anzeigeeinstellungen',
32-
'time-period': 'Zeitraum',
33-
'time-period-tooltip': 'Wert für den ausgewählten Zeitraum anzeigen',
32+
'time-period': 'Aggregation',
33+
'time-period-tooltip': 'Wählen Sie aus, wie Werte am ausgewählten Datum aggregiert werden',
3434
total: 'Gesamt',
35-
'one-day': '1 Tag',
36-
'seven-days': '7-Tage',
35+
'one-day': '1T-neu',
36+
'seven-days': '7T-neu',
3737
'number-type': 'Zahlenanzeige',
3838
'number-type-tooltip': 'Fallzahl pro 100.000 Einwohner',
3939
relative: 'Relativ',
4040
absolute: 'Absolut',
4141
},
42+
'selection-chip': {
43+
'per-100k': 'pro 100.000 Einwohner',
44+
},
4245
},
4346
history: {
4447
placeholder: 'history',

‎locales/en-global.json5‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,19 @@
2828
'fullscreen-tooltip': 'Fullscreen',
2929
'display-settings': {
3030
tooltip: 'Data display settings',
31-
'time-period': 'Time Period',
32-
'time-period-tooltip': 'Show the value for the selected time period',
31+
'time-period': 'Aggregation Window',
32+
'time-period-tooltip': 'Choose how to aggregate values at the selected date',
3333
total: 'Total',
34-
'one-day': '1 Day',
35-
'seven-days': '7 Days',
34+
'one-day': '1D-new',
35+
'seven-days': '7D-new',
3636
'number-type': 'Number Display',
3737
'number-type-tooltip': 'Number of cases per 100k population',
3838
relative: 'Relative',
3939
absolute: 'Absolute',
4040
},
41+
'selection-chip': {
42+
'per-100k': 'per 100k Population',
43+
},
4144
},
4245
sideBar: {
4346
placeholder: 'Sidebar Content',

‎src/components/IconBar.tsx‎

Lines changed: 67 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import React, {useEffect, useState} from 'react';
4+
import React, {useEffect, useState, useContext, useMemo} from 'react';
55
import FullscreenIcon from '@mui/icons-material/Fullscreen';
66
import {useFullscreen} from 'rooks';
77
import Box from '@mui/material/Box';
@@ -27,6 +27,9 @@ import {useTranslation} from 'react-i18next';
2727
import {styled, ToggleButtonGroup, toggleButtonGroupClasses, Typography} from '@mui/material';
2828
import InfoOutlined from '@mui/icons-material/InfoOutlined';
2929
import useTheme from '@mui/material/styles/useTheme';
30+
import SelectionChip from './SelectionChip';
31+
import Divider from '@mui/material/Divider';
32+
import {DataContext} from 'context/SelectedDataContext';
3033

3134
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({theme}) => ({
3235
gap: '1rem',
@@ -53,11 +56,14 @@ export default function IconBar(): JSX.Element {
5356
const [isPlaying, setIsPlaying] = useState(false);
5457
const [justStarted, setJustStarted] = useState(false);
5558

59+
const {compartments} = useContext(DataContext)!;
60+
const {t: tBackend, i18n: i18nBackend} = useTranslation('backend');
5661
const selectedDay = useAppSelector((state) => state.dataSelection.date);
5762
const minDate = useAppSelector((state) => state.dataSelection.minDate);
5863
const maxDate = useAppSelector((state) => state.dataSelection.maxDate);
5964
const relativeNumbers = useAppSelector((state) => state.dataSelection.relativeNumbers ?? false);
6065
const aggregationWindow = useAppSelector((state) => state.dataSelection.aggregationWindow ?? AggregationWindow.Total);
66+
const selectedCompartment = useAppSelector((state) => state.dataSelection.compartment ?? '');
6167

6268
// Settings popover state
6369
const [settingsAnchorEl, setSettingsAnchorEl] = useState<HTMLElement | null>(null);
@@ -73,6 +79,22 @@ export default function IconBar(): JSX.Element {
7379
}
7480
};
7581

82+
const compartmentNames = useMemo(() => {
83+
return (
84+
compartments?.map((compartment) => {
85+
const name = i18nBackend.exists(`infection-states.${compartment.name}`, {ns: 'backend'})
86+
? tBackend(`infection-states.${compartment.name}`)
87+
: compartment.name;
88+
89+
return {id: compartment.id, name};
90+
}) ?? []
91+
);
92+
}, [compartments, i18nBackend, tBackend]);
93+
94+
const selectedCompartmentName = useMemo(() => {
95+
return compartmentNames.find((compartment) => compartment.id === selectedCompartment)?.name ?? '';
96+
}, [compartmentNames, selectedCompartment]);
97+
7698
useEffect(() => {
7799
if (isPlaying) {
78100
// if we are already on the last day, we start from the first day
@@ -102,51 +124,57 @@ export default function IconBar(): JSX.Element {
102124
sx={{
103125
display: 'flex',
104126
flexDirection: 'row',
105-
justifyContent: 'center',
127+
justifyContent: 'space-between',
106128
alignItems: 'center',
107129
height: '60px',
108130
}}
109131
>
110132
{/* Settings popover trigger */}
111-
<Tooltip title={t('icon-bar.display-settings.tooltip')}>
112-
<Button aria-label='display-settings' onClick={openSettings}>
113-
<SettingsIcon />
114-
</Button>
115-
</Tooltip>
116-
117-
<Tooltip title={t('icon-bar.previous-day-tooltip')}>
118-
<span>
119-
<Button
120-
aria-label='previous-day-button'
121-
disabled={selectedDay === minDate || isPlaying}
122-
onClick={() => dispatch(previousDay())}
123-
>
124-
<SkipPreviousRounded />
133+
<Box>
134+
<Tooltip title={t('icon-bar.display-settings.tooltip')}>
135+
<Button aria-label='display-settings' onClick={openSettings}>
136+
<SettingsIcon />
125137
</Button>
126-
</span>
127-
</Tooltip>
128-
<Tooltip title={t('icon-bar.play-pause-tooltip')}>
129-
<Button aria-label='play-pause-button' onClick={() => setIsPlaying(!isPlaying)}>
130-
{isPlaying ? <PauseRounded /> : <PlayArrowRounded />}
131-
</Button>
132-
</Tooltip>
133-
<Tooltip title={t('icon-bar.next-day-tooltip')}>
134-
<span>
135-
<Button
136-
aria-label='next-day-button'
137-
disabled={selectedDay === maxDate || isPlaying}
138-
onClick={() => dispatch(nextDay())}
139-
>
140-
<SkipNextRounded />
138+
</Tooltip>
139+
<Tooltip title={t('icon-bar.previous-day-tooltip')}>
140+
<span>
141+
<Button
142+
aria-label='previous-day-button'
143+
disabled={selectedDay === minDate || isPlaying}
144+
onClick={() => dispatch(previousDay())}
145+
>
146+
<SkipPreviousRounded />
147+
</Button>
148+
</span>
149+
</Tooltip>
150+
<Tooltip title={t('icon-bar.play-pause-tooltip')}>
151+
<Button aria-label='play-pause-button' onClick={() => setIsPlaying(!isPlaying)}>
152+
{isPlaying ? <PauseRounded /> : <PlayArrowRounded />}
153+
</Button>
154+
</Tooltip>
155+
<Tooltip title={t('icon-bar.next-day-tooltip')}>
156+
<span>
157+
<Button
158+
aria-label='next-day-button'
159+
disabled={selectedDay === maxDate || isPlaying}
160+
onClick={() => dispatch(nextDay())}
161+
>
162+
<SkipNextRounded />
163+
</Button>
164+
</span>
165+
</Tooltip>
166+
<Tooltip title={t('icon-bar.fullscreen-tooltip')}>
167+
<Button onClick={toggleFullscreen}>
168+
<FullscreenIcon />
141169
</Button>
142-
</span>
143-
</Tooltip>
144-
<Tooltip title={t('icon-bar.fullscreen-tooltip')}>
145-
<Button onClick={toggleFullscreen}>
146-
<FullscreenIcon />
147-
</Button>
148-
</Tooltip>
170+
</Tooltip>
171+
</Box>
149172

173+
<SelectionChip
174+
relativeNumbers={relativeNumbers}
175+
aggregationWindow={aggregationWindow}
176+
selectedCompartment={selectedCompartmentName}
177+
/>
150178
{/* Settings Popover */}
151179
<Popover
152180
open={settingsOpen}
@@ -193,6 +221,7 @@ export default function IconBar(): JSX.Element {
193221
>
194222
{t('icon-bar.display-settings.total')}
195223
</ToggleButton>
224+
<Divider orientation='vertical' flexItem />
196225
<ToggleButton
197226
value={AggregationWindow.OneDay}
198227
selected={aggregationWindow === AggregationWindow.OneDay}

‎src/components/MainContent.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export default function MainContent(): JSX.Element {
2929
sx={{
3030
marginLeft: 'auto',
3131
marginRight: 'auto',
32+
maxWidth: '50%',
33+
width: '50%',
3234
}}
3335
>
3436
<IconBar />

‎src/components/SelectionChip.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, {useMemo} from 'react';
5+
import {useTranslation} from 'react-i18next';
6+
import Chip from '@mui/material/Chip';
7+
import {AggregationWindow} from 'store/DataSelectionSlice';
8+
9+
export interface SelectionChipProps {
10+
relativeNumbers: boolean;
11+
aggregationWindow: AggregationWindow;
12+
selectedCompartment: string;
13+
}
14+
15+
export default function SelectionChip({
16+
relativeNumbers,
17+
aggregationWindow,
18+
selectedCompartment,
19+
}: SelectionChipProps): JSX.Element {
20+
const {t} = useTranslation();
21+
const aggregationWindowLabel = useMemo(() => {
22+
switch (aggregationWindow) {
23+
case AggregationWindow.Total:
24+
return t('icon-bar.display-settings.total');
25+
case AggregationWindow.OneDay:
26+
return t('icon-bar.display-settings.one-day');
27+
case AggregationWindow.SevenDays:
28+
return t('icon-bar.display-settings.seven-days');
29+
}
30+
}, [aggregationWindow, t]);
31+
32+
const numberTypeLabel = useMemo(() => {
33+
return relativeNumbers ? t('icon-bar.selection-chip.per-100k') : '';
34+
}, [relativeNumbers, t]);
35+
36+
return (
37+
<Chip
38+
color='primary'
39+
label={`${aggregationWindowLabel} ${selectedCompartment} ${numberTypeLabel}`}
40+
variant='filled'
41+
/>
42+
);
43+
}

0 commit comments

Comments
 (0)