feat(1-3262): initial impl of new month/range picker#9122
Merged
thomasheartman merged 8 commits intomainfrom Jan 21, 2025
Merged
feat(1-3262): initial impl of new month/range picker#9122thomasheartman merged 8 commits intomainfrom
thomasheartman merged 8 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Contributor
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.OpenSSF Scorecard
Scanned Files |
thomasheartman
commented
Jan 21, 2025
Comment on lines
+4
to
+59
| export type Period = { | ||
| key: string; | ||
| dayCount: number; | ||
| label: string; | ||
| year: number; | ||
| month: number; | ||
| selectable: boolean; | ||
| shortLabel: string; | ||
| }; | ||
|
|
||
| export const toSelectablePeriod = ( | ||
| date: Date, | ||
| label?: string, | ||
| selectable = true, | ||
| ): Period => { | ||
| const year = date.getFullYear(); | ||
| const month = date.getMonth(); | ||
| const period = `${year}-${(month + 1).toString().padStart(2, '0')}`; | ||
| const dayCount = new Date(year, month + 1, 0).getDate(); | ||
| return { | ||
| key: period, | ||
| year, | ||
| month, | ||
| dayCount, | ||
| shortLabel: date.toLocaleString('en-US', { | ||
| month: 'short', | ||
| }), | ||
| label: | ||
| label || | ||
| date.toLocaleString('en-US', { month: 'long', year: 'numeric' }), | ||
| selectable, | ||
| }; | ||
| }; | ||
|
|
||
| const currentDate = new Date(Date.now()); | ||
| const currentPeriod = toSelectablePeriod(currentDate, 'Current month'); | ||
|
|
||
| const getSelectablePeriods = (): Period[] => { | ||
| const selectablePeriods = [currentPeriod]; | ||
| for ( | ||
| let subtractMonthCount = 1; | ||
| subtractMonthCount < 12; | ||
| subtractMonthCount++ | ||
| ) { | ||
| // JavaScript wraps around the year, so we don't need to handle that. | ||
| const date = new Date( | ||
| currentDate.getFullYear(), | ||
| currentDate.getMonth() - subtractMonthCount, | ||
| 1, | ||
| ); | ||
| selectablePeriods.push( | ||
| toSelectablePeriod(date, undefined, date > new Date('2024-03-31')), | ||
| ); | ||
| } | ||
| return selectablePeriods; | ||
| }; |
Contributor
Author
There was a problem hiding this comment.
These functions are mostly copied from frontend/src/hooks/useTrafficData.ts, but slightly modified. We'll probably want to reconsider this as the API is built out. I don't want to touch them more than I need to right now.
|
|
||
| const padMonth = (month: number): string => | ||
| month < 10 ? `0${month}` : `${month}`; | ||
| const padMonth = (month: number): string => month.toString().padStart(2, '0'); |
Contributor
Author
There was a problem hiding this comment.
Javascript can do this for us with a builtin instead of us checking the value
thomasheartman
changed the title
Tymek
reviewed
Jan 21, 2025
| import { styled } from '@mui/material'; | ||
| import { type FC, useState } from 'react'; | ||
|
|
||
| export type Period = { |
Contributor
There was a problem hiding this comment.
For me DateRange is more intuitive, and easier to find in the code.
Comment on lines
+43
to
+47
| for ( | ||
| let subtractMonthCount = 1; | ||
| subtractMonthCount < 12; | ||
| subtractMonthCount++ | ||
| ) { |
Contributor
There was a problem hiding this comment.
Seeing months in reverse order looks a bit off. I'm used to pickers having same natural order, and maybe even starting line aligned to January
Comment on lines
+179
to
+184
| className={ | ||
| !tempOverride && | ||
| period.key === selectedPeriod | ||
| ? 'selected' | ||
| : '' | ||
| } |
Contributor
There was a problem hiding this comment.
Doing this with classes + nested selector instead of props makes it harder to refactor. There a link between how this element looks like, and where it is placed.
Tymek
approved these changes
Jan 21, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR implements a first version of the new month/range picker for the data usage graphs. It's minimally hooked up to the existing functionality to not take anything away.
This primary purpose of this PR is to get the design and interaction out on sandbox so that UX can have a look and we can make adjustments.
As such, there are a few things in the code that we'll want to clean up before removing the flag later:
NewHeadercomponent because the existing setup smushed the selector (it's a MUI grid setup, which isn't very flexible). I don't know what we want to do with this in the end, but the existing chart does have some problems when you resize your window, at least (although this is likely due to the chart, and can be solved in the same way that we did for the personal dashboards).