diff --git a/src/LineChart.js b/src/LineChart.js index 8eddb80..513c9d1 100644 --- a/src/LineChart.js +++ b/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 = [ { diff --git a/src/Progress.js b/src/Progress.js index 5fc976b..ec68461 100644 --- a/src/Progress.js +++ b/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) => ({ - x: new Date(doc.data().start_time), - y: (doc.data().correct.length / doc.data().questions.length * 100), - })); + .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) => ({ - x: new Date(doc.data().start_time), - y: (doc.data().correct.length / doc.data().questions.length * 100), - })); + .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 && <>