# All files / components LineHoverLayer.tsx

23.4% Statements 11/47
0% Branches 0/10
0% Functions 0/2
23.4% Lines 11/47

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
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    1301x
    1x

    1x

    1x

    1x
    1x
    1x
    1x
    1x

    1x

    1x
     import * as React from 'react'
    import {useRef, FunctionComponent} from 'react'

    import {Tooltip} from './Tooltip'
    import {Props as LineLayerProps} from './LineLayer'
    import {FILL} from '../constants/columnKeys'
    import {LineHoverDimension, LineData} from '../types'
    import {getPointsTooltipData} from '../utils/legend/tooltip'
    import {getLineHoverPoints} from '../utils/lineHover'
    import {drawLines} from '../utils/drawLines'
    import {drawLineHoverData} from '../utils/drawLineHoverData'
    import {useCanvas} from '../utils/useCanvas'

    interface Props extends LineLayerProps {
      rowIndices: number[] | null
      dimension: LineHoverDimension
      simplifiedLineData: LineData
    }

    export const LineHoverLayer: FunctionComponent<Props> = ({
      rowIndices,
      dimension,
      simplifiedLineData,
      config,
      plotConfig,
      spec,
      width,
      height,
      xScale,
      yScale,
      columnFormatter,
    }) => {
      const {
        position,
        interpolation,
        x: xColKey,
        y: yColKey,
        fill: fillColKeys,
        lineWidth,
        shadeBelow,
        shadeBelowOpacity,
      } = config

      const xColData = spec.table.getColumn(xColKey, 'number')
      const yColData = spec.table.getColumn(yColKey, 'number')
      const groupColData = spec.table.getColumn(FILL, 'number')
      const fillScale = spec.scales.fill

      const points = getLineHoverPoints(
        position,
        spec,
        rowIndices,
        xColKey,
        yColKey,
        xScale,
        yScale,
        fillScale
      )

      const crosshairColor = plotConfig.legendCrosshairColor

      const crosshairX =
        dimension === 'xy' || dimension === 'x'
          ? xScale(xColData[rowIndices[0]])
          : null

      const crosshairY =
        dimension === 'xy' || dimension === 'y'
          ? yScale(yColData[rowIndices[0]])
          : null

      const canvasRef = useRef<HTMLCanvasElement>(null)

      useCanvas(canvasRef, width, height, context => {
        if (dimension === 'xy') {
          const groupKey = groupColData[rowIndices[0]]
          const lineDatum = simplifiedLineData[groupKey]

          // Highlight the line that the single hovered point belongs to
          drawLines({
            context,
            lineData: {[groupKey]: lineDatum},
            interpolation,
            lineWidth: lineWidth * 2,
            shadeBelow,
            shadeBelowOpacity: shadeBelowOpacity * 1.5,
            shadeAboveY: height,
          })
        }

        drawLineHoverData({
          context,
          width,
          height,
          crosshairX,
          crosshairY,
          crosshairColor,
          points,
          radius: lineWidth * 2,
        })
      })

      const tooltipData = getPointsTooltipData(
        rowIndices,
        spec.table,
        config.x,
        config.y,
        FILL,
        columnFormatter,
        fillColKeys,
        fillScale,
        position,
        spec.stackedDomainValueColumn
      )

      return (
        <>
          <canvas
            className="giraffe-layer giraffe-layer-hover-line"
            ref={canvasRef}
            style={{position: 'absolute'}}
            data-testid="giraffe-layer-hover-line"
          />
          <Tooltip data={tooltipData} config={plotConfig} />
        </>
      )
    }

    LineHoverLayer.displayName = 'LineHoverLayer'