feat: lead user to the right date & timestep

src/components/Analysis/MonthlyAnalysis.tsx

@@ -155,6 +155,7 @@ const MonthlyAnalysis: React.FC = () => {
                       performanceIndicator={
                         performanceIndicators[fluid.fluidTypeId]
                       }
+                      date={analysisDate.minus({ month: 1 }).startOf('month')}
                     />
                   ) : null
                 })}

src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx

-import React from 'react'
-import { NavLink } from 'react-router-dom'
+import React, { useCallback } from 'react'
+import './fluidPerformanceIndicator.scss'
+import { useHistory } from 'react-router-dom'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useDispatch } from 'react-redux'
+import { DateTime } from 'luxon'
 
 import { FluidType } from 'enum/fluid.enum'
 import { PerformanceIndicator } from 'models'
@@ -11,17 +14,23 @@ import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
 import ConverterService from 'services/converter.service'
-import './fluidPerformanceIndicator.scss'
+import { setCurrentTimeStep, setSelectedDate } from 'store/chart/chart.actions'
+import { TimeStep } from 'enum/timeStep.enum'
+
 interface FluidPerformanceIndicatorProps {
   performanceIndicator: PerformanceIndicator
   fluidType: FluidType
+  date: DateTime
 }
 
 const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
   performanceIndicator,
   fluidType,
+  date,
 }: FluidPerformanceIndicatorProps) => {
   const { t } = useI18n()
+  const history = useHistory()
+  const dispatch = useDispatch()
   const iconType = getPicto(fluidType)
   const converterService = new ConverterService()
 
@@ -30,15 +39,18 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
     displayedValue = formatNumberValues(performanceIndicator.value).toString()
   else displayedValue = '-----'
 
-  return (
-    <NavLink
-      tabIndex={-1}
-      className="fpi-link"
-      to={`/consumption/${t(
+  const handleClick = useCallback(() => {
+    dispatch(setCurrentTimeStep(TimeStep.DAY))
+    dispatch(setSelectedDate(date))
+    history.push(
+      `/consumption/${t(
         'FLUID.' + FluidType[fluidType] + '.NAME'
-      ).toLowerCase()}`}
-    >
-      <StyledCard fluidType={fluidType}>
+      ).toLowerCase()}`
+    )
+  }, [t, dispatch, history, date, fluidType])
+
+  return (
+    <StyledCard onClick={handleClick} fluidType={fluidType}>
       <div className="fpi">
         <div className="fpi-left">
           <div className="fpi-title card-title-on">
@@ -77,7 +89,6 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
         </div>
       </div>
     </StyledCard>
-    </NavLink>
   )
 }