-
Romain CREY authoredRomain CREY authored
FluidChartSlide.tsx 4.60 KiB
import React, { useState, useEffect, useContext } from 'react'
import { DateTime } from 'luxon'
import {
IConsumptionDataManager,
IDataload,
IChartData,
ChartData,
TimeStep,
ITimePeriod,
} from 'services/dataConsumptionContracts'
import { defineTimePeriod } from 'services/dateChartService'
import { FluidType } from 'enum/fluid.enum'
import BarChart from 'components/ContentComponents/Charts/BarChart'
import { AppContext } from 'components/Contexts/AppContextProvider'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
interface FluidChartSlideProps {
index: number
fluidTypes: FluidType[]
timeStep: TimeStep
multiFluid: boolean
referenceDate: DateTime
selectedDate: DateTime
showCompare: boolean
width: number
height: number
challengePeriod: ITimePeriod | null
handleClickData: (
dataload: IDataload,
compareDataload: IDataload | null
) => void
consumptionDataManager: IConsumptionDataManager
isSwitching: boolean
}
const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
index,
fluidTypes,
timeStep,
multiFluid,
referenceDate,
selectedDate,
showCompare,
width,
height,
challengePeriod,
handleClickData,
consumptionDataManager,
isSwitching,
}: FluidChartSlideProps) => {
const [chartData, setChartData] = useState<IChartData>(new ChartData([]))
const [isLoaded, setIsLoaded] = useState<boolean>(false)
const { setChartIsLoaded, maxLoads, chartIsLoaded } = useContext(AppContext)
let isHome: boolean
if (!window.location.hash.split('/')[2]) {
isHome = true
} else {
isHome = false
}
useEffect(() => {
let subscribed = true
async function loadData() {
const [timePeriod, compareTimePeriod] = await Promise.all([
defineTimePeriod(referenceDate, timeStep, index),
defineTimePeriod(referenceDate, timeStep, index + 1),
])
const graphData = await consumptionDataManager.getGraphData(
timePeriod,
timeStep,
fluidTypes,
compareTimePeriod,
isHome
)
if (subscribed && graphData && graphData.actualData.length > 0) {
setChartData(graphData)
setIsLoaded(true)
}
}
setIsLoaded(false)
loadData()
return () => {
subscribed = false
}
}, [timeStep, fluidTypes])
useEffect(() => {
let subscribed = true
const actualMonth = selectedDate.startOf('week').month
const actualYear = selectedDate.startOf('week').year
const maxTimePeriod = {
startDate:
selectedDate.startOf('month').startOf('week').month !==
selectedDate.startOf('month').endOf('week').month
? selectedDate
.startOf('week')
.startOf('month')
.plus({ days: +7 })
.startOf('week')
: selectedDate.startOf('week').startOf('month'),
endDate:
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('-')}`
async function loadData() {
setChartIsLoaded(false)
const graphMaxLoad = await consumptionDataManager.getMaxLoad(
maxTimePeriod,
timeStep,
fluidTypes,
compareMaxTimePeriod,
isHome
)
maxLoads[key] = graphMaxLoad
key in maxLoads ? (maxLoads[key] = graphMaxLoad) : null
if (subscribed && graphMaxLoad) {
setIsLoaded(true)
}
}
if (key in maxLoads === false && timeStep === TimeStep.DAY) {
loadData()
}
return () => {
subscribed = false
}
}, [selectedDate, fluidTypes])
return (
<>
<div className="fs-slide">
{(!chartIsLoaded || !isLoaded) && (
<div className="chart-loading">
<StyledSpinner size="5em" fluidTypes={fluidTypes} />
</div>
)}
<div
className={`${
!chartIsLoaded || !isLoaded ? 'chart-none' : 'chart-block'
}`}
>
<BarChart
chartData={chartData}
fluidTypes={fluidTypes}
timeStep={timeStep}
multiFluid={multiFluid}
selectedDate={selectedDate}
showCompare={showCompare}
handleClickData={handleClickData}
height={height}
width={width}
challengePeriod={challengePeriod}
isSwitching={isSwitching}
isHome={isHome}
/>
</div>
</div>
</>
)
}
export default FluidChartSlide