# All files / src/components EventTypeLegend.jsx

50% Statements 6/12
0% Branches 0/6
16.67% Functions 1/6
50% Lines 6/12

    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

    2x

    2x

    2x

    1x

    2x
    2x

     /* eslint jsx-a11y/no-static-element-interactions: 0 */
    import { css, StyleSheet } from 'aphrodite';
    import React from 'react';
    import PropTypes from 'prop-types';
    import { LegendOrdinal } from '@vx/legend';

    import { FILTERED_EVENTS } from '../constants';

    const styles = StyleSheet.create({
      legendItem: {
        position: 'relative',
        cursor: 'pointer',
        ':before': {
          content: '"✓"',
          color: '#fff',
          position: 'absolute',
          paddingLeft: 2,
        },
      },
    });

    const propTypes = {
      scale: PropTypes.func.isRequired,
      labelFormat: PropTypes.func,
      onClick: PropTypes.func,
      hiddenEventTypes: PropTypes.objectOf(PropTypes.bool),
    };

    const defaultProps = {
      labelFormat: label => label,
      onClick: () => {},
      hiddenEventTypes: {
        FILTERED_EVENTS: true,
      },
    };

    function EventTypeLegend({
      scale,
      labelFormat,
      hiddenEventTypes,
      onClick,
    }) {
      return (
        <LegendOrdinal
          direction="column"
          scale={scale}
          shape={({ fill, width, height, label }) => {
            const value = label.datum;
            const isHidden = Boolean(hiddenEventTypes[value]);
            return value === FILTERED_EVENTS ? (
              <svg width={width} height={height}>
                <rect
                  width={width}
                  height={height}
                  fill={fill}
                />
              </svg>
            ) : (
              <div
                className={css(styles.legendItem)}
                onClick={() => { onClick(value); }}
                style={{
                  width,
                  height,
                  background: isHidden ? 'transparent' : fill,
                  boxShadow: isHidden ? `inset 0 0 0 2px ${fill}` : 'none',
                }}
              />
            );
          }}
          fill={({ datum }) => scale(datum)}
          labelFormat={labelFormat}
        />
      );
    }

    EventTypeLegend.propTypes = propTypes;
    EventTypeLegend.defaultProps = defaultProps;

    export default EventTypeLegend;