diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index d879d0d2d02784fd3e93715e16fb539091bd2c4c..8c9d8828a7205aeb799f5b7614cda6ce977cfef2 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -145,7 +145,6 @@ const MonthlyAnalysis = ({
aggregatedPerformanceIndicator={
aggregatedPerformanceIndicators
}
- fluidsWithData={fluidsWithData}
performanceIndicators={performanceIndicators}
/>
</div>
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 256de18110759729709a1c197c067f7e6cc90c19..dfde6b4abdf41cbe735f1009e79e3f46e7888741 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/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}
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
index 07a0f809639ae00099d8c76c664e39acbb1e7d4c..61f3aeac752225a1b5357bc9d055514c47873d33 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
+++ b/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'
)
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index b0ae0c5fcbc2afb62387b52870f598ef87229411..6091ef854acefb9e8008868a7291311123f915b5 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/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">
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 20ef9a412749d387400b9e04b5c42f1a8d59922e..65a183b8473c8bbe3e2f5f743bebdd8d8b813d9a 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/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;
- }
-}
diff --git a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
index cc9b0faa3b43a9414d4f9fa1716c300b36862012..898ca8eb40d1a8541e16051a0fa3d7e9f948ba02 100644
--- a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
@@ -1,15 +1,15 @@
@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;
}
diff --git a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
index 493709b991a1e906e9d6ef8ccfedc74d40e215d8..130afdd5cd7926a5ac27f414123662d4cebaee7c 100644
--- a/src/components/Analysis/__snapshots__/MonthlyAnalysis.spec.tsx.snap
+++ b/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 {
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 0ebbf57f0d969735a8bf699eecada672ae185dd1..ed8d965f6693c4e15ac724b74b685ac61a9897ec 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/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;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3e3eec59e96d629c5fd89cb5d8ba131f7454347c..5492929d27e320615ae17d5ab89134619970679e 100644
--- a/src/locales/fr.json
+++ b/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",