diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx index b4818a32796c03afcbd0723bd7ec43c6e89b0086..d3191e93550f55dcf220c63b5e7ad6c61fcd9bed 100644 --- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx +++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx @@ -4,7 +4,7 @@ import { mount } from 'enzyme' import { Dataload } from 'models' import React from 'react' import { Provider } from 'react-redux' -import { BrowserRouter as Router } from 'react-router-dom' +import { BrowserRouter } from 'react-router-dom' import configureStore from 'redux-mock-store' import UsageEventService from 'services/usageEvent.service' import { baseDataLoad } from '../../../tests/__mocks__/chartData.mock' @@ -50,21 +50,24 @@ const dataLoadWithValueDetail: Dataload = { } describe('Dataload consumption visualizer component', () => { - it('should render correctly', () => { + it('should render correctly multifluid and 3 clickable links', () => { const store = mockStore({ ecolyo: mockInitialEcolyoState, }) const wrapper = mount( <Provider store={store}> - <DataloadConsumptionVisualizer - fluidType={FluidType.MULTIFLUID} - dataload={baseDataLoad} - compareDataload={baseDataLoad} - setActive={jest.fn()} - /> + <BrowserRouter> + <DataloadConsumptionVisualizer + fluidType={FluidType.MULTIFLUID} + dataload={baseDataLoad} + compareDataload={baseDataLoad} + setActive={jest.fn()} + /> + </BrowserRouter> </Provider> ) expect(wrapper).toMatchSnapshot() + expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3) }) it('should render with single fluid', () => { const store = mockStore({ @@ -156,14 +159,14 @@ describe('Dataload consumption visualizer component', () => { const wrapper = mount( <Provider store={store}> - <Router> + <BrowserRouter> <DataloadConsumptionVisualizer fluidType={FluidType.MULTIFLUID} dataload={dataLoadWithValueDetail} compareDataload={emptyDataLoad} setActive={jest.fn()} /> - </Router> + </BrowserRouter> </Provider> ) jest.mock('services/usageEvent.service') diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx index 85ed7d9554cb8906e385696c70def0cb8b7f7a9a..be0f81676b33701aa787dcf8c0556fb5519ccf95 100644 --- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx +++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx @@ -21,16 +21,13 @@ const DataloadConsumptionVisualizer = ({ compareDataload, setActive, }: DataloadConsumptionVisualizerProps) => { - const { loading, showCompare } = useSelector( - (state: AppStore) => state.ecolyo.chart - ) + const { showCompare } = useSelector((state: AppStore) => state.ecolyo.chart) const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false) - const toggleEstimationModal = useCallback(() => { setOpenEstimationModal(prev => !prev) }, []) - if (loading || !dataload) { + if (!dataload) { return <div className="dataloadvisualizer-root" /> } diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap index e3a2075d632b0ac68586d2d92b6c0711aab83ec2..70032d957254c43a0dbb182a8836237eec4cf8ca 100644 --- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap +++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Dataload consumption visualizer component should render correctly 1`] = `ReactWrapper {}`; +exports[`Dataload consumption visualizer component should render correctly multifluid and 3 clickable links 1`] = `ReactWrapper {}`; exports[`Dataload consumption visualizer component should render with single fluid 1`] = `ReactWrapper {}`; diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx index 07e1410146986120f7a6024b7cc3081fdd5eaed1..3f9ed03bd0427b9e21c98dd4ead155d8274d0f70 100644 --- a/src/components/FluidChart/FluidChart.tsx +++ b/src/components/FluidChart/FluidChart.tsx @@ -50,8 +50,6 @@ const FluidChart: React.FC<FluidChartProps> = ({ const currentFluidStatus = fluidStatus[fluidType] const isFluidConnected = isKonnectorActive(fluidStatus, fluidType) const [, setValidExploration] = useExploration() - // TODO use chart.loading ? - const [isLoaded, setIsLoaded] = useState<boolean>(false) const [containsHalfHourData, setContainsHalfHourData] = useState<boolean>(false) @@ -72,8 +70,8 @@ const FluidChart: React.FC<FluidChartProps> = ({ useEffect(() => { let subscribed = true async function loadData() { - const consumptionService = new ConsumptionService(client) if (fluidType === FluidType.ELECTRICITY) { + const consumptionService = new ConsumptionService(client) const halfHourData = await consumptionService.checkDoctypeEntries( FluidType.ELECTRICITY, TimeStep.HALF_AN_HOUR @@ -82,12 +80,8 @@ const FluidChart: React.FC<FluidChartProps> = ({ setContainsHalfHourData(true) } } - if (subscribed) { - setIsLoaded(true) - } } - - loadData() + subscribed && loadData() return () => { subscribed = false @@ -175,45 +169,38 @@ const FluidChart: React.FC<FluidChartProps> = ({ ) return ( - <> - {isLoaded && ( - <div className="fluidchart-root"> - {!isFluidConnected && <LastDataValid />} - {currentTimeStep === TimeStep.HALF_AN_HOUR && - !containsHalfHourData ? ( - <HalfHourNoData /> - ) : ( - <> - <div className="fluidchart-content"> - <FluidChartSwipe fluidType={fluidType} setActive={setActive} /> - </div> - {showCompare && currentTimeStep !== TimeStep.YEAR && ( - <DisplayLegend /> - )} - </> - )} - <TimeStepSelector fluidType={fluidType} /> - {currentTimeStep !== TimeStep.YEAR && ( - <div className="fluidchart-footer" onClick={handleChangeSwitch}> - <div className="fluidchart-footer-compare text-15-normal"> - <StyledSwitch - fluidType={fluidType} - checked={showCompare} - inputProps={{ - 'aria-label': t( - 'consumption.accessibility.checkbox_compare' - ), - }} - /> - <span className="fluidchart-footer-label graph-switch-text"> - {t(`timestep.${lowercaseTimeStep}.comparelabel`)} - </span> - </div> - </div> + <div className="fluidchart-root"> + {!isFluidConnected && <LastDataValid />} + {currentTimeStep === TimeStep.HALF_AN_HOUR && !containsHalfHourData ? ( + <HalfHourNoData /> + ) : ( + <> + <div className="fluidchart-content"> + <FluidChartSwipe fluidType={fluidType} setActive={setActive} /> + </div> + {showCompare && currentTimeStep !== TimeStep.YEAR && ( + <DisplayLegend /> )} + </> + )} + <TimeStepSelector fluidType={fluidType} /> + {currentTimeStep !== TimeStep.YEAR && ( + <div className="fluidchart-footer" onClick={handleChangeSwitch}> + <div className="fluidchart-footer-compare text-15-normal"> + <StyledSwitch + fluidType={fluidType} + checked={showCompare} + inputProps={{ + 'aria-label': t('consumption.accessibility.checkbox_compare'), + }} + /> + <span className="fluidchart-footer-label graph-switch-text"> + {t(`timestep.${lowercaseTimeStep}.comparelabel`)} + </span> + </div> </div> )} - </> + </div> ) } diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx index 53d927fe18e36717419bffa5a24f6ec0dbf19cc8..f82f6302ec03ae1db67f901468584a1adc9a219a 100644 --- a/src/components/FluidChart/FluidChartSwipe.tsx +++ b/src/components/FluidChart/FluidChartSwipe.tsx @@ -23,7 +23,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({ setActive, }: FluidChartSwipeProps) => { const dispatch = useDispatch<Dispatch<AppActionsTypes>>() - const { currentIndex, currentTimeStep, selectedDate, loading } = useSelector( + const { currentIndex, currentTimeStep, selectedDate } = useSelector( (state: AppStore) => state.ecolyo.chart ) const swipe = useRef<HTMLDivElement>(null) @@ -58,7 +58,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({ dispatch(setCurrentIndex(updatedIndex)) } - const { height, width } = useChartResize(swipe, 300, 940, loading) + const { height, width } = useChartResize(swipe) useEffect(() => { function initIndex() { diff --git a/src/components/Hooks/useChartResize.tsx b/src/components/Hooks/useChartResize.tsx index 74176aa12ba9d8d8760a34906b2b17423507a8d3..a1413d10efe8993df61db7216743dffacc4248d4 100644 --- a/src/components/Hooks/useChartResize.tsx +++ b/src/components/Hooks/useChartResize.tsx @@ -1,19 +1,21 @@ import { useEffect, useState } from 'react' +/** + * Update the width and height of the chart when the window is resized + */ export const useChartResize = ( ref: React.RefObject<HTMLDivElement>, maxHeight = 300, - maxWidth = 940, - loading = false + maxWidth = 940 ) => { - const [width, setWidth] = useState(0) - const [height, setHeight] = useState(0) + const [width, setWidth] = useState(maxWidth) + const [height, setHeight] = useState(maxHeight) useEffect(() => { function handleResize() { - if (!loading) { - const chartContainerWidth = ref?.current?.offsetWidth ?? 400 - const chartContainerHeight = ref?.current?.offsetHeight ?? 200 + if (ref.current) { + const chartContainerWidth = ref.current.offsetWidth + const chartContainerHeight = ref.current.offsetHeight const width = Math.min(chartContainerWidth, maxWidth) const height = Math.min(chartContainerHeight, maxHeight) setWidth(width) @@ -24,7 +26,13 @@ export const useChartResize = ( handleResize() window.addEventListener('resize', handleResize) return () => window.removeEventListener('resize', handleResize) - }, [loading]) + }, [ + maxHeight, + maxWidth, + ref, + ref.current?.offsetHeight, + ref.current?.offsetWidth, + ]) return { width, height } }