Skip to content
Snippets Groups Projects
Commit 2483289b authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

Merge branch '463-analyse-image-en-double-module-en-double-sur-la-partie-comparatif' into 'dev' 

fix(analysis): duplicate section

See merge request !868
parents 87abe715 a4ae740a
Branches
Tags
2 merge requests!868fix(analysis): duplicate section,!8382.3.0 Release
Hide whitespace changes
Inline Side-by-side
src/components/Analysis/AnalysisConsumption.tsx
+ 96
− 129
View file @ 2483289b
...@@ -23,8 +23,8 @@ import { useNavigate } from 'react-router-dom' ...@@ -23,8 +23,8 @@ import { useNavigate } from 'react-router-dom'
import ProfileTypeService from 'services/profileType.service' import ProfileTypeService from 'services/profileType.service'
import ProfileTypeEntityService from 'services/profileTypeEntity.service' import ProfileTypeEntityService from 'services/profileTypeEntity.service'
import { AppStore } from 'store' import { AppStore } from 'store'
import './analysisConsumption.scss'
import AnalysisConsumptionRow from './AnalysisConsumptionRow' import AnalysisConsumptionRow from './AnalysisConsumptionRow'
import './analysisConsumption.scss'
interface AnalysisConsumptionProps { interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator aggregatedPerformanceIndicator: PerformanceIndicator
...@@ -139,7 +139,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ ...@@ -139,7 +139,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
analysisDate, analysisDate,
]) ])
const profileNotCompleted = () => ( const profileNotCompleted = (
<div className="no-profile"> <div className="no-profile">
<div className="text-16-normal"> <div className="text-16-normal">
{t('analysis.approximative_description')} {t('analysis.approximative_description')}
...@@ -164,132 +164,105 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ ...@@ -164,132 +164,105 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
) )
const Consumption = ( const Consumption = (
<> <div className="analysis-graph">
<div className="status-header"> {isLoading ? (
<div> <div className="loader-container">
<StyledIcon icon={AnalysisIcon} size={44} /> <Loader color="elec" />
<p className="text-16-normal">{t('analysis.compare.title')}</p>
</div> </div>
{profile.isProfileTypeCompleted && ( ) : (
<Button <>
aria-label={t('analysis.accessibility.button_go_to_profil')} <div className="consumption-title text-20-bold">
onClick={goToForm} <div className="user-title">{t('analysis.user_consumption')}</div>
<div className={`average-title`}>{t(`analysis.comparison`)}</div>
</div>
<div className="consumption-price">
<AnalysisConsumptionRow
fluid={FluidType.MULTIFLUID}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={fluidTypes.length > 0}
noData={false}
/>
</div>
{fluidTypes.map(
fluid =>
Boolean(performanceIndicators[fluid]?.value) && (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
connected={true}
noData={false}
/>
)
)}
{fluidTypes.length < 3 && <hr className="consumption-sep" />}
{disconnectedFluidTypes.map(fluid => (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={false}
/>
))}
{emptyFluidTypes.map(fluid => (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={true}
/>
))}
<Accordion
expanded={activeAverageHome}
onChange={toggleAccordion}
classes={{ classes={{
root: 'btn-secondary-negative', root: 'expansion-panel-root',
label: 'text-16-normal',
}} }}
> >
<StyledIcon icon={ProfileEditIcon} size={40} /> <AccordionSummary
</Button> aria-label={t(
)} 'profile_type.accessibility.button_toggle_average_home'
</div> )}
expandIcon={
<div className="analysis-graph"> <Icon icon={chevronDown} size={16} className="accordion-icon" />
{!profile.isProfileTypeCompleted ? ( }
profileNotCompleted()
) : isLoading ? (
<div className="loader-container">
<Loader color="elec" />
</div>
) : (
<>
<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">
<AnalysisConsumptionRow
fluid={FluidType.MULTIFLUID}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={fluidTypes.length > 0}
noData={false}
/>
</div>
{fluidTypes.map(
fluid =>
performanceIndicators[fluid]?.value && (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
connected={true}
noData={false}
/>
)
)}
{fluidTypes.length < 3 && <hr className="consumption-sep" />}
{disconnectedFluidTypes.map(fluid => (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={false}
/>
))}
{emptyFluidTypes.map(fluid => (
<AnalysisConsumptionRow
key={fluid}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
connected={false}
noData={true}
/>
))}
<Accordion
expanded={activeAverageHome}
onChange={toggleAccordion}
classes={{ classes={{
root: 'expansion-panel-root', root: 'expansion-panel-summary',
content: 'expansion-panel-content',
}} }}
> >
<AccordionSummary <div className="accordion-title accordion-title">
aria-label={t( {t('analysis.average_home')}
'profile_type.accessibility.button_toggle_average_home' </div>
)} </AccordionSummary>
expandIcon={ <AccordionDetails
<Icon classes={{
icon={chevronDown} root: 'expansion-panel-details',
size={16} }}
className="accordion-icon" >
/> <span className="accordion-desc text-16-normal">
} {t('analysis.average_home_description')}
classes={{ </span>
root: 'expansion-panel-summary', </AccordionDetails>
content: 'expansion-panel-content', </Accordion>
}} </>
> )}
<div className="accordion-title accordion-title"> </div>
{t('analysis.average_home')}
</div>
</AccordionSummary>
<AccordionDetails
classes={{
root: 'expansion-panel-details',
}}
>
<span className="accordion-desc text-16-normal">
{t('analysis.average_home_description')}
</span>
</AccordionDetails>
</Accordion>
</>
)}
</div>
</>
) )
return ( return (
...@@ -314,14 +287,8 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ ...@@ -314,14 +287,8 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
</div> </div>
<div className="analysis-graph"> <div className="analysis-graph">
{!profile.isProfileTypeCompleted && profileNotCompleted()} {!profile.isProfileTypeCompleted && profileNotCompleted}
{profile.isProfileTypeCompleted && isLoading ? ( {profile.isProfileTypeCompleted && Consumption}
<div className="loader-container">
<Loader color="elec" />
</div>
) : (
Consumption
)}
</div> </div>
</> </>
) )
......
src/components/Analysis/AnalysisConsumptionRow.tsx
+ 11
− 5
View file @ 2483289b
...@@ -104,6 +104,16 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({ ...@@ -104,6 +104,16 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
return `${(fluidValue / maxPriceConsumption) * 100}%` return `${(fluidValue / maxPriceConsumption) * 100}%`
} }
} }
let comparaisonText: string
if (connected) {
comparaisonText = formatFluidConsumptionForConso(fluid)
} else if (noData) {
comparaisonText = t(`analysis.no_data_2`)
} else {
comparaisonText = t(`analysis.not_connected`)
}
return ( return (
<div <div
className={`consumption-${FluidType[fluid].toLowerCase()} analysisRow`} className={`consumption-${FluidType[fluid].toLowerCase()} analysisRow`}
...@@ -114,11 +124,7 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({ ...@@ -114,11 +124,7 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
['not-connected']: !connected || noData, ['not-connected']: !connected || noData,
})} })}
> >
{connected {comparaisonText}
? formatFluidConsumptionForConso(fluid)
: noData
? t(`analysis.no_data_2`)
: t(`analysis.not_connected`)}
</div> </div>
<div className="container-graph"> <div className="container-graph">
{connected && ( {connected && (
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment