Skip to content
Snippets Groups Projects
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