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"></div>
          <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;