chore(analysis): adjust text in profile comparator

src/components/Analysis/MonthlyAnalysis.tsx

@@ -145,7 +145,6 @@ const MonthlyAnalysis = ({
                   aggregatedPerformanceIndicator={
                     aggregatedPerformanceIndicators
                   }
-                  fluidsWithData={fluidsWithData}
                   performanceIndicators={performanceIndicators}
                 />
               </div>

src/components/Analysis/ProfileComparator/ProfileComparator.tsx

@@ -26,13 +26,11 @@ import './profileComparator.scss'
 
 interface ProfileComparatorProps {
   aggregatedPerformanceIndicator: PerformanceIndicator
-  fluidsWithData: FluidType[]
   performanceIndicators: PerformanceIndicator[]
 }
 
 const ProfileComparator = ({
   aggregatedPerformanceIndicator,
-  fluidsWithData,
   performanceIndicators,
 }: ProfileComparatorProps) => {
   const { t } = useI18n()
@@ -63,35 +61,32 @@ const ProfileComparator = ({
     }
   }
 
-  /** Disconnected + empty fluids to show in ProfileComparatorRow */
-  const disconnectedFluidTypes: FluidType[] = [
-    FluidType.ELECTRICITY,
-    FluidType.WATER,
-    FluidType.GAS,
-  ].filter(fluidType => !fluidsWithData.includes(fluidType))
-
   const emptyFluidTypes: FluidType[] = []
-
-  for (let i = 0; i < performanceIndicators.length; i++) {
-    if (!performanceIndicators[i]?.value && fluidsWithData[i]) {
-      emptyFluidTypes.push(fluidsWithData[i])
+  if (performanceIndicators.length === 0) {
+    // If no indicators add all fluids for component placeholder
+    emptyFluidTypes.push(FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS)
+  } else {
+    for (let i = 0; i < performanceIndicators.length; i++) {
+      if (!performanceIndicators[i]?.value) {
+        emptyFluidTypes.push(i)
+      }
     }
   }
 
   const getTotalValueWithConnectedFluids = useCallback(
     (monthlyForecast: MonthlyForecast) => {
-      if (fluidsWithData.length === 3) {
+      if (performanceIndicators.length === 3) {
         setHomePriceConsumption(monthlyForecast.totalValue)
       } else {
         let totalPrice = 0
-        fluidsWithData.forEach(fluid => {
-          if (monthlyForecast.fluidForecast[fluid].value)
-            totalPrice += monthlyForecast.fluidForecast[fluid].value
+        performanceIndicators.forEach((fluid, index) => {
+          if (monthlyForecast.fluidForecast[index].value)
+            totalPrice += monthlyForecast.fluidForecast[index].value
         })
         setHomePriceConsumption(totalPrice)
       }
     },
-    [fluidsWithData]
+    [performanceIndicators]
   )
 
   useEffect(() => {
@@ -167,47 +162,34 @@ const ProfileComparator = ({
         <>
           <div className="consumption-title text-20-bold">
             <div className="user-title">{t('analysis.user_consumption')}</div>
-            <div className={`average-title`}>{t(`analysis.comparison`)}</div>
-          </div>
-          <div className="consumption-price">
-            <ProfileComparatorRow
-              fluid={FluidType.MULTIFLUID}
-              userPriceConsumption={userPriceConsumption}
-              homePriceConsumption={homePriceConsumption}
-              performanceValue={null}
-              forecast={forecast}
-              connected={fluidsWithData.length > 0}
-              noData={false}
-            />
+            <div />
+            <div className="average-title">{t(`analysis.comparison`)}</div>
           </div>
-          {fluidsWithData.map(
-            fluid =>
-              Boolean(performanceIndicators[fluid]?.value) && (
+          <ProfileComparatorRow
+            fluid={FluidType.MULTIFLUID}
+            userPriceConsumption={userPriceConsumption}
+            homePriceConsumption={homePriceConsumption}
+            performanceValue={null}
+            forecast={forecast}
+            connected={performanceIndicators.length > 0}
+            noData={false}
+          />
+          {performanceIndicators.map(
+            (indicator, index) =>
+              indicator.value && (
                 <ProfileComparatorRow
-                  key={fluid}
-                  fluid={fluid}
+                  key={index}
+                  fluid={index}
                   userPriceConsumption={userPriceConsumption}
                   homePriceConsumption={homePriceConsumption}
-                  performanceValue={performanceIndicators[fluid].value}
+                  performanceValue={indicator.value}
                   forecast={forecast}
                   connected={true}
                   noData={false}
                 />
               )
           )}
-          {fluidsWithData.length < 3 && <hr className="consumption-sep" />}
-          {disconnectedFluidTypes.map(fluid => (
-            <ProfileComparatorRow
-              key={fluid}
-              fluid={fluid}
-              userPriceConsumption={userPriceConsumption}
-              homePriceConsumption={homePriceConsumption}
-              performanceValue={null}
-              forecast={forecast}
-              connected={false}
-              noData={false}
-            />
-          ))}
+          {emptyFluidTypes.length > 0 && <hr className="consumption-sep" />}
           {emptyFluidTypes.map(fluid => (
             <ProfileComparatorRow
               key={fluid}

src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx

@@ -54,7 +54,7 @@ describe('AnalysisConsumptionRow component', () => {
       />
     )
     expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
-    expect(wrapper.find('.price').first().text()).toBe('analysis.not_connected')
+    expect(wrapper.find('.price').first().text()).toBe('analysis.no_data')
     expect(wrapper.find('.price').last().text()).toBe('18,00 €')
     expect(wrapper.find('.graph').exists()).toBeFalsy()
     expect(wrapper.find('.not-connected').exists()).toBeTruthy()
@@ -97,7 +97,7 @@ describe('AnalysisConsumptionRow component', () => {
       />
     )
     expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
-    expect(wrapper.find('.price').first().text()).toBe('analysis.not_connected')
+    expect(wrapper.find('.price').first().text()).toBe('analysis.no_data')
     expect(wrapper.find('.price').last().text()).toBe(
       '4340 FLUID.ELECTRICITY.UNIT'
     )

src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx

@@ -105,18 +105,13 @@ const ProfileComparatorRow = ({
     }
   }
 
-  let comparaisonText: string
-  if (connected) {
-    comparaisonText = formatFluidConsumptionForConso(fluid)
-  } else if (noData) {
-    comparaisonText = t(`analysis.no_data_2`)
-  } else {
-    comparaisonText = t(`analysis.not_connected`)
-  }
+  const comparaisonText = connected
+    ? formatFluidConsumptionForConso(fluid)
+    : t(`analysis.no_data`)
 
   return (
     <div
-      className={`consumption-${FluidType[fluid].toLowerCase()} analysisRow`}
+      className={`analysisRow consumption-${FluidType[fluid].toLowerCase()}`}
     >
       <div className="user-graph">
         <div
@@ -126,16 +121,16 @@ const ProfileComparatorRow = ({
         >
           {comparaisonText}
         </div>
-        <div className="container-graph">
-          {connected && (
+        {connected && (
+          <div className="container-graph">
             <div
               className="graph"
               style={{
                 width: getWidthForConso(fluid),
               }}
             />
-          )}
-        </div>
+          </div>
+        )}
       </div>
       <div className="icon-container">
         <StyledIcon
@@ -143,6 +138,7 @@ const ProfileComparatorRow = ({
             fluid === FluidType.MULTIFLUID ? EuroIcon : getPicto(fluid, true)
           }
           size={22}
+          className={noData ? 'noData' : ''}
         />
       </div>
       <div className="average-graph">

src/components/Analysis/ProfileComparator/profileComparator.scss

@@ -2,17 +2,18 @@
 @import 'src/styles/base/breakpoint';
 
 .analysis-graph {
-  margin-top: 1.5rem;
   .consumption-title {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 2rem;
-    gap: 2rem;
+    margin-bottom: 1rem;
     .user-title,
     .average-title {
-      flex-basis: 50%;
+      flex-basis: 45%;
+      line-height: 3rem;
     }
+
     .user-title {
+      line-height: 3rem;
       text-align: right;
       color: $multi-color;
     }
@@ -20,10 +21,14 @@
       color: $blue-grey;
     }
   }
+  .consumption-sep {
+    border: 1px solid $grey-dark;
+    margin: 1rem 0;
+  }
   div.expansion-panel-root {
     border: solid 2px $blue-grey;
     color: $blue-grey;
-    margin-bottom: 0 !important;
+    margin-block: 0 !important;
     box-shadow: 0px 4px 16px 0px $black-shadow;
   }
   .accordion-title {
@@ -60,21 +65,3 @@
     margin-top: 0;
   }
 }
-
-.grid-align {
-  div {
-    display: grid;
-    grid-template-columns: 20px 1fr;
-    grid-gap: 10px;
-    padding: 0 10px;
-    align-items: center;
-    height: 32px;
-    @media #{$large-phone} {
-      height: 48px;
-    }
-  }
-  span:first-child {
-    grid-column: 1;
-    align-self: center;
-  }
-}

src/components/Analysis/ProfileComparator/profileComparatorRow.scss

 @import 'src/styles/base/color';
 @import 'src/styles/base/breakpoint';
 
-.consumption-multifluid,
-.consumption-electricity,
-.consumption-water,
-.consumption-gas {
+.analysisRow {
   display: flex;
   margin-bottom: 1rem;
   .user-graph {
-    .graph {
-      border-radius: 0.35rem 0 0 0.35rem;
+    .container-graph {
+      justify-content: flex-end;
+      .graph {
+        border-radius: 0.35rem 0 0 0.35rem;
+      }
     }
     .price {
       &.not-connected {
@@ -21,6 +21,18 @@
       }
     }
   }
+  .icon-container {
+    flex-basis: 10%;
+    display: flex;
+    justify-content: center;
+    svg {
+      align-self: center;
+      width: 40px;
+      &.noData {
+        opacity: 0.6;
+      }
+    }
+  }
   .average-graph {
     color: $blue-grey;
     .price {
@@ -34,10 +46,7 @@
     }
   }
 }
-.consumption-sep {
-  border-top: 1px solid $grey-dark;
-  margin: 1rem 0;
-}
+
 .user-graph,
 .average-graph {
   display: flex;
@@ -77,27 +86,11 @@
     }
   }
 }
-.analysisRow {
-  .icon-container {
-    flex-basis: 10%;
-    display: flex;
-    justify-content: center;
-    svg {
-      align-self: center;
-      width: 40px;
-    }
-  }
-}
 
 .container-graph {
   flex-basis: 50%;
   display: flex;
 }
-.user-graph {
-  .container-graph {
-    justify-content: flex-end;
-  }
-}
 .price {
   min-width: 5.25rem;
 }

src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap

@@ -155,13 +155,6 @@ exports[`MonthlyAnalysis component should be rendered correctly 1`] = `
                         "value": 0.8859499999999999,
                       }
                     }
-                    fluidsWithData={
-                      Array [
-                        0,
-                        1,
-                        2,
-                      ]
-                    }
                     performanceIndicators={
                       Array [
                         Object {

src/components/Analysis/monthlyanalysis.scss

@@ -21,6 +21,9 @@
     grid-gap: 0.5rem;
     justify-content: end;
     color: $grey-bright !important;
+    p {
+      color: $grey-bright;
+    }
     div {
       align-items: center;
       display: flex;

src/locales/fr.json

@@ -90,8 +90,7 @@
     "average_home": "Conso moyenne d'un profil similaire",
     "average_home_description": "Le comparatif ici présenté est calculé sur la base d'un profil similaire au vôtre. Il s'agit d'un calcul et non d'une comparaison avec les autres utilisateurs de l'application. Sont pris en compte l'ensemble des informations entrées dans votre profil\u00a0: mode de chauffage, âge du logement et éventuels travaux de rénovation, etc. Ce modèle a été créé avec l'Agence Locale de l'Energie sur la base de chiffres issues du Schéma Directeur des Energies de la Métropole de Lyon et de Chiffres-clé publiés par l'ADEME (l'Agence de l'Environnement et de la Maîtrise de l'Energie).",
     "approximative_description": "Pour comparer votre consommation avec un foyer similaire ou avec une conso idéale, veuillez détailler votre profil",
-    "not_connected": "Non connecté",
-    "no_data_2": "Données non disponibles",
+    "no_data": "Pas de données",
     "accessibility": {
       "button_go_to_profil": "Détailler mon profil"
     },
@@ -100,8 +99,7 @@
       "title": "Comparateur",
       "month_tab": "Comparer au mois dernier",
       "year_tab": "Comparer à l'année dernière"
-    },
-    "no_data": "Pas de données"
+    }
   },
   "analysis_pie": {
     "total": "Conso totale",