# All files / src/components EventTypeRadialChart.jsx

53.33% Statements 8/15
0% Branches 0/6
16.67% Functions 1/6
61.54% Lines 8/13

    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

    2x

    2x

    2x
    2x
    2x

    1x

    2x
    2x

     import React from 'react';
    import PropTypes from 'prop-types';

    import { RadialChart, ArcSeries, ArcLabel } from '@data-ui/radial-chart';
    import { FILTERED_EVENTS } from '../constants';

    const propTypes = {
      data: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string, // used for colors
      })).isRequired,
      pieValue: PropTypes.func,
      colorScale: PropTypes.func.isRequired,
      width: PropTypes.number.isRequired,
      height: PropTypes.number.isRequired,
      margin: PropTypes.shape({
        top: PropTypes.number,
        right: PropTypes.number,
        bottom: PropTypes.number,
        left: PropTypes.number,
      }),
    };

    const defaultProps = {
      pieValue: d => d.value,
      margin: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
    };

    const innerRadius = 0;
    const outerRadius = radius => radius * 0.9;
    const labelRadius = radius => radius * 0.5;

    function EventTypeRadialChart({
      width,
      height,
      margin,
      colorScale,
      pieValue,
      data,
    }) {
      return (
        <RadialChart
          ariaLabel="Event type fractions"
          width={width}
          height={height}
          margin={margin}
        >
          <ArcSeries
            data={data}
            pieValue={pieValue}
            innerRadius={innerRadius}
            outerRadius={outerRadius}
            labelRadius={labelRadius}
            fill={arc => colorScale(arc.data.label)}
            stroke="#fff"
            fillOpacity={0.8}
            strokeWidth={2}
            cornerRadius={4}
            label={(arc) => {
              if (arc.data && arc.data.label) {
                return arc.data.label === FILTERED_EVENTS
                ? 'filtered'
                : arc.data.label.slice(0, 10);
              }
              return null;
            }}
            labelComponent={
              <ArcLabel
                fontSize={10}
                fill="#333"
                stroke="#fff"
              />
            }
          />
        </RadialChart>
      );
    }

    EventTypeRadialChart.propTypes = propTypes;
    EventTypeRadialChart.defaultProps = defaultProps;

    export default EventTypeRadialChart;