From ea13a119d08d93b78faa7562aa70589a8f7f86e5 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Thu, 23 Jul 2020 11:08:28 +0200
Subject: [PATCH] feat: change way to load maxload information
---
.../ContentComponents/Charts/BarChart.tsx | 13 +-
.../FluidChart/FluidChartSlide.tsx | 111 ++++++++----------
.../Contexts/AppContextProvider.tsx | 7 --
3 files changed, 51 insertions(+), 80 deletions(-)
diff --git a/src/components/ContentComponents/Charts/BarChart.tsx b/src/components/ContentComponents/Charts/BarChart.tsx
index d2b518640..6237d1478 100644
--- a/src/components/ContentComponents/Charts/BarChart.tsx
+++ b/src/components/ContentComponents/Charts/BarChart.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
import {
IDataload,
@@ -66,7 +66,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
isSwitching,
isHome,
} = props as PropsWithDefaults
- const { setChartIsLoaded, maxLoads } = useContext(AppContext)
+ const { maxLoads } = useContext(AppContext)
const getContentWidth = () => {
return width - marginLeft - marginRight
@@ -124,15 +124,6 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
.domain([0, getMaxLoad()])
.range([getContentHeight(), 0])
- useEffect(() => {
- if (Object.keys(maxLoads).length > 0) {
- setChartIsLoaded(true)
- }
- }, [maxLoads])
- useEffect(() => {
- setChartIsLoaded(true)
- }, [])
-
return (
<svg width={width} height={height}>
{timeStep === TimeStep.DAY && (
diff --git a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
index 97a60a5be..20c9e2559 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
+++ b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
@@ -52,7 +52,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
const [chartData, setChartData] = useState<IChartData>(new ChartData([]))
const [isLoaded, setIsLoaded] = useState<boolean>(false)
- const { setChartIsLoaded, maxLoads, chartIsLoaded } = useContext(AppContext)
+ const { maxLoads } = useContext(AppContext)
const isHome: boolean = !window.location.hash.split('/')[2] ? true : false
@@ -72,6 +72,53 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
isHome
)
+ if (
+ graphData &&
+ graphData.actualData.length > 0 &&
+ (timeStep === TimeStep.DAY || timeStep === TimeStep.HALF_AN_HOUR)
+ ) {
+ const lastSlideDate =
+ graphData.actualData[graphData.actualData.length - 1].date
+ const actualMonth = lastSlideDate.startOf('week').month
+ const actualYear = lastSlideDate.startOf('week').year
+
+ const maxTimePeriod = {
+ startDate:
+ timeStep === TimeStep.HALF_AN_HOUR
+ ? lastSlideDate.startOf('month')
+ : lastSlideDate.startOf('week').startOf('month').weekday === 1
+ ? lastSlideDate.startOf('week').startOf('month')
+ : lastSlideDate
+ .startOf('week')
+ .startOf('month')
+ .plus({ days: +7 })
+ .startOf('week'),
+ endDate:
+ timeStep === TimeStep.HALF_AN_HOUR
+ ? lastSlideDate.endOf('month')
+ : lastSlideDate.startOf('week').month !==
+ lastSlideDate.endOf('week').month
+ ? lastSlideDate.endOf('week')
+ : lastSlideDate.endOf('month').endOf('week'),
+ }
+
+ const compareMaxTimePeriod = maxTimePeriod
+
+ const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes
+ .sort()
+ .join('-')}-${timeStep}`
+
+ const graphMaxLoad = await consumptionDataManager.getMaxLoad(
+ maxTimePeriod,
+ timeStep,
+ fluidTypes,
+ compareMaxTimePeriod,
+ isHome
+ )
+
+ maxLoads[key] = graphMaxLoad
+ }
+
if (subscribed && graphData && graphData.actualData.length > 0) {
setChartData(graphData)
setIsLoaded(true)
@@ -85,70 +132,10 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
}
}, [timeStep, fluidTypes])
- useEffect(() => {
- let subscribed = true
-
- const actualMonth = selectedDate.startOf('week').month
- const actualYear = selectedDate.startOf('week').year
-
- const maxTimePeriod = {
- startDate:
- timeStep === TimeStep.HALF_AN_HOUR
- ? selectedDate.startOf('month')
- : selectedDate.startOf('week').startOf('month').weekdayLong ===
- 'lundi'
- ? selectedDate.startOf('week').startOf('month')
- : selectedDate
- .startOf('week')
- .startOf('month')
- .plus({ days: +7 })
- .startOf('week'),
- endDate:
- timeStep === TimeStep.HALF_AN_HOUR
- ? selectedDate.endOf('month')
- : selectedDate.startOf('week').month !==
- selectedDate.endOf('week').month
- ? selectedDate.endOf('week')
- : selectedDate.endOf('month').endOf('week'),
- }
-
- const compareMaxTimePeriod = maxTimePeriod
-
- const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes
- .sort()
- .join('-')}-${timeStep}`
- async function loadData() {
- setChartIsLoaded(false)
- const graphMaxLoad = await consumptionDataManager.getMaxLoad(
- maxTimePeriod,
- timeStep,
- fluidTypes,
- compareMaxTimePeriod,
- isHome
- )
-
- maxLoads[key] = graphMaxLoad
-
- if (subscribed && graphMaxLoad) {
- setIsLoaded(true)
- setChartIsLoaded(true)
- }
- }
- if (
- key in maxLoads === false &&
- (timeStep === TimeStep.DAY || timeStep === TimeStep.HALF_AN_HOUR)
- ) {
- loadData()
- }
- return () => {
- subscribed = false
- }
- }, [selectedDate, fluidTypes])
-
return (
<>
<div className="fs-slide">
- {!chartIsLoaded || !isLoaded ? (
+ {!isLoaded ? (
<div className="chart-loading">
<StyledSpinner size="5em" fluidTypes={fluidTypes} isHome={isHome} />
</div>
diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx
index 4286ee96b..09e52e6c8 100644
--- a/src/components/Contexts/AppContextProvider.tsx
+++ b/src/components/Contexts/AppContextProvider.tsx
@@ -29,8 +29,6 @@ interface AppContextProps {
setPreviousTimeStep: Function
userProfile: UserProfile | null
setWelcomeModalViewed: Function
- chartIsLoaded: boolean
- setChartIsLoaded: Function
feedbackIsOpened: boolean
setFeedbackOpened: Function
disableBackgroundScroll: Function
@@ -59,8 +57,6 @@ export const AppContext = React.createContext<AppContextProps>({
userProfile: null,
setPreviousTimeStep: () => null,
setWelcomeModalViewed: () => null,
- chartIsLoaded: false,
- setChartIsLoaded: () => null,
feedbackIsOpened: false,
setFeedbackOpened: () => null,
disableBackgroundScroll: () => null,
@@ -77,7 +73,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
children,
client,
}: AppContextProviderProps) => {
- const [chartIsLoaded, setChartIsLoaded] = useState<boolean>(false)
const [feedbackIsOpened, setFeedbackOpened] = useState<boolean>(false)
const [isIndexesLoading, setIndexesLoading] = useState<boolean>(false)
const [maxLoads, setMaxLoads] = useState<object>({})
@@ -349,8 +344,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
previousTimeStep,
setPreviousTimeStep,
setWelcomeModalViewed,
- setChartIsLoaded,
- chartIsLoaded,
feedbackIsOpened,
setFeedbackOpened,
disableBackgroundScroll,
--
GitLab