feat: add multifluid compare

src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx

@@ -103,6 +103,10 @@ const DataloadConsumptionVisualizer = ({
                       'FLUID.' + FluidType[fluidType] + '.UNIT'
                     )}`}</span>
                   </div>
+                  <>
+                    {fluidType === FluidType.MULTIFLUID ? (
+                      <></>
+                    ) : (
                       <div
                         className={`dataloadvisualizer-euro ${FluidType[
                           fluidType
@@ -115,6 +119,8 @@ const DataloadConsumptionVisualizer = ({
                           )
                         )} €`}
                       </div>
+                    )}
+                  </>
                 </div>
               )}
             </>
@@ -142,16 +148,22 @@ const DataloadConsumptionVisualizer = ({
               ) : (
                 <>
                   {formatNumberValues(dataload.value)}
-                  <sup className="text-18-normal euroUnit">
+                  <span
+                    className={`text-18-normal ${
+                      fluidType === FluidType.MULTIFLUID && !showCompare
+                        ? 'euroUnit'
+                        : ''
+                    }`}
+                  >
                     {`${t('FLUID.' + FluidType[fluidType] + '.UNIT')}`}
-                  </sup>
-                  {fluidType === FluidType.MULTIFLUID && (
-                    <sup
+                  </span>
+                  {fluidType === FluidType.MULTIFLUID && !showCompare && (
+                    <span
                       className="text-14-normal estimated"
                       onClick={toggleEstimationModal}
                     >
                       {t('consumption_visualizer.estimated')}
-                    </sup>
+                    </span>
                   )}
                 </>
               )}
@@ -166,6 +178,10 @@ const DataloadConsumptionVisualizer = ({
                   converterService.LoadToEuro(dataload.value, fluidType)
                 )} €`}
               </div>
+            ) : (
+              <>
+                {showCompare ? (
+                  <></>
                 ) : (
                   <div className="dataloadvisualizer-euro text-16-normal">
                     {dataload.valueDetail ? (
@@ -173,7 +189,9 @@ const DataloadConsumptionVisualizer = ({
                         return (
                           <NavLink
                             key={index}
-                        to={`/consumption/${FluidType[index].toLowerCase()}`}
+                            to={`/consumption/${FluidType[
+                              index
+                            ].toLowerCase()}`}
                             className="dataloadvisualizer-euro-link"
                           >
                             <div
@@ -195,10 +213,15 @@ const DataloadConsumptionVisualizer = ({
                                 size={22}
                               />
                               <div>
-                            {!dateChartService.isDataToCome(dataload, index) &&
-                            load !== -1
+                                {!dateChartService.isDataToCome(
+                                  dataload,
+                                  index
+                                ) && load !== -1
                                   ? `${formatNumberValues(load)} €`
-                              : dateChartService.isDataToCome(dataload, index)
+                                  : dateChartService.isDataToCome(
+                                      dataload,
+                                      index
+                                    )
                                   ? t('consumption_visualizer.data_to_come')
                                   : '---- €'}
                               </div>
@@ -208,7 +231,9 @@ const DataloadConsumptionVisualizer = ({
                       })
                     ) : (
                       <NavLink
-                    to={`/consumption/${FluidType[fluidType].toLowerCase()}`}
+                        to={`/consumption/${FluidType[
+                          fluidType
+                        ].toLowerCase()}`}
                         className="dataloadvisualizer-euro-link"
                       >
                         <div
@@ -222,13 +247,18 @@ const DataloadConsumptionVisualizer = ({
                             size={22}
                           />
                           <div>{`${formatNumberValues(
-                        converterService.LoadToEuro(dataload.value, fluidType)
+                            converterService.LoadToEuro(
+                              dataload.value,
+                              fluidType
+                            )
                           )} €`}</div>
                         </div>
                       </NavLink>
                     )}
                   </div>
                 )}
+              </>
+            )}
           </div>
         </div>
       ) : (

src/components/FluidChart/FluidChart.tsx

@@ -142,8 +142,7 @@ const FluidChart: React.FC<FluidChartProps> = ({
               </div>
             )}
             <TimeStepSelector fluidType={fluidType} />
-            {fluidType !== FluidType.MULTIFLUID &&
-            currentTimeStep !== TimeStep.YEAR ? (
+            {currentTimeStep !== TimeStep.YEAR ? (
               <div className="fluidchart-footer" onClick={handleChangeSwitch}>
                 <div className="fluidchart-footer-compare text-15-normal">
                   <StyledSwitch

src/services/consumption.service.ts

@@ -34,6 +34,15 @@ export default class ConsumptionDataManager {
     this._consumptionValidatorService = new ConsumptionValidatorService()
   }
 
+  /**
+   * Get graph data according on timeStep and fluidType
+   * @param timePeriod TimePeriod
+   * @param timeStep TimeStep
+   * @param fluidTypes FluidType[]
+   * @param compareTimePeriod - Optional TimePeriod
+   * @param isHome - Optional boolean
+   * @returns DataChart | null
+   */
   public async getGraphData(
     timePeriod: TimePeriod,
     timeStep: TimeStep,

src/services/converter.service.spec.ts

@@ -27,6 +27,12 @@ describe('Converter service', () => {
       expect(result).toEqual(expectedConversion)
     })
 
+    it('shoud return the load to euro for Multifluid, no coeff apply', () => {
+      const expectedConversion = 20
+      const result = converterService.LoadToEuro(20, FluidType.MULTIFLUID)
+      expect(result).toEqual(expectedConversion)
+    })
+
     it('shoud return 0.01 if the load is below 0.01 euro', () => {
       const expectedConversion = 0.01
       const result = converterService.LoadToEuro(0.002, FluidType.WATER)

src/services/converter.service.ts

@@ -10,8 +10,15 @@ export default class ConverterService {
   }
 
   public LoadToEuro(load: number, fluidType: FluidType): number {
-    let convertedLoad: number = load * this._fluidConfig[fluidType].coefficient
+    let convertedLoad: number
+    // If Multifluid do not apply coeff because it doesn't exist
+    if (fluidType === FluidType.MULTIFLUID) {
+      convertedLoad = load
+    } else {
+      convertedLoad = load * this._fluidConfig[fluidType].coefficient
+    }
 
+    // Prevent round 0 case when the actual value is not 0
     if (convertedLoad > 0 && convertedLoad < 0.01) {
       convertedLoad = 0.01
     }