BarChart.tsx

import AxisBottom from 'components/Charts/AxisBottom'
import AxisRight from 'components/Charts/AxisRight'
import Bar from 'components/Charts/Bar'
import { scaleBand, ScaleBand, scaleLinear, ScaleLinear } from 'd3-scale'
import { DataloadState, FluidType, TimeStep } from 'enums'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React from 'react'

interface BarChartProps {
  chartData: Datachart
  fluidType: FluidType
  timeStep: TimeStep
  /** showCompare should be false for analysis view */
  showCompare: boolean
  width?: number
  height?: number
  marginLeft?: number
  marginRight?: number
  marginTop?: number
  marginBottom?: number
  isSwitching: boolean
  clickable?: boolean
}

const BarChart = ({
  chartData,
  fluidType,
  timeStep,
  showCompare,
  width = 600,
  height = 400,
  marginLeft = 10,
  marginRight = 55,
  marginTop = 20,
  marginBottom = 50,
  isSwitching,
  clickable = true,
}: BarChartProps) => {
  const getContentWidth = () => {
    return width - marginLeft - marginRight
  }

  const getContentHeight = () => {
    return height - marginTop - marginBottom
  }

  const getMaxLoad = () => {
    const maxCompare = chartData.comparisonData
      ? Math.max(...chartData.comparisonData.map(d => d.value))
      : 0

    const max = chartData.actualData
      ? Math.max(...chartData.actualData.map(d => d.value))
      : 0

    if (showCompare) {
      if (max <= 0 && maxCompare <= 0) return 15
      else return Math.max(max, maxCompare)
    } else {
      if (max <= 0) {
        return 15
      } else return max
    }
  }

  const xScale: ScaleBand<string> = scaleBand()
    .domain(
      chartData.actualData.map(d =>
        d.date.toLocaleString(DateTime.DATETIME_SHORT)
      )
    )
    .range([0, getContentWidth()])
    .padding(0.2)

  const yScale: ScaleLinear<number, number> = scaleLinear()
    .domain([0, getMaxLoad()])
    .range([getContentHeight(), 0])

  const sum = chartData.actualData.reduce((a, b) => a + b.value, 0)
  const averageConsumption = sum / chartData.actualData.length

  return (
    <svg width={width} height={height}>
      <AxisRight
        fluidType={fluidType}
        yScale={yScale}
        width={width}
        marginRight={marginRight}
        marginTop={marginTop}
      />

      <g transform={`translate(${marginLeft},${marginTop})`}>
        {chartData.actualData.map((data, index) => (
          <Bar
            key={index}
            index={index}
            dataload={data}
            compareDataload={
              chartData.comparisonData?.[index]
                ? chartData.comparisonData[index]
                : null
            }
            fluidType={fluidType}
            timeStep={timeStep}
            compare={showCompare}
            xScale={xScale}
            yScale={yScale}
            height={getContentHeight()}
            isSwitching={isSwitching}
            isMultiMissingFluid={
              data.state === DataloadState.AGGREGATED_WITH_EMPTY ||
              data.state === DataloadState.AGGREGATED_WITH_COMING ||
              data.state === DataloadState.AGGREGATED_WITH_HOLE_OR_MISSING
            }
            clickable={clickable}
            average={averageConsumption}
          />
        ))}
      </g>
      <AxisBottom
        data={chartData.actualData}
        timeStep={timeStep}
        xScale={xScale}
        height={height}
        marginLeft={marginLeft}
        marginBottom={marginBottom}
      />
    </svg>
  )
}

export default BarChart