diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts index 87acaa697..9a36383d8 100644 --- a/frontend/src/ts/controllers/chart-controller.ts +++ b/frontend/src/ts/controllers/chart-controller.ts @@ -31,7 +31,7 @@ import chartAnnotation, { type LabelOptions, } from "chartjs-plugin-annotation"; import chartTrendline from "chartjs-plugin-trendline"; - +import { get as getTypingSpeedUnit } from "../utils/typing-speed-units"; import * as ActivePage from "../states/active-page"; Chart.register( @@ -299,6 +299,9 @@ export type ActivityChartDataPoint = { x: number; y: number; amount?: number; + avgWpm?: number; + avgAcc?: number; + avgCon?: number; }; export const accountHistory = new ChartWithUpdateColors< @@ -695,6 +698,9 @@ export const accountActivity = new ChartWithUpdateColors< animation: { duration: 250 }, intersect: false, mode: "index", + filter: (tooltipItem): boolean => { + return tooltipItem.datasetIndex === 0; + }, callbacks: { title: function (tooltipItem): string { const firstItem = tooltipItem[0] as TooltipItem<"bar" | "line">; @@ -707,20 +713,22 @@ export const accountActivity = new ChartWithUpdateColors< const resultData = tooltipItem.dataset.data[ tooltipItem.dataIndex ] as ActivityChartDataPoint; - switch (tooltipItem.datasetIndex) { - case 0: - return `Time Typing: ${DateTime.secondsToString( - Math.round(resultData.y * 60), - true, - true - )}\nTests Completed: ${resultData.amount}`; - case 1: - return `Average ${Config.typingSpeedUnit}: ${Numbers.roundTo2( - resultData.y - )}`; - default: - return ""; - } + const typingSpeedUnit = getTypingSpeedUnit( + Config.typingSpeedUnit + ); + return `Time Typing: ${DateTime.secondsToString( + Math.round(resultData.y * 60), + true, + true + )}\nTests Completed: ${ + resultData.amount + }\nAverage ${Config.typingSpeedUnit.toUpperCase()}: ${Numbers.roundTo2( + typingSpeedUnit.fromWpm(resultData.avgWpm ?? 0) + )}\nAverage Accuracy: ${Numbers.roundTo2( + resultData.avgAcc ?? 0 + )}%\nAverage Consistency: ${Numbers.roundTo2( + resultData.avgCon ?? 0 + )}%`; }, label: function (): string { return ""; diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts index dc2a38bca..7e4439453 100644 --- a/frontend/src/ts/pages/account.ts +++ b/frontend/src/ts/pages/account.ts @@ -268,6 +268,8 @@ async function fillContent(): Promise { amount: number; time: number; totalWpm: number; + totalAcc: number; + totalCon: number; } >; @@ -529,6 +531,8 @@ async function fillContent(): Promise { (result.incompleteTestSeconds ?? 0) - (result.afkDuration ?? 0); dataForTimestamp.totalWpm += result.wpm; + dataForTimestamp.totalAcc += result.acc; + dataForTimestamp.totalCon += result.consistency ?? 0; } else { activityChartData[resultTimestamp] = { amount: 1, @@ -537,6 +541,8 @@ async function fillContent(): Promise { (result.incompleteTestSeconds ?? 0) - (result.afkDuration ?? 0), totalWpm: result.wpm, + totalAcc: result.acc, + totalCon: result.consistency ?? 0, }; } @@ -682,6 +688,9 @@ async function fillContent(): Promise { x: dateInt, y: dataPoint.time / 60, amount: dataPoint.amount, + avgWpm: Numbers.roundTo2(dataPoint.totalWpm / dataPoint.amount), + avgAcc: Numbers.roundTo2(dataPoint.totalAcc / dataPoint.amount), + avgCon: Numbers.roundTo2(dataPoint.totalCon / dataPoint.amount), }); activityChartData_avgWpm.push({ x: dateInt, @@ -689,7 +698,6 @@ async function fillContent(): Promise { typingSpeedUnit.fromWpm(dataPoint.totalWpm) / dataPoint.amount ), }); - // lastTimestamp = date; } const accountActivityScaleOptions = (