Add charts showing historic test scores

src/History.js

@@ -3,8 +3,10 @@ import { HomeRounded as HomeRoundedIcon, QuestionAnswerRounded as QuestionAnswer
 import NavBar from "./NavBar";
 import Button from "./Button";
 import Footer from "./Footer";
+import LineChart from "./LineChart";
 import { Link } from 'react-router-dom';
 import "./css/History.css";
+import "./css/Chart.css";
 
 export default class History extends Component {
 	constructor(props) {
@@ -37,14 +39,26 @@ export default class History extends Component {
 
 	componentDidMount() {
 		document.title = "History | Parandum";
+
+		const userSets = this.state.db
+			.collection("sets")
+			.where("owner", "==", this.state.user.uid)
+			.orderBy("title", "asc")
+			.get();
 		
 		this.state.db.collection("progress")
 			.where("uid", "==", this.state.user.uid)
 			.orderBy("start_time", "desc")
 			.get()
-			.then((querySnapshot) => {
+			.then(async (querySnapshot) => {
 				let complete = [];
 				let incomplete = [];
+				let totalCorrect = 0;
+				let totalIncorrect = 0;
+				let totalMarks = 0;
+				let totalTime = 0;
+				let totalPercentage = 0;
+				let userMarkHistory = [];
 
 				querySnapshot.docs.map((doc) => {
 					const data = doc.data();
@@ -52,14 +66,24 @@ export default class History extends Component {
 						id: doc.id,
 						setTitle: data.set_title,
 						switchLanguage: data.switch_language,
-						percentage: (data.progress / data.questions.length * 100).toFixed(2),
-						mark: (data.progress > 0 ? data.correct.length / data.progress * 100 : 0).toFixed(2),
+						percentageProgress: (data.progress / data.questions.length * 100).toFixed(2),
+						grade: (data.progress > 0 ? data.correct.length / data.progress * 100 : 0).toFixed(2),
 						mode: data.mode,
 						correct: data.correct.length,
 						progress: data.progress,
 					};
 
+					totalCorrect += data.correct.length;
+					totalIncorrect += data.incorrect.length;
+					totalMarks += data.progress;
+					
 					if (data.duration !== null) {
+						totalPercentage += (data.correct.length / data.questions.length * 100);
+						totalTime += data.duration;
+						userMarkHistory.push({
+							x: new Date(data.start_time),
+							y: (data.correct.length / data.questions.length * 100),
+						});
 						return complete.push(pushData);
 					} else {
 						return incomplete.push(pushData);
@@ -69,6 +93,14 @@ export default class History extends Component {
 				this.setState({
 					progressHistoryComplete: complete,
 					progressHistoryIncomplete: incomplete,
+					totalCorrect: totalCorrect,
+					totalIncorrect: totalIncorrect,
+					totalMarks: totalMarks,
+					totalTime: totalTime,
+					totalPercentage: totalPercentage,
+					totalCompleteTests: complete.length,
+					userMarkHistory: userMarkHistory,
+					personalSetsCount: (await userSets).docs.length,
 				});
 			}).catch((error) => {
 				console.log(`Couldn't retrieve progress history: ${error}`);
@@ -93,6 +125,18 @@ export default class History extends Component {
 			});
 	}
 
+	msToTime = (time) => {
+		const localeData = {
+			minimumIntegerDigits: 2,
+			useGrouping: false,
+		};
+		const seconds = Math.floor((time / 1000) % 60).toLocaleString("en-GB", localeData);
+		const minutes = Math.floor((time / 1000 / 60) % 60).toLocaleString("en-GB", localeData);
+		const hours = Math.floor(time / 1000 / 60 / 60).toLocaleString("en-GB", localeData);
+
+		return `${hours}:${minutes}:${seconds}`;
+	}
+
 	render() {
 		return (
 			<div>
@@ -100,97 +144,132 @@ export default class History extends Component {
 				<main>
 					<h1>History</h1>
 
-					{
-						this.state.progressHistoryComplete.length > 0 || this.state.progressHistoryIncomplete.length > 0
-						?
-						<>
-						{
-							this.state.progressHistoryIncomplete.length > 0 &&
-							<div className="progress-history-container">
-								<h2>Incomplete</h2>
-								<div>
-									<h3>Set</h3>
-									<h3>Progress</h3>
-									<h3>Mark</h3>
-									<h3>Grade</h3>
-									<h3>Mode</h3>
-								</div>
-								{
-									this.state.progressHistoryIncomplete.map((progressItem) =>
-										<div key={progressItem.id}>
-											<Link
-												to={`/progress/${progressItem.id}`}
-											>
-												{progressItem.setTitle}
-												{
-													progressItem.switchLanguage &&
-													<SwapHorizRoundedIcon />
-												}
-											</Link>
-											<p>{progressItem.percentage}%</p>
-											<p>{progressItem.correct}/{progressItem.progress}</p>
-											<p>{progressItem.mark}%</p>
-											<p>
-												{
-													progressItem.mode === "questions"
-													?
-													<QuestionAnswerRoundedIcon />
-													:
-													<PeopleRoundedIcon />
-												}
-											</p>
-											<Button
-												className="button--no-background"
-												onClick={() => this.deleteProgress(progressItem.id)}
-												icon={<DeleteRoundedIcon />}
-											></Button>
-										</div>
-									)
-								}
+					<div className="history-sections">
+						<div className="historical-user-stats-container">
+							<div className="stat-row stat-row--inline">
+								<h1>{this.state.totalCorrect}</h1>
+								<p>correct</p>
 							</div>
+							<div className="stat-row stat-row--inline">
+								<h1>{this.state.totalIncorrect}</h1>
+								<p>incorrect</p>
+							</div>
+							<div className="stat-row stat-row--inline">
+								<h1>{`${(this.state.totalPercentage / this.state.totalCompleteTests).toFixed(2)}%`}</h1>
+								<p>average</p>
+							</div>
+							<div className="stat-row stat-row--inline">
+								<h1>{this.msToTime(this.state.totalTime)}</h1>
+								<p>total time</p>
+							</div>
+							<div className="stat-row stat-row--inline">
+								<h1>{this.state.totalCompleteTests}</h1>
+								<p>tests completed</p>
+							</div>
+							<div className="stat-row stat-row--inline">
+								<h1>{this.state.personalSetsCount}</h1>
+								<p>personal set{ this.state.personalSetsCount > 1 && "s"}</p>
+							</div>
+						</div>
+
+						{ this.state.userMarkHistory && this.state.userMarkHistory.length > 1 &&
+							<LineChart data={this.state.userMarkHistory} />
 						}
+
 						{
-							this.state.progressHistoryComplete.length > 0 &&
-							<div className="progress-history-container">
-								<h2>Completed</h2>
+							this.state.progressHistoryComplete.length > 0 || this.state.progressHistoryIncomplete.length > 0
+								?
 								<div>
-									<h3>Set</h3>
-									<h3>Progress</h3>
-									<h3>Mark</h3>
-									<h3>Grade</h3>
-									<h3>Mode</h3>
-								</div>
-								{
-									this.state.progressHistoryComplete.map((progressItem) =>
-										<div key={progressItem.id}>
-											<Link
-												to={`/progress/${progressItem.id}`}
-											>
-												{progressItem.setTitle}
-												{
-													progressItem.switchLanguage &&
-													<SwapHorizRoundedIcon />
-												}
-											</Link>
-											<p>{progressItem.percentage}%</p>
-											<p>{progressItem.correct}/{progressItem.progress}</p>
-											<p>{progressItem.mark}%</p>
+									{
+										this.state.progressHistoryIncomplete.length > 0 &&
+										<div className="progress-history-container">
+											<h2>Incomplete</h2>
+											<div>
+												<h3>Set</h3>
+												<h3>Progress</h3>
+												<h3>Mark</h3>
+												<h3>Grade</h3>
+												<h3>Mode</h3>
+											</div>
 											{
-												progressItem.mode === "questions"
-												?
-												<QuestionAnswerRoundedIcon />
-												:
-												<PeopleRoundedIcon />
+												this.state.progressHistoryIncomplete.map((progressItem) =>
+													<div key={progressItem.id}>
+														<Link
+															to={`/progress/${progressItem.id}`}
+														>
+															{progressItem.setTitle}
+															{
+																progressItem.switchLanguage &&
+																<SwapHorizRoundedIcon />
+															}
+														</Link>
+														<p>{progressItem.percentageProgress}%</p>
+														<p>{progressItem.correct}/{progressItem.progress}</p>
+														<p>{progressItem.grade}%</p>
+														<p>
+															{
+																progressItem.mode === "questions"
+																?
+																<QuestionAnswerRoundedIcon />
+																:
+																<PeopleRoundedIcon />
+															}
+														</p>
+														<Button
+															className="button--no-background"
+															onClick={() => this.deleteProgress(progressItem.id)}
+															icon={<DeleteRoundedIcon />}
+														></Button>
+													</div>
+												)
 											}
 										</div>
-									)	
-								}
-							</div>
+									}
+									{
+										this.state.progressHistoryComplete.length > 0 &&
+										<div className="progress-history-container">
+											<h2>Completed</h2>
+											<div>
+												<h3>Set</h3>
+												<h3>Progress</h3>
+												<h3>Mark</h3>
+												<h3>Grade</h3>
+												<h3>Mode</h3>
+											</div>
+											{
+												this.state.progressHistoryComplete.map((progressItem) =>
+													<div key={progressItem.id}>
+														<Link
+															to={`/progress/${progressItem.id}`}
+														>
+															{progressItem.setTitle}
+															{
+																progressItem.switchLanguage &&
+																<SwapHorizRoundedIcon />
+															}
+														</Link>
+														<p>{progressItem.percentageProgress}%</p>
+														<p>{progressItem.correct}/{progressItem.progress}</p>
+														<p>{progressItem.grade}%</p>
+														{
+															progressItem.mode === "questions"
+															?
+															<QuestionAnswerRoundedIcon />
+															:
+															<PeopleRoundedIcon />
+														}
+													</div>
+												)	
+											}
+										</div>
+									}
+								</div>
+								:
+								<div>
+									<p>You haven't done any tests yet.</p>
+								</div>
 						}
-						</>
-						:
-						<p>You haven't done any tests yet.</p>
-					}
+					</div>
 				</main>
 				<Footer />
 			</div>