# All files / utils colorOperations.ts

10.41% Statements 5/48
0% Branches 0/33
0% Functions 0/7
11.36% Lines 5/44

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
    1161x

    1x

    1x

    1x

    1x

     import chroma from 'chroma-js'

    import {
      THRESHOLD_COLORS,
      BASE_THRESHOLD_ID,
      THRESHOLD_TYPE_TEXT,
    } from '../constants/thresholds'

    import {Color} from '../types'

    const getLegibleTextColor = bgColorHex => {
      const darkText = '#292933'
      const lightText = '#ffffff'

      const [red, green, blue] = chroma(bgColorHex).rgb()
      const average = (red + green + blue) / 3
      const mediumGrey = 128

      return average > mediumGrey ? darkText : lightText
    }

    const findNearestCrossedThreshold = (colors: Color[], lastValue) => {
      const sortedColors = Array.isArray(colors)
        ? colors.sort((color1, color2) => color1.value - color2.value)
        : []
      const nearestCrossedThreshold = sortedColors
        .filter(color => lastValue >= color.value)
        .pop()

      return nearestCrossedThreshold
    }

    export const generateThresholdsListHexs = ({
      colors,
      lastValue,
      cellType = 'line',
    }: {
      colors: Color[]
      lastValue: string | number | null
      cellType: string
    }) => {
      const defaultColoring = {
        bgColor: null,
        textColor: cellType === 'table' ? '#BEC2CC' : THRESHOLD_COLORS[11].hex,
      }

      const lastValueNumber = Number(lastValue) || 0

      Iif (!colors.length) {
        return defaultColoring
      }

      // baseColor is expected in all cases
      const baseColor = colors.find(color => color.id === BASE_THRESHOLD_ID) || {
        hex: defaultColoring.textColor,
      }

      Iif (!lastValue && lastValue !== 0) {
        return {...defaultColoring, textColor: baseColor.hex}
      }

      // If the single stat is above a line graph never have a background color
      Iif (cellType === 'line-plus-single-stat') {
        return baseColor
          ? {bgColor: null, textColor: baseColor.hex}
          : defaultColoring
      }

      // When there is only a base color and it's applied to the text
      const shouldColorizeText = !!colors.find(
        color => color.type === THRESHOLD_TYPE_TEXT
      )

      Iif (shouldColorizeText && colors.length === 1 && baseColor) {
        return {bgColor: null, textColor: baseColor.hex}
      }

      Iif (shouldColorizeText && colors.length === 1) {
        return defaultColoring
      }

      // When there's multiple colors and they're applied to the text
      Iif (shouldColorizeText && colors.length > 1) {
        const nearestCrossedThreshold = findNearestCrossedThreshold(
          colors,
          lastValueNumber
        )

        return {bgColor: null, textColor: nearestCrossedThreshold.hex}
      }

      // When there is only a base color and it's applued to the background
      Iif (colors.length === 1) {
        return {
          bgColor: baseColor.hex,
          textColor: getLegibleTextColor(baseColor.hex),
        }
      }

      // When there are multiple colors and they're applied to the background
      Iif (colors.length > 1) {
        const nearestCrossedThreshold = findNearestCrossedThreshold(
          colors,
          lastValueNumber
        )

        const bgColor = nearestCrossedThreshold
          ? nearestCrossedThreshold.hex
          : baseColor.hex

        return {bgColor, textColor: getLegibleTextColor(bgColor)}
      }

      return {bgColor: null, textColor: baseColor.hex}
    }