diff --git a/frontend/src/ts/pages/about.ts b/frontend/src/ts/pages/about.ts index 162e3b825..587372b2c 100644 --- a/frontend/src/ts/pages/about.ts +++ b/frontend/src/ts/pages/about.ts @@ -14,56 +14,70 @@ function reset(): void { ChartController.globalSpeedHistogram.updateColors(); } -let speedStatsResponseData: any | undefined; -let typingStatsResponseData: any | undefined; +interface HistogramData { + [key: string]: number; +} + +interface TypingStatsData { + type: string; + timeTyping: number; + testsCompleted: number; + testsStarted: number; +} + +let speedHistogramResponseData: HistogramData | undefined; +let typingStatsResponseData: TypingStatsData | undefined; function updateStatsAndHistogram(): void { - if (!speedStatsResponseData && !typingStatsResponseData) { - return; + if (speedHistogramResponseData) { + ChartController.globalSpeedHistogram.updateColors(); + const bucketedSpeedStats = getHistogramDataBucketed( + speedHistogramResponseData + ); + ChartController.globalSpeedHistogram.data.labels = + bucketedSpeedStats.labels; + ChartController.globalSpeedHistogram.data.datasets[0].data = + bucketedSpeedStats.data; } - ChartController.globalSpeedHistogram.updateColors(); - const bucketedSpeedStats = getHistogramDataBucketed(speedStatsResponseData); - ChartController.globalSpeedHistogram.data.labels = bucketedSpeedStats.labels; - ChartController.globalSpeedHistogram.data.datasets[0].data = - bucketedSpeedStats.data; + if (typingStatsResponseData) { + const secondsRounded = Math.round(typingStatsResponseData.timeTyping); - const secondsRounded = Math.round(typingStatsResponseData.timeTyping); + const timeTypingDuration = intervalToDuration({ + start: 0, + end: secondsRounded * 1000, + }); - const timeTypingDuration = intervalToDuration({ - start: 0, - end: secondsRounded * 1000, - }); + $(".pageAbout #totalTimeTypingStat .val").text( + timeTypingDuration.years?.toString() ?? "" + ); + $(".pageAbout #totalTimeTypingStat .valSmall").text("years"); + $(".pageAbout #totalTimeTypingStat").attr( + "aria-label", + Math.round(secondsRounded / 3600) + " hours" + ); - $(".pageAbout #totalTimeTypingStat .val").text( - timeTypingDuration.years?.toString() ?? "" - ); - $(".pageAbout #totalTimeTypingStat .valSmall").text("years"); - $(".pageAbout #totalTimeTypingStat").attr( - "aria-label", - Math.round(secondsRounded / 3600) + " hours" - ); + $(".pageAbout #totalStartedTestsStat .val").text( + Math.round(typingStatsResponseData.testsStarted / 1000000) + ); + $(".pageAbout #totalStartedTestsStat .valSmall").text("million"); + $(".pageAbout #totalStartedTestsStat").attr( + "aria-label", + typingStatsResponseData.testsStarted + " tests" + ); - $(".pageAbout #totalStartedTestsStat .val").text( - Math.round(typingStatsResponseData.testsStarted / 1000000) - ); - $(".pageAbout #totalStartedTestsStat .valSmall").text("million"); - $(".pageAbout #totalStartedTestsStat").attr( - "aria-label", - typingStatsResponseData.testsStarted + " tests" - ); - - $(".pageAbout #totalCompletedTestsStat .val").text( - Math.round(typingStatsResponseData.testsCompleted / 1000000) - ); - $(".pageAbout #totalCompletedTestsStat .valSmall").text("million"); - $(".pageAbout #totalCompletedTestsStat").attr( - "aria-label", - typingStatsResponseData.testsCompleted + " tests" - ); + $(".pageAbout #totalCompletedTestsStat .val").text( + Math.round(typingStatsResponseData.testsCompleted / 1000000) + ); + $(".pageAbout #totalCompletedTestsStat .valSmall").text("million"); + $(".pageAbout #totalCompletedTestsStat").attr( + "aria-label", + typingStatsResponseData.testsCompleted + " tests" + ); + } } async function getStatsAndHistogramData(): Promise { - if (speedStatsResponseData && typingStatsResponseData) { + if (speedHistogramResponseData && typingStatsResponseData) { return; } @@ -78,7 +92,7 @@ async function getStatsAndHistogramData(): Promise { mode2: "60", }); if (speedStats.status >= 200 && speedStats.status < 300) { - speedStatsResponseData = speedStats.data; + speedHistogramResponseData = speedStats.data; } else { Notifications.add( `Failed to get global speed stats for histogram: ${speedStats.message}`,