AxisRight.tsx

import React, { useEffect, useRef } from 'react'
import { translate } from 'cozy-ui/react/I18n'
import { select, selectAll } from 'd3-selection'
import { axisRight } from 'd3-axis'
import { ScaleLinear } from 'd3-scale'
import { FluidType } from 'enum/fluid.enum'

interface AxisRightProps {
  yScale: ScaleLinear<number, number>
  fluidTypes: FluidType[]
  width: number
  marginRight: number
  marginTop: number
  t: Function // translation service
}

const AxisRight = (props: AxisRightProps) => {
  const { yScale, fluidTypes, width, marginRight, marginTop, t } = props
  const isHome: boolean = !window.location.hash.split('/')[2] ? true : false
  const fluidStyle =
    fluidTypes.length > 1 || isHome ? 'MULTIFLUID' : FluidType[fluidTypes[0]]
  const yAxisRef = useRef<SVGGElement>(null)

  const drawYAxis = () => {
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    select(yAxisRef.current!).call(
      axisRight(yScale)
        .ticks(4)
        .tickSize(-width)
        .tickSizeOuter(0)
        .tickFormat(d => `${d} ${t('FLUID.' + fluidStyle + '.UNIT')}`)
    )
    selectAll('.tick text').attr('class', 'chart-ticks-y-text')
    select('.domain').remove()
  }

  useEffect(() => {
    drawYAxis()
  })

  return (
    <g
      className="axis y"
      ref={yAxisRef}
      transform={`translate(${width - marginRight}, ${marginTop})`}
    />
  )
}

export default translate()(AxisRight)