diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index d2b298c9a1cb5dc267ee958c153802279420392a..2a589da8f8f2ba16c067c01a98b870934a6d1fba 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -12,11 +12,14 @@ import Button from '@material-ui/core/Button'
import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import ProfileTypeService from 'services/profileType.service'
import { Client, useClient } from 'cozy-client'
import { DateTime } from 'luxon'
import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
+import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
+import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator
@@ -120,84 +123,110 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
analysisDate,
])
+ const profileNotCompleted = () => (
+ <div className="no-profile">
+ <div className="text-16-normal">
+ {t('analysis.approximative_description')}
+ </div>
+ <Button
+ aria-label={t('analysis.accessibility.button_go_to_profil')}
+ onClick={goToForm}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-18-bold',
+ }}
+ >
+ {t('analysis.accessibility.button_go_to_profil')}
+ </Button>
+ <Icon
+ icon={PlaceHolderIcon}
+ width="100%"
+ height="60%"
+ alt="pas de profil remplis"
+ />
+ </div>
+ )
+
return (
- <div className="analysis-graph">
- {!profile.isProfileTypeCompleted ? (
- <div className="no-profile">
- <div className="text-16-normal">
- {t('analysis.approximative_description')}
- </div>
+ <>
+ <div className="status-header">
+ <div>
+ <StyledIcon icon={AnalysisIcon} size={44} />
+ <p className="text-16-normal">{t('analysis.compare.title')}</p>
+ </div>
+ {profile.isProfileTypeCompleted && (
<Button
aria-label={t('analysis.accessibility.button_go_to_profil')}
onClick={goToForm}
classes={{
- root: 'btn-highlight',
- label: 'text-18-bold',
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
}}
>
- {t('analysis.accessibility.button_go_to_profil')}
+ <StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
- <Icon
- icon={PlaceHolderIcon}
- width="100%"
- height="60%"
- alt="pas de profil remplis"
- />
- </div>
- ) : !isLoading ? (
- <>
- <div className="consumption-title text-20-bold">
- <div className="user-title">{t('analysis.user_consumption')}</div>
- <div className={`${toggleHome}-title`}>
- {t(`analysis.comparison`)}
- </div>
- </div>
- <div className="consumption-price">
- {fluidTypes.length > 0 ? (
- <AnalysisConsumptionRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={null}
- forecast={forecast}
- toggleHome={toggleHome}
- connected={true}
- noData={false}
- />
- ) : (
- <AnalysisConsumptionRow
- fluid={FluidType.MULTIFLUID}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={null}
- forecast={forecast}
- toggleHome={toggleHome}
- connected={false}
- noData={false}
- />
- )}
+ )}
+ </div>
+
+ <div className="analysis-graph">
+ {!profile.isProfileTypeCompleted ? (
+ profileNotCompleted()
+ ) : isLoading ? (
+ <div className="loader-container">
+ <StyledSpinner size="5em" fluidType={FluidType.ELECTRICITY} />
</div>
- {fluidTypes.map((fluid, index) => {
- return (
- performanceIndicators[fluid] &&
- performanceIndicators[fluid].value && (
+ ) : (
+ <>
+ <div className="consumption-title text-20-bold">
+ <div className="user-title">{t('analysis.user_consumption')}</div>
+ <div className={`${toggleHome}-title`}>
+ {t(`analysis.comparison`)}
+ </div>
+ </div>
+ <div className="consumption-price">
+ {fluidTypes.length > 0 ? (
<AnalysisConsumptionRow
- key={index}
- fluid={fluid}
+ fluid={FluidType.MULTIFLUID}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
- performanceValue={performanceIndicators[fluid].value}
+ performanceValue={null}
forecast={forecast}
toggleHome={toggleHome}
connected={true}
noData={false}
/>
- )
- )
- })}
- {fluidTypes.length < 3 && <hr className="consumption-sep" />}
- {disconnectedFluidTypes.map((fluid, index) => {
- return (
+ ) : (
+ <AnalysisConsumptionRow
+ fluid={FluidType.MULTIFLUID}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={null}
+ forecast={forecast}
+ toggleHome={toggleHome}
+ connected={false}
+ noData={false}
+ />
+ )}
+ </div>
+ {fluidTypes.map(
+ (fluid, index) =>
+ performanceIndicators[fluid] &&
+ performanceIndicators[fluid].value && (
+ <AnalysisConsumptionRow
+ key={index}
+ fluid={fluid}
+ userPriceConsumption={userPriceConsumption}
+ homePriceConsumption={homePriceConsumption}
+ performanceValue={performanceIndicators[fluid].value}
+ forecast={forecast}
+ toggleHome={toggleHome}
+ connected={true}
+ noData={false}
+ />
+ )
+ )}
+ {fluidTypes.length < 3 && <hr className="consumption-sep" />}
+ {disconnectedFluidTypes.map((fluid, index) => (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
@@ -209,10 +238,8 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
connected={false}
noData={false}
/>
- )
- })}
- {emptyFluidTypes.map((fluid, index) => {
- return (
+ ))}
+ {emptyFluidTypes.map((fluid, index) => (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
@@ -224,36 +251,32 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
connected={false}
noData={true}
/>
- )
- })}
+ ))}
- <StyledCard
- onClick={toggleAverage}
- className={`link-average ${toggleHome === 'average' &&
- 'active'} grid-align`}
- >
- <span className="check-icon"></span>
- <span className="link-label text-16-normal">
- {t('analysis.average_home')}
- </span>
- </StyledCard>
- <StyledCard
- onClick={toggleIdeal}
- className={`link-ideal ${toggleHome === 'ideal' &&
- 'active'} grid-align`}
- >
- <span className="check-icon"></span>
- <span className="link-label text-16-normal">
- {t('analysis.ideal_home')}
- </span>
- </StyledCard>
- </>
- ) : (
- <div className="loader-container">
- <StyledSpinner size="5em" fluidType={FluidType.ELECTRICITY} />
- </div>
- )}
- </div>
+ <StyledCard
+ onClick={toggleAverage}
+ className={`link-average ${toggleHome === 'average' &&
+ 'active'} grid-align`}
+ >
+ <span className="check-icon"></span>
+ <span className="link-label text-16-normal">
+ {t('analysis.average_home')}
+ </span>
+ </StyledCard>
+ <StyledCard
+ onClick={toggleIdeal}
+ className={`link-ideal ${toggleHome === 'ideal' &&
+ 'active'} grid-align`}
+ >
+ <span className="check-icon"></span>
+ <span className="link-label text-16-normal">
+ {t('analysis.ideal_home')}
+ </span>
+ </StyledCard>
+ </>
+ )}
+ </div>
+ </>
)
}
diff --git a/src/components/Analysis/AnalysisConsumptionRow.spec.tsx b/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
index 1c78d3b58a8057f2ea1aa3f87de9f04ea6cddcd0..6bc0b0db5935c6e8819af0705eef162c299a126a 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
@@ -106,13 +106,13 @@ describe('AnalysisConsumptionRow component', () => {
.find('.price')
.first()
.text()
- ).toBe('0,03 FLUID.ELECTRICITY.MEGAUNIT')
+ ).toBe('25 FLUID.ELECTRICITY.UNIT')
expect(
wrapper
.find('.price')
.last()
.text()
- ).toBe('4,34 FLUID.ELECTRICITY.MEGAUNIT')
+ ).toBe('4340 FLUID.ELECTRICITY.UNIT')
expect(wrapper.find('.graph').exists()).toBeTruthy()
expect(wrapper.find('.not-connected').exists()).toBeFalsy()
})
@@ -137,13 +137,13 @@ describe('AnalysisConsumptionRow component', () => {
.find('.price')
.first()
.text()
- ).toBe('0,03 FLUID.ELECTRICITY.MEGAUNIT')
+ ).toBe('25 FLUID.ELECTRICITY.UNIT')
expect(
wrapper
.find('.price')
.last()
.text()
- ).toBe('3,91 FLUID.ELECTRICITY.MEGAUNIT')
+ ).toBe('3906 FLUID.ELECTRICITY.UNIT')
expect(wrapper.find('.graph').exists()).toBeTruthy()
expect(wrapper.find('.not-connected').exists()).toBeFalsy()
})
@@ -174,7 +174,7 @@ describe('AnalysisConsumptionRow component', () => {
.find('.price')
.last()
.text()
- ).toBe('4,34 FLUID.ELECTRICITY.MEGAUNIT')
+ ).toBe('4340 FLUID.ELECTRICITY.UNIT')
expect(wrapper.find('.graph').exists()).toBeFalsy()
expect(wrapper.find('.not-connected').exists()).toBeTruthy()
})
@@ -205,7 +205,7 @@ describe('AnalysisConsumptionRow component', () => {
.find('.price')
.last()
.text()
- ).toBe('4,34 FLUID.ELECTRICITY.MEGAUNIT')
+ ).toBe('4340 FLUID.ELECTRICITY.UNIT')
expect(wrapper.find('.graph').exists()).toBeTruthy()
expect(wrapper.find('.not-connected').exists()).toBeFalsy()
})
diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx
index ed40c2fc916908f08729e0bbb4e69f665ee8a411..405dd753585707d8d499dfbe006da307c0bbe4df 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.tsx
@@ -52,6 +52,12 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
return `${formatNumberValues(userPriceConsumption).toString()} €`
} else {
if (performanceValue) {
+ // keeps unit in kWh for electricity and gas
+ if (_fluid === FluidType.ELECTRICITY || _fluid === FluidType.GAS) {
+ return `${Math.round(performanceValue)} ${t(
+ `FLUID.${FluidType[_fluid]}.UNIT`
+ )}`
+ }
return performanceValue >= 1000 || fluidLoad >= 1000
? formatNumberValues(performanceValue / 1000).toString() +
' ' +
@@ -73,6 +79,12 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
if (toggleHome === 'ideal') {
_fluidLoad = fluidLoad - fluidLoad * idealCoefficient
}
+ // keeps unit in kWh for electricity and gas
+ if (_fluid === FluidType.ELECTRICITY || _fluid === FluidType.GAS) {
+ return `${Math.round(_fluidLoad)} ${t(
+ `FLUID.${FluidType[_fluid]}.UNIT`
+ )}`
+ }
return (performanceValue && performanceValue >= 1000) ||
_fluidLoad >= 1000
? formatNumberValues(_fluidLoad / 1000).toString() +
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 3f27d49a2df76b35bfc7b54d416273e691c39e37..9349cf5284c3193003ea010af02042a8d2ecb846 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
@@ -12,16 +11,11 @@ import ConsumptionService from 'services/consumption.service'
import PerformanceIndicatorService from 'services/performanceIndicator.service'
import ConfigService from 'services/fluidConfig.service'
import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator'
-import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import Button from '@material-ui/core/Button'
import AnalysisConsumption from './AnalysisConsumption'
-import { useHistory } from 'react-router-dom'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import AnalysisErrorModal from './AnalysisErrorModal'
import { DateTime } from 'luxon'
import MaxConsumptionCard from './MaxConsumptionCard'
-import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
import TotalAnalysisChart from './TotalAnalysisChart'
import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis'
@@ -36,13 +30,8 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
saveLastScrollPosition,
scrollPosition,
}: MonthlyAnalysisProps) => {
- const { t } = useI18n()
const client = useClient()
- const history = useHistory()
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
- const { isProfileTypeCompleted } = useSelector(
- (state: AppStore) => state.ecolyo.profile
- )
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
@@ -59,13 +48,9 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
const configService = new ConfigService()
const fluidConfig = configService.getFluidConfig()
const timeStep = TimeStep.MONTH
- const goToForm = () => {
- history.push('/profileType')
- }
useEffect(() => {
let subscribed = true
-
async function populateData() {
if (subscribed) {
setIsLoaded(false)
@@ -166,28 +151,6 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
</div>
<div className="analysis-content">
<div className="card rich-card">
- <div className="status-header">
- <div>
- <StyledIcon icon={AnalysisIcon} size={44} />
- <p className="text-16-normal">
- {t('analysis.compare.title')}
- </p>
- </div>
- {isProfileTypeCompleted && (
- <Button
- aria-label={t(
- 'analysis.accessibility.button_go_to_profil'
- )}
- onClick={goToForm}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- <StyledIcon icon={ProfileEditIcon} size={40} />
- </Button>
- )}
- </div>
<AnalysisConsumption
aggregatedPerformanceIndicator={
aggregatedPerformanceIndicators