feat: conversion kwh to mwh and l to m3

src/components/Analysis/AnalysisConsumption.tsx

@@ -16,6 +16,7 @@ import WaterIcon from 'assets/icons/visu/water-small.svg'
 import GasIcon from 'assets/icons/visu/gas-small.svg'
 import ProfileTypeService from 'services/profileType.service'
 import ConverterService from 'services/converter.service'
+import { formatNumberValues } from 'utils/utils'
 
 interface AnalysisConsumptionProps {
   aggregatedPerformanceIndicator: PerformanceIndicator
@@ -53,7 +54,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
   const goToForm = useCallback(() => {
     history.push('/profileType')
   }, [history])
-
   useEffect(() => {
     let subscribed = true
     async function loadAverageComsumption() {
@@ -66,7 +66,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
       if (subscribed) {
         setForecast(MonthlyForecast)
         setHomePriceConsumption(MonthlyForecast.totalValue)
-        console.log(fluidTypes)
       }
     }
     loadAverageComsumption()
@@ -86,7 +85,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
         <div className="consumption-price">
           <div className="user-graph">
             <div className="price text-15-bold">
-              {userPriceConsumption.toFixed(2)} €
+              {formatNumberValues(userPriceConsumption).toString()} €
             </div>
             <div
               className="graph"
@@ -109,26 +108,29 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
                   100}%`,
               }}
             ></div>
-            <div className="price">{homePriceConsumption.toFixed(2)} €</div>
+            <div className="price">
+              {formatNumberValues(homePriceConsumption).toString()} €
+            </div>
           </div>
         </div>
       )}
       {forecast &&
         fluidTypes.map((fluid, index) => {
-          const performanceValue = peformanceIndicator[fluid].value
           const fluidForecast: FluidForecast = forecast.fluidForecast[fluid]
+          const performanceValue = peformanceIndicator[fluid].value
           let fluidIcon = GasIcon
           let fluidClass = 'gas'
-          let unitFluid = 'kWh'
+          let fluidName = 'GAS'
           let fluidLoad = fluidForecast.load
           let fluidValue = fluidForecast.value
           if (fluid === FluidType.ELECTRICITY) {
             fluidIcon = ElecIcon
             fluidClass = 'elec'
+            fluidName = 'ELECTRICITY'
           } else if (fluid === FluidType.WATER) {
             fluidIcon = WaterIcon
             fluidClass = 'water'
-            unitFluid = 'L'
+            fluidName = 'WATER'
           }
           if (toggleHome === 'ideal') {
             fluidLoad =
@@ -141,7 +143,20 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
               {performanceValue && userPriceConsumption && (
                 <div className="user-graph">
                   <div className="price text-15-bold">
-                    {Math.round(performanceValue) + ' ' + unitFluid}
+                    {Math.round(
+                      performanceValue >= 1000 || fluidLoad >= 1000
+                        ? performanceValue / 1000
+                        : performanceValue
+                    ) +
+                      ' ' +
+                      t(
+                        `FLUID.${fluidName}.${
+                          fluidLoad >= 1000 || performanceValue >= 1000
+                            ? 'MEGAUNIT'
+                            : 'UNIT'
+                        }`
+                      )}
+                    {}
                   </div>
                   <div
                     className="graph"
@@ -160,17 +175,29 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
                 <StyledIcon icon={fluidIcon} size={22} />
               </div>
               <div className={`${toggleHome}-graph`}>
+                <div
+                  className="graph"
+                  style={{
+                    width: `${(fluidValue / homePriceConsumption) * 100}%`,
+                  }}
+                ></div>
                 {performanceValue && (
-                  <div
-                    className="graph"
-                    style={{
-                      width: `${(fluidValue / homePriceConsumption) * 100}%`,
-                    }}
-                  ></div>
+                  <div className="price">
+                    {Math.round(
+                      fluidLoad >= 1000 || performanceValue >= 1000
+                        ? fluidLoad / 1000
+                        : fluidLoad
+                    ) +
+                      ' ' +
+                      t(
+                        `FLUID.${fluidName}.${
+                          fluidLoad >= 1000 || performanceValue >= 1000
+                            ? 'MEGAUNIT'
+                            : 'UNIT'
+                        }`
+                      )}
+                  </div>
                 )}
-                <div className="price">
-                  {Math.round(fluidLoad) + ' ' + unitFluid}
-                </div>
               </div>
             </div>
           )