From fe08481f7a5dac5b3b26a1e32f40c0bba9f90cc8 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Thu, 24 Jun 2021 10:12:38 +0200
Subject: [PATCH] Add monthly analysis navigation
---
src/components/Analysis/AnalysisView.tsx | 22 +++--
src/components/Analysis/MonthlyAnalysis.tsx | 13 ++-
.../DateNavigator/DateNavigator.tsx | 96 ++++++++++++-------
.../PerformanceIndicatorContent.tsx | 13 +--
4 files changed, 97 insertions(+), 47 deletions(-)
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index b6e551077..55fa82d12 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -8,8 +8,9 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import MonthlyAnalysis from 'components/Analysis/MonthlyAnalysis'
-import { convertDateToMonthYearString } from 'utils/date'
import './analysisView.scss'
+import DateNavigator from 'components/DateNavigator/DateNavigator'
+import { DateTime } from 'luxon'
const AnalysisView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -17,6 +18,11 @@ const AnalysisView: React.FC = () => {
global: { analysisNotification },
profile: { monthlyAnalysisDate },
} = useSelector((state: AppStore) => state.ecolyo)
+
+ const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
+ const [currentAnalysisDate, setCurrentAnalysisDate] = useState<DateTime>(
+ monthlyAnalysisDate
+ )
const dispatch = useDispatch()
const defineHeaderHeight = useCallback((height: number) => {
@@ -30,9 +36,8 @@ const AnalysisView: React.FC = () => {
dispatch(toggleAnalysisNotification(false))
}
}
-
updateAnalysisNotification()
- }, [dispatch, analysisNotification])
+ }, [dispatch, analysisNotification, monthlyAnalysisDate, selectedDate])
return (
<>
@@ -41,12 +46,17 @@ const AnalysisView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'analysis.viewTitle'}
>
- <div className="text-20-bold-capitalize analysis-view-title">{`${convertDateToMonthYearString(
+ <DateNavigator
+ currentAnalysisDate={currentAnalysisDate}
+ setCurrentAnalysisDate={setCurrentAnalysisDate}
+ />
+
+ {/* <div className="text-20-bold-capitalize analysis-view-title">{`${convertDateToMonthYearString(
monthlyAnalysisDate.plus({ month: -1 })
- )}`}</div>
+ )}`}</div> */}
</Header>
<Content height={headerHeight}>
- <MonthlyAnalysis />
+ <MonthlyAnalysis analysisDate={currentAnalysisDate} />
</Content>
</>
)
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index d41a7ee44..63c965464 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -22,14 +22,19 @@ import AnalysisConsumption from './AnalysisConsumption'
import { useHistory } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import AnalysisErrorModal from './AnalysisErrorModal'
+import { DateTime } from 'luxon'
-const MonthlyAnalysis: React.FC = () => {
+interface MonthlyAnalysisProps {
+ analysisDate: DateTime
+}
+
+const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
+ analysisDate,
+}: MonthlyAnalysisProps) => {
const { t } = useI18n()
const client = useClient()
const history = useHistory()
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
- const profile = useSelector((state: AppStore) => state.ecolyo.profile)
- const analysisDate = profile.monthlyAnalysisDate
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
@@ -52,6 +57,7 @@ const MonthlyAnalysis: React.FC = () => {
}
useEffect(() => {
+ setIsLoaded(false)
let subscribed = true
async function populateData() {
const consumptionService = new ConsumptionService(client)
@@ -141,6 +147,7 @@ const MonthlyAnalysis: React.FC = () => {
performanceIndicator={aggregatedPerformanceIndicators}
timeStep={timeStep}
fluidLackOfData={fluidLackOfData}
+ analysisDate={analysisDate}
/>
<div>
<div className="analysis-header text-16-normal-uppercase">
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index daa227f34..799d64d7e 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -17,19 +17,31 @@ import DoubleRightArrowIcon from 'assets/icons/ico/double-right-arrow.svg'
import DoubleLeftArrowIcon from 'assets/icons/ico/double-left-arrow.svg'
import IconButton from '@material-ui/core/IconButton'
import Icon from 'cozy-ui/transpiled/react/Icon'
+import { TimeStep } from 'enum/timeStep.enum'
-const DateNavigator: React.FC = () => {
+interface DateNavigatorProps {
+ currentAnalysisDate?: DateTime
+ setCurrentAnalysisDate?: React.Dispatch<React.SetStateAction<DateTime>>
+}
+
+const DateNavigator: React.FC<DateNavigatorProps> = ({
+ currentAnalysisDate,
+ setCurrentAnalysisDate,
+}: DateNavigatorProps) => {
const { t } = useI18n()
const dispatch = useDispatch()
const { currentTimeStep, selectedDate, currentIndex } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
+
const disablePrev =
selectedDate <
DateTime.local(0, 1, 1).setZone('utc', {
keepLocalTime: true,
})
- const disableNext: boolean = isLastDateReached(selectedDate, currentTimeStep)
+ const disableNext: boolean = currentAnalysisDate
+ ? isLastDateReached(currentAnalysisDate, TimeStep.MONTH)
+ : isLastDateReached(selectedDate, currentTimeStep)
const disableNextSlide: boolean = isLastPeriodReached(
selectedDate,
currentTimeStep
@@ -37,17 +49,26 @@ const DateNavigator: React.FC = () => {
const dateChartService = new DateChartService()
const handleClickMove = (increment: number) => {
- const updatedDate: DateTime = dateChartService.incrementeDate(
- currentTimeStep,
- selectedDate,
- increment
- )
- const updatedIndex: number = dateChartService.defineDateIndex(
- currentTimeStep,
- updatedDate
- )
- dispatch(setSelectedDate(updatedDate))
- dispatch(setCurrentIndex(updatedIndex))
+ if (!currentAnalysisDate) {
+ const updatedDate: DateTime = dateChartService.incrementeDate(
+ currentTimeStep,
+ selectedDate,
+ increment
+ )
+ const updatedIndex: number = dateChartService.defineDateIndex(
+ currentTimeStep,
+ updatedDate
+ )
+ dispatch(setSelectedDate(updatedDate))
+ dispatch(setCurrentIndex(updatedIndex))
+ } else {
+ const updatedDate: DateTime = dateChartService.incrementeDate(
+ TimeStep.MONTH,
+ currentAnalysisDate,
+ increment
+ )
+ setCurrentAnalysisDate && setCurrentAnalysisDate(updatedDate)
+ }
}
const handleChangePrevIndex = () => {
@@ -84,15 +105,17 @@ const DateNavigator: React.FC = () => {
return (
<div className="date-navigator">
<div>
- <IconButton
- aria-label={t('consumption.accessibility.button_previous_period')}
- className={classNames('date-navigator-button', {
- ['disable']: disablePrev,
- })}
- onClick={() => handleChangePrevIndex()}
- >
- <Icon icon={DoubleLeftArrowIcon} size={16} />
- </IconButton>
+ {!currentAnalysisDate && (
+ <IconButton
+ aria-label={t('consumption.accessibility.button_previous_period')}
+ className={classNames('date-navigator-button', {
+ ['disable']: disablePrev,
+ })}
+ onClick={() => handleChangePrevIndex()}
+ >
+ <Icon icon={DoubleLeftArrowIcon} size={16} />
+ </IconButton>
+ )}
</div>
<div>
<IconButton
@@ -105,7 +128,14 @@ const DateNavigator: React.FC = () => {
<Icon icon={LeftArrowIcon} size={16} />
</IconButton>
</div>
- <DateNavigatorFormat timeStep={currentTimeStep} date={selectedDate} />
+ <DateNavigatorFormat
+ timeStep={currentAnalysisDate ? TimeStep.MONTH : currentTimeStep}
+ date={
+ currentAnalysisDate
+ ? currentAnalysisDate.minus({ month: 1 })
+ : selectedDate
+ }
+ />
<div>
<IconButton
@@ -119,15 +149,17 @@ const DateNavigator: React.FC = () => {
</IconButton>
</div>
<div>
- <IconButton
- aria-label={t('consumption.accessibility.button_next_period')}
- className={classNames('date-navigator-button', {
- ['disable']: disableNext || disableNextSlide,
- })}
- onClick={() => handleChangeNextIndex()}
- >
- <Icon icon={DoubleRightArrowIcon} size={16} />
- </IconButton>
+ {!currentAnalysisDate && (
+ <IconButton
+ aria-label={t('consumption.accessibility.button_next_period')}
+ className={classNames('date-navigator-button', {
+ ['disable']: disableNext || disableNextSlide,
+ })}
+ onClick={() => handleChangeNextIndex()}
+ >
+ <Icon icon={DoubleRightArrowIcon} size={16} />
+ </IconButton>
+ )}
</div>
</div>
)
diff --git a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
index 172ea5638..286cdd842 100644
--- a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -14,22 +14,22 @@ import GreyIndicatorIcon from 'assets/icons/visu/indicator/grey.svg'
import ErrorIndicatorIcon from 'assets/icons/visu/indicator/error.svg'
import { FluidType } from 'enum/fluid.enum'
import './fluidPerformanceIndicator.scss'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
import { convertDateToMonthString } from 'utils/date'
+import { DateTime } from 'luxon'
interface PerformanceIndicatorContentProps {
performanceIndicator: PerformanceIndicator
timeStep: TimeStep
fluidLackOfData?: Array<FluidType>
+ analysisDate?: DateTime
}
const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = ({
performanceIndicator,
fluidLackOfData = [],
+ analysisDate,
}: PerformanceIndicatorContentProps) => {
const { t } = useI18n()
- const profile = useSelector((state: AppStore) => state.ecolyo.profile)
let displayedValue: string
if (performanceIndicator && performanceIndicator.value)
displayedValue = formatNumberValues(performanceIndicator.value).toString()
@@ -90,9 +90,10 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
/>
<div className="evolution-text">
{t('performance_indicator.bilan.text1')}
- {convertDateToMonthString(
- profile.monthlyAnalysisDate.plus({ month: -2 })
- ).substring(3)}{' '}
+ {analysisDate &&
+ convertDateToMonthString(
+ analysisDate.plus({ month: -2 })
+ ).substring(3)}{' '}
:
<span
className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
--
GitLab