88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
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>
|
|
<div className="chart-label">{label}</div>
|
|
<div className="chart-display">
|
|
<div className="chart-bar"
|
|
aria-hidden="true"
|
|
style={{width: `${percentWidth}`}}></div>
|
|
<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>
|
|
<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;
|