From f2169fa096ad48ad1aca85d7654c3c3a074c1a9e Mon Sep 17 00:00:00 2001 From: aeddaqqa Date: Thu, 11 Jan 2024 11:35:10 +0100 Subject: [PATCH] fix statistics filter --- .../Statistics/BlockchainDataCharts/index.tsx | 51 +++++++-------- .../Statistics/DateRange/DateRange.tsx | 63 +++++-------------- 2 files changed, 38 insertions(+), 76 deletions(-) diff --git a/src/app/components/Statistics/BlockchainDataCharts/index.tsx b/src/app/components/Statistics/BlockchainDataCharts/index.tsx index fb7f619..a34bd19 100644 --- a/src/app/components/Statistics/BlockchainDataCharts/index.tsx +++ b/src/app/components/Statistics/BlockchainDataCharts/index.tsx @@ -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; @@ -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() const [endDate, setEndDate] = useState(new Date()) - const [seeTimeAxis, setSeeTimeAxis] = useState('custom') + const [seeTimeAxis, setSeeTimeAxis] = useState('month') const [firstLoad, setFirstLoad] = useState(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'))) }, []) diff --git a/src/app/components/Statistics/DateRange/DateRange.tsx b/src/app/components/Statistics/DateRange/DateRange.tsx index 161cd18..5b42da4 100644 --- a/src/app/components/Statistics/DateRange/DateRange.tsx +++ b/src/app/components/Statistics/DateRange/DateRange.tsx @@ -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; @@ -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'), ), ) @@ -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) => { @@ -151,7 +118,7 @@ const DateRange = ({ } } - const CustomInput = forwardRef( + const CustomInput = React.forwardRef( ({ value, onClick, label }: IDataRef, ref: ForwardedRef) => (