# All files / src/components doughnut-chart.tsx

100% Statements 7/7
87.5% Branches 7/8
100% Functions 1/1
100% Lines 7/7

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

    8x

    3x
    2x
    2x

    1x
    1x

    3x

     import { type FC, type PropsWithChildren } from 'react';

    import '../styles/components/doughnut-chart.scss';

    type Props = {
      /**
       * The bubble size (default is medium)
       */
      size?: 'small' | 'medium' | 'large';
      /**
       * The chart colour
       */
      colorClass?: string;
      /**
       * The background chart colour
       */
      bgColorClass?: string;
      /**
       * The ratio to be displayed in percent.
       */
      percent?: number;
    };

    const DoughnutChart: FC<PropsWithChildren<Props>> = ({
      size = 'medium',
      percent = 0,
      bgColorClass = 'colour-platinum',
      colorClass = 'colour-sea-blue',
      children,
    }) => {
      let leftTransformerDegree;
      let rightTransformerDegree;
      if (percent >= 50) {
        rightTransformerDegree = '180deg';
        leftTransformerDegree = `${(percent - 50) * 3.6}deg`;
      } else {
        rightTransformerDegree = `${percent * 3.6}deg`;
        leftTransformerDegree = '0deg';
      }
      return (
        <span className={`doughnut-chart--${size} ${bgColorClass}`}>
          <span className={`doughnut-chart--${size}__left-wrap`}>
            <span
              className={`doughnut-chart--${size}__left-wrap__loader ${colorClass}`}
              style={{
                transform: `rotate(${leftTransformerDegree})`,
              }}
            />
          </span>
          <span className={`doughnut-chart--${size}__right-wrap`}>
            <span
              className={`doughnut-chart--${size}__right-wrap__loader ${colorClass}`}
              style={{
                transform: `rotate(${rightTransformerDegree})`,
              }}
            />
          </span>
          <span className={`doughnut-chart--${size}__inner-circle`} style={{}}>
            {children || <span>{`${percent}%`}</span>}
          </span>
        </span>
      );
    };

    export default DoughnutChart;