Skip to content

Commit

Permalink
Merge pull request #164 from chain4travel/fix-statistics-filter
Browse files Browse the repository at this point in the history 
Fix statistics filter
  • Loading branch information
@aeddaqqa
aeddaqqa authored Jan 15, 2024
2 parents 5fbfcc3 + f2169fa commit 43331f7
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 76 deletions.
51 changes: 23 additions & 28 deletions src/app/components/Statistics/BlockchainDataCharts/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
import React, { Fragment, useEffect, useState } from 'react'
import { Fragment, useEffect, useState } from 'react'

import { useAppDispatch, useAppSelector } from 'store/configureStore'
import { Status } from 'types'
import CircularProgress from '@mui/material/CircularProgress'
import LinearMeter from './LinearMeter'
import IconButton from '@mui/material/IconButton'
import Icon from '@mdi/react'
import { mdiClose } from '@mdi/js'
import Icon from '@mdi/react'
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
import Modal from '@mui/material/Modal'
import InfoIcon from '@mui/icons-material/Info'
import { Grid, useTheme } from '@mui/material'
import Box from '@mui/material/Box'
import useWidth from 'app/hooks/useWidth'
import 'react-datepicker/dist/react-datepicker.css'
import DateRange from '../DateRange/DateRange'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardHeader from '@mui/material/CardHeader'
import CircularProgress from '@mui/material/CircularProgress'
import IconButton from '@mui/material/IconButton'
import Modal from '@mui/material/Modal'
import Tooltip from '@mui/material/Tooltip'
import InfoIcon from '@mui/icons-material/Info'
import styled from 'styled-components'
import { Grid, useTheme } from '@mui/material'
import useWidth from 'app/hooks/useWidth'
import moment from 'moment'
import { TextBlockchainDatachart } from '../../../../utils/statistics/TextBlockchainDatachart'
import '../../../../styles/scrollbarModal.css'
import 'react-datepicker/dist/react-datepicker.css'
import { useAppDispatch, useAppSelector } from 'store/configureStore'
import styled from 'styled-components'
import { Status } from 'types'
import { ConsumptionCharts, Emissions, TextProps } from 'types/statistics'
import '../../../../styles/scrollbarModal.css'
import { TextBlockchainDatachart } from '../../../../utils/statistics/TextBlockchainDatachart'
import DateRange from '../DateRange/DateRange'
import LinearMeter from './LinearMeter'

import React from 'react'
const TooltipContainer = styled.div`
display: flex;
padding-top: 2rem;
Expand Down Expand Up @@ -63,38 +64,32 @@ const BlockchainCharts = ({
const theme = useTheme()

const isDark = theme.palette.mode === 'dark'
const [openModal, setOpenModal] = useState(false)
const [openModal, setOpenModal] = React.useState(false)
const [startDate, setStartDate] = useState<Date>()
const [endDate, setEndDate] = useState<Date>(new Date())
const [seeTimeAxis, setSeeTimeAxis] = useState<string>('custom')
const [seeTimeAxis, setSeeTimeAxis] = useState<string>('month')
const [firstLoad, setFirstLoad] = useState<boolean>(true)
const [applyFilterLimit, setApplyFilterLimit] = useState(false)

const { isTablet, isSmallMobile, isWidescreen } = useWidth()

const dispatch = useAppDispatch()

useEffect(() => {
let startDateObject = moment(startDate)
let endDateObject = moment(endDate)
if (startDate !== undefined && endDate !== undefined) {
dispatch(
utilSlice({
startDate: `${moment(startDate).format('YYYY-MM-DD')}T00:00:00Z`,
endDate: `${moment(endDate).format('YYYY-MM-DD')}T23:59:59Z`,
limit: applyFilterLimit ? 30 : 0,
limit: endDateObject.diff(startDateObject, 'days'),
}),
)

//First query apply the limit
if (applyFilterLimit === true) {
setApplyFilterLimit(false)
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startDate, endDate])

useEffect(() => {
setApplyFilterLimit(true)
setStartDate(new Date(moment().add(-30, 'days').format('YYYY-MM-DD HH:mm:ss')))
setStartDate(new Date(moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss')))
setEndDate(new Date(moment().format('YYYY-MM-DD HH:mm:ss')))
}, [])

Expand Down
63 changes: 15 additions & 48 deletions src/app/components/Statistics/DateRange/DateRange.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'
import TextField from '@mui/material/TextField'
import moment from 'moment'
import React, { ForwardedRef, forwardRef } from 'react'
import DatePicker from 'react-datepicker'
import '../../../../styles/custompicker.css'
import styled from 'styled-components'
import moment from 'moment'
import TextField from '@mui/material/TextField'
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
import 'react-datepicker/dist/react-datepicker.css'
import styled from 'styled-components'
import { IDataRef, IDateRange } from 'types/statistics'
import '../../../../styles/custompicker.css'
import useWidth from '../../../hooks/useWidth'
import { Radio, RadioGroup, FormControlLabel, FormControl } from '@mui/material'
import { seeTimeAxis as typeSeeTimeAxis } from '../ChartConfig/SeeTimeAxis'
import { IDataRef, IDateRange } from 'types/statistics'

const PickerContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -56,58 +56,29 @@ const DateRange = ({
}: IDateRange) => {
const { isWideScreenDown, isWidescreen } = useWidth()

const validateFirstLoad = () => {
if (firstLoad !== undefined && firstLoad !== null && setFirstLoad !== undefined) {
setFirstLoad(false)
}
}

const handleClickOneDay = () => {
setSeeTimeAxis('day')
setStartDate(new Date(moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')))
setEndDate(new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')))
validateFirstLoad()
setStartDate(new Date(moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')))
setEndDate(new Date(moment().format('YYYY-MM-DD HH:mm:ss')))
}

const handleClickOneMonth = () => {
setSeeTimeAxis('month')
setStartDate(new Date(moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')))

if (disableCurrentDay) {
setEndDate(
new Date(moment().add(-1, 'days').endOf('day').format('YYYY-MM-DD HH:mm:ss')),
)
} else if (disableFuture) {
setEndDate(new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')))
} else {
setEndDate(new Date(moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')))
}

validateFirstLoad()
setStartDate(new Date(moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss')))
setEndDate(new Date(moment().format('YYYY-MM-DD HH:mm:ss')))
}

const handleClickOneYear = () => {
setSeeTimeAxis('year')
setStartDate(new Date(moment().startOf('year').format('YYYY-MM-DD HH:mm:ss')))

if (disableCurrentDay) {
setEndDate(
new Date(moment().add(-1, 'days').endOf('day').format('YYYY-MM-DD HH:mm:ss')),
)
} else if (disableFuture) {
setEndDate(new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')))
} else {
setEndDate(new Date(moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')))
}

validateFirstLoad()
setStartDate(new Date(moment().subtract(12, 'months').format('YYYY-MM-DD HH:mm:ss')))
setEndDate(new Date(moment().format('YYYY-MM-DD HH:mm:ss')))
}

const handleClickOneAllTime = () => {
setSeeTimeAxis('all')
setStartDate(
new Date(
moment('01/01/2000', 'DD/MM/YYYY').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
moment('01/01/2022', 'DD/MM/YYYY').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
),
)

Expand All @@ -118,20 +89,16 @@ const DateRange = ({
} else {
setEndDate(new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')))
}

validateFirstLoad()
}

const handleChangeStartDate = (date: Date) => {
setSeeTimeAxis('custom')
setStartDate(date)
validateFirstLoad()
}

const handleChangeEndDate = (date: Date) => {
setSeeTimeAxis('custom')
setEndDate(date)
validateFirstLoad()
}

const handleChangeRadioButtons = (value: string) => {
Expand All @@ -151,7 +118,7 @@ const DateRange = ({
}
}

const CustomInput = forwardRef(
const CustomInput = React.forwardRef(
({ value, onClick, label }: IDataRef, ref: ForwardedRef<HTMLInputElement>) => (
<CustomInputContainer style={{ cursor: 'default' }}>
<NewTextField
Expand Down

0 comments on commit 43331f7

Please sign in to comment.