Merge branch 'feat/clickable-monthly-summary' into 'dev'

feat(analysis): Make monthly summary button clickable

See merge request !1124

src/components/Analysis/Comparison/Comparison.tsx

@@ -5,8 +5,10 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { PerformanceIndicator } from 'models'
 import React, { useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import ConsumptionService from 'services/consumption.service'
 import { setPeriod } from 'store/analysis/analysis.slice'
+import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import FluidPerformanceIndicator from './FluidPerformanceIndicator'
 import './comparison.scss'
@@ -20,9 +22,11 @@ const Comparison = ({
 }) => {
   const { t } = useI18n()
   const client = useClient()
+  const navigate = useNavigate()
   const {
     global: { fluidTypes },
     analysis: { period, analysisMonth },
+    chart: { showCompare },
   } = useAppSelector(state => state.ecolyo)
   const dispatch = useAppDispatch()
   const [yearPerformanceIndicators, setYearPerformanceIndicators] = useState<
@@ -33,6 +37,7 @@ const Comparison = ({
     () => new ConsumptionService(client),
     [client]
   )
+
   const periods = useMemo(() => {
     return {
       monthPeriod: {
@@ -49,6 +54,7 @@ const Comparison = ({
       },
     }
   }, [analysisMonth])
+
   const NAVIGATION_HEIGHT = 40
   const loaderPlaceholderHeight =
     fluidsWithData.length * 84 +
@@ -94,6 +100,33 @@ const Comparison = ({
     dispatch,
   ])
 
+  const handleFluidClick = (fluid: FluidType) => {
+    let fluidTypeText: string
+
+    switch (fluid) {
+      case FluidType.ELECTRICITY:
+        fluidTypeText = 'electricity'
+        break
+      case FluidType.WATER:
+        fluidTypeText = 'water'
+        break
+      case FluidType.GAS:
+        fluidTypeText = 'gas'
+        break
+      default:
+        fluidTypeText = 'unknown'
+    }
+
+    const url = `/consumption/${fluidTypeText}`
+    dispatch(setCurrentTimeStep(TimeStep.MONTH))
+    if (period === 'year') {
+      dispatch(setShowCompare(true))
+    } else {
+      dispatch(setShowCompare(false))
+    }
+    navigate(url)
+  }
+
   return (
     <div className="comparison">
       {!isLoading && (
@@ -156,6 +189,7 @@ const Comparison = ({
                   ? periods.previousMonthPeriod.startDate
                   : periods.previousYearPeriod.startDate
               }
+              onClickHandler={() => handleFluidClick(fluid)}
             />
           ))}
       </div>

src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx

@@ -12,12 +12,14 @@ interface FluidPerformanceIndicatorProps {
   performanceIndicator: PerformanceIndicator
   fluidType: FluidType
   comparisonDate: DateTime
+  onClickHandler?: () => void
 }
 
 const FluidPerformanceIndicator = ({
   performanceIndicator,
   fluidType,
   comparisonDate,
+  onClickHandler,
 }: FluidPerformanceIndicatorProps) => {
   const { t } = useI18n()
   const iconType = getPicto(fluidType)
@@ -36,7 +38,7 @@ const FluidPerformanceIndicator = ({
   }
 
   return (
-    <div className="fpi">
+    <button className="fpi" onClick={onClickHandler}>
       <StyledIcon icon={iconType} size={50} />
       <div className="fpi-content">
         {!displayedValue && (
@@ -72,7 +74,7 @@ const FluidPerformanceIndicator = ({
           </>
         )}
       </div>
-    </div>
+    </button>
   )
 }
 

src/components/Analysis/Comparison/fluidPerformanceIndicator.scss

@@ -35,6 +35,17 @@
   gap: 1rem;
   align-items: center;
   box-shadow: 0px 4px 16px 0px $black-shadow;
+  transition: background-color 0.3s;
+  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+  cursor: pointer;
+
+  &:hover {
+    background: linear-gradient(
+      180deg,
+      rgba(70, 71, 77, 0.7) 0%,
+      rgba(57, 58, 63, 0.7) 100%
+    );
+  }
 
   .fpi-content {
     .fpi-value {