diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index 2c3255e1c9b4136ca77fbb16ccd1e3404efca181..1f2c69c083e6a67891704a67fd19c17a50a1a2e5 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -5,7 +5,7 @@ import { AppStore } from 'store'
import { useHistory } from 'react-router-dom'
import { FluidType } from 'enum/fluid.enum'
import { PerformanceIndicator, Profile } from 'models'
-import { FluidForecast, MonthlyForecast } from 'models/profileType.model'
+import { MonthlyForecast } from 'models/profileType.model'
import './analysisConsumption.scss'
import MuiButton from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -28,8 +28,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const { t } = useI18n()
const history = useHistory()
const converterService: ConverterService = new ConverterService()
- const userPriceConsumption: number | null =
- aggregatedPerformanceIndicator.value
+ const userPriceConsumption: number = aggregatedPerformanceIndicator.value || 0
const profile: Profile = useSelector(
(state: AppStore) => state.ecolyo.profile
)
@@ -42,6 +41,11 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
userPriceConsumption ? userPriceConsumption : 0,
homePriceConsumption
)
+ const disconnectedFluidTypes: FluidType[] = [
+ FluidType.ELECTRICITY,
+ FluidType.WATER,
+ FluidType.GAS,
+ ].filter(fluidType => !fluidTypes.includes(fluidType))
const getTotalValueWithConnectedFluids = useCallback(
(monthlyForecast: MonthlyForecast) => {
if (fluidTypes.length === 3) {
@@ -79,6 +83,49 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const goToForm = () => {
history.push('/profileType')
}
+
+ const formatFluidConsumptionForConso = (fluid: FluidType) => {
+ const performanceValue: number = peformanceIndicator[fluid].value || 0
+ let fluidLoad: number = forecast ? forecast.fluidForecast[fluid].load : 0
+ if (toggleHome === 'ideal') {
+ fluidLoad = fluidLoad - fluidLoad * idealCoefficient
+ }
+ return performanceValue >= 1000 || fluidLoad >= 1000
+ ? formatNumberValues(performanceValue / 1000).toString() +
+ ' ' +
+ t(`FLUID.${FluidType[fluid]}.MEGAUNIT`)
+ : Math.round(performanceValue) + ' ' + t(`FLUID.${FluidType[fluid]}.UNIT`)
+ }
+
+ const formatFluidConsumptionForForecast = (fluid: FluidType) => {
+ const performanceValue: number =
+ (peformanceIndicator[fluid] && peformanceIndicator[fluid].value) || 0
+ let fluidLoad: number = forecast ? forecast.fluidForecast[fluid].load : 0
+ if (toggleHome === 'ideal') {
+ fluidLoad = fluidLoad - fluidLoad * idealCoefficient
+ }
+ return performanceValue >= 1000 || fluidLoad >= 1000
+ ? formatNumberValues(fluidLoad / 1000).toString() +
+ ' ' +
+ t(`FLUID.${FluidType[fluid]}.MEGAUNIT`)
+ : Math.round(fluidLoad) + ' ' + t(`FLUID.${FluidType[fluid]}.UNIT`)
+ }
+
+ const getWidthForConso = (fluid: FluidType) => {
+ const performanceValue: number = peformanceIndicator[fluid].value || 0
+ return `${(converterService.LoadToEuro(performanceValue, fluid) /
+ maxPriceConsumption) *
+ 100}%`
+ }
+
+ const getWidthForForecast = (fluid: FluidType) => {
+ let fluidValue: number = forecast ? forecast.fluidForecast[fluid].value : 0
+ if (toggleHome === 'ideal') {
+ fluidValue = fluidValue - fluidValue * idealCoefficient
+ }
+ return `${(fluidValue / maxPriceConsumption) * 100}%`
+ }
+
useEffect(() => {
let subscribed = true
function loadAverageComsumption() {
@@ -110,112 +157,100 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
<div className="user-title">{t('analysis.user_consumption')}</div>
<div className={`${toggleHome}-title`}>{t(`analysis.comparison`)}</div>
</div>
- {userPriceConsumption && (
- <div className="consumption-price">
- <div className="user-graph">
- <div className="price text-15-bold">
- {formatNumberValues(userPriceConsumption).toString()} €
- </div>
- <div className="container-graph">
- <div
- className="graph"
- style={{
- width: `${(userPriceConsumption / maxPriceConsumption) *
- 100}%`,
- }}
- ></div>
- </div>
+ <div className="consumption-price">
+ <div className="user-graph">
+ <div className="price text-15-bold">
+ {formatNumberValues(userPriceConsumption).toString()} €
</div>
- <div className="icon-container">
- <StyledIcon icon={EuroIcon} size={22} />
+ <div className="container-graph">
+ <div
+ className="graph"
+ style={{
+ width: `${(userPriceConsumption / maxPriceConsumption) * 100}%`,
+ }}
+ ></div>
</div>
- <div className={`${toggleHome}-graph`}>
- <div className="container-graph">
- <div
- className="graph"
- style={{
- width: `${(homePriceConsumption / maxPriceConsumption) *
- 100}%`,
- }}
- ></div>
+ </div>
+ <div className="icon-container">
+ <StyledIcon icon={EuroIcon} size={22} />
+ </div>
+ <div className={`${toggleHome}-graph`}>
+ <div className="container-graph">
+ <div
+ className="graph"
+ style={{
+ width: `${(homePriceConsumption / maxPriceConsumption) * 100}%`,
+ }}
+ ></div>
+ </div>
+ <div className="price">
+ {formatNumberValues(homePriceConsumption).toString()} €
+ </div>
+ </div>
+ </div>
+ {fluidTypes.map((fluid, index) => {
+ return (
+ <div
+ className={`consumption-${FluidType[fluid].toLowerCase()}`}
+ key={index}
+ >
+ <div className="user-graph">
+ <div className="price text-15-bold">
+ {formatFluidConsumptionForConso(fluid)}
+ </div>
+ <div className="container-graph">
+ <div
+ className="graph"
+ style={{
+ width: getWidthForConso(fluid),
+ }}
+ />
+ </div>
</div>
- <div className="price">
- {formatNumberValues(homePriceConsumption).toString()} €
+ <div className="icon-container">
+ <StyledIcon icon={getPicto(fluid, true)} size={22} />
+ </div>
+ <div className={`${toggleHome}-graph`}>
+ <div className="container-graph">
+ <div
+ className="graph"
+ style={{
+ width: getWidthForForecast(fluid),
+ }}
+ />
+ </div>
+ <div className="price">
+ {formatFluidConsumptionForForecast(fluid)}
+ </div>
</div>
</div>
- </div>
- )}
- {forecast &&
- fluidTypes.map((fluid, index) => {
- const fluidForecast: FluidForecast = forecast.fluidForecast[fluid]
- const performanceValue: number | null =
- peformanceIndicator[fluid].value
- let fluidLoad: number = fluidForecast.load
- let fluidValue: number = fluidForecast.value
- if (toggleHome === 'ideal') {
- fluidLoad =
- fluidForecast.load - fluidForecast.load * idealCoefficient
- fluidValue =
- fluidForecast.value - fluidForecast.value * idealCoefficient
- }
- return (
- <div
- className={`consumption-${FluidType[fluid].toLowerCase()}`}
- key={index}
- >
- {performanceValue && userPriceConsumption && (
- <div className="user-graph">
- <div className="price text-15-bold">
- {performanceValue >= 1000 || fluidLoad >= 1000
- ? formatNumberValues(performanceValue / 1000).toString() +
- ' ' +
- t(`FLUID.${FluidType[fluid]}.MEGAUNIT`)
- : Math.round(performanceValue) +
- ' ' +
- t(`FLUID.${FluidType[fluid]}.UNIT`)}
- </div>
- <div className="container-graph">
- <div
- className="graph"
- style={{
- width: `${(converterService.LoadToEuro(
- performanceValue,
- fluid
- ) /
- maxPriceConsumption) *
- 100}%`,
- }}
- ></div>
- </div>
- </div>
- )}
- <div className="icon-container">
- <StyledIcon icon={getPicto(fluid, true)} size={22} />
+ )
+ })}
+ {fluidTypes.length < 3 && <hr className="consumption-sep" />}
+ {disconnectedFluidTypes.map((fluid, index) => {
+ return (
+ <div
+ className={`consumption-${FluidType[fluid].toLowerCase()}`}
+ key={index}
+ >
+ <div className="user-graph">
+ <div className="price not-connected text-15-bold">
+ {t(`analysis.not_connected`)}
</div>
- <div className={`${toggleHome}-graph`}>
- <div className="container-graph">
- <div
- className="graph"
- style={{
- width: `${(fluidValue / maxPriceConsumption) * 100}%`,
- }}
- ></div>
- </div>
- {performanceValue && (
- <div className="price">
- {performanceValue >= 1000 || fluidLoad >= 1000
- ? formatNumberValues(fluidLoad / 1000).toString() +
- ' ' +
- t(`FLUID.${FluidType[fluid]}.MEGAUNIT`)
- : Math.round(fluidLoad) +
- ' ' +
- t(`FLUID.${FluidType[fluid]}.UNIT`)}
- </div>
- )}
+ <div className="container-graph" />
+ </div>
+ <div className="icon-container">
+ <StyledIcon icon={getPicto(fluid, true)} size={22} />
+ </div>
+ <div className={`${toggleHome}-graph`}>
+ <div className="container-graph" />
+ <div className="price not-connected">
+ {formatFluidConsumptionForForecast(fluid)}
</div>
</div>
- )
- })}
+ </div>
+ )
+ })}
<StyledCard
onClick={toggleAverage}
className={`link-average ${toggleHome === 'average' && 'active'}`}
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index 56787842bdbc331626c38ac14ff81ec9da1b9c5b..2a9ef1a4558a644a0e359a7a7e62a983555e0146 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -58,6 +58,10 @@
}
}
}
+ .consumption-sep{
+ border-top: 1px solid $grey-dark;
+ margin: 1rem 0;
+ }
.user-graph,
.average-graph,
.ideal-graph {
@@ -117,6 +121,10 @@
}
.price {
min-width: 5.25rem;
+ &.not-connected {
+ color: $soft-grey;
+ height: 2rem;
+ }
}
.graph {
border-radius: 0 0.35rem 0.35rem 0;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 5f513236671c32d67d2e0b1e058c0a1d752993c4..9286dba5dbc06966f37258eeec75e9e2126905ec 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -334,7 +334,8 @@
"error_title": "Aucune analyse",
"error_message": "Pour profiter d’une analyse de vos consommations, connectez au moins un de vos compteurs.",
"go_to_options": "Je connecte mes connecteurs",
- "go_back": "Retour"
+ "go_back": "Retour",
+ "not_connected": "Non connecté"
},
"challenge": {
"noFluidModal": {