Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(1-3281): wraps the new datepicker in a dropdown #9169

Merged
merged 8 commits into from
Jan 29, 2025
Merged

feat(1-3281): wraps the new datepicker in a dropdown #9169

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a90e554
feat(1-3281): begin stubbing out some stuff
thomasheartman Jan 29, 2025
db85c57
feat(1-3281): make dropdown work better
thomasheartman Jan 29, 2025
b58cf08
feat(1-3281): minor adjustments
thomasheartman Jan 29, 2025
99d3983
feat(1-3281): sort hover styles
thomasheartman Jan 29, 2025
da15ac4
feat(1-3281): adjust dropdown further
thomasheartman Jan 29, 2025
8059ee8
feat(1-3281): remove unused code
thomasheartman Jan 29, 2025
ac2c0ee
feat(1-3281): remove unused styles
thomasheartman Jan 29, 2025
bfd76cf
Chore: delete line
thomasheartman Jan 29, 2025
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
232 changes: 153 additions & 79 deletions frontend/src/component/admin/network/NetworkTrafficUsage/PeriodSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { styled } from '@mui/material';
import { styled, Button, Popover, Box, type Theme } from '@mui/material';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
import type { ChartDataSelection } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
import type { FC } from 'react';
import { useRef, useState, type FC } from 'react';
import { format } from 'date-fns';

const dropdownWidth = '15rem';
const dropdownInlinePadding = (theme: Theme) => theme.spacing(3);

export type Period = {
key: string;
Expand Down Expand Up @@ -60,9 +66,8 @@ const getSelectablePeriods = (): Period[] => {
};

const Wrapper = styled('article')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
border: `2px solid ${theme.palette.divider}`,
padding: theme.spacing(3),
width: dropdownWidth,
paddingBlock: theme.spacing(2),
display: 'flex',
flexFlow: 'column',
gap: theme.spacing(2),
Expand All @@ -84,13 +89,17 @@ const Wrapper = styled('article')(({ theme }) => ({
cursor: 'default',
color: theme.palette.text.disabled,
},
'button:hover': {
'button:hover:not(:disabled)': {
backgroundColor: theme.palette.action.hover,
},
'button:focus': {
outline: `2px solid ${theme.palette.primary.main}`,
},
}));

const MonthSelector = styled('article')(({ theme }) => ({
border: 'none',
paddingInline: dropdownInlinePadding(theme),
hgroup: {
h3: {
margin: 0,
Expand All @@ -116,9 +125,11 @@ const MonthGrid = styled('ul')(({ theme }) => ({

const RangeSelector = styled('article')(({ theme }) => ({
display: 'flex',
width: '100%',
flexFlow: 'column',
gap: theme.spacing(0.5),
gap: theme.spacing(0),
h4: {
paddingInline: dropdownInlinePadding(theme),
fontSize: theme.typography.body2.fontSize,
margin: 0,
color: theme.palette.text.secondary,
Expand All @@ -127,31 +138,34 @@ const RangeSelector = styled('article')(({ theme }) => ({

const RangeList = styled('ul')(({ theme }) => ({
listStyle: 'none',
margin: 0,
padding: 0,
'li + li': {
marginTop: theme.spacing(1),
width: '100%',
li: {
width: '100%',
},

button: {
marginLeft: `-${theme.spacing(0.5)}`,
width: '100%',
paddingBlock: theme.spacing(1),
textAlign: 'left',
borderRadius: 0,
paddingInline: dropdownInlinePadding(theme),
},
}));

type Selection =
| {
type: 'month';
value: string;
}
| {
type: 'range';
monthsBack: number;
};

type Props = {
selectedPeriod: ChartDataSelection;
setPeriod: (period: ChartDataSelection) => void;
};

const StyledPopover = styled(Popover)(({ theme }) => ({
'& .MuiPaper-root': {
borderRadius: theme.shape.borderRadiusLarge,
border: `1px solid ${theme.palette.divider}`,
},
}));

export const PeriodSelector: FC<Props> = ({ selectedPeriod, setPeriod }) => {
const selectablePeriods = getSelectablePeriods();

Expand All @@ -160,65 +174,125 @@ export const PeriodSelector: FC<Props> = ({ selectedPeriod, setPeriod }) => {
label: `Last ${monthsBack} months`,
}));

const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);

const selectPeriod = (period: ChartDataSelection) => {
setPeriod(period);
setOpen(false);
};

const buttonText =
selectedPeriod.grouping === 'daily'
? selectedPeriod.month === format(new Date(), 'yyyy-MM')
? 'Current month'
: new Date(selectedPeriod.month).toLocaleDateString('en-US', {
month: 'long',
year: 'numeric',
})
: `Last ${selectedPeriod.monthsBack} months`;

return (
<Wrapper>
<MonthSelector>
<hgroup>
<h3>Select month</h3>
<p>Last 12 months</p>
</hgroup>
<MonthGrid>
{selectablePeriods.map((period, index) => (
<li key={period.label}>
<button
className={
selectedPeriod.grouping === 'daily' &&
period.key === selectedPeriod.month
? 'selected'
: ''
}
type='button'
disabled={!period.selectable}
onClick={() => {
setPeriod({
grouping: 'daily',
month: period.key,
});
}}
>
{period.shortLabel}
</button>
</li>
))}
</MonthGrid>
</MonthSelector>
<RangeSelector>
<h4>Range</h4>

<RangeList>
{rangeOptions.map((option) => (
<li key={option.label}>
<button
className={
selectedPeriod.grouping === 'monthly' &&
option.value === selectedPeriod.monthsBack
? 'selected'
: ''
}
type='button'
onClick={() => {
setPeriod({
grouping: 'monthly',
monthsBack: option.value,
});
}}
>
Last {option.value} months
</button>
</li>
))}
</RangeList>
</RangeSelector>
</Wrapper>
<Box ref={ref}>
<Button
endIcon={open ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
sx={(theme) => ({
whiteSpace: 'nowrap',
width: dropdownWidth,
justifyContent: 'space-between',
fontWeight: 'normal',
color: theme.palette.text.primary,
borderColor: theme.palette.divider,
borderWidth: '2px',
':focus-within': {
borderColor: theme.palette.primary.main,
},
':hover': {
borderWidth: '2px', // Prevent the border from changing width on hover
},
})}
variant='outlined'
disableRipple
onClick={() => setOpen(true)}
>
{buttonText}
</Button>
<StyledPopover
open={open}
anchorEl={ref.current}
onClose={() => setOpen(false)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Wrapper>
<MonthSelector>
<hgroup>
<h3>Select month</h3>
<p>Last 12 months</p>
</hgroup>
<MonthGrid>
{selectablePeriods.map((period, index) => (
<li key={period.label}>
<button
className={
selectedPeriod.grouping ===
'daily' &&
period.key === selectedPeriod.month
? 'selected'
: ''
}
type='button'
disabled={!period.selectable}
onClick={() => {
selectPeriod({
grouping: 'daily',
month: period.key,
});
}}
>
{period.shortLabel}
</button>
</li>
))}
</MonthGrid>
</MonthSelector>
<RangeSelector>
<h4>Range</h4>

<RangeList>
{rangeOptions.map((option) => (
<li key={option.label}>
<button
className={
selectedPeriod.grouping ===
'monthly' &&
option.value ===
selectedPeriod.monthsBack
? 'selected'
: ''
}
type='button'
onClick={() => {
selectPeriod({
grouping: 'monthly',
monthsBack: option.value,
});
}}
>
Last {option.value} months
</button>
</li>
))}
</RangeList>
</RangeSelector>
</Wrapper>{' '}
</StyledPopover>
</Box>
);
};
Loading