refactor: move mini result chart to the new modal system

closes #5811
monkeytypegame · Aug 21, 2024 · 59a1868 · 59a1868
1 parent 14c121b
commit 59a1868
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 182 deletions.
diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
@@ -14,11 +14,6 @@
     </div>
   </div>
   <div class="content full-width content-grid">
-    <div class="miniResultChartWrapper">
-      <canvas id="miniResultChart"></canvas>
-    </div>
-    <div class="miniResultChartBg"></div>
-
     <div class="profile">
       <div class="details both">
         <div class="avatarAndName">

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
@@ -4,6 +4,12 @@
   </div>
 </dialog>
 
+<dialog id="miniResultChartModal" class="modalWrapper hidden">
+  <div class="modal">
+    <canvas></canvas>
+  </div>
+</dialog>
+
 <dialog id="lastSignedOutResult" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Last signed out result</div>

diff --git a/frontend/src/styles/account.scss b/frontend/src/styles/account.scss
@@ -60,28 +60,6 @@
     margin-top: 1rem;
   }
 
-  .miniResultChartWrapper {
-    z-index: 999;
-    display: none;
-    height: 15rem;
-    background: var(--bg-color);
-    width: 45rem;
-    position: absolute;
-    border-radius: var(--roundness);
-    padding: 1rem;
-  }
-
-  .miniResultChartBg {
-    display: none;
-    z-index: 998;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.75);
-    position: fixed;
-    left: 0;
-    top: 0;
-  }
-
   .doublegroup {
     display: grid;
     grid-auto-flow: column;

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
@@ -81,6 +81,16 @@ body.darkMode {
   }
 }
 
+#miniResultChartModal {
+  .modal {
+    overflow: hidden;
+    max-width: 70rem;
+    canvas {
+      height: 200px;
+    }
+  }
+}
+
 #customTextModal {
   .modal {
     max-width: 1200px;

diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
@@ -879,135 +879,132 @@ export const miniResult = new ChartWithUpdateColors<
   number[],
   string,
   "wpm" | "raw" | "error"
->(
-  document.querySelector(".pageAccount #miniResultChart") as HTMLCanvasElement,
-  {
-    type: "line",
-    data: {
-      labels: [],
-      datasets: [
-        {
-          label: "wpm",
-          data: [],
-          borderColor: "rgba(125, 125, 125, 1)",
-          borderWidth: 2,
-          yAxisID: "wpm",
-          order: 2,
-          pointRadius: 2,
+>(document.querySelector("#miniResultChartModal canvas") as HTMLCanvasElement, {
+  type: "line",
+  data: {
+    labels: [],
+    datasets: [
+      {
+        label: "wpm",
+        data: [],
+        borderColor: "rgba(125, 125, 125, 1)",
+        borderWidth: 2,
+        yAxisID: "wpm",
+        order: 2,
+        pointRadius: 2,
+      },
+      {
+        label: "raw",
+        data: [],
+        borderColor: "rgba(125, 125, 125, 1)",
+        borderWidth: 2,
+        yAxisID: "raw",
+        order: 3,
+        pointRadius: 2,
+      },
+      {
+        label: "errors",
+        data: [],
+        borderColor: "rgba(255, 125, 125, 1)",
+        pointBackgroundColor: "rgba(255, 125, 125, 1)",
+        borderWidth: 2,
+        order: 1,
+        yAxisID: "error",
+        type: "scatter",
+        pointStyle: "crossRot",
+        pointRadius: function (context): number {
+          const index = context.dataIndex;
+          const value = context.dataset.data[index] as number;
+          return (value ?? 0) <= 0 ? 0 : 3;
         },
-        {
-          label: "raw",
-          data: [],
-          borderColor: "rgba(125, 125, 125, 1)",
-          borderWidth: 2,
-          yAxisID: "raw",
-          order: 3,
-          pointRadius: 2,
+        pointHoverRadius: function (context): number {
+          const index = context.dataIndex;
+          const value = context.dataset.data[index] as number;
+          return (value ?? 0) <= 0 ? 0 : 5;
         },
-        {
-          label: "errors",
-          data: [],
-          borderColor: "rgba(255, 125, 125, 1)",
-          pointBackgroundColor: "rgba(255, 125, 125, 1)",
-          borderWidth: 2,
-          order: 1,
-          yAxisID: "error",
-          type: "scatter",
-          pointStyle: "crossRot",
-          pointRadius: function (context): number {
-            const index = context.dataIndex;
-            const value = context.dataset.data[index] as number;
-            return (value ?? 0) <= 0 ? 0 : 3;
-          },
-          pointHoverRadius: function (context): number {
-            const index = context.dataIndex;
-            const value = context.dataset.data[index] as number;
-            return (value ?? 0) <= 0 ? 0 : 5;
-          },
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        axis: "x",
+        ticks: {
+          autoSkip: true,
+          autoSkipPadding: 20,
         },
-      ],
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        x: {
-          axis: "x",
-          ticks: {
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
+        display: true,
+        title: {
+          display: false,
+          text: "Seconds",
+        },
+      },
+      wpm: {
+        axis: "y",
+        display: true,
+        title: {
           display: true,
-          title: {
-            display: false,
-            text: "Seconds",
-          },
+          text: "Words per Minute",
         },
-        wpm: {
-          axis: "y",
+        beginAtZero: true,
+        min: 0,
+        ticks: {
+          autoSkip: true,
+          autoSkipPadding: 20,
+        },
+        grid: {
           display: true,
-          title: {
-            display: true,
-            text: "Words per Minute",
-          },
-          beginAtZero: true,
-          min: 0,
-          ticks: {
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
-          grid: {
-            display: true,
-          },
         },
-        raw: {
-          axis: "y",
+      },
+      raw: {
+        axis: "y",
+        display: false,
+        title: {
+          display: true,
+          text: "Raw Words per Minute",
+        },
+        beginAtZero: true,
+        min: 0,
+        ticks: {
+          autoSkip: true,
+          autoSkipPadding: 20,
+        },
+        grid: {
           display: false,
-          title: {
-            display: true,
-            text: "Raw Words per Minute",
-          },
-          beginAtZero: true,
-          min: 0,
-          ticks: {
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
-          grid: {
-            display: false,
-          },
         },
-        error: {
+      },
+      error: {
+        display: true,
+        position: "right",
+        title: {
           display: true,
-          position: "right",
-          title: {
-            display: true,
-            text: "Errors",
-          },
-          beginAtZero: true,
-          ticks: {
-            precision: 0,
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
-          grid: {
-            display: false,
-          },
+          text: "Errors",
         },
-      },
-      plugins: {
-        annotation: {
-          annotations: [],
+        beginAtZero: true,
+        ticks: {
+          precision: 0,
+          autoSkip: true,
+          autoSkipPadding: 20,
         },
-        tooltip: {
-          animation: { duration: 250 },
-          mode: "index",
-          intersect: false,
+        grid: {
+          display: false,
         },
       },
     },
-  }
-);
+    plugins: {
+      annotation: {
+        annotations: [],
+      },
+      tooltip: {
+        animation: { duration: 250 },
+        mode: "index",
+        intersect: false,
+      },
+    },
+  },
+});
 
 type ButtonBelowChart =
   | ".toggleResultsOnChart"

diff --git a/frontend/src/ts/event-handlers/global.ts b/frontend/src/ts/event-handlers/global.ts
@@ -24,10 +24,7 @@ document.addEventListener("keydown", async (e) => {
   ) {
     e.preventDefault();
     const popupVisible = Misc.isAnyPopupVisible();
-    const miniResultPopupVisible = Misc.isElementVisible(
-      ".pageAccount .miniResultChartWrapper"
-    );
-    if (!popupVisible && !miniResultPopupVisible) {
+    if (!popupVisible) {
       (await getCommandline()).show();
     }
   }

diff --git a/.../ts/elements/account/mini-result-chart.ts → frontend/src/ts/modals/mini-result-chart.ts b/.../ts/elements/account/mini-result-chart.ts → frontend/src/ts/modals/mini-result-chart.ts
@@ -1,24 +1,10 @@
-import * as ChartController from "../../controllers/chart-controller";
-import Config from "../../config";
-import * as Misc from "../../utils/misc";
-import * as Arrays from "../../utils/arrays";
 import { ChartData } from "@monkeytype/shared-types";
+import AnimatedModal from "../utils/animated-modal";
+import * as ChartController from "../controllers/chart-controller";
+import Config from "../config";
+import * as Arrays from "../utils/arrays";
 
-export function updatePosition(x: number, y: number): void {
-  $(".pageAccount .miniResultChartWrapper").css({ top: y, left: x });
-}
-
-export function show(): void {
-  $(".pageAccount .miniResultChartWrapper").stop(true, true).fadeIn(125);
-  $(".pageAccount .miniResultChartBg").stop(true, true).fadeIn(125);
-}
-
-function hide(): void {
-  $(".pageAccount .miniResultChartWrapper").stop(true, true).fadeOut(125);
-  $(".pageAccount .miniResultChartBg").stop(true, true).fadeOut(125);
-}
-
-export function updateData(data: ChartData): void {
+function updateData(data: ChartData): void {
   // let data = filteredResults[filteredId].chartData;
   let labels = [];
   for (let i = 1; i <= data.wpm.length; i++) {
@@ -59,16 +45,11 @@ export function updateData(data: ChartData): void {
   void ChartController.miniResult.updateColors();
 }
 
-$(document).on("keydown", (event) => {
-  if (
-    event.key === "Escape" &&
-    Misc.isElementVisible(".pageAccount .miniResultChartWrapper")
-  ) {
-    hide();
-    event.preventDefault();
-  }
-});
+export function show(data: ChartData): void {
+  updateData(data);
+  void modal.show();
+}
 
-$(".pageAccount").on("click", ".miniResultChartBg", () => {
-  hide();
+const modal = new AnimatedModal({
+  dialogId: "miniResultChartModal",
 });