# All files / src/components histogram-y-axis.tsx

100% Statements 12/12
50% Branches 1/2
100% Functions 2/2
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

    8x

    8x
    4x

    4x
    4x
    4x
    4x
    4x
    4x
    4x
    4x

    4x

     import { useRef, useEffect } from 'react';
    import { axisLeft, type ScaleLinear, select } from 'd3';

    type Props = {
      /**
       * D3 scale function
       */
      scale: ScaleLinear<number, number>;
      /**
       * The height of axis component
       */
      height: number;
      /**
       * Label to appear to the left of the axis
       */
      label: string;
    };

    const WIDTH = 80;

    const YAxis = ({ scale, height, label }: Props) => {
      const d3Container = useRef<SVGSVGElement>(null);

      useEffect(() => {
        Eif (d3Container.current) {
          const axis = axisLeft(scale).tickPadding(6);
          axis.tickSize(0);
          const svg = select(d3Container.current);
          svg.selectAll('*').remove();
          svg.append('g').attr('transform', 'translate(50, 0)').call(axis);
          svg
            .append('text')
            .attr('transform', 'rotate(-90)')
            .attr('y', WIDTH / 4)
            .attr('x', -height / 2)
            .style('text-anchor', 'middle')
            .text(label);
        }
      }, [height, label, scale]);

      return (
        <svg width={WIDTH} height={height} ref={d3Container} className="y-axis" />
      );
    };

    export default YAxis;