diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx index 8cee0f4f4d930260f160dd845c156ae8b6591b0c..bdf63113e9116a0ffbf8ccbc8c243e107995b8ee 100644 --- a/src/components/Analysis/AnalysisConsumption.tsx +++ b/src/components/Analysis/AnalysisConsumption.tsx @@ -23,8 +23,8 @@ import { useNavigate } from 'react-router-dom' import ProfileTypeService from 'services/profileType.service' import ProfileTypeEntityService from 'services/profileTypeEntity.service' import { AppStore } from 'store' -import './analysisConsumption.scss' import AnalysisConsumptionRow from './AnalysisConsumptionRow' +import './analysisConsumption.scss' interface AnalysisConsumptionProps { aggregatedPerformanceIndicator: PerformanceIndicator @@ -139,7 +139,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ analysisDate, ]) - const profileNotCompleted = () => ( + const profileNotCompleted = ( <div className="no-profile"> <div className="text-16-normal"> {t('analysis.approximative_description')} @@ -164,132 +164,105 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ ) const Consumption = ( - <> - <div className="status-header"> - <div> - <StyledIcon icon={AnalysisIcon} size={44} /> - <p className="text-16-normal">{t('analysis.compare.title')}</p> + <div className="analysis-graph"> + {isLoading ? ( + <div className="loader-container"> + <Loader color="elec" /> </div> - {profile.isProfileTypeCompleted && ( - <Button - aria-label={t('analysis.accessibility.button_go_to_profil')} - onClick={goToForm} + ) : ( + <> + <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 => + 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={{ - root: 'btn-secondary-negative', - label: 'text-16-normal', + root: 'expansion-panel-root', }} > - <StyledIcon icon={ProfileEditIcon} size={40} /> - </Button> - )} - </div> - - <div className="analysis-graph"> - {!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} + <AccordionSummary + aria-label={t( + 'profile_type.accessibility.button_toggle_average_home' + )} + expandIcon={ + <Icon icon={chevronDown} size={16} className="accordion-icon" /> + } classes={{ - root: 'expansion-panel-root', + root: 'expansion-panel-summary', + content: 'expansion-panel-content', }} > - <AccordionSummary - aria-label={t( - 'profile_type.accessibility.button_toggle_average_home' - )} - expandIcon={ - <Icon - icon={chevronDown} - size={16} - className="accordion-icon" - /> - } - classes={{ - root: 'expansion-panel-summary', - content: 'expansion-panel-content', - }} - > - <div className="accordion-title accordion-title"> - {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> - </> + <div className="accordion-title accordion-title"> + {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 ( @@ -314,14 +287,8 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ </div> <div className="analysis-graph"> - {!profile.isProfileTypeCompleted && profileNotCompleted()} - {profile.isProfileTypeCompleted && isLoading ? ( - <div className="loader-container"> - <Loader color="elec" /> - </div> - ) : ( - Consumption - )} + {!profile.isProfileTypeCompleted && profileNotCompleted} + {profile.isProfileTypeCompleted && Consumption} </div> </> ) diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx index ba17cd10a43b3aa68cc79e439dc1bf1d9c69948f..b92298babf4a7283514acf661d82cd55f886e46a 100644 --- a/src/components/Analysis/AnalysisConsumptionRow.tsx +++ b/src/components/Analysis/AnalysisConsumptionRow.tsx @@ -104,6 +104,16 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({ 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 ( <div className={`consumption-${FluidType[fluid].toLowerCase()} analysisRow`} @@ -114,11 +124,7 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({ ['not-connected']: !connected || noData, })} > - {connected - ? formatFluidConsumptionForConso(fluid) - : noData - ? t(`analysis.no_data_2`) - : t(`analysis.not_connected`)} + {comparaisonText} </div> <div className="container-graph"> {connected && (