From 262d5c0a72a3c17713b8fd618f4dfae4d2053d34 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Fri, 28 Jul 2023 13:02:05 +0000
Subject: [PATCH] chore(analysis): adjust text in profile comparator
---
src/components/Analysis/MonthlyAnalysis.tsx | 1 -
.../ProfileComparator/ProfileComparator.tsx | 80 +++++++------------
.../ProfileComparatorRow.spec.tsx | 4 +-
.../ProfileComparatorRow.tsx | 22 +++--
.../ProfileComparator/profileComparator.scss | 33 +++-----
.../profileComparatorRow.scss | 45 +++++------
.../MonthlyAnalysis.spec.tsx.snap | 7 --
src/components/Analysis/monthlyanalysis.scss | 3 +
src/locales/fr.json | 6 +-
9 files changed, 76 insertions(+), 125 deletions(-)
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index d879d0d2d..8c9d8828a 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 256de1811..dfde6b4ab 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 07a0f8096..61f3aeac7 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 b0ae0c5fc..6091ef854 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 20ef9a412..65a183b84 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 cc9b0faa3..898ca8eb4 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 493709b99..130afdd5c 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 0ebbf57f0..ed8d965f6 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 3e3eec59e..5492929d2 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",
--
GitLab