diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx index daa4d07f30ddcd7095d21789e725a20da1f13fa6..cbe682b86cc7423d84c97d10249250e99cb489c8 100644 --- a/src/components/Analysis/AnalysisConsumption.tsx +++ b/src/components/Analysis/AnalysisConsumption.tsx @@ -47,7 +47,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global) const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0) const [forecast, setForecast] = useState<MonthlyForecast | null>(null) - const [isLoading, setisLoading] = useState<boolean>(true) + const [isLoading, setIsLoading] = useState<boolean>(true) const [activeAverageHome, setActiveAverageHome] = useState<boolean>(false) const toggleAccordion = () => { @@ -75,7 +75,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ const emptyFluidTypes: FluidType[] = [] for (let i = 0; i < performanceIndicators.length; i++) { - if (!performanceIndicators[i]?.value) { + if (!performanceIndicators[i]?.value && fluidTypes[i]) { emptyFluidTypes.push(fluidTypes[i]) } } @@ -102,7 +102,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ useEffect(() => { let subscribed = true - async function loadAverageComsumption() { + async function loadAverageConsumption() { const profileTypeEntityService = new ProfileTypeEntityService(client) const profileType: ProfileType | null = await profileTypeEntityService.getProfileType( @@ -123,11 +123,11 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ if (monthlyForecast) { getTotalValueWithConnectedFluids(monthlyForecast) } - setisLoading(false) + setIsLoading(false) } } } - loadAverageComsumption() + loadAverageConsumption() return () => { subscribed = false } @@ -163,6 +163,100 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ </div> ) + const Consumption = ( + <> + <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, index) => + performanceIndicators[fluid]?.value && ( + <AnalysisConsumptionRow + key={index} + 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, index) => ( + <AnalysisConsumptionRow + key={index} + fluid={fluid} + userPriceConsumption={userPriceConsumption} + homePriceConsumption={homePriceConsumption} + performanceValue={null} + forecast={forecast} + connected={false} + noData={false} + /> + ))} + {emptyFluidTypes.map((fluid, index) => ( + <AnalysisConsumptionRow + key={index} + fluid={fluid} + userPriceConsumption={userPriceConsumption} + homePriceConsumption={homePriceConsumption} + performanceValue={null} + forecast={forecast} + connected={false} + noData={true} + /> + ))} + + <Accordion + expanded={activeAverageHome} + onChange={toggleAccordion} + classes={{ + root: 'expansion-panel-root', + }} + > + <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> + </> + ) + return ( <> <div className="status-header"> @@ -185,108 +279,13 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({ </div> <div className="analysis-graph"> - {!profile.isProfileTypeCompleted ? ( - profileNotCompleted() - ) : isLoading ? ( + {!profile.isProfileTypeCompleted && profileNotCompleted()} + {profile.isProfileTypeCompleted && 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, index) => - performanceIndicators[fluid]?.value && ( - <AnalysisConsumptionRow - key={index} - 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, index) => ( - <AnalysisConsumptionRow - key={index} - fluid={fluid} - userPriceConsumption={userPriceConsumption} - homePriceConsumption={homePriceConsumption} - performanceValue={null} - forecast={forecast} - connected={false} - noData={false} - /> - ))} - {emptyFluidTypes.map((fluid, index) => ( - <AnalysisConsumptionRow - key={index} - fluid={fluid} - userPriceConsumption={userPriceConsumption} - homePriceConsumption={homePriceConsumption} - performanceValue={null} - forecast={forecast} - connected={false} - noData={true} - /> - ))} - - <Accordion - expanded={activeAverageHome} - onChange={toggleAccordion} - classes={{ - root: 'expansion-panel-root', - }} - > - <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> - </> + Consumption )} </div> </>