Highlight selected progress record on graphs

src/LineChart.js

@@ -2,6 +2,19 @@ import React from 'react';
 import Chart from "react-apexcharts";
 
 export default function LineChart (props) {
+	const themeColor = getComputedStyle(
+			document.querySelector("#root > div")
+		).getPropertyValue("--primary-color")
+		.trim();
+	const overlayColor = getComputedStyle(
+			document.querySelector("#root > div")
+		).getPropertyValue("--overlay-color")
+		.trim();
+	const textColor = getComputedStyle(
+			document.querySelector("#root > div")
+		).getPropertyValue("--text-color")
+		.trim();
+
 	const options = {
 		xaxis: {
 			type: "datetime",
@@ -18,11 +31,7 @@ export default function LineChart (props) {
 			tickAmount: 5,
 		},
 		chart: {
-			foreColor:
-				getComputedStyle(
-					document.querySelector("#root > div")
-				).getPropertyValue("--text-color")
-				.trim(),
+			foreColor: textColor,
 			toolbar: {
 				show: false,
 			},
@@ -33,10 +42,7 @@ export default function LineChart (props) {
 			},
 		},
 		colors: [
-			getComputedStyle(
-				document.querySelector("#root > div")
-			).getPropertyValue("--primary-color")
-			.trim()
+			themeColor
 		],
 		tooltip: {
 			theme: "dark",
@@ -50,10 +56,7 @@ export default function LineChart (props) {
 			curve: 'smooth',
 		},
 		grid: {
-			borderColor: getComputedStyle(
-				document.querySelector("#root > div")
-			).getPropertyValue("--overlay-color")
-				.trim(),
+			borderColor: overlayColor,
 			xaxis: {
 				lines: {
 					show: true
@@ -71,6 +74,16 @@ export default function LineChart (props) {
 				},
 			},
 		}],
+		annotations: 
+			props.currentPointX ? {
+				xaxis: [
+					{
+						x: new Date(props.currentPointX).getTime(),
+						strokeDashArray: 5,
+						borderColor: themeColor,
+					}
+				],
+			} : {},
 	};
 	const series = [
 		{

src/Progress.js

@@ -72,6 +72,7 @@ export default withRouter(class Progress extends React.Component {
 			setComplete: false,
 			averagePercentage: null,
 			pageLoaded: false,
+			startTime: null,
 		};
 		
 		let isMounted = true;
@@ -163,10 +164,13 @@ export default withRouter(class Progress extends React.Component {
 					newState.attemptNumber = querySnapshot.docs.map((doc) => doc.id).indexOf(this.props.match.params.progressId) + 1;
 					if (querySnapshot.docs.length > 1)
 						newState.attemptHistory = querySnapshot.docs.filter((doc) => doc.data().duration !== null)
-							.map((doc) => ({
+							.map((doc) => {
+								if (doc.id === this.props.match.params.progressId) newState.startTime = doc.data().start_time;
+								return {
 									x: new Date(doc.data().start_time),
 									y: (doc.data().correct.length / doc.data().questions.length * 100),
-							}));
+								}
+							});
 				}));
 
 			promises.push(this.state.db.collection("completed_progress")
@@ -391,10 +395,13 @@ export default withRouter(class Progress extends React.Component {
 								newState.attemptNumber = querySnapshot.docs.map((doc) => doc.id).indexOf(this.props.match.params.progressId) + 1;
 								if (querySnapshot.docs.length > 1)
 									newState.attemptHistory = querySnapshot.docs.filter((doc) => doc.data().duration !== null)
-										.map((doc) => ({
+										.map((doc) => {
+											if (doc.id === this.props.match.params.progressId) newState.startTime = doc.data().start_time;
+											return {
 												x: new Date(doc.data().start_time),
 												y: (doc.data().correct.length / doc.data().questions.length * 100),
-										}));
+											}
+										});
 							}));
 					}
 
@@ -641,7 +648,7 @@ export default withRouter(class Progress extends React.Component {
 							{Object.keys(this.state.attemptHistory).length > 1 &&
 								<>
 									<h2 className="chart-title">History</h2>
-									<LineChart data={this.state.attemptHistory} />
+									<LineChart data={this.state.attemptHistory} currentPointX={this.state.startTime} />
 								</>
 							}