edx-platform/lms/static/js/learner_analytics_dashboard/CircleChartLegend.jsx

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

class CircleChartLegend extends React.Component {
    constructor(props) {
        super(props);
    }

    getList() {
        const {data} = this.props;

        return data.map(({value, label, sliceIndex}, index) => {
            const swatchClass = `swatch-${sliceIndex}`;
            return (
                <li className="legend-item" key={index}>
                    <div
                        className={classNames('color-swatch', swatchClass)}
                        aria-hidden="true"
                    />
                    <span className="label">{label}</span>
                    <span className="percentage">{this.getPercentage(value)}</span>
                </li>
            );
        });
    }

    getPercentage(value) {
        const num = value * 100;

        return `${num}%`;
    }

    renderList() {
        return (
            <ul className="legend-list">
                {this.getList()}
            </ul>
        );
    }

    render() {
        return (
            <div className="legend">
                {this.renderList()}
            </div>
        );
    }
}

CircleChartLegend.propTypes = {
    data: PropTypes.array.isRequired
}

export default CircleChartLegend;