import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { rgb } from 'd3-color';

const getAngle = (group) => ((group.startAngle + group.endAngle) / 2);

const Groups = ({
    componentId,
    chords,
    color,
    arc,
    outerRadius,
    setMouseOverGroup,
    groupLabels,
    labelColors,
    disableHover,
}) => (
    <g className="groups">
        {chords.groups.map((group, groupIndex) => (
            <g
                key={groupIndex}
                onMouseOver={!disableHover ? () => setMouseOverGroup(group.index) : null}
                onMouseOut={!disableHover ? () => setMouseOverGroup(null) : null}
            >
                <path
                    id={`component${componentId}-group${groupIndex}`}
                    fill={`${color(groupIndex)}`}
                    stroke={`${rgb(color(groupIndex)).darker()}`} d={arc(group)}
                />

                <text
                    dy=".35em"
                    transform={`rotate(${getAngle(group) * 180 / Math.PI - 90 }) translate(${outerRadius + 10}) ${getAngle(group) > Math.PI ? "rotate(180)" : ""}`}
                    fill={labelColors.length === 1 ? labelColors[0] : labelColors[groupIndex]}
                    style={{textAnchor: (group.startAngle + group.endAngle) / 2 > Math.PI ? "end" : null}}
                >
                    {groupLabels[groupIndex]}
                </text>

                {/*<text x="6" dy="15" fill={labelColors.length === 1 ? labelColors[0] : labelColors[groupIndex]}>
                 <textPath href={`#component${componentId}-group${groupIndex}`}>
                 {groupLabels[groupIndex]}
                 </textPath>
                 </text>*/}
            </g>
        ))}
    </g>
);

Groups.propTypes = {
    componentId: PropTypes.number.isRequired,
    chords: PropTypes.array.isRequired,
    color: PropTypes.func.isRequired,
    arc: PropTypes.func.isRequired,
    setMouseOverGroup: PropTypes.func.isRequired,
    groupLabels: PropTypes.array,
    labelColors: PropTypes.array,
    disableHover: PropTypes.bool,
};

export default Groups;
@@ -1407,305 +1407,8 @@
 ext%3E
-%0A%0A                %7B/*%3Ctext x=%226%22 dy=%2215%22 fill=%7BlabelColors.length === 1 ? labelColors%5B0%5D : labelColors%5BgroupIndex%5D%7D%3E%0A                 %3CtextPath href=%7B%60#component$%7BcomponentId%7D-group$%7BgroupIndex%7D%60%7D%3E%0A                 %7BgroupLabels%5BgroupIndex%5D%7D%0A                 %3C/textPath%3E%0A                 %3C/text%3E*/%7D
 %0A   

Remove comment