refactor: move mini result chart to the new modal system

closes #5811
2024-09-20 07:16:17 +08:00 · 2024-08-21 11:50:08 +02:00 · 2024-08-21 11:50:08 +02:00 · 59a18680a1
parent 14c121b9ff
commit 59a18680a1
8 changed files with 146 additions and 187 deletions
--- 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">
--- 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>
--- 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;
--- 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;
--- 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,
-            text: "Words per Minute",
-          },
-          beginAtZero: true,
-          min: 0,
-          ticks: {
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
-          grid: {
-            display: true,
-          },
-        },
-        raw: {
-          axis: "y",
+        display: true,
+        title: {
          display: false,
-          title: {
-            display: true,
-            text: "Raw Words per Minute",
-          },
-          beginAtZero: true,
-          min: 0,
-          ticks: {
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
-          grid: {
-            display: false,
-          },
-        },
-        error: {
-          display: true,
-          position: "right",
-          title: {
-            display: true,
-            text: "Errors",
-          },
-          beginAtZero: true,
-          ticks: {
-            precision: 0,
-            autoSkip: true,
-            autoSkipPadding: 20,
-          },
-          grid: {
-            display: false,
-          },
+          text: "Seconds",
        },
      },
-      plugins: {
-        annotation: {
-          annotations: [],
+      wpm: {
+        axis: "y",
+        display: true,
+        title: {
+          display: true,
+          text: "Words per Minute",
        },
-        tooltip: {
-          animation: { duration: 250 },
-          mode: "index",
-          intersect: false,
+        beginAtZero: true,
+        min: 0,
+        ticks: {
+          autoSkip: true,
+          autoSkipPadding: 20,
+        },
+        grid: {
+          display: true,
+        },
+      },
+      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,
+        },
+      },
+      error: {
+        display: true,
+        position: "right",
+        title: {
+          display: true,
+          text: "Errors",
+        },
+        beginAtZero: true,
+        ticks: {
+          precision: 0,
+          autoSkip: true,
+          autoSkipPadding: 20,
+        },
+        grid: {
+          display: false,
        },
      },
    },
-  }
-);
+    plugins: {
+      annotation: {
+        annotations: [],
+      },
+      tooltip: {
+        animation: { duration: 250 },
+        mode: "index",
+        intersect: false,
+      },
+    },
+  },
+});

 type ButtonBelowChart =
  | ".toggleResultsOnChart"
--- 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();
    }
  }
--- a/frontend/src/ts/elements/account/mini-result-chart.ts
+++ b/frontend/src/ts/elements/account/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",
 });
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@ -3,7 +3,7 @@ import * as ResultFilters from "../elements/account/result-filters";
 import * as ThemeColors from "../elements/theme-colors";
 import * as ChartController from "../controllers/chart-controller";
 import Config, * as UpdateConfig from "../config";
-import * as MiniResultChart from "../elements/account/mini-result-chart";
+import * as MiniResultChartModal from "../modals/mini-result-chart";
 import * as PbTables from "../elements/account/pb-tables";
 import * as LoadingPage from "./loading";
 import * as Focus from "../test/focus";
@ -1152,14 +1152,9 @@ $(".pageAccount").on("click", ".miniResultChartButton", (event) => {
  console.log("updating");
  const filteredId = $(event.currentTarget).attr("filteredResultsId");
  if (filteredId === undefined) return;
-  MiniResultChart.updateData(
+  MiniResultChartModal.show(
    filteredResults[parseInt(filteredId)]?.chartData as ChartData
  );
-  MiniResultChart.show();
-  MiniResultChart.updatePosition(
-    event.pageX - ($(".pageAccount .miniResultChartWrapper").outerWidth() ?? 0),
-    event.pageY + 30
-  );
 });

 $(".pageAccount .group.history").on("click", ".history-wpm-header", () => {