impr(account page): add button which hides results on the account graph

when results are hidden, accuracy scale will be maximised to fit the graph height
monkeytypegame · Nov 6, 2023 · daaab01 · daaab01
1 parent 04077fa
commit daaab01
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 31 deletions.
diff --git a/backend/src/api/schemas/config-schema.ts b/backend/src/api/schemas/config-schema.ts
@@ -102,7 +102,12 @@ const CONFIG_SCHEMA = joi.object({
   paceCaretCustomSpeed: joi.number().min(0),
   repeatedPace: joi.boolean(),
   pageWidth: joi.string().valid("100", "125", "150", "200", "max"),
-  accountChart: joi.array().items(joi.string().valid("on", "off")).optional(),
+  accountChart: joi
+    .array()
+    .items(joi.string().valid("on", "off"))
+    .min(3)
+    .max(4)
+    .optional(), //replace min max with length 4 after a while
   minWpm: joi.string().valid("off", "custom"),
   minWpmCustomSpeed: joi.number().min(0),
   highlightMode: joi

diff --git a/frontend/src/styles/account.scss b/frontend/src/styles/account.scss
@@ -233,7 +233,8 @@
         color: var(--sub-color);
         margin-top: 1rem;
         display: grid;
-        grid-template-columns: auto 400px;
+        grid-template-columns: auto 500px;
+        gap: 1rem;
         align-items: center;
         .text {
           height: min-content;
@@ -242,7 +243,7 @@
           font-size: 0.75rem;
           display: grid;
           gap: 0.5rem;
-          grid-template-columns: 1fr 1fr 1fr;
+          grid-template-columns: 1fr 1fr 1fr 1fr;
         }
       }
       .chart {

diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
@@ -164,6 +164,11 @@
     grid-auto-flow: unset;
     justify-items: center;
   }
+  .pageAccount {
+    .group.chart .below {
+      grid-template-columns: 1fr;
+    }
+  }
 }
 
 //900px
@@ -410,13 +415,6 @@
     }
   }
 
-  .pageAccount {
-    .group.chart .below {
-      grid-template-columns: 1fr;
-      gap: 0.5rem;
-    }
-  }
-
   #customTextPopupWrapper #customTextPopup {
     .buttonsTop {
       grid-template-columns: 1fr;

diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
@@ -303,13 +303,32 @@ function setAccountChart(
     return false;
   }
 
+  if (array.length !== 4) {
+    array = ["on", "on", "on", "on"];
+  }
+
   config.accountChart = array;
   saveToLocalStorage("accountChart", nosave);
   ConfigEvent.dispatch("accountChart", config.accountChart);
 
   return true;
 }
 
+export function setAccountChartResults(
+  value: boolean,
+  nosave?: boolean
+): boolean {
+  if (!isConfigValueValid("account chart results", value, ["boolean"])) {
+    return false;
+  }
+
+  config.accountChart[0] = value ? "on" : "off";
+  saveToLocalStorage("accountChart", nosave);
+  ConfigEvent.dispatch("accountChart", config.accountChart);
+
+  return true;
+}
+
 export function setAccountChartAccuracy(
   value: boolean,
   nosave?: boolean
@@ -318,7 +337,7 @@ export function setAccountChartAccuracy(
     return false;
   }
 
-  config.accountChart[0] = value ? "on" : "off";
+  config.accountChart[1] = value ? "on" : "off";
   saveToLocalStorage("accountChart", nosave);
   ConfigEvent.dispatch("accountChart", config.accountChart);
 
@@ -333,7 +352,7 @@ export function setAccountChartAvg10(
     return false;
   }
 
-  config.accountChart[1] = value ? "on" : "off";
+  config.accountChart[2] = value ? "on" : "off";
   saveToLocalStorage("accountChart", nosave);
   ConfigEvent.dispatch("accountChart", config.accountChart);
 
@@ -348,7 +367,7 @@ export function setAccountChartAvg100(
     return false;
   }
 
-  config.accountChart[2] = value ? "on" : "off";
+  config.accountChart[3] = value ? "on" : "off";
   saveToLocalStorage("accountChart", nosave);
   ConfigEvent.dispatch("accountChart", config.accountChart);
 

diff --git a/frontend/src/ts/constants/default-config.ts b/frontend/src/ts/constants/default-config.ts
@@ -68,7 +68,7 @@ export default <MonkeyTypes.Config>{
   paceCaretCustomSpeed: 100,
   repeatedPace: true,
   pageWidth: "125",
-  accountChart: ["on", "on", "on"],
+  accountChart: ["on", "on", "on", "on"],
   minWpm: "off",
   minWpmCustomSpeed: 100,
   highlightMode: "letter",

diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
@@ -975,11 +975,13 @@ export const miniResult: ChartWithUpdateColors<
 );
 
 type ButtonBelowChart =
+  | ".toggleResultsOnChart"
   | ".toggleAccuracyOnChart"
   | ".toggleAverage10OnChart"
   | ".toggleAverage100OnChart";
 
 export function updateAccountChartButtons(): void {
+  updateResults(false);
   updateAccuracy(false);
   updateAverage10(false);
   updateAverage100(false);
@@ -994,42 +996,78 @@ function updateAccountChartButton(
     : $(`.pageAccount ${className}`).removeClass("active");
 }
 
+function updateResults(updateChart = true): void {
+  const resultsOn = Config.accountChart[0] === "on";
+  updateAccountChartButton(resultsOn, ".toggleResultsOnChart");
+
+  accountHistory.data.datasets[0].hidden = !resultsOn;
+  accountHistory.data.datasets[3].hidden = !resultsOn;
+  accountHistory.data.datasets[5].hidden = !resultsOn;
+  accountHistory.data.datasets[1].hidden = !resultsOn;
+
+  (accountHistory.options as ScaleChartOptions<"line">).scales["wpm"].display =
+    resultsOn;
+  if (updateChart) accountHistory.updateColors();
+}
+
 function updateAccuracy(updateChart = true): void {
-  const accOn = Config.accountChart[0] === "on";
+  const accountHistoryOptions =
+    accountHistory.options as ScaleChartOptions<"line">;
+  const resultsOn = Config.accountChart[0] === "on";
+  const accOn = Config.accountChart[1] === "on";
   updateAccountChartButton(accOn, ".toggleAccuracyOnChart");
 
   accountHistory.data.datasets[2].hidden = !accOn;
   accountHistory.data.datasets[4].hidden = !accOn;
   accountHistory.data.datasets[6].hidden = !accOn;
 
-  (accountHistory.options as ScaleChartOptions<"line">).scales["acc"].display =
-    accOn;
+  accountHistoryOptions.scales["acc"].display = accOn;
+
+  if (resultsOn) {
+    accountHistoryOptions.scales["acc"].min = 0;
+    accountHistoryOptions.scales["accAvgTen"].min = 0;
+    accountHistoryOptions.scales["accAvgHundred"].min = 0;
+  } else {
+    const minAccRoundedTo10 =
+      Math.floor(
+        Math.min(...accountHistory.data.datasets[2].data.map((x) => x.y)) / 10
+      ) * 10;
+
+    console.log(accountHistory.data.datasets);
+
+    accountHistoryOptions.scales["acc"].min = minAccRoundedTo10;
+    accountHistoryOptions.scales["accAvgTen"].min = minAccRoundedTo10;
+    accountHistoryOptions.scales["accAvgHundred"].min = minAccRoundedTo10;
+  }
+
   if (updateChart) accountHistory.updateColors();
 }
 
 function updateAverage10(updateChart = true): void {
-  const accOn = Config.accountChart[0] === "on";
-  const avg10On = Config.accountChart[1] === "on";
+  const resultsOn = Config.accountChart[0] === "on";
+  const accOn = Config.accountChart[1] === "on";
+  const avg10On = Config.accountChart[2] === "on";
   updateAccountChartButton(avg10On, ".toggleAverage10OnChart");
 
   if (accOn) {
-    accountHistory.data.datasets[3].hidden = !avg10On;
     accountHistory.data.datasets[4].hidden = !avg10On;
-  } else {
+  }
+  if (resultsOn) {
     accountHistory.data.datasets[3].hidden = !avg10On;
   }
   if (updateChart) accountHistory.updateColors();
 }
 
 function updateAverage100(updateChart = true): void {
-  const accOn = Config.accountChart[0] === "on";
-  const avg100On = Config.accountChart[2] === "on";
+  const resultsOn = Config.accountChart[0] === "on";
+  const accOn = Config.accountChart[1] === "on";
+  const avg100On = Config.accountChart[3] === "on";
   updateAccountChartButton(avg100On, ".toggleAverage100OnChart");
 
   if (accOn) {
-    accountHistory.data.datasets[5].hidden = !avg100On;
     accountHistory.data.datasets[6].hidden = !avg100On;
-  } else {
+  }
+  if (resultsOn) {
     accountHistory.data.datasets[5].hidden = !avg100On;
   }
   if (updateChart) accountHistory.updateColors();
@@ -1113,8 +1151,8 @@ async function updateColors<
       const color = subcolor;
       return color;
     };
-    const avg10On = Config.accountChart[1] === "on";
-    const avg100On = Config.accountChart[2] === "on";
+    const avg10On = Config.accountChart[2] === "on";
+    const avg100On = Config.accountChart[3] === "on";
 
     const text02 = Misc.blendTwoHexColors(bgcolor, textcolor, 0.2);
     const main02 = Misc.blendTwoHexColors(bgcolor, maincolor, 0.2);
@@ -1200,6 +1238,7 @@ export function updateAllChartColors(): void {
 
 ConfigEvent.subscribe((eventKey, eventValue) => {
   if (eventKey === "accountChart" && ActivePage.get() === "account") {
+    updateResults();
     updateAccuracy();
     updateAverage10();
     updateAverage100();

diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
@@ -1159,16 +1159,20 @@ function sortAndRefreshHistory(
   loadMoreLines();
 }
 
+$(".pageAccount .toggleResultsOnChart").on("click", () => {
+  UpdateConfig.setAccountChartResults(!(Config.accountChart[0] === "on"));
+});
+
 $(".pageAccount .toggleAccuracyOnChart").on("click", () => {
-  UpdateConfig.setAccountChartAccuracy(!(Config.accountChart[0] === "on"));
+  UpdateConfig.setAccountChartAccuracy(!(Config.accountChart[1] === "on"));
 });
 
 $(".pageAccount .toggleAverage10OnChart").on("click", () => {
-  UpdateConfig.setAccountChartAvg10(!(Config.accountChart[1] === "on"));
+  UpdateConfig.setAccountChartAvg10(!(Config.accountChart[2] === "on"));
 });
 
 $(".pageAccount .toggleAverage100OnChart").on("click", () => {
-  UpdateConfig.setAccountChartAvg100(!(Config.accountChart[2] === "on"));
+  UpdateConfig.setAccountChartAvg100(!(Config.accountChart[3] === "on"));
 });
 
 $(".pageAccount .loadMoreButton").on("click", () => {

diff --git a/frontend/src/ts/types/types.d.ts b/frontend/src/ts/types/types.d.ts
@@ -146,7 +146,7 @@ declare namespace MonkeyTypes {
 
   type PageWidth = "100" | "125" | "150" | "200" | "max";
 
-  type AccountChart = ("off" | "on")[];
+  type AccountChart = ["off" | "on", "off" | "on", "off" | "on", "off" | "on"];
 
   type MinimumWordsPerMinute = "off" | "custom";
 

diff --git a/frontend/static/html/pages/account.html b/frontend/static/html/pages/account.html
@@ -444,6 +444,10 @@
       <div class="below">
         <div class="text"></div>
         <div class="buttons">
+          <div class="toggleResultsOnChart button">
+            <i class="fas fa-keyboard"></i>
+            Results
+          </div>
           <div class="toggleAccuracyOnChart button">
             <i class="fas fa-bullseye"></i>
             Accuracy