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

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

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

    getComparisons() {
        const experiments = window.experimentVariables || {};
        const {content_authored, profileImages} = this.props;
        const content_average = experiments.learnerAnalyticsDiscussionAverage || 4;
        let average_percent = 1;
        let authored_percent = 0;

        if (content_average > content_authored) {
            average_percent = 1;
            authored_percent = content_authored / content_average;
        } else {
            authored_percent = 1;
            average_percent = content_average / content_authored;
        }

        return (
            <div className="chart-wrapper">
                {this.getCountChart(content_authored, authored_percent, 'You', profileImages.medium)}
                {this.getCountChart(content_average, average_percent, 'Average graduate')}
            </div>
        );
    }

    getCountChart(count, percent, label, img = false) {
        var percentWidth;
        if (percent === 0) {
            percentWidth = '2px';
        } else {
            percentWidth = 'calc((100% - 40px) * ' + percent + ')';
        }
        return (
            <div className="count-chart">
                <div
                    className={classNames(
                        'chart-icon',
                        {'fa fa-graduation-cap': !img}
                    )}
                    style={{backgroundImage: !!img ? `url(${img})` : 'none'}}
                    aria-hidden="true"
                />
                <div className="chart-label">{label}</div>
                <div className="chart-display">
                    <div
                        className="chart-bar"
                        aria-hidden="true"
                        style={{width: `${percentWidth}`}}
                    />
                    <span className="user-count">{count}</span>
                </div>
            </div>
        );
    }

    render() {
        const {content_authored, thread_votes} = this.props;

        return (
            <div className="discussions-wrapper">
                <h2 className="group-heading">Discussions</h2>
                <div className="comparison-charts">
                    <h3 className="section-heading">Posts, comments, and replies</h3>
                    {this.getComparisons()}
                </div>
                <div className="post-counts">
                    <div className="votes-wrapper">
                        <span className="fa fa-plus-square-o count-icon" aria-hidden="true" />
                        <span className="user-count">{thread_votes}</span>
                        <p className="label">Votes on your posts, comments, and replies</p>
                    </div>
                </div>
            </div>
        );
    }
}

Discussions.propTypes = {
    content_authored: PropTypes.number.isRequired,
    thread_votes: PropTypes.number.isRequired
};

export default Discussions;