Analytics Modal + CSV Bug Fix #603
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,4 +30,4 @@ jobs: | |
| - name: Run Linter | ||
| run: npm run lint | ||
| - name: Run Type Check | ||
| run: npm run type-check | ||
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,235 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Modal from '@mui/material/Modal'; | ||
| import { ThemeProvider, createTheme } from '@mui/material/styles'; | ||
| import { useEmployees } from 'context/EmployeesContext'; | ||
| import moment from 'moment'; | ||
| import { Driver } from 'types'; | ||
| import ExportButton from 'components/ExportButton/ExportButton'; | ||
| import dayjs from 'dayjs'; | ||
| import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; | ||
| import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; | ||
| import { DatePicker } from '@mui/x-date-pickers/DatePicker'; | ||
| import styles from '../Modal/modal.module.css'; | ||
| import { useState } from 'react'; | ||
| import { useEffect } from 'react'; | ||
| import { Button } from 'components/FormElements/FormElements'; | ||
|
|
||
| const theme = createTheme(); | ||
|
|
||
| type StatsModalProps = { | ||
| initStartDate: string; | ||
| initEndDate: string; | ||
| }; | ||
|
|
||
| const StatsModal = ({ initStartDate, initEndDate }: StatsModalProps) => { | ||
| const [open, setOpen] = useState(false); | ||
| const handleOpen = () => setOpen(true); | ||
| const handleClose = () => setOpen(false); | ||
| const { drivers } = useEmployees(); | ||
| const [startDate, setStartDate] = useState(initStartDate); | ||
| const [endDate, setEndDate] = useState(initEndDate); | ||
| const today = moment(); | ||
|
|
||
| useEffect(() => { | ||
| if (open) { | ||
| setStartDate(initStartDate); | ||
| setEndDate(initEndDate); | ||
| } | ||
| }, [initStartDate, initEndDate, open]); | ||
|
|
||
| //Creates csv column string | ||
| const generateCols = () => { | ||
| const cols = | ||
| 'Date,Daily Total,Daily Ride Count,Day No Shows,Day Cancels,Night Ride Count, Night No Shows, Night Cancels'; | ||
| const finalCols = drivers.reduce( | ||
| (acc: string, curr: Driver) => | ||
| `${acc},${curr.firstName} ${curr.lastName.substring(0, 1)}.`, | ||
| cols | ||
| ); | ||
| return finalCols; | ||
| }; | ||
|
|
||
| //logic for handling when start and end dates are for shortcut buttons | ||
| const handleShortcut = (shortcut: string) => { | ||
| const today = dayjs(); | ||
| if (shortcut === 'this week') { | ||
| const newStartDate = today.startOf('week').format('YYYY-MM-DD'); //beginning of week to today | ||
| const newEndDate = today.format('YYYY-MM-DD'); | ||
| return { newStartDate, newEndDate }; | ||
| } else if (shortcut === 'last week') { | ||
| const prevWeek = today.subtract(7, 'day'); //seven days ago to today | ||
| const newStartDate = prevWeek.startOf('week').format('YYYY-MM-DD'); | ||
| const newEndDate = prevWeek.endOf('week').format('YYYY-MM-DD'); | ||
| return { newStartDate, newEndDate }; | ||
| } else if (shortcut === 'last 7') { | ||
| const newStartDate = today.subtract(7, 'day').format('YYYY-MM-DD'); //beginning of last week to end of last week | ||
| const newEndDate = today.format('YYYY-MM-DD'); | ||
| return { newStartDate, newEndDate }; | ||
| } else if (shortcut === 'curr month') { | ||
| const newStartDate = today.startOf('month').format('YYYY-MM-DD'); //beginning of month to today | ||
| const newEndDate = today.format('YYYY-MM-DD'); | ||
| return { newStartDate, newEndDate }; | ||
| } else if (shortcut === 'curr year') { | ||
| const newStartDate = today.startOf('year').format('YYYY-MM-DD'); //beginning of year to today | ||
| const newEndDate = today.format('YYYY-MM-DD'); | ||
| return { newStartDate, newEndDate }; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <div style={{ alignContent: 'space-between' }}> | ||
| <Button onClick={handleOpen}>Export Data</Button> | ||
| <Modal | ||
| open={open} | ||
| onClose={handleClose} | ||
| aria-labelledby="modal-modal-title" | ||
| aria-describedby="modal-modal-description" | ||
| slotProps={{ | ||
| backdrop: { | ||
| className: styles.background, | ||
| }, | ||
| }} | ||
| > | ||
| <Box className={styles.modal}> | ||
| <h3 className={styles.title} id="modal-modal-title"> | ||
| Export Statistics | ||
| </h3> | ||
| <div className={styles.colBlock}> | ||
| <div className={styles.rowBlock}> | ||
| <LocalizationProvider dateAdapter={AdapterDayjs}> | ||
| <DatePicker | ||
|
Contributor
There was a problem hiding this comment. You might want to rethink how you handle the modal here. Using it on the website, I was frustrated that the date range I had set for the main analytics view didn't carry over to the default values on this modal. Maybe it could be a prop for the export button? |
||
| label="Start Date" | ||
| value={dayjs(startDate)} | ||
| onChange={(newValue) => { | ||
| if (newValue) { | ||
| setStartDate(newValue.format('YYYY-MM-DD')); | ||
| } | ||
| }} | ||
| maxDate={dayjs(today.format('YYYY-MM-DD'))} //data validation | ||
| /> | ||
|
|
||
| <DatePicker | ||
| label="End Date" | ||
| value={dayjs(endDate)} | ||
| onChange={(newValue) => { | ||
| if (newValue) { | ||
| setEndDate(newValue.format('YYYY-MM-DD')); | ||
| } | ||
| }} | ||
| minDate={dayjs(startDate)} //data validation | ||
| maxDate={dayjs(today.format('YYYY-MM-DD'))} | ||
| /> | ||
| </LocalizationProvider> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className={styles.btnList}> | ||
| <button | ||
| className={styles.btnListItem} | ||
| onClick={(event) => { | ||
| const newStartDate = | ||
| handleShortcut('this week')?.newStartDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| const newEndDate = | ||
| handleShortcut('this week')?.newEndDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| setStartDate(newStartDate); | ||
| setEndDate(newEndDate); | ||
| }} | ||
| > | ||
| This Week | ||
| </button> | ||
|
|
||
| <button | ||
| className={styles.btnListItem} | ||
| onClick={(event) => { | ||
| const newStartDate = | ||
| handleShortcut('last week')?.newStartDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| const newEndDate = | ||
| handleShortcut('last week')?.newEndDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| setStartDate(newStartDate); | ||
| setEndDate(newEndDate); | ||
| }} | ||
| > | ||
| Last Week{' '} | ||
| </button> | ||
|
|
||
| <button | ||
| className={styles.btnListItem} | ||
| onClick={(event) => { | ||
| const newStartDate = | ||
| handleShortcut('last 7')?.newStartDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| const newEndDate = | ||
| handleShortcut('last 7')?.newEndDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| setStartDate(newStartDate); | ||
| setEndDate(newEndDate); | ||
| }} | ||
| > | ||
| Last 7 Days | ||
| </button> | ||
| <button | ||
| className={styles.btnListItem} | ||
| onClick={(event) => { | ||
| const newStartDate = | ||
| handleShortcut('curr month')?.newStartDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| const newEndDate = | ||
| handleShortcut('curr month')?.newEndDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| setStartDate(newStartDate); | ||
| setEndDate(newEndDate); | ||
| }} | ||
| > | ||
| Current Month | ||
| </button> | ||
| <button | ||
| className={styles.btnListItem} | ||
| onClick={(event) => { | ||
| const newStartDate = | ||
| handleShortcut('curr year')?.newStartDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| const newEndDate = | ||
| handleShortcut('curr year')?.newEndDate ?? | ||
| today.format('YYYY-MM-DD'); | ||
| setStartDate(newStartDate); | ||
| setEndDate(newEndDate); | ||
| }} | ||
| > | ||
| Year to Date | ||
| </button> | ||
| </div> | ||
|
|
||
| <div | ||
| className={styles.buttonContainer} | ||
| style={{ marginTop: '10px' }} | ||
| > | ||
| <button | ||
| type="button" | ||
| className={styles.closeBtn} | ||
| onClick={handleClose} | ||
| > | ||
| Cancel | ||
| </button> | ||
| <div className={styles.submit}> | ||
| <ExportButton | ||
| toastMsg={`${startDate} to ${endDate} data has been downloaded.`} | ||
| endpoint={`/api/stats/download?from=${startDate}&to=${endDate}`} | ||
| csvCols={generateCols()} | ||
| filename={`${startDate}_${endDate}_analytics.csv`} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Box> | ||
| </Modal> | ||
| </div> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default StatsModal; | ||
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
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
exporting doesn't work for me b/c of the aforementioned errors but this code looks good to me !