diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx index 9416d41d843378bddbc9c0af606affe1a0e0486a..ae7ee65220f57d0b4f44ee6b4935c890c18d43de 100644 --- a/src/components/FluidChart/FluidChart.tsx +++ b/src/components/FluidChart/FluidChart.tsx @@ -83,7 +83,7 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => { } }, [containsHalfHourData, currentTimeStep, setValidExploration]) - const DisplayLegend = useCallback( + const compareLegend = useCallback( () => ( <div className="compareLegend"> <div> @@ -154,27 +154,33 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => { currentFluidStatus?.connection.konnector?.updated_at || '' ) >= DateTime.local().minus({ days: 3 }) + /** Display no half hour components or FluidChart otherwise */ + const chartContent = () => { + if (currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData) { + return isKonnectorUpdatedWithinLastThreeDays ? ( + <HalfHourUpcoming /> + ) : ( + <HalfHourNoDataFailure /> + ) + } + return ( + <> + <div className="fluidchart-content"> + <FluidChartSwipe fluidType={fluidType} setActive={setActive} /> + </div> + {showCompare && currentTimeStep !== TimeStep.YEAR && ( + <Slide direction="right" in={showCompare}> + {compareLegend()} + </Slide> + )} + </> + ) + } + return ( <div className="fluidchart-root"> {!isFluidConnected && LastDataValid} - {currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? ( - isKonnectorUpdatedWithinLastThreeDays ? ( - <HalfHourUpcoming /> - ) : ( - <HalfHourNoDataFailure /> - ) - ) : ( - <> - <div className="fluidchart-content"> - <FluidChartSwipe fluidType={fluidType} setActive={setActive} /> - </div> - {showCompare && currentTimeStep !== TimeStep.YEAR && ( - <Slide direction="right" in={showCompare}> - {DisplayLegend()} - </Slide> - )} - </> - )} + {chartContent()} <TimeStepSelector fluidType={fluidType} /> {currentTimeStep !== TimeStep.YEAR && ( <div className="fluidchart-footer">