impr(account page): add average accuracy and average consistency to the activity graph

Author: Miodec

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 "";

frontend/src/ts/pages/account.ts

@@ -268,6 +268,8 @@ async function fillContent(): Promise<void> {
       amount: number;
       time: number;
       totalWpm: number;
+      totalAcc: number;
+      totalCon: number;
     }
   >;
 
@@ -529,6 +531,8 @@ async function fillContent(): Promise<void> {
         (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<void> {
           (result.incompleteTestSeconds ?? 0) -
           (result.afkDuration ?? 0),
         totalWpm: result.wpm,
+        totalAcc: result.acc,
+        totalCon: result.consistency ?? 0,
       };
     }
 
@@ -682,14 +688,16 @@ async function fillContent(): Promise<void> {
       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,
       y: Numbers.roundTo2(
         typingSpeedUnit.fromWpm(dataPoint.totalWpm) / dataPoint.amount
       ),
     });
-    // lastTimestamp = date;
   }
 
   const accountActivityScaleOptions = (