# All files / components Tooltip.tsx

27.59% Statements 8/29
0% Branches 0/10
0% Functions 0/2
29.63% Lines 8/27

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
    701x
    1x
    1x

    1x
    1x
    1x

    1x

    1x
     import * as React from 'react'
    import {FunctionComponent, useMemo} from 'react'
    import {createPortal} from 'react-dom'

    import {LegendData, Config} from '../types'
    import {Legend} from './Legend'
    import {useTooltipElement} from '../utils/legend/useTooltipElement'
    import {TOOLTIP_MAXIMUM_OPACITY, TOOLTIP_MINIMUM_OPACITY} from '../constants'

    interface Props {
      data: LegendData
      config: Config
    }

    export const Tooltip: FunctionComponent<Props> = ({data, config}) => {
      const {
        legendBackgroundColor: backgroundColor,
        legendBorder: border,
        legendColumns,
        legendFont: font,
        legendFontBrightColor: fontBrightColor,
        legendHide: isHidden,
        legendOpacity,
      } = config
      const tooltipElement = useTooltipElement('giraffe-tooltip-container')

      const tooltipOpacity = useMemo(() => {
        if (
          legendOpacity >= TOOLTIP_MINIMUM_OPACITY &&
          legendOpacity <= TOOLTIP_MAXIMUM_OPACITY
        ) {
          return legendOpacity
        }
        return TOOLTIP_MAXIMUM_OPACITY
      }, [legendOpacity])

      let isTooltipHidden = Boolean(isHidden)
      if (Array.isArray(legendColumns) && legendColumns.length === 0) {
        isTooltipHidden = true
      }

      if (isTooltipHidden) {
        return null
      }

      const tooltipContents = <Legend type="tooltip" data={data} config={config} />

      return createPortal(
        <div
          className="giraffe-tooltip"
          style={{
            backgroundColor,
            border,
            borderRadius: '3px',
            color: fontBrightColor,
            cursor: 'crosshair',
            font,
            opacity: tooltipOpacity,
            padding: '10px',
          }}
          data-testid="giraffe-tooltip"
        >
          {tooltipContents}
        </div>,
        tooltipElement
      )
    }

    Tooltip.displayName = 'Tooltip'