From 91a73c5a9a00ba3e6d9c638e715b251aa07730f4 Mon Sep 17 00:00:00 2001
From: Miodec <bartnikjack@gmail.com>
Date: Tue, 30 Aug 2022 23:19:42 +0200
Subject: [PATCH] showing pbs on account history chart

---
 frontend/src/ts/controllers/chart-controller.ts | 17 +++++++++++++++--
 frontend/src/ts/pages/account.ts                |  1 +
 frontend/src/ts/types/types.d.ts                |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 67c40c193..857428483 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -380,6 +380,8 @@ export const accountHistory: ChartWithUpdateColors<
               "\n" +
               `language: ${resultData.language}` +
               "\n\n" +
+              `personal best: ${resultData.isPb ? "yes" : "no"}` +
+              "\n\n" +
               `date: ${format(
                 new Date(resultData.timestamp),
                 "dd MMM yyyy HH:mm"
@@ -698,6 +700,7 @@ export async function updateColors<
   const subcolor = await ThemeColors.get("sub");
   const maincolor = await ThemeColors.get("main");
   const errorcolor = await ThemeColors.get("error");
+  const textcolor = await ThemeColors.get("text");
 
   if (
     chart.data.datasets.every(
@@ -715,7 +718,12 @@ export async function updateColors<
     return;
   }
 
-  chart.data.datasets[0].borderColor = maincolor;
+  //@ts-ignore
+  chart.data.datasets[0].borderColor = (ctx): string => {
+    const isPb = ctx.raw?.["isPb"];
+    const color = isPb ? textcolor : maincolor;
+    return color;
+  };
   chart.data.datasets[1].borderColor = subcolor;
   if (chart.data.datasets[2]) {
     chart.data.datasets[2].borderColor = errorcolor;
@@ -725,7 +733,12 @@ export async function updateColors<
     if (chart.config.type === "line") {
       (
         chart.data.datasets as ChartDataset<"line", TData>[]
-      )[0].pointBackgroundColor = maincolor;
+      )[0].pointBackgroundColor = (ctx): string => {
+        //@ts-ignore
+        const isPb = ctx.raw?.["isPb"];
+        const color = isPb ? textcolor : maincolor;
+        return color;
+      };
     } else if (chart.config.type === "bar") {
       chart.data.datasets[0].backgroundColor = maincolor;
     }
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index fd82a131a..00f5b6faf 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -600,6 +600,7 @@ function fillContent(): void {
         raw: Config.alwaysShowCPM
           ? Misc.roundTo2(result.rawWpm * 5)
           : result.rawWpm,
+        isPb: result.isPb ?? false,
       });
 
       wpmChartData.push(result.wpm);
diff --git a/frontend/src/ts/types/types.d.ts b/frontend/src/ts/types/types.d.ts
index 6ae870c2f..cc01cd153 100644
--- a/frontend/src/ts/types/types.d.ts
+++ b/frontend/src/ts/types/types.d.ts
@@ -147,6 +147,7 @@ declare namespace MonkeyTypes {
     timestamp: number;
     difficulty: string;
     raw: number;
+    isPb: boolean;
   }
 
   interface AccChartData {