diff --git a/src/components/Analysis/ElecHalfHourChart.tsx b/src/components/Analysis/ElecHalfHourChart.tsx
index 9ff47f22240ade0da1b9783bd5dc9b7ed3f4fb9c..b63408d3b05ae42ff1fd32550ae16c7b529407c1 100644
--- a/src/components/Analysis/ElecHalfHourChart.tsx
+++ b/src/components/Analysis/ElecHalfHourChart.tsx
@@ -17,7 +17,7 @@ interface ElecHalfHourChartProps {
const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
const chartContainer = useRef<HTMLDivElement>(null)
- const { height, width } = useChartResize(chartContainer, 170, 940)
+ const { height, width } = useChartResize(chartContainer, false, 170, 940)
const marginLeft = 10
const marginRight = 60
const marginTop = 0
diff --git a/src/components/Analysis/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard.tsx
index 4218917785e60d505eec5890668540e7b7b31527..3fde2da22acabb35915ab79d8433c9327d37551d 100644
--- a/src/components/Analysis/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard.tsx
@@ -37,7 +37,7 @@ const MaxConsumptionCard = () => {
comparisonData: null,
})
const containerRef = useRef<HTMLDivElement>(null)
- const { height, width } = useChartResize(containerRef, 250, 940)
+ const { height, width } = useChartResize(containerRef, isLoading, 250, 940)
const currentFluidType = FluidType[fluidTypes[index]] as
| 'ELECTRICITY'
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 7392efb5b669da48670fd7e71aa7a810a52e643e..d6dfbc1e3aabc44cddbda56d180971a0e6da58bc 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -48,20 +48,20 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
className="graph-elec-half-hour"
>
<svg
- height={0}
- width={0}
+ height={170}
+ width={940}
>
<AxisRight
fluidType={0}
isAnalysis={true}
marginRight={60}
marginTop={0}
- width={0}
+ width={940}
yScale={[Function]}
>
<g
className="axis y"
- transform="translate(-60, 0)"
+ transform="translate(880, 0)"
/>
</AxisRight>
<g
@@ -79,7 +79,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
}
}
fluidType={0}
- height={-30}
+ height={140}
index={0}
isDuel={false}
isSwitching={false}
@@ -89,7 +89,52 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
xScale={[Function]}
yScale={[Function]}
>
- <g />
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--0 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--0 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
</Bar>
<Bar
compare={false}
@@ -103,7 +148,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
}
}
fluidType={0}
- height={-30}
+ height={140}
index={1}
isDuel={false}
isSwitching={false}
@@ -113,7 +158,52 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
xScale={[Function]}
yScale={[Function]}
>
- <g />
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--1 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--1 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
</Bar>
<Bar
compare={false}
@@ -127,7 +217,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
}
}
fluidType={0}
- height={-30}
+ height={140}
index={2}
isDuel={false}
isSwitching={false}
@@ -137,7 +227,52 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
xScale={[Function]}
yScale={[Function]}
>
- <g />
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--2 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--2 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
</Bar>
<Bar
compare={false}
@@ -151,7 +286,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
}
}
fluidType={0}
- height={-30}
+ height={140}
index={3}
isDuel={false}
isSwitching={false}
@@ -161,7 +296,52 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
xScale={[Function]}
yScale={[Function]}
>
- <g />
+ <g>
+ <g
+ className="barContainer "
+ transform="translate(79.09090909090912, -40)"
+ >
+ <rect
+ className="background-undefined"
+ fill="#E0E0E0"
+ height={180}
+ onClick={[Function]}
+ width={711.8181818181818}
+ x="0"
+ y="0"
+ />
+ </g>
+ <g
+ transform="translate(79.09090909090912, 0)"
+ >
+ <defs>
+ <linearGradient
+ className="bar-ELECTRICITY weekend bounce-3 delay--3 "
+ id="gradient"
+ x1="0"
+ x2="0"
+ y1="0"
+ y2="1"
+ >
+ <stop
+ id="stop-color-1"
+ offset="0%"
+ />
+ <stop
+ id="stop-color-2"
+ offset="100%"
+ />
+ </linearGradient>
+ </defs>
+ <path
+ className="bar-ELECTRICITY weekend bounce-3 delay--3 "
+ d="M0,4 a4,4 0 0 1 4,-4h-5a4,4 0 0 1 4,4v136h-3z"
+ fill="url(#gradient)"
+ onAnimationEnd={[Function]}
+ onClick={[Function]}
+ />
+ </g>
+ </g>
</Bar>
</g>
<AxisBottom
@@ -193,7 +373,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
},
]
}
- height={0}
+ height={170}
isDuel={false}
marginBottom={30}
marginLeft={10}
@@ -202,13 +382,13 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
>
<g
className="axis x"
- transform="translate(10, -30)"
+ transform="translate(10, 140)"
>
<g
className="tick"
key="0"
opacity="1"
- transform="translate(-63.63636363636364, 0)"
+ transform="translate(79.09090909090912, 0)"
>
<TextAxis
dataload={
@@ -222,11 +402,11 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
displayAllDays={false}
index={0}
timeStep={10}
- width={28.636363636363637}
+ width={355.9090909090909}
>
<text
dy="0.71em"
- x={28.636363636363637}
+ x={355.9090909090909}
y="10"
>
<tspan
@@ -242,7 +422,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
className="tick"
key="1"
opacity="1"
- transform="translate(-63.63636363636364, 0)"
+ transform="translate(79.09090909090912, 0)"
>
<TextAxis
dataload={
@@ -256,14 +436,14 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
displayAllDays={false}
index={1}
timeStep={10}
- width={28.636363636363637}
+ width={355.9090909090909}
/>
</g>
<g
className="tick"
key="2"
opacity="1"
- transform="translate(-63.63636363636364, 0)"
+ transform="translate(79.09090909090912, 0)"
>
<TextAxis
dataload={
@@ -277,14 +457,14 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
displayAllDays={false}
index={2}
timeStep={10}
- width={28.636363636363637}
+ width={355.9090909090909}
/>
</g>
<g
className="tick"
key="3"
opacity="1"
- transform="translate(-63.63636363636364, 0)"
+ transform="translate(79.09090909090912, 0)"
>
<TextAxis
dataload={
@@ -298,7 +478,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
displayAllDays={false}
index={3}
timeStep={10}
- width={28.636363636363637}
+ width={355.9090909090909}
/>
</g>
</g>
diff --git a/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 16d52c3f0b9e55c1e3b3d250256f170aca783a5e..8a146488c5ec22dcd6575e849da9afab08d37e36 100644
--- a/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -520,10 +520,10 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
}
clickable={false}
fluidType={0}
- height={0}
+ height={250}
isSwitching={false}
timeStep={20}
- width={0}
+ width={940}
/>
</div>
</div>
diff --git a/src/components/Duel/DuelOngoing.tsx b/src/components/Duel/DuelOngoing.tsx
index 90b665426e8077ccfcc7ab205f276ffd4839dd7e..2b9eef56d7f14ae68c3c88dd54efa43485acc919 100644
--- a/src/components/Duel/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing.tsx
@@ -54,7 +54,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
const [isLastDuel, setIsLastDuel] = useState<boolean>(false)
const [finishedDataLoad, setFinishedDataLoad] = useState<Dataload[]>()
const chartContainer = useRef<HTMLDivElement>(null)
- const { height, width } = useChartResize(chartContainer)
+ const { height, width } = useChartResize(chartContainer, false)
const challengeService = useMemo(() => new ChallengeService(client), [client])
const duel: UserDuel = userChallenge.duel
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index 2505001edbd1371c395dde1977d5cba8cb4a7dad..403d914b9de79fbe1cd75fbc1e6f86951a41d147 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -20,7 +20,7 @@ interface FluidChartSwipeProps {
const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
- const { currentIndex, currentTimeStep, selectedDate } = useSelector(
+ const { currentIndex, currentTimeStep, selectedDate, loading } = useSelector(
(state: AppStore) => state.ecolyo.chart
)
const swipe = useRef<HTMLDivElement>(null)
@@ -55,7 +55,7 @@ const FluidChartSwipe = ({ fluidType, setActive }: FluidChartSwipeProps) => {
dispatch(setCurrentIndex(updatedIndex))
}
- const { height, width } = useChartResize(swipe)
+ const { height, width } = useChartResize(swipe, loading)
useEffect(() => {
function initIndex() {
diff --git a/src/components/Hooks/useChartResize.tsx b/src/components/Hooks/useChartResize.tsx
index a1413d10efe8993df61db7216743dffacc4248d4..aeb5784223a76dee8f28a2cd74ea3caee79a94c2 100644
--- a/src/components/Hooks/useChartResize.tsx
+++ b/src/components/Hooks/useChartResize.tsx
@@ -1,23 +1,24 @@
import { useEffect, useState } from 'react'
/**
- * Update the width and height of the chart when the window is resized
+ * Update the width and height of the chart when the window is resized or the chart is loaded
*/
export const useChartResize = (
ref: React.RefObject<HTMLDivElement>,
+ loading: boolean,
maxHeight = 300,
maxWidth = 940
) => {
- const [width, setWidth] = useState(maxWidth)
const [height, setHeight] = useState(maxHeight)
+ const [width, setWidth] = useState(maxWidth)
useEffect(() => {
function handleResize() {
- if (ref.current) {
- const chartContainerWidth = ref.current.offsetWidth
- const chartContainerHeight = ref.current.offsetHeight
- const width = Math.min(chartContainerWidth, maxWidth)
+ if (!loading) {
+ const chartContainerHeight = ref.current?.offsetHeight || maxHeight
+ const chartContainerWidth = ref.current?.offsetWidth || maxWidth
const height = Math.min(chartContainerHeight, maxHeight)
+ const width = Math.min(chartContainerWidth, maxWidth)
setWidth(width)
setHeight(height)
}
@@ -26,13 +27,7 @@ export const useChartResize = (
handleResize()
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
- }, [
- maxHeight,
- maxWidth,
- ref,
- ref.current?.offsetHeight,
- ref.current?.offsetWidth,
- ])
+ }, [loading, maxHeight, maxWidth, ref])
return { width, height }
}