Function DonutChart

src/components/DonutChart/DonutChart.react.js:16–67

({
  segments = [],
  diameter = 200,
  label = '',
  isMonochrome = false,
  printPercentage = false,
})

const MONOCHROME_COLORS = ['#3b2c48', '#e0e0ea'];

const DonutChart = ({
  segments = [],
  diameter = 200,
  label = '',
  isMonochrome = false,
  printPercentage = false,
}) => {
  const centerX = diameter / 2;
  const centerY = centerX;
  const radius = centerX * 0.9;

  let lastX = centerX;
  let lastY = centerY - radius;
  let alpha = Math.PI / 2;

  let sum = 0.0;
  for (let i = 0; i < segments.length; ++i) {
    sum += segments[i];
  }

  const paths = [];
  for (let i = 0; i < segments.length; ++i) {
    const arc = (segments[i] / sum) * 2 * Math.PI;
    let angle = alpha - Math.min(arc, Math.PI);
    let endX = radius * Math.cos(angle) + centerX;
    let endY = -radius * Math.sin(angle) + centerY;

    let path = ['M', centerY, centerY, 'L', lastX, lastY, 'A', radius, radius, 0, 0, 1, endX, endY];
    if (arc > Math.PI) {
      angle = alpha - arc;
      endX = radius * Math.cos(angle) + centerX;
      endY = -radius * Math.sin(angle) + centerY;
      path = path.concat(['A', radius, radius, 0, 0, 1, endX, endY]);
    }
    path.push('Z');

    paths.push(
      <path
        className={styles.path}
        d={path.join(' ')}
        style={{
          fill: isMonochrome ? MONOCHROME_COLORS[i % 2] : CHART_COLORS[i],
          transformOrigin: `${centerY}px ${centerX}px 0px`,
        }}
        key={`segment${i}`}
      />
    );

    lastX = endX;
    lastY = endY;
    alpha = angle;
  }

  return (
    <svg style={{ width: diameter, height: diameter }}>