From 31ebbc2d65b8455c4c1a16a3a6fa4b53cfd1f75e Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Sun, 3 Oct 2021 18:03:06 +0100
Subject: [PATCH] Add set name label to graph on history page

---
 src/History.js   | 6 +++++-
 src/LineChart.js | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/History.js b/src/History.js
index af0ae39..62bcffd 100644
--- a/src/History.js
+++ b/src/History.js
@@ -31,6 +31,7 @@ export default class History extends Component {
 			totalPercentage: 0,
 			totalCompleteTests: 0,
 			userMarkHistory: [],
+			userSetHistory: [],
 			personalSetsCount: 0,
 		};
 
@@ -67,6 +68,7 @@ export default class History extends Component {
 			let totalTime = 0;
 			let totalPercentage = 0;
 			let userMarkHistory = [];
+			let userSetHistory = [];
 			
 			querySnapshot.docs.map((doc) => {
 				const data = doc.data();
@@ -92,6 +94,7 @@ export default class History extends Component {
 						x: new Date(data.start_time),
 						y: (data.correct.length / data.questions.length * 100),
 					});
+					userSetHistory.push(data.set_title);
 					return complete.push(pushData);
 				} else {
 					return incomplete.push(pushData);
@@ -108,6 +111,7 @@ export default class History extends Component {
 				totalPercentage: totalPercentage,
 				totalCompleteTests: complete.length,
 				userMarkHistory: userMarkHistory,
+				userSetHistory: userSetHistory,
 				personalSetsCount: (await userSets).docs.length,
 			});
 			this.props.page.load();
@@ -186,7 +190,7 @@ export default class History extends Component {
 						</div>
 
 						{ this.state.userMarkHistory && this.state.userMarkHistory.length > 1 &&
-							<LineChart data={this.state.userMarkHistory} />
+							<LineChart data={this.state.userMarkHistory} sets={this.state.userSetHistory} />
 						}
 
 						{
diff --git a/src/LineChart.js b/src/LineChart.js
index 3c0d2be..2813b02 100644
--- a/src/LineChart.js
+++ b/src/LineChart.js
@@ -38,7 +38,8 @@ export default function LineChart (props) {
 		tooltip: {
 			theme: "dark",
 			x: {
-				show: false,
+				show: typeof props.sets !== "undefined",
+				formatter: (value, opt) => typeof props.sets !== "undefined" ? props.sets[opt.dataPointIndex] : null,
 			},
 		},
 		stroke: {